Commit 64c91cf2 by Felix Sun

UX improvements to hinting. Interface is now less cluttered.

Hint submission is hidden behind a link, if there are hints to vote on.
parent f3c3436f
...@@ -37,13 +37,14 @@ class @Hinter ...@@ -37,13 +37,14 @@ class @Hinter
@$('input.submit-hint').click @submit_hint @$('input.submit-hint').click @submit_hint
@$('.custom-hint').click @clear_default_text @$('.custom-hint').click @clear_default_text
@$('#answer-tabs').tabs({active: 0}) @$('#answer-tabs').tabs({active: 0})
@$('.expand-goodhint').click @expand_goodhint @$('.expand').click @expand
expand_goodhint: => expand: (eventObj) =>
if @$('.goodhint').css('display') == 'none' target = @$('#' + @$(eventObj.currentTarget).data('target'))
@$('.goodhint').css('display', 'block') if @$(target).css('display') == 'none'
@$(target).css('display', 'block')
else else
@$('.goodhint').css('display', 'none') @$(target).css('display', 'none')
vote: (eventObj) => vote: (eventObj) =>
target = @$(eventObj.currentTarget) target = @$(eventObj.currentTarget)
...@@ -53,9 +54,12 @@ class @Hinter ...@@ -53,9 +54,12 @@ class @Hinter
@render(response.contents) @render(response.contents)
submit_hint: (eventObj) => submit_hint: (eventObj) =>
target = @$(eventObj.currentTarget) textarea = $('.custom-hint')
textarea = $('.custom-hint[data-answer="'+target.attr('data-answer')+'"]') answer = $('input:radio[name=answer-select]:checked').val()
post_json = {'answer': target.attr('data-answer'), 'hint': @$(textarea).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) => $.postWithPrefix "#{@url}/submit_hint",post_json, (response) =>
@render(response.contents) @render(response.contents)
......
...@@ -52,39 +52,35 @@ ...@@ -52,39 +52,35 @@
% endfor % endfor
<p> <p>
Don't like any of the hints above? Please write your own, for one of your previous incorrect answers below: Don't like any of the hints above?
</p> <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: % else:
<p> <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> </p>
% endif % endif
<div id="answer-tabs"> <p>
<ul> Choose the incorrect answer for which you want to write a hint:
% for answer in user_submissions: <br />
<li><a href="#previous-answer-${unspace(answer)}"> ${answer} </a></li> % for answer in user_submissions:
% endfor <input type="radio" name="answer-select" value="${answer}"> ${answer} </input><br />
</ul> % endfor
</p>
% for answer in user_submissions: <textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px">
<div class = "previous-answer" id="previous-answer-${unspace(answer)}" data-answer="${answer}"> Write your hint here. Please don't give away the correct answer.
<div class = "hint-inner-container"> </textarea>
<p> <br/><br/>
What hint would you give a student who also arrived at an answer of ${answer}? Please don't give away the correct answer. <input class="submit-hint" data-answer="${answer}" type="button" value="submit">
</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>
<p>Read about <a class="expand-goodhint" href="javascript:void(0);">what makes a good hint</a>.</p> <p>Read about <a class="expand" data-target="goodhint" href="javascript:void(0);">what makes a good hint</a>.</p>
<div class="goodhint" style="display:none"> <div id="goodhint" style="display:none">
<h4>What makes a good hint?</h4> <h4>What makes a good hint?</h4>
<p>It depends on the type of problem you ran into. For stupid errors -- <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? ...@@ -114,6 +110,12 @@ What would you say to help someone who got this wrong answer?
<p> <p>
<a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a> <a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a>
</p> </div> </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> </%def>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment