Improve styling of the crowdsource hinter
This commit is contained in:
Carlos Andrés Rocha
committed by
Felix Sun
Felix Sun
parent
aae5758a99
commit
0b25e76194
@@ -58,6 +58,7 @@ class CrowdsourceHinterModule(CrowdsourceHinterFields, XModule):
|
||||
-debug="True" will let users vote as often as they want.
|
||||
"""
|
||||
icon_class = 'crowdsource_hinter'
|
||||
css = {'scss': [resource_string(__name__, 'css/crowdsource_hinter/display.scss')]}
|
||||
js = {'coffee': [resource_string(__name__, 'js/src/crowdsource_hinter/display.coffee')],
|
||||
'js': []}
|
||||
js_module_name = "Hinter"
|
||||
@@ -91,6 +92,7 @@ class CrowdsourceHinterModule(CrowdsourceHinterFields, XModule):
|
||||
# Wrap the module in a <section>. This lets us pass data attributes to the javascript.
|
||||
out += '<section class="crowdsource-wrapper" data-url="' + self.system.ajax_url +\
|
||||
'" data-child-url = "' + child_url + '"> </section>'
|
||||
|
||||
return out
|
||||
|
||||
def capa_answer_to_str(self, answer):
|
||||
@@ -304,4 +306,4 @@ class CrowdsourceHinterDescriptor(CrowdsourceHinterFields, XmlDescriptor):
|
||||
for child in self.get_children():
|
||||
xml_object.append(
|
||||
etree.fromstring(child.export_to_xml(resource_fs)))
|
||||
return xml_object
|
||||
return xml_object
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
.crowdsource-wrapper {
|
||||
@include box-shadow(inset 0 1px 2px 1px rgba(0,0,0,0.1));
|
||||
@include border-radius(2px);
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
padding: (15px);
|
||||
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: #F3F3F3;
|
||||
}
|
||||
|
||||
#answer-tabs .ui-tabs-nav .ui-state-default {
|
||||
border: 1px solid #DCDCDC;
|
||||
background: #F8F8F8;
|
||||
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;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.vote {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
@@ -69,8 +69,13 @@ class @Hinter
|
||||
@$(selector).css('display', 'inline')
|
||||
|
||||
render: (content) ->
|
||||
if content
|
||||
# Trim leading and trailing whitespace
|
||||
content = content.replace /^\s+|\s+$/g, ""
|
||||
|
||||
if content
|
||||
@el.html(content)
|
||||
@el.show()
|
||||
JavascriptLoader.executeModuleScripts @el, () =>
|
||||
@bind()
|
||||
@$('#previous-answer-0').css('display', 'inline')
|
||||
@$('#previous-answer-0').css('display', 'inline')
|
||||
|
||||
@@ -18,64 +18,15 @@
|
||||
</%def>
|
||||
|
||||
<%def name="get_feedback()">
|
||||
<style>
|
||||
#answer-tabs {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#answer-tabs .ui-widget-header {
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
}
|
||||
|
||||
#answer-tabs .ui-tabs-nav .ui-state-default {
|
||||
border: 1px solid #DCDCDC;
|
||||
background: #EEEEEE;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#answer-tabs .ui-tabs-nav .ui-state-default:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#answer-tabs .ui-tabs-nav .ui-state-active {
|
||||
border: 1px solid #DCDCDC;
|
||||
background: transparent;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#answer-tabs .ui-tabs-nav .ui-state-active a {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#answer-tabs .ui-tabs-nav .ui-state-default a:hover {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.hint-inner-container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.vote {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p><em> Participation in the hinting system is strictly optional, and will not influence your grade. </em></p>
|
||||
<p>
|
||||
<i> Participation in the hinting system is strictly optional, and will not influence
|
||||
your grade. </i>
|
||||
<br />
|
||||
Help your classmates by writing hints for this problem. Start by picking one of your previous incorrect answers from below:
|
||||
</p>
|
||||
|
||||
<div id="answer-tabs">
|
||||
<ul>
|
||||
% for index, answer in index_to_answer.items():
|
||||
<li><a href="#previous-answer-${index}"> ${answer} </a></li>
|
||||
<li><a href="#previous-answer-${index}"> ${answer} </a></li>
|
||||
% endfor
|
||||
</ul>
|
||||
|
||||
@@ -88,59 +39,59 @@
|
||||
</p>
|
||||
% for hint_text, hint_pk in index_to_hints[index]:
|
||||
<p>
|
||||
<input class="vote" data-answer="${index}" data-hintno="${hint_pk}" type="button" value="Vote">
|
||||
<input class="vote" data-answer="${index}" data-hintno="${hint_pk}" type="button" value="Vote"/>
|
||||
${hint_text}
|
||||
</p>
|
||||
% endfor
|
||||
<p>
|
||||
Don't like any of the hints above? You can also submit your own.
|
||||
% else:
|
||||
<p>
|
||||
</p>
|
||||
% endif
|
||||
<p>
|
||||
What hint would you give a student who made the same mistake you did? Please don't give away the answer.
|
||||
Read about <a class="expand-goodhint" href="javascript:;">what makes a good hint</a>.
|
||||
</p>
|
||||
<div class="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>
|
||||
<textarea cols="50" style="height:100px" class="custom-hint" id="custom-hint-${index}">
|
||||
<textarea cols="50" class="custom-hint" id="custom-hint-${index}">
|
||||
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="${index}" type="button" value="submit">
|
||||
</div></div>
|
||||
% endfor
|
||||
</div>
|
||||
|
||||
<p>Read about <a class="expand-goodhint" href="javascript:;">what makes a good hint</a>.</p>
|
||||
<div class="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>
|
||||
|
||||
</%def>
|
||||
|
||||
<%def name="show_votes()">
|
||||
@@ -172,6 +123,3 @@ What would you say to help someone who got this wrong answer?
|
||||
% if op == "vote":
|
||||
${show_votes()}
|
||||
% endif
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user