fixing up UX

crowdsourcehinter/crowdsourcehinter.py

@@ -113,7 +113,6 @@ class CrowdsourceHinter(XBlock):
                         or another random hint for an incorrect answer
                         or 'Sorry, there are no more hints for this answer.' if no more hints exist
         """
-        print(self.show_best)
         answer = str(data["submittedanswer"])
         answer = answer.lower() # for analyzing the student input string I make it lower case.
         found_equal_sign = 0
@@ -129,8 +128,6 @@ class CrowdsourceHinter(XBlock):
                 eqplace = answer.index("=") + 1
                 answer = answer[eqplace:]
         remaining_hints = str(self.find_hints(answer))
-        print(answer)
-        print(remaining_hints)
         if remaining_hints != str(0):
             best_hint = max(self.hint_database[str(answer)].iteritems(), key=operator.itemgetter(1))[0]
             if self.show_best:
@@ -211,7 +208,6 @@ class CrowdsourceHinter(XBlock):
         if len(self.WrongAnswers) == 0:
             return
         else:
-            print(self.Used)
             for index in range(0, len(self.Used)):
                 # each index is a hint that was used, in order of usage
                 if str(self.Used[index]) in self.hint_database[self.WrongAnswers[index]]:
@@ -222,7 +218,6 @@ class CrowdsourceHinter(XBlock):
                     feedback_data[None] = str(self.WrongAnswers[index])
         self.WrongAnswers=[]
         self.Used=[]
-        print(feedback_data)
         return feedback_data
 
     def no_hints(self, index):
@@ -255,8 +250,6 @@ class CrowdsourceHinter(XBlock):
         hint_rating['rating'] = temporary_dictionary[data['hint']]
         hint_rating['student_answer'] = data['student_answer']
         hint_rating['hint'] = data['hint']
-        print(hint_rating)
-        print(str(self.hint_database))
         return hint_rating 
 
     @XBlock.json_handler
@@ -327,29 +320,28 @@ class CrowdsourceHinter(XBlock):
         else:
             temporary_dictionary[str(data_hint)] -= 1
         self.hint_database[str(answer_data)] = temporary_dictionary
-        print(str(self.hint_database))
+        print("Ratings changed : " + str(self.hint_database))
         return str(temporary_dictionary[str(data_hint)])
 
-    @XBlock.json_handler
-    def moderate_hint(self, data, suffix=''):
-        """
-        Under construction? 
-        """
-        print("this is being used")
-        flagged_hints = {}
-        flagged_hints = self.Flagged
-        if data['rating'] == "dismiss":
-            flagged_hints.pop(data['answer_wrong'], None)
-        else:
-            flagged_hints.pop(data['answer_wrong'], None)
-            for answer_keys in self.hint_database:
-                if str(answer_keys) == data['answ']:
-                    for hint_keys in self.hint_database[str(answer_keys)]:
-                        if str(hint_keys) == data['hint']:
-                            temporary_dict = str(self.hint_database[str(answer_keys)])
-                            temporary_dict = (ast.literal_eval(temporary_dict))
-                            temporary_dict.pop(hint_keys, None)
-                            self.hint_database[str(answer_keys)] = temporary_dict
+#    @XBlock.json_handler
+#    def moderate_hint(self, data, suffix=''):
+#        """
+#        Under construction? 
+#        """
+#        flagged_hints = {}
+#        flagged_hints = self.Flagged
+#        if data['rating'] == "dismiss":
+#            flagged_hints.pop(data['answer_wrong'], None)
+#        else:
+#            flagged_hints.pop(data['answer_wrong'], None)
+#            for answer_keys in self.hint_database:
+#                if str(answer_keys) == data['answ']:
+#                    for hint_keys in self.hint_database[str(answer_keys)]:
+#                        if str(hint_keys) == data['hint']:
+#                            temporary_dict = str(self.hint_database[str(answer_keys)])
+#                            temporary_dict = (ast.literal_eval(temporary_dict))
+#                            temporary_dict.pop(hint_keys, None)
+#                            self.hint_database[str(answer_keys)] = temporary_dict
 
     @XBlock.json_handler
     def give_hint(self, data, suffix=''):
@@ -370,7 +362,6 @@ class CrowdsourceHinter(XBlock):
             # self.hint_database equal to it due to being unable to directly
             # edit self.hint_databse. Most likely scope error
             self.hint_database[str(answer)] = temporary_dictionary
