Skip to content
Snippets Groups Projects
Commit 2d1c9158 authored by Felix Sun's avatar Felix Sun
Browse files

Added fancy sliding transitions into hint collection page.

parent 35a8e9be
No related merge requests found
Hide whitespace changes
Inline Side-by-side
common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
+ 24
− 45
View file @ 2d1c9158
......@@ -7,59 +7,38 @@
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;
.hint-inner-container {
padding-left: 15px;
padding-right: 15px;
font-size: 16px;
}
#answer-tabs .ui-tabs-nav .ui-state-active {
border: 1px solid #DCDCDC;
background: #FFFFFF;
.vote {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#answer-tabs .ui-tabs-nav .ui-state-active a {
color: #222222;
background: #FFFFFF;
.wizard-view {
float: left;
width: 800px;
}
#answer-tabs .ui-tabs-nav .ui-state-default a:hover {
color: #222222;
background: #FFFFFF;
}
.wizard-container {
width: 3000px;
#answer-tabs .custom-hint {
height: 100px;
width: 100%;
-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;
}
.hint-inner-container {
padding-left: 15px;
padding-right: 15px;
font-size: 16px;
.wizard-viewbox {
width: 790px;
overflow: hidden;
position: relative;
}
.vote {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.bottom {
position: absolute;
bottom: 0;
}
\ No newline at end of file
common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee
+ 32
− 4
View file @ 2d1c9158
......@@ -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')
\ No newline at end of file
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')
\ No newline at end of file
common/templates/hinter_display.html
+ 80
− 78
View file @ 2d1c9158
......@@ -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:
<em> Optional. </em> Help us improve our hints! Which hint was most helpful to you?
</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>
<div id="pk-list" data-pk-list='${json_pk_list}' style="display:none"> </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>
% 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>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>
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>
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 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
<p>Still, remember even a crude hint -- virtually anything short of
giving away the answer -- is better than no hint.</p>
</div>
<div class="wizard-view" id="p3">
<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>
</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.
</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>
</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>
......
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