Skip to content

E
edx-platform
Commit 0b25e761 by Carlos Andrés Rocha Committed by Felix Sun
Options

Improve styling of the crowdsource hinter

parent aae5758a
Showing with 113 additions and 95 deletions
common/lib/xmodule/xmodule/crowdsource_hinter.py
......@@ -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
\ No newline at end of file
return xml_object
common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss 0 → 100644
.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;
}
common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee
......@@ -70,7 +70,12 @@ class @Hinter
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')
\ No newline at end of file
@$('#previous-answer-0').css('display', 'inline')
common/templates/hinter_display.html
......@@ -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
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