-            print(str(self.hint_database))
             return
         else:
             # if the hint exists already, simply upvote the previously entered hint
@@ -381,7 +372,6 @@ class CrowdsourceHinter(XBlock):
                 temporary_dictionary = (ast.literal_eval(temporary_dictionary))
                 temporary_dictionary[str(submission)] += 1
                 self.hint_database[str(answer)] = temporary_dictionary
-                print(str(self.hint_database))
                 return
 
     @XBlock.json_handler

crowdsourcehinter/static/css/crowdsourcehinter.css

@@ -37,14 +37,32 @@
   flex-direction: column;
 }
 
+.csh_rating_data {
+  display: flex;
+  flex-direction: column;
+}
+
 .csh_rate_hint {
   margin-right: 15px;
+  margin-top: 5px;
+  font-size: 70%;
+  align-self: flex-end;
 }
 
 div[data-rate="flag"]{
     font-weight: bold;
 }
 
+.csh_student_hint_creation {
+  height: 40px;
+  vertical-align: middle;
+  font-weight: 600;
+  align-self: flex-end;
+  box-shadow: 0px 0px 8px 4px #C7BEBE inset, 0px 0px 8px 4px #C7BEBE inset;
+background-clip: padding-box;
+font-size: 0.8125em;
+}
+
 div[data-rate="upvote"] {
     color: green;
     font-weight: bold;
@@ -55,6 +73,9 @@ div[data-rate="downvote"] {
     font-weight: bold;
 }
 
+.csh_flagged_hints {
+    background-color: red;
+}
 .crowdsourcehinter_block .csh_flagged_hints {
     visibility: hidden;
     display: none;

crowdsourcehinter/static/html/crowdsourcehinter.html

 <script type='x-tmpl/mustache' id='show_hint_feedback'>
     <div class='csh_hint_value' value="{{hintvalue}}">
         <div class='csh_hint_data'>
-            <div class="csh_hint">{{hint}}</div>
+            <div class="csh_hint"><b>{{hint}}</b></div>
         </div>
         <div class='csh_rating_data'>
             <div role="button" class="csh_rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote">
@@ -36,17 +36,20 @@
 </script>
 
 <script type="x-tmpl/mustache" id="show_no_hints">
-    <div class="csh_hint_value" value="There are no answer-specific hints for this answer.">
+    <div class="csh_hint_value">Submit a hint for this incorrect answer to help future students!
     </div>
 </script>
 
 <script type="x-tmpl/mustache" id="show_answer_feedback">
     <div class="csh_student_answer">
-        <span><b>{{answer}}</b></span>
-        <div>
-            <input type ="button" class="csh_student_hint_creation" value="Submit a New Hint"
-            </input>
-        </div>
+        <h class="csh_answer_text">{{answer}}</h>
+    </div>
+</script>
+
+<script type="x-tmpl/mustache" id="add_hint_creation">
+    <div>
+        <input type ="button" class="csh_student_hint_creation" value="Submit a New Hint">
+        </input>
     </div>
 </script>
 

crowdsourcehinter/static/js/src/crowdsourcehinter.js

@@ -37,7 +37,7 @@ function CrowdsourceHinter(runtime, element){
             });
         }else{
             $('.csh_correct', element).show();
-            $('.csh_correct', element).text("You're correct! Please help us improve our hints by voting on them, or submit your own hint!");
+            $('.csh_correct', element).text("Tell us whether the hint you received was helpful to improve our hinting system, or submit a new hint for other students to see!");
             $(".csh_hint_reveal", element).hide();
             //send empty data for ajax call because not having a data field causes error
             $.ajax({
@@ -76,7 +76,7 @@ function CrowdsourceHinter(runtime, element){
     //Append answer-specific hints for each student answer during the feedback stage.
     //This appended div includes upvote/downvote/flagging buttons, the hint, and the hint's rating
         $(".csh_student_answer", element).each(function(){
-            if ($(this).find("span").text() == student_answer){
+            if ($(this).find('.csh_answer_text').text() == student_answer){
                 var html = "";
                 $(function(){
                     var data = {
@@ -84,7 +84,7 @@ function CrowdsourceHinter(runtime, element){
                     };
                     html = Mustache.render($("#show_hint_feedback").html(), data);
                 });
-                $(this).find("span").append(html);
+                $(this).append(html);
             }
         });
     }
@@ -110,7 +110,7 @@ function CrowdsourceHinter(runtime, element){
         var data = {
             answer: student_answers
         };
-        html = Mustache.render(template, data); 
+        html = Mustache.render(template, data);
         $(".csh_feedback", element).append(html);
     }
 
@@ -128,13 +128,12 @@ function CrowdsourceHinter(runtime, element){
                 //hints return null if no answer-specific hints exist
                 if(hint === "null"){
                     $(".csh_student_answer", element).each(function(){
-                        if ($(this).find("span").text() == student_answer){
+                        if ($(this).find('.csh_answer_text').text() == student_answer){
                             var html = "";
                             var template = $('#show_no_hints').html();
                             var data = {};
                             html = Mustache.render(template, data);
-                            console.log(html);
-                            $(this).find("span").append(html);
+                            $(this).append(html);
                         }
                     });
                 }
@@ -142,6 +141,11 @@ function CrowdsourceHinter(runtime, element){
                 else{
                     showHintFeedback(hint, student_answer);
                 }
+                var html = "";
+                var template = $('#add_hint_creation').html();
+                var data = {};
+                html = Mustache.render(template, data);
+                $(this).append(html);
             });
             isShowingHintFeedback = true;
         }
@@ -155,9 +159,9 @@ function CrowdsourceHinter(runtime, element){
         $('.csh_student_text_input').remove();
         $('.csh_submit_new').remove();
         $(this).hide();
-        student_answer = $(this).parent().parent().find("span").text();
+        student_answer = $(this).parent().parent().find('.csh_answer_text').text();
         $(".csh_student_answer", element).each(function(){
-            if ($(this).find("span").text() == student_answer){
+            if ($(this).find('.csh_answer_text').text() == student_answer){
                 var html = "";
                 $(function(){
                     var template = $('#student_hint_creation').html();
@@ -198,47 +202,19 @@ function CrowdsourceHinter(runtime, element){
         hint = $('.csh_HintsToUse', element).text();
         student_answer = $('.csh_HintsToUse', element).attr('student_answer');
         Logger.log('crowd_hinter.rate_hint.click.event', {"hint": hint, "student_answer": student_answer, "rating": $(this).attr('data-rate')});
-        console.log(hint);
-        console.log(student_answer);
-    });
-
-//This version of the rate hint is currently decomissioned. This is valid if hint rating/flagging is returned
-//soley to showing after the student correctly answers the question.
-/*    $(element).on('click', '.csh_rate_hint', function(){
-    //Click event to change the rating/flag a hint. The attribute 'data-rate' within each .rate_hint button is used
-    //to determine whether the student is upvoting, downvoting, or flagging the hint. 
-        hint = $(this).parent().parent().find(".csh_hint").text();
-        student_answer = $(this).parent().parent().parent().find("span").text();
-        Logger.log('crowd_hinter.rate_hint.click.event', {"hint": hint, "student_answer": student_answer, "rating": $(this).attr('data-rate')});
         $.ajax({
             type: "POST",
             url: runtime.handlerUrl(element, 'rate_hint'),
             data: JSON.stringify({"student_rating": $(this).attr('data-rate'), "hint": hint, "student_answer": student_answer}),
-            success: function (result){
-                    if(result.rating == "flagged"){
-                        //hide hint if it was flagged by the student
-                        $(".csh_hint", element).each(function(){
-                            if ($(this).parent().parent().find(".csh_hint").text() == hint && $(this).parent().parent().parent().find("span").text() == student_answer){
-                                $(this).parent().parent().remove();
-                            }
-                        });
-                    }
-                    else if(result.rating != "voted"){
-                        $(".csh_hint", element).each(function(){
-                            if ($(this).parent().parent().find(".csh_hint").text() == hint && $(this).parent().parent().parent().find("span").text() == student_answer){
-                                $(this).parent().parent().find('.csh_rating').text(result.rating);
-                            }
-                    })
-                }
-            }
+            success: console.log($(this).attr('data-rate'))
         });
-    })*/
+    });
 
     $(element).on('click', '.csh_staff_rate', function(){
     //Staff ratings are the removal or unflagging of flagged hints from the database. The attribute 'data-rate' is used
     //to determine whether to unflag or delete the hint.
         hint = $(this).parent().find(".csh_hint").text();
-        student_answer = $(this).parent().parent().find("span").text();
+        student_answer = $(this).parent().parent().find('.csh_answer_text').text();
         $.ajax({
             type: "POST",
             url: runtime.handlerUrl(element, 'rate_hint'),