From 7c93b45d0c0a7c2a0bc1d131593fe11258c028d2 Mon Sep 17 00:00:00 2001
From: Felix Sun <fephsun@gmail.com>
Date: Wed, 31 Jul 2013 17:13:32 -0400
Subject: [PATCH] Added wizard / slideshow style hint collection script.

Still requires a little polishing, I think.
---
 .../js/src/crowdsource_hinter/display.coffee  |  32 +++++-
 common/templates/hinter_display.html          | 101 +++++++++++-------
 2 files changed, 87 insertions(+), 46 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee b/common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee
index a1dc35a604..34956603c6 100644
--- a/common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee
+++ b/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
diff --git a/common/templates/hinter_display.html b/common/templates/hinter_display.html
index 8fd219e847..0f350083de 100644
--- a/common/templates/hinter_display.html
+++ b/common/templates/hinter_display.html
@@ -34,50 +34,71 @@
         for pk, hint_text in pk_dict.items():
             pk_list.append([answer, pk])
     json_pk_list = json.dumps(pk_list)
-    %>
-    % if hints_exist:
-        <p>
-        <em> Optional. </em> Help us improve our hints!  Which hint was most helpful to you?
-        </p>
+  %>
 
-        <div id="pk-list" data-pk-list='${json_pk_list}' style="display:none"> </div>
-
-        % for answer, pk_dict in answer_to_hints.items():
-            % for hint_pk, hint_text in pk_dict.items():
-                <p>
-                <input class="vote" data-answer="${answer}" data-hintno="${hint_pk}" type="button" value="Vote">
-                ${hint_text}
-                </p>
-            % endfor
-        % endfor
-
-        <p>
-        Don't like any of the hints above? 
-        <a class="expand" data-target="hint-submission-div" href="javascript:void(0);">
-          Write your own!
-        </a></p>
-
-        <div id="hint-submission-div" style="display:none">
-    % 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.
-        </p>
-    % endif
+  <!-- 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>
-      Choose the incorrect answer for which you want to write a hint:
-      <br />
-      % for answer in user_submissions:
-          <input type="radio" name="answer-select" value="${answer}"> ${answer} </input><br />
-      % endfor
+    <em> Optional. </em> Help us improve our hints!  Which hint was most helpful to you?
     </p>
 
+    <div id="pk-list" data-pk-list='${json_pk_list}' style="display:none"> </div>
+
+    % for answer, pk_dict in answer_to_hints.items():
+        % for hint_pk, hint_text in pk_dict.items():
+            <p>
+            <input class="vote" data-answer="${answer}" data-hintno="${hint_pk}" type="button" value="Vote">
+            ${hint_text}
+            </p>
+        % endfor
+    % endfor
+
+    <p>
+    Don't like any of the hints above? 
+    <a class="wizard-link" dest="p2" href="javascript: void(0);">
+      Write your own!
+    </a></p>
+  </div>
+
+  <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 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>
+      Write a hint for other students who get the wrong answer of <span id="blank-answer"></span>.
+      <br />
+      <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:
-      </div>
-    % endif
+      </p>
+    </div>
+  </div>
+
 
 
 </%def>