various improvements, in progress

crowdsourcehinter/static/css/crowdsourcehinter.css

@@ -19,13 +19,14 @@
 
 .csh_hint_reveal{
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .csh_hint_rating_on_incorrect{
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: space-between;
 }
 
 .csh_hint_data{
@@ -40,9 +41,8 @@
 }
 
 .csh_rate_hint, .csh_report_hint, .csh_rate_hint_completed, .csh_rate_hint_text {
-  margin-right: 15px;
-  margin-top: 5px;
   align-self: flex-end;
+  margin-left: 10px;
 }
 
 div[data-rate="report"]{

crowdsourcehinter/static/html/crowdsourcehinter.html

@@ -69,13 +69,13 @@
             Rate this hint: 
         </div>
         <div role="button" class="csh_rate_hint" data-rate="upvote" title="This hint was helpful!">
-            <b>Helpful</b>
+            <b> Helpful </b>
         </div>
         <div role="button" class="csh_rate_hint" data-rate="downvote" title="This hint was not very helpful.">
-            <b>Unhelpful</b>
+            <b> Unhelpful </b>
         </div>
         <div role="button" class="csh_report_hint" title="Report this hint">
-            <b>⚑</b>
+            <b> ⚑ </b>
         </div>
     </div>
 </div>

crowdsourcehinter/static/js/src/crowdsourcehinter.js

@@ -78,8 +78,7 @@ function CrowdsourceHinter(runtime, element, data){
      * @param data is generated by problem_graded event, contains status and data of the problem block
      */
     function onStudentSubmission(){ return function(event_type, data, element){
-        //search method of correctness of problem is brittle due to checking for a class within
-        //the problem block.
+        //search method of correctness of problem is brittle
         if (checkIsAnswerCorrect(data)){
             startHintRating();
         } else { //if the submitted answer is incorrect
@@ -112,6 +111,7 @@ function CrowdsourceHinter(runtime, element, data){
         $('.csh_answer_text', element).append(hintRatingUXTemplate);
         var hintCreationTemplate = $(Mustache.render($('#add_hint_creation').html(), {}));
         $('.csh_answer_text', element).append(hintCreationTemplate);
+        Logger.log("crowd_hinter.hint_rating_UX", {"hint": hint, "student_answer": student_answer});
     }
 
     /**
@@ -166,6 +166,7 @@ function CrowdsourceHinter(runtime, element, data){
                     $('.csh_student_answer', element).append(noHintsTemplate);
                     var hintCreationTemplate = $(Mustache.render($('#add_hint_creation').html(), {}));
                     $('.csh_student_answer', element).append(hintCreationTemplate);
+                    Logger.log("crowd_hinter.hint_rating_UX", {"hint": "null", "student_answer": student_answer});
                 } else {
                     showStudentHintRatingUX(hint, student_answer);
                 }
@@ -209,7 +210,7 @@ function CrowdsourceHinter(runtime, element, data){
                 url: runtime.handlerUrl(element, 'add_new_hint'),
                 data: JSON.stringify({"submission": newHint, "answer": studentAnswer}),
                 success: function() {
-                    Logger.log('crowd_hinter.submit_new.click.event', {"student_answer": studentAnswer, "new_hint_submission": newHint})
+                    Logger.log('crowd_hinter.submit_new_hint', {"student_answer": studentAnswer, "new_hint_submission": newHint})
                 }
             });
             $('.csh_student_text_input', element).remove();