Skip to content

E
edx-platform
Commit 2d1c9158 by Felix Sun
Options

Added fancy sliding transitions into hint collection page.

parent 35a8e9be
Showing with 138 additions and 128 deletions
common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
...@@ -7,59 +7,38 @@ ...@@ -7,59 +7,38 @@
background: rgb(253, 248, 235); background: rgb(253, 248, 235);
} }
#answer-tabs { .hint-inner-container {
background: #FFFFFF; padding-left: 15px;
border: none; padding-right: 15px;
margin-bottom: 20px; font-size: 16px;
padding-bottom: 20px;
}
#answer-tabs .ui-widget-header {
border-bottom: 1px solid #DCDCDC;
background: #FDF8EB;
}
#answer-tabs .ui-tabs-nav .ui-state-default {
border: 1px solid #DCDCDC;
background: #E6E6E3;
margin-bottom: 0px;
}
#answer-tabs .ui-tabs-nav .ui-state-default:hover {
background: #FFFFFF;
}
#answer-tabs .ui-tabs-nav .ui-state-active:hover {
background: #FFFFFF;
} }
#answer-tabs .ui-tabs-nav .ui-state-active { .vote {
border: 1px solid #DCDCDC; padding-top: 0px !important;
background: #FFFFFF; padding-bottom: 0px !important;
} }
#answer-tabs .ui-tabs-nav .ui-state-active a { .wizard-view {
color: #222222; float: left;
background: #FFFFFF; width: 800px;
} }
#answer-tabs .ui-tabs-nav .ui-state-default a:hover { .wizard-container {
color: #222222; width: 3000px;
background: #FFFFFF;
}
#answer-tabs .custom-hint { -webkit-transition:all 1.0s ease-in-out;
height: 100px; -moz-transition:all 1.0s ease-in-out;
width: 100%; -o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
} }
.hint-inner-container { .wizard-viewbox {
padding-left: 15px; width: 790px;
padding-right: 15px; overflow: hidden;
font-size: 16px; position: relative;
} }
.vote { .bottom {
padding-top: 0px !important; position: absolute;
padding-bottom: 0px !important; bottom: 0;
} }
\ No newline at end of file
common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee
...@@ -41,13 +41,17 @@ class @Hinter ...@@ -41,13 +41,17 @@ class @Hinter
@$('.answer-choice').click @answer_choice_handle @$('.answer-choice').click @answer_choice_handle
expand: (eventObj) => expand: (eventObj) =>
# Expand a hidden div.
target = @$('#' + @$(eventObj.currentTarget).data('target')) target = @$('#' + @$(eventObj.currentTarget).data('target'))
if @$(target).css('display') == 'none' if @$(target).css('display') == 'none'
@$(target).css('display', 'block') @$(target).css('display', 'block')
else else
@$(target).css('display', 'none') @$(target).css('display', 'none')
# Fix positioning errors with the bottom class.
@$('.bottom').removeClass('bottom').addClass('bottom')
vote: (eventObj) => vote: (eventObj) =>
# Make an ajax request with the user's vote.
target = @$(eventObj.currentTarget) target = @$(eventObj.currentTarget)
all_pks = @$('#pk-list').attr('data-pk-list') all_pks = @$('#pk-list').attr('data-pk-list')
post_json = {'answer': target.attr('data-answer'), 'hint': target.data('hintno'), 'pk_list': all_pks} post_json = {'answer': target.attr('data-answer'), 'hint': target.data('hintno'), 'pk_list': all_pks}
...@@ -55,6 +59,7 @@ class @Hinter ...@@ -55,6 +59,7 @@ class @Hinter
@render(response.contents) @render(response.contents)
submit_hint: (eventObj) => submit_hint: (eventObj) =>
# Make an ajax request with the user's new hint.
textarea = $('.custom-hint') textarea = $('.custom-hint')
if @answer == '' if @answer == ''
# The user didn't choose an answer, somehow. Do nothing. # The user didn't choose an answer, somehow. Do nothing.
...@@ -64,21 +69,25 @@ class @Hinter ...@@ -64,21 +69,25 @@ class @Hinter
@render(response.contents) @render(response.contents)
clear_default_text: (eventObj) => clear_default_text: (eventObj) =>
# Remove placeholder text in the hint submission textbox.
target = @$(eventObj.currentTarget) target = @$(eventObj.currentTarget)
if target.data('cleared') == undefined if target.data('cleared') == undefined
target.val('') target.val('')
target.data('cleared', true) target.data('cleared', true)
wizard_link_handle: (eventObj) => wizard_link_handle: (eventObj) =>
# Move to another wizard view, based on the link that the user clicked.
target = @$(eventObj.currentTarget) target = @$(eventObj.currentTarget)
@go_to(target.attr('dest')) @go_to(target.attr('dest'))
answer_choice_handle: (eventObj) => answer_choice_handle: (eventObj) =>
# A special case of wizard_link_handle - we need to track a state variable,
# the answer that the user chose.
@answer = @$(eventObj.target).attr('value') @answer = @$(eventObj.target).attr('value')
@$('#blank-answer').html(@answer) @$('#blank-answer').html(@answer)
@go_to('p3') @go_to('p3')
render: (content) -> render: (content) =>
if content if content
# Trim leading and trailing whitespace # Trim leading and trailing whitespace
content = content.replace /^\s+|\s+$/g, "" content = content.replace /^\s+|\s+$/g, ""
...@@ -94,6 +103,13 @@ class @Hinter ...@@ -94,6 +103,13 @@ class @Hinter
# Initialize the answer choice - remembers which answer the user picked on # Initialize the answer choice - remembers which answer the user picked on
# p2 when he submits a hint on p3. # p2 when he submits a hint on p3.
@answer = '' @answer = ''
# Determine whether the browser supports CSS3 transforms.
styles = document.body.style
if styles.WebkitTransform == '' or styles.transform == ''
@go_to = @transform_go_to
else
@go_to = @legacy_go_to
# Make the correct wizard view show up. # Make the correct wizard view show up.
hints_exist = @$('#hints-exist').html() == 'True' hints_exist = @$('#hints-exist').html() == 'True'
if hints_exist if hints_exist
...@@ -101,6 +117,18 @@ class @Hinter ...@@ -101,6 +117,18 @@ class @Hinter
else else
@go_to('p2') @go_to('p2')
go_to: (view_id) -> transform_go_to: (view_id) ->
$('.wizard-view').css('display', 'none') # Switch wizard views using sliding transitions.
$('#' + view_id).css('display', 'block') id_to_index = {
\ No newline at end of file 'p1': 0,
'p2': 1,
'p3': 2,
}
translate_string = 'translateX(' +id_to_index[view_id] * -1 * parseInt($('#' + view_id).css('width'), 10) + 'px)'
@$('.wizard-container').css('transform', translate_string)
@$('.wizard-container').css('-webkit-transform', translate_string)
legacy_go_to: (view_id) ->
# For older browsers - switch wizard views by changing the screen.
@$('.wizard-view').css('display', 'none')
@$('#' + view_id).css('display', 'block')
\ No newline at end of file
common/templates/hinter_display.html
...@@ -38,98 +38,100 @@ ...@@ -38,98 +38,100 @@
<!-- Tells coffeescript whether there are hints to show. --> <!-- Tells coffeescript whether there are hints to show. -->
<span id="hints-exist" style="display:none">${hints_exist}</span> <span id="hints-exist" style="display:none">${hints_exist}</span>
<div class="wizard-viewbox"><div class="wizard-container">
<div class="wizard-view" id="p1"> <div class="wizard-view" id="p1">
<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="wizard-link" dest="p2" href="javascript: void(0);">
Write your own!
</a></p>
</div>
<div class="wizard-view" id="p2">
% if hints_exist:
<p> <p>
Choose the incorrect answer for which you want to write a hint: <em> Optional. </em> Help us improve our hints! Which hint was most helpful to you?
</p> </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 />
<a href="javascript: void(0);" class="wizard-link" dest="p1"> Back </a>
% endif
</div>
<div class="wizard-view" id="p3">
<p> <div id="pk-list" data-pk-list='${json_pk_list}' style="display:none"> </div>
Write a hint for other students who get the wrong answer of <span id="blank-answer"></span>.
</p>
<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 -- % for answer, pk_dict in answer_to_hints.items():
an arithmetic error or similar -- simply letting the student you'll be % for hint_pk, hint_text in pk_dict.items():
helping to check their signs is sufficient.</p> <p>
<input class="vote" data-answer="${answer}" data-hintno="${hint_pk}" type="button" value="Vote">
${hint_text}
</p>
% endfor
% endfor
<p>For deeper errors of understanding, the best hints allow students to <p>
discover a contradiction in how they are thinking about the Don't like any of the hints above?
problem. An example that clearly demonstrates inconsistency or <a class="wizard-link" dest="p2" href="javascript: void(0);">
<a href="http://en.wikipedia.org/wiki/Cognitive_dissonance" target="_blank"> cognitive dissonace </a> Write your own!
is ideal, although in most cases, not possible.</p> </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> <p>
Good hints either: <em>Optional.</em> Help other students by submitting a hint! Pick one of your previous
<ul> answers for which you would like to write a hint:
<li> Point out the specific misunderstanding your classmate might have </li>
<li> Point to concepts or theories where your classmates might have a
misunderstanding </li>
<li> Show simpler, analogous examples. </li>
<li> Provide references to relevant parts of the text </li>
</ul>
</p> </p>
% endif
% for answer in user_submissions:
<a class="answer-choice" href="javascript: void(0)" value="${answer}">${answer}</a><br />
% endfor
% if hints_exist:
<!-- A placeholder for the Back button, which is relatively-positioned -->
<p> &nbsp </p>
<a href="javascript: void(0);" class="wizard-link bottom" dest="p1"> Back </a>
% endif
<p>Still, remember even a crude hint -- virtually anything short of </div>
giving away the answer -- is better than no hint.</p>
<div class="wizard-view" id="p3">
<p> <p>
<a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a> Write a hint for other students who get the wrong answer of <span id="blank-answer"></span>.
</p> </p>
</div> <p>Read about <a class="expand" data-target="goodhint" href="javascript:void(0);">what makes a good hint</a>.</p>
<textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px"> <textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px">
Write your hint here. Please don't give away the correct answer. Write your hint here. Please don't give away the correct answer.
</textarea> </textarea>
<br /><br /> <br /><br />
<input class="submit-hint" data-answer="${answer}" type="button" value="Submit"> <input class="submit-hint" data-answer="${answer}" type="button" value="Submit">
<br /><br /> <div id="goodhint" style="display:none">
<a href="javascript: void(0);" class="wizard-link" dest="p2"> Back </a> <h4>What makes a good hint?</h4>
</div>
<p>It depends on the type of problem you ran into. For stupid errors --
an arithmetic error or similar -- simply letting the student you'll be
helping to check their signs is sufficient.</p>
<p>For deeper errors of understanding, the best hints allow students to
discover a contradiction in how they are thinking about the
problem. An example that clearly demonstrates inconsistency or
<a href="http://en.wikipedia.org/wiki/Cognitive_dissonance" target="_blank"> cognitive dissonace </a>
is ideal, although in most cases, not possible.</p>
<p>
Good hints either:
<ul>
<li> Point out the specific misunderstanding your classmate might have </li>
<li> Point to concepts or theories where your classmates might have a
misunderstanding </li>
<li> Show simpler, analogous examples. </li>
<li> Provide references to relevant parts of the text </li>
</ul>
</p>
<p>Still, remember even a crude hint -- virtually anything short of
giving away the answer -- is better than no hint.</p>
<p>
<a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a>
</p>
</div>
<br />
<a href="javascript: void(0);" class="wizard-link" dest="p2"> Back </a>
</div>
<!-- Close wizard contaner and wizard viewbox. -->
</div></div>
</%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