Added wizard / slideshow style hint collection script.

Still requires a little polishing, I think.

common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee

@@ -36,8 +36,9 @@ class @Hinter
     @$('input.vote').click @vote
     @$('input.submit-hint').click @submit_hint
     @$('.custom-hint').click @clear_default_text
-    @$('#answer-tabs').tabs({active: 0})
     @$('.expand').click @expand
+    @$('.wizard-link').click @wizard_link_handle
+    @$('.answer-choice').click @answer_choice_handle
 
   expand: (eventObj) =>
     target = @$('#' + @$(eventObj.currentTarget).data('target'))
@@ -55,11 +56,10 @@ class @Hinter
 
   submit_hint: (eventObj) =>
     textarea = $('.custom-hint')
-    answer = $('input:radio[name=answer-select]:checked').val()
-    if answer == undefined
-      # The user didn't choose an answer.  Do nothing.
+    if @answer == ''
+      # The user didn't choose an answer, somehow.  Do nothing.
       return
-    post_json = {'answer': answer, 'hint': textarea.val()}
+    post_json = {'answer': @answer, 'hint': textarea.val()}
     $.postWithPrefix "#{@url}/submit_hint",post_json, (response) =>
       @render(response.contents)
 
@@ -69,6 +69,15 @@ class @Hinter
       target.val('')
       target.data('cleared', true)
 
+  wizard_link_handle: (eventObj) =>
+    target = @$(eventObj.currentTarget)
+    @go_to(target.attr('dest'))
+
+  answer_choice_handle: (eventObj) =>
+    @answer = @$(eventObj.target).attr('value')
+    @$('#blank-answer').html(@answer)
+    @go_to('p3')
+
   render: (content) ->
     if content
       # Trim leading and trailing whitespace
@@ -82,3 +91,16 @@ class @Hinter
       @$('#previous-answer-0').css('display', 'inline')
     else
       @el.hide()
+    # Initialize the answer choice - remembers which answer the user picked on
+    # p2 when he submits a hint on p3.
+    @answer = ''
+    # Make the correct wizard view show up.
+    hints_exist = @$('#hints-exist').html() == 'True'
+    if hints_exist
+      @go_to('p1')
+    else
+      @go_to('p2')
+
+  go_to: (view_id) ->
+    $('.wizard-view').css('display', 'none')
+    $('#' + view_id).css('display', 'block')
\ No newline at end of file

common/templates/hinter_display.html

@@ -35,7 +35,11 @@
             pk_list.append([answer, pk])
     json_pk_list = json.dumps(pk_list)
   %>
-    % if hints_exist:
+
+  <!-- Tells coffeescript whether there are hints to show. -->
+  <span id="hints-exist" style="display:none">${hints_exist}</span>
+
+  <div class="wizard-view" id="p1">
     <p>
     <em> Optional. </em> Help us improve our hints!  Which hint was most helpful to you?
     </p>
@@ -53,31 +57,48 @@
 
     <p>
     Don't like any of the hints above? 
-        <a class="expand" data-target="hint-submission-div" href="javascript:void(0);">
+    <a class="wizard-link" dest="p2" href="javascript: void(0);">
       Write your own!
     </a></p>
+  </div>
 
-        <div id="hint-submission-div" style="display:none">
+  <div class="wizard-view" id="p2">
+    % if hints_exist:
+      <p>
+      Choose the incorrect answer for which you want to write a hint:
+      </p>
     % else:
     <p>
-          <em> Optional. </em> Help us write hints for this problem!  Think about how you would help
-          another student who made the same mistake that you did.
+      <em>Optional.</em>  Help other students by submitting a hint!  Pick one of your previous
+      answers for which you would like to write a hint:
     </p>
     % endif
+    % for answer in user_submissions:
+        <a class="answer-choice" href="javascript: void(0)" value="${answer}">${answer}</a><br />
+    % endfor
+    % if hints_exist:
+      <br />
+      <p><a class="wizard-link" dest="p1" href="javascript: void(0);">
+        Back to voting.
+      </a></p>
+    % endif
+
+  </div>
+
+  <div class="wizard-view" id="p3">
 
     <p>
-      Choose the incorrect answer for which you want to write a hint:
+      Write a hint for other students who get the wrong answer of <span id="blank-answer"></span>.
       <br />
-      % for answer in user_submissions:
-          <input type="radio" name="answer-select" value="${answer}"> ${answer} </input><br />
-      % endfor
+      <a class="wizard-link" dest="p2" href="javascript: void(0);">
+        Choose a different answer.
+      </a>
     </p>
-
     <textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px">
 Write your hint here.  Please don't give away the correct answer.
     </textarea>
     <br/><br/>
-    <input class="submit-hint" data-answer="${answer}" type="button" value="submit">
+    <input class="submit-hint" data-answer="${answer}" type="button" value="Submit">
 
     <p>Read about <a class="expand" data-target="goodhint" href="javascript:void(0);">what makes a good hint</a>.</p>
     <div id="goodhint" style="display:none">
@@ -109,12 +130,10 @@ Write your hint here.  Please don't give away the correct answer.
 
       <p>
         <a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a>
-      </p>    </div>
-    ## Close out the text-hiding div.  The text-hiding div only exists if there
-    ## were hints for the student to vote on.
-    % if hints_exist:
+      </p>
     </div>
-    % endif
+  </div>
+
 
 
 </%def>