From 0b25e76194cc5b49534e1e5fb870022e51c14ea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Andr=C3=A9s=20Rocha?= Date: Fri, 28 Jun 2013 08:31:16 -0400 Subject: [PATCH] Improve styling of the crowdsource hinter --- .../lib/xmodule/xmodule/crowdsource_hinter.py | 4 +- .../css/crowdsource_hinter/display.scss | 65 +++++++++ .../js/src/crowdsource_hinter/display.coffee | 7 +- common/templates/hinter_display.html | 130 ++++++------------ 4 files changed, 113 insertions(+), 93 deletions(-) create mode 100644 common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss diff --git a/common/lib/xmodule/xmodule/crowdsource_hinter.py b/common/lib/xmodule/xmodule/crowdsource_hinter.py index 341a2598ef..19c447d014 100644 --- a/common/lib/xmodule/xmodule/crowdsource_hinter.py +++ b/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
. This lets us pass data attributes to the javascript. out += '
' + 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 diff --git a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss new file mode 100644 index 0000000000..07d183eb36 --- /dev/null +++ b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss @@ -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; +} diff --git a/common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee b/common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee index cbc5c6edd1..81872a5ef4 100644 --- a/common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee +++ b/common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee @@ -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') \ No newline at end of file + @$('#previous-answer-0').css('display', 'inline') diff --git a/common/templates/hinter_display.html b/common/templates/hinter_display.html index 830f69c382..5ae3d3e9b4 100644 --- a/common/templates/hinter_display.html +++ b/common/templates/hinter_display.html @@ -18,64 +18,15 @@ <%def name="get_feedback()"> - - +

Participation in the hinting system is strictly optional, and will not influence your grade.

- Participation in the hinting system is strictly optional, and will not influence - your grade. -
Help your classmates by writing hints for this problem. Start by picking one of your previous incorrect answers from below:

@@ -88,59 +39,59 @@

% for hint_text, hint_pk in index_to_hints[index]:

- + ${hint_text}

% endfor

Don't like any of the hints above? You can also submit your own. - % else: -

+

% endif +

What hint would you give a student who made the same mistake you did? Please don't give away the answer. - Read about what makes a good hint.

- - - +

% endfor +

Read about what makes a good hint.

+ + <%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 - - -