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): ...@@ -58,6 +58,7 @@ class CrowdsourceHinterModule(CrowdsourceHinterFields, XModule):
-debug="True" will let users vote as often as they want. -debug="True" will let users vote as often as they want.
""" """
icon_class = 'crowdsource_hinter' 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 = {'coffee': [resource_string(__name__, 'js/src/crowdsource_hinter/display.coffee')],
'js': []} 'js': []}
js_module_name = "Hinter" js_module_name = "Hinter"
...@@ -91,6 +92,7 @@ class CrowdsourceHinterModule(CrowdsourceHinterFields, XModule): ...@@ -91,6 +92,7 @@ class CrowdsourceHinterModule(CrowdsourceHinterFields, XModule):
# Wrap the module in a <section>. This lets us pass data attributes to the javascript. # 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 +\ out += '<section class="crowdsource-wrapper" data-url="' + self.system.ajax_url +\
'" data-child-url = "' + child_url + '"> </section>' '" data-child-url = "' + child_url + '"> </section>'
return out return out
def capa_answer_to_str(self, answer): def capa_answer_to_str(self, answer):
...@@ -304,4 +306,4 @@ class CrowdsourceHinterDescriptor(CrowdsourceHinterFields, XmlDescriptor): ...@@ -304,4 +306,4 @@ class CrowdsourceHinterDescriptor(CrowdsourceHinterFields, XmlDescriptor):
for child in self.get_children(): for child in self.get_children():
xml_object.append( xml_object.append(
etree.fromstring(child.export_to_xml(resource_fs))) etree.fromstring(child.export_to_xml(resource_fs)))
return xml_object return xml_object
\ No newline at end of file
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 ...@@ -70,7 +70,12 @@ class @Hinter
render: (content) -> render: (content) ->
if content if content
# Trim leading and trailing whitespace
content = content.replace /^\s+|\s+$/g, ""
if content
@el.html(content) @el.html(content)
@el.show()
JavascriptLoader.executeModuleScripts @el, () => JavascriptLoader.executeModuleScripts @el, () =>
@bind() @bind()
@$('#previous-answer-0').css('display', 'inline') @$('#previous-answer-0').css('display', 'inline')
\ No newline at end of file
common/templates/hinter_display.html
...@@ -18,64 +18,15 @@ ...@@ -18,64 +18,15 @@
</%def> </%def>
<%def name="get_feedback()"> <%def name="get_feedback()">
<style> <p><em> Participation in the hinting system is strictly optional, and will not influence your grade. </em></p>
#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> <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: Help your classmates by writing hints for this problem. Start by picking one of your previous incorrect answers from below:
</p> </p>
<div id="answer-tabs"> <div id="answer-tabs">
<ul> <ul>
% for index, answer in index_to_answer.items(): % 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 % endfor
</ul> </ul>
...@@ -88,59 +39,59 @@ ...@@ -88,59 +39,59 @@
</p> </p>
% for hint_text, hint_pk in index_to_hints[index]: % for hint_text, hint_pk in index_to_hints[index]:
<p> <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} ${hint_text}
</p> </p>
% endfor % endfor
<p> <p>
Don't like any of the hints above? You can also submit your own. Don't like any of the hints above? You can also submit your own.
% else: </p>
<p>
% endif % endif
<p>
What hint would you give a student who made the same mistake you did? Please don't give away the answer. 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> </p>
<div class="goodhint" style="display:none"> <textarea cols="50" class="custom-hint" id="custom-hint-${index}">
<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}">
What would you say to help someone who got this wrong answer? What would you say to help someone who got this wrong answer?
(Don't give away the answer, please.) (Don't give away the answer, please.)
</textarea> </textarea>
<br/><br/>
<input class="submit-hint" data-answer="${index}" type="button" value="submit"> <input class="submit-hint" data-answer="${index}" type="button" value="submit">
</div></div> </div></div>
% endfor % endfor
</div> </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>
<%def name="show_votes()"> <%def name="show_votes()">
...@@ -172,6 +123,3 @@ What would you say to help someone who got this wrong answer? ...@@ -172,6 +123,3 @@ What would you say to help someone who got this wrong answer?
% if op == "vote": % if op == "vote":
${show_votes()} ${show_votes()}
% endif % 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