Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added wizard / slideshow style hint collection script.

Browse Source 
Still requires a little polishing, I think.
This commit is contained in:
Felix Sun
2013-07-31 17:13:32 -04:00
parent 64c91cf239
commit 7c93b45d0c
2 changed files with 87 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee
View File

@@ -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')

101
common/templates/hinter_display.html
View File

@@ -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>