improving UX

crowdxblock/crowdxblock.py

@@ -21,7 +21,7 @@ class CrowdXBlock(XBlock):
     """
     # Database of hints. hints are stored as such: {"incorrect_answer": {"hint": rating}}. each key (incorrect answer)
     # has a corresponding dictionary (in which hints are keys and the hints' ratings are the values).
-    hint_database = Dict(default={'answer': {'hint': 5, 'hint_test': 0}}, scope=Scope.user_state_summary)
+    hint_database = Dict(default={'answer': {'Try doing something new': 5, 'you should go review that lesson again': 0}}, scope=Scope.user_state_summary)
     # This is a dictionary of hints that will be used to determine what hints to show a student.
     # flagged hints are not included in this dictionary of hints
     HintsToUse = Dict({}, scope=Scope.user_state)
@@ -128,8 +128,6 @@ class CrowdXBlock(XBlock):
                 for hint_keys in self.hint_database[str(answer)]:
                     if hint_keys not in self.Used:
                         if hint_keys not in self.Flagged:
-                            print str(self.Flagged)
-                            print str(hint_keys)
                             temporary_hints_list.append(str(hint_keys))
                             not_used = random.choice(temporary_hints_list)
         else:
@@ -230,8 +228,6 @@ class CrowdXBlock(XBlock):
                         else:
                             self.no_hints(index)
                             feedback_data[str("There are no hints for" + " " + str(self.WrongAnswers[index]))] = str(self.WrongAnswers[index])
-        self.Used = []
-        self.WrongAnswers = []
         return feedback_data
 
     def no_hints(self, index):
@@ -243,6 +239,23 @@ class CrowdXBlock(XBlock):
         self.Used.append(str("There are no hints for" + " " + str(self.WrongAnswers[index])))
 
     @XBlock.json_handler
+    def get_ratings(self, data, suffix=''):
+        """
+        This function is used to return the ratings of hints during hint feedback.
+
+        data['student_answer'] is the answer for the hint being displayed
+        data['hint_used'] is the hint being shown to the student
+
+        returns:
+            hint_rating: the rating of the hint.
+        """
+        hint_rating = {}
+        temporary_dictionary = str(self.hint_database[data['student_answer']])
+        temporary_dictionary = (ast.literal_eval(temporary_dictionary))
+        hint_rating[data['hint_used']] = temporary_dictionary[data['hint_used']]
+        return hint_rating
+
+    @XBlock.json_handler
     def rate_hint(self, data, suffix=''):
         """
         Used to facilitate hint rating by students. Ratings are -1, 1, or 0. -1 is downvote, 1 is upvote, and 0 is
@@ -271,7 +284,6 @@ class CrowdXBlock(XBlock):
         if str(data['student_rating']) == str(0):
             # if student flagged hint
             self.hint_flagged(data['used_hint'], answer_data)
-            print str(self.Flagged)
             return {"rating": 'thiswasflagged', 'used_hint': data_hint}
         if str(answer_data) not in self.Voted:
             self.Voted.append(str(answer_data)) # add data to Voted to prevent multiple votes

crowdxblock/static/css/crowdxblock.css

@@ -40,27 +40,18 @@
   background-color: #FF8;
 }
 
-.upvote_hint {
+.downvote_hint, .flag_hint, .upvote_hint {
   width: 100%;
   margin-left:auto;
   margin-right:auto;
   text-align:left;
 }
 
-.downvote_hint {
-  width: 100%;
-  margin-left:auto;
-  margin-right:auto;
-  text-align:left;
-}
+.upvote_hint, .downvote_hint, .flag_hint { cursor: pointer }
+.upvote_hint, .downvote_hint, .flag_hint { color: #948f8f; }
 
-.flag_hint {
-  width: 100%;
-  margin-left:auto;
-  margin-right:auto;
-  text-align:left;
+.hintsarea {
+  display: flex;
+  flex-direction: colomn;
 }
 
-.upvote_hint, .downvote_hint, .flag_hint {cursor: pointer}
-.upvote_hint, .downvote_hint, .flag_hint { color: #948f8f; }
-

crowdxblock/static/js/src/crowdxblock.js

@@ -14,7 +14,7 @@ function CrowdXBlock(runtime, element){
     var_element = String;
     var_event_type = String;
     var_data = String;
-    $(".HintsToUse", element).text("Hints are enabled for this problem!");
+    //$(".HintsToUse", element).text("Hints are enabled for this problem!");
     clearvariables();
     repeatcounter += 1;
     console.debug(repeatcounter);
@@ -62,7 +62,6 @@ function CrowdXBlock(runtime, element){
         $('.correct', element).show();
         $('.correct', element).text("You're correct! Please help us improve our hints by voting on them, or submit your own hint!");
         $(".HintsToUse", element).text(" ");
-        console.debug("this should also only show up once...");
         $.ajax({
             type: "POST",
             url: runtime.handlerUrl(element, 'get_feedback'),
@@ -120,19 +119,30 @@ function CrowdXBlock(runtime, element){
         hint_used = hint_used.replace(/\=/g, 'eeqquuaallss');
         if($("#submit"+student_answer).length == 0){
             $('.hintansarea').append("<p id=\"submit" + student_answer + "\" class=\"hintsarea\"> </p>");
-            $('#submit'+student_answer).append("<p> </p><b>Answer-specific hints for \b" + " " + value + "<p> <input id=\"submitbuttonfor" + student_answer + "\" style=\"float: right; float: top;\" type=\"button\" class=\"submitbutton\" value=\"Submit a new hint\"> <p id=\"hintstoshow" + student_answer + "\"> </p></div>");
+            $('#submit'+student_answer).append("<p> </p><b>Answer-specific hints for \b" + " " + student_answer + "<p> <p id=\"hintstoshow" + student_answer + "\"> </p></div>");
             }
           if(hint_used.slice(0,22) != "There are no hints for"){
-            $('#hintstoshow'+student_answer).append("<p \" id =\"thisparagraph" + hint_used + "\">" + "<div data-value=\"" + student_answer + "\" id=\"" + hint_used + "\" role=\"button\" class=\"upvote_hint\" data-rate=\"1\" data-icon=\"arrow-u\"  aria-label=\"upvote\"><b>↑</b></div><div class = \"" + index + "rating\" >" + index + "</div> <div data-value=\"" + student_answer + "\" id=\"" + hint_used + "\" role=\"button\" class=\"downvote_hint\" data-rate=\"-1\" aria-label=\"downvote\"><b>↓</b></div> <div data-value=\"" + student_answer + "\" id=\"" + hint_used + "\" role=\"button\" class=\"flag_hint\" data-rate=\"0\" aria-label=\"report\"><b>!</b></div></p>");
+            $('#hintstoshow'+student_answer).append("<p \" id =\"thisparagraph" + hint_used + "\">" + "<div data-value=\"" + student_answer + "\" id=\"" + hint_used + "\" role=\"button\" class=\"upvote_hint\" data-rate=\"1\" data-icon=\"arrow-u\"  aria-label=\"upvote\"><b>↑</b></div><div> <span class = \"" + hint_used + "rating\" > </span>" + hint_used + "</div> <div data-value=\"" + student_answer + "\" id=\"" + hint_used + "\" role=\"button\" class=\"downvote_hint\" data-rate=\"-1\" aria-label=\"downvote\"><b>↓</b></div> </p>");
+          //<div data-value=\"" + student_answer + "\" id=\"" + hint_used + "\" role=\"button\" class=\"flag_hint\" data-rate=\"0\" aria-label=\"report\"><b>!</b></div>
+          $.ajax({
+              type: "POST",
+              url: runtime.handlerUrl(element, 'get_ratings'),
+              data: JSON.stringify({"student_answer": student_answer, "hint_used": hint_used}),
+              success: show_ratings
+          });
             HintShown.push(index);
           }else{
               $('#hintstoshow'+student_answer).empty();
-              console.log('index id is:' + hint_used);
               $('#hintstoshow'+student_answer).append("<p id=\"hintstoshow" + student_answer + "\"data-value=\"" + student_answer + "\"> <b>No hints exist in the database. (You received a default hint)</p> <p id=\"" + hint_used + "\"data-value=\"" + student_answer + "\" </p>");
           }
         });
     }
 
+    function show_ratings(result) {
+        $.each(result, function(index, value) {
+        $("."+index+"rating").prepend(value + " ");})
+    }
+
     $(document).on('click', '.submitbutton', function(){ //upvote
         issubmittinghint = 0;
         issubmitting += 1;
@@ -158,7 +168,6 @@ function CrowdXBlock(runtime, element){
               answerdata = $('.math').attr('id');
           });
           $('.submitbutton').show();
-          console.log('valueidworks' + valueid);
           $.ajax({
               type: "POST",
               url: runtime.handlerUrl(element, 'give_hint'),
@@ -227,7 +236,6 @@ function CrowdXBlock(runtime, element){
         canhint = 1;
         $('.Thankyou', element).text("Thankyou for your help!");
         idtouse = String('thisparagraph' + result.used_hint);
-        console.log(idtouse)
         hint_rating = result.rating;
         if(result.rating == "zzeerroo"){
             hint_rating = 0;