fixed staff rating, slight UX fixes

crowdsourcehinter/crowdsourcehinter.py

@@ -232,8 +232,10 @@ class CrowdsourceHinter(XBlock):
         # corresponding incorrect answer
         used_hint_answer_text = {}
         if self.get_user_is_staff():
-            for index in range(0, len(self.reported_hints)):
-                used_hint_answer_text[str(self.reported_hints[i])] = str("reported")
+            print len(self.reported_hints)
+            print str(self.reported_hints)
+            for key in self.reported_hints:
+                used_hint_answer_text[key] = str("Reported")
         if len(self.incorrect_answers) == 0:
             return used_hint_answer_text
         else:

crowdsourcehinter/static/css/crowdsourcehinter.css

@@ -10,7 +10,7 @@
 
 .csh_hint_value{
   display: flex;
-  margin-left: 10px;
+  /* margin-left: 10px; */
   flex-direction: column;
 }
 
@@ -51,6 +51,23 @@ div[data-rate="report"]{
     font-weight: bold;
 }
 
+.csh_hint_text[rating="upvote"]{
+  color: green;
+}
+
+.csh_hint_text[rating="downvote"]{
+  color: red;
+}
+
+.csh_hint[rating="upvote"]{
+  color: green;
+}
+
+.csh_hint[rating="downvote"]{
+  color: red;
+}
+
+
 .csh_student_hint_creation {
   height: 40px;
   vertical-align: middle;

crowdsourcehinter/static/html/crowdsourcehinter.html

 <script type='x-tmpl/mustache' id='show_hint_rating_ux'>
     <div class='csh_hint_value' value="{{hintText}}">
         <div class='csh_hint_data'>
-            <div class="csh_hint">Your original hint was: <b>{{hintText}}</b></div>
+            <div class="csh_hint">You received the following hint: <b>{{hintText}}</b></div>
         </div>
         <div class='csh_rating_data'>
             <div role="button" class="csh_rate_hint" data-rate="upvote">
@@ -47,8 +47,8 @@
 <script type="x-tmpl/mustache" id="show_student_submission">
     <div class="csh_student_answer">
         <h class="csh_answer_text" answer={{answer}}>
-        <i> Improve hints for this question by rating hints as helpful/unhelpful or contributing your own! </i> <br>
-        <i> Your original answer was: {{answer}} </i></h>
+        <i> Please give us feedback or submit a new hint to improve hints for this question! </i> <br>
+        Your original answer was: {{answer}}</h>
     </div>
 </script>
 

crowdsourcehinter/static/js/src/crowdsourcehinter.js

@@ -239,6 +239,7 @@ function CrowdsourceHinter(runtime, element, data){
     function rateHint(){ return function(rateHintButtonHTML){
         rating = rateHintButtonHTML.currentTarget.attributes['data-rate'].value;
         $('.csh_hint_text', element).attr('rating', rating);
+        $('.csh_hint', element).attr('rating', rating);
         hint = $('.csh_hint_text', element).attr('hint_received');
         student_answer = $('.csh_hint_text', element).attr('student_answer');
         $.ajax({
@@ -256,6 +257,7 @@ function CrowdsourceHinter(runtime, element, data){
     function reportHint(){ return function(reportHintButtonHTML){
         hint = $('.csh_hint_text', element).attr('hint_received');
         student_answer = $('.csh_hint_text', element).attr('student_answer');
+        $('.csh_hint_text', element).text('This hint has been reported for review.');
         $.ajax({
             type: "POST",
             url: runtime.handlerUrl(element, 'rate_hint'),