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

Added fancy sliding transitions into hint collection page.

Browse Source
This commit is contained in:
Felix Sun
2013-08-01 14:52:37 -04:00
parent 35a8e9be32
commit 2d1c9158d8
3 changed files with 143 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
View File

@@ -7,52 +7,6 @@
background: rgb(253, 248, 235);
}
#answer-tabs {
background: #FFFFFF;
border: none;
margin-bottom: 20px;
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 {
border: 1px solid #DCDCDC;
background: #FFFFFF;
}
#answer-tabs .ui-tabs-nav .ui-state-active a {
color: #222222;
background: #FFFFFF;
}
#answer-tabs .ui-tabs-nav .ui-state-default a:hover {
color: #222222;
background: #FFFFFF;
}
#answer-tabs .custom-hint {
height: 100px;
width: 100%;
}
.hint-inner-container {
padding-left: 15px;
padding-right: 15px;
@@ -63,3 +17,28 @@
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.wizard-view {
float: left;
width: 800px;
}
.wizard-container {
width: 3000px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
.wizard-viewbox {
width: 790px;
overflow: hidden;
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
}

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

@@ -41,13 +41,17 @@ class @Hinter
@$('.answer-choice').click @answer_choice_handle
expand: (eventObj) =>
# Expand a hidden div.
target = @$('#' + @$(eventObj.currentTarget).data('target'))
if @$(target).css('display') == 'none'
@$(target).css('display', 'block')
else
@$(target).css('display', 'none')
# Fix positioning errors with the bottom class.
@$('.bottom').removeClass('bottom').addClass('bottom')
vote: (eventObj) =>
# Make an ajax request with the user's vote.
target = @$(eventObj.currentTarget)
all_pks = @$('#pk-list').attr('data-pk-list')
post_json = {'answer': target.attr('data-answer'), 'hint': target.data('hintno'), 'pk_list': all_pks}
@@ -55,6 +59,7 @@ class @Hinter
@render(response.contents)
submit_hint: (eventObj) =>
# Make an ajax request with the user's new hint.
textarea = $('.custom-hint')
if @answer == ''
# The user didn't choose an answer, somehow. Do nothing.
@@ -64,21 +69,25 @@ class @Hinter
@render(response.contents)
clear_default_text: (eventObj) =>
# Remove placeholder text in the hint submission textbox.
target = @$(eventObj.currentTarget)
if target.data('cleared') == undefined
target.val('')
target.data('cleared', true)
wizard_link_handle: (eventObj) =>
# Move to another wizard view, based on the link that the user clicked.
target = @$(eventObj.currentTarget)
@go_to(target.attr('dest'))
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')
@$('#blank-answer').html(@answer)
@go_to('p3')
render: (content) ->
render: (content) =>
if content
# Trim leading and trailing whitespace
content = content.replace /^\s+|\s+$/g, ""
@@ -94,6 +103,13 @@ class @Hinter
# Initialize the answer choice - remembers which answer the user picked on
# p2 when he submits a hint on p3.
@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.
hints_exist = @$('#hints-exist').html() == 'True'
if hints_exist
@@ -101,6 +117,18 @@ class @Hinter
else
@go_to('p2')
go_to: (view_id) ->
$('.wizard-view').css('display', 'none')
$('#' + view_id).css('display', 'block')
transform_go_to: (view_id) ->
# Switch wizard views using sliding transitions.
id_to_index = {
'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')

170
common/templates/hinter_display.html
View File

@@ -38,98 +38,100 @@
<!-- 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>
<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:
<div class="wizard-viewbox"><div class="wizard-container">
<div class="wizard-view" id="p1">
<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 />
<a href="javascript: void(0);" class="wizard-link" dest="p1"> Back </a>
% 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>.
</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 --
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>
<em> Optional. </em> Help us improve our hints! Which hint was most helpful to you?
</p>
<p>Still, remember even a crude hint -- virtually anything short of
giving away the answer -- is better than no hint.</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>
<a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a>
</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>
<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">
<br /><br />
<a href="javascript: void(0);" class="wizard-link" dest="p2"> Back </a>
</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:
<!-- 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
</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>.
</p>
<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">
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">
<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 --
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>