Improve styling of the crowdsource hinter

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):

common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss

+.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')

common/templates/hinter_display.html

@@ -18,57 +18,8 @@
 </%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>
 
@@ -88,18 +39,28 @@
                 </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>
+            <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>
 
@@ -129,17 +90,7 @@
 
       <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?
-(Don't give away the answer, please.)
-            </textarea>
-
-            <input class="submit-hint" data-answer="${index}" type="button" value="submit">
-        </div></div>
-        % endfor
-    </div>
+      </p>    </div>
 
 </%def>
 
@@ -172,6 +123,3 @@ What would you say to help someone who got this wrong answer?
 % if op == "vote":
     ${show_votes()}
 % endif
-
-
-