UX improvements to hinting. Interface is now less cluttered.

Hint submission is hidden behind a link, if there are hints to vote on.

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

@@ -37,13 +37,14 @@ class @Hinter
     @$('input.submit-hint').click @submit_hint
     @$('.custom-hint').click @clear_default_text
     @$('#answer-tabs').tabs({active: 0})
-    @$('.expand-goodhint').click @expand_goodhint
+    @$('.expand').click @expand
 
-  expand_goodhint: =>
-    if @$('.goodhint').css('display') == 'none'
-      @$('.goodhint').css('display', 'block')
+  expand: (eventObj) =>
+    target = @$('#' + @$(eventObj.currentTarget).data('target'))
+    if @$(target).css('display') == 'none'
+      @$(target).css('display', 'block')
     else
-      @$('.goodhint').css('display', 'none')
+      @$(target).css('display', 'none')
 
   vote: (eventObj) =>
     target = @$(eventObj.currentTarget)
@@ -53,9 +54,12 @@ class @Hinter
       @render(response.contents)
 
   submit_hint: (eventObj) =>
-    target = @$(eventObj.currentTarget)
-    textarea = $('.custom-hint[data-answer="'+target.attr('data-answer')+'"]')
-    post_json = {'answer': target.attr('data-answer'), 'hint': @$(textarea).val()}
+    textarea = $('.custom-hint')
+    answer = $('input:radio[name=answer-select]:checked').val()
+    if answer == undefined
+      # The user didn't choose an answer.  Do nothing.
+      return
+    post_json = {'answer': answer, 'hint': textarea.val()}
     $.postWithPrefix "#{@url}/submit_hint",post_json, (response) =>
       @render(response.contents)
 

common/templates/hinter_display.html

@@ -52,39 +52,35 @@
         % endfor
 
         <p>
-        Don't like any of the hints above?  Please write your own, for one of your previous incorrect answers below:
-        </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!  Select one of your incorrect answers below:
+          <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
 
-    <div id="answer-tabs">
-        <ul>
-        % for answer in user_submissions:
-            <li><a href="#previous-answer-${unspace(answer)}"> ${answer} </a></li>
-        % endfor
-        </ul>
+    <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
+    </p>
 
-        % for answer in user_submissions:
-            <div class = "previous-answer" id="previous-answer-${unspace(answer)}" data-answer="${answer}">
-            <div class = "hint-inner-container">
-                <p>
-                What hint would you give a student who also arrived at an answer of ${answer}?  Please don't give away the correct answer.
-                </p>
-                <textarea cols="50" class="custom-hint" data-answer="${answer}">
-What would you say to help someone who got this wrong answer?
-(Don't give away the answer, please.)
-                </textarea>
-                <br/><br/>
-                <input class="submit-hint" data-answer="${answer}" type="button" value="submit">
-            </div></div>
-        % endfor
-    </div>
+    <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">
 
-    <p>Read about <a class="expand-goodhint" href="javascript:void(0);">what makes a good hint</a>.</p>
-    <div class="goodhint" style="display:none">
+    <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">
       <h4>What makes a good hint?</h4>
 
       <p>It depends on the type of problem you ran into. For stupid errors --
@@ -114,6 +110,12 @@ What would you say to help someone who got this wrong 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
+
 
 </%def>