slightly improved UX

crowdsourcehinter/static/css/crowdsourcehinter.css

@@ -8,6 +8,15 @@
   padding-bottom: 2px;
 }
 
+.csh_reveal_info{
+  color: blue;
+}
+
+.csh_reveal_info:hover{
+  color: blue;
+  text-decoration: underline;
+}
+
 .csh_hint_value{
   display: flex;
   /* margin-left: 10px; */
@@ -118,6 +127,10 @@ div[data-rate="report"]{
     visibility: visible;
 }
 
+.csh_user_info{
+  padding-left: 22px ;
+  text-indent: -22px ;
+}
 .csh_rating{
     margin-right: 5px;
 }
@@ -127,6 +140,8 @@ div[data-rate="report"]{
 .csh_staff_rate{ cursor: pointer }
 .csh_rate_hint{ color: #948f8f; }
 
+.csh_reveal_info{ cursor: pointer }
+
 .csh_hintsarea {
   display: flex;
   flex-direction: colomn;

crowdsourcehinter/static/html/crowdsourcehinter.html

@@ -40,15 +40,17 @@
 </script>
 
 <script type="x-tmpl/mustache" id="show_no_hints">
-    <div class="csh_hint_value">Submit a hint for this incorrect answer to help future students!
+    <div class="csh_hint_value"> This specific mistake doesn't appear to have any hints yet. You can contribute a hint to help other students who make the same mistake in the future.
     </div>
 </script>
 
 <script type="x-tmpl/mustache" id="show_student_submission">
     <div class="csh_student_answer">
         <h class="csh_answer_text" answer={{answer}}>
-        <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 role="button" class="csh_reveal_info">Help us improve hints for this problem </div>
+        <div class="csh_user_info" style="display: none;"> <br> Submitting an incorrect answer for this problem provides you with a hint specific to the mistake that you made - these hints are made by other students who made the same mistake as you did. Help to make the hints for this problem better by rating the hint that you received, or if you might have better advice to give other students, submit a new hint! <br> If you choose to submit a new hint, keep in mind that the hints are specific to one incorrect answer; specific advice (perhaps on some aspect of the problem that you overlooked) is more helpful than generic advice.</div>
+        <br>
+        Your original answer was: <b>{{answer}}</b></h>
     </div>
 </script>
 
@@ -66,7 +68,7 @@
     </div>
     <div class='csh_hint_rating_on_incorrect'>
         <div class="csh_rate_hint_text">
-            Rate this hint: 
+            This hint was: 
         </div>
         <div role="button" class="csh_rate_hint" data-rate="upvote" title="This hint was helpful!">
             <b> Helpful </b>

crowdsourcehinter/static/js/src/crowdsourcehinter.js

@@ -200,7 +200,7 @@ function CrowdsourceHinter(runtime, element, data){
         $(createTextInputButtonHTML.currentTarget).hide();
         student_answer = $('.csh_answer_text', element).attr('answer');
         var hintTextInputTemplate = $(Mustache.render($('#hint_text_input').html(), {student_answer: student_answer}));
-        $('.csh_answer_text', element).append(hintTextInputTemplate);
+        $('.csh_hint_value', element).append(hintTextInputTemplate);
     }}
     $(element).on('click', '.csh_student_hint_creation', createHintContributionTextInput($(this)));
 
@@ -221,11 +221,12 @@ function CrowdsourceHinter(runtime, element, data){
                 url: runtime.handlerUrl(element, 'add_new_hint'),
                 data: JSON.stringify({"submission": newHint, "answer": studentAnswer}),
                 success: function() {
+                    $('.csh_student_text_input', element).attr('style', 'display: none;');
+                    $(submitHintButtonHTML.currentTarget).attr('style', 'display: none;');
+                    $('.csh_hint_value', element).append("Thankyou!");
                     Logger.log('crowd_hinter.submitNewHint', {"student_answer": studentAnswer, "new_hint_submission": newHint})
                 }
             });
-            $('.csh_student_text_input', element).remove();
-            $(submitHintButtonHTML.currentTarget).remove();
         }
     }}
     $(element).on('click', '.csh_submit_new', submitNewHint($(this)));
@@ -298,4 +299,12 @@ function CrowdsourceHinter(runtime, element, data){
     }}
     $(element).on('click', '.csh_staff_rate', staffRateHint($(this)));
 
+    $(element).on('click', '.csh_reveal_info', function(){
+        if($('.csh_user_info', element).attr('style') == "display: none;"){
+            $('.csh_user_info', element).attr('style', "display: block;")
+        }else{
+            $('.csh_user_info', element).attr('style', "display: none;")
+        }
+    })
+
 }