Making question checkmark display question-level feedback + tests

problem_builder/public/css/problem-builder.css

@@ -118,6 +118,10 @@
     margin-right: 10px;
 }
 
+.mentoring .assessment-checkmark.checkmark-clickable {
+    cursor: pointer;
+}
+
 .mentoring .grade .grade-result {
     margin: 20px;
 }

problem_builder/public/js/mentoring_assessment_view.js

@@ -13,6 +13,8 @@ function MentoringAssessmentView(runtime, element, mentoring) {
         checkmark.removeClass('checkmark-correct icon-ok fa-check');
         checkmark.removeClass('checkmark-partially-correct icon-ok fa-check');
         checkmark.removeClass('checkmark-incorrect icon-exclamation fa-exclamation');
+        checkmark.removeClass('checkmark-clickable');
+        checkmark.off('click');
 
         // Clear all selections
         $('input[type=radio], input[type=checkbox]', element).prop('checked', false);
@@ -271,7 +273,8 @@ function MentoringAssessmentView(runtime, element, mentoring) {
         handleResults(response);
         var options = {
             max_attempts: response.max_attempts,
-            num_attempts: response.num_attempts
+            num_attempts: response.num_attempts,
+            checkmark: checkmark
         };
         var result = response.results[1];
         var child = mentoring.steps[active_child];

problem_builder/public/js/questionnaire.js

@@ -192,8 +192,16 @@ function MRQBlock(runtime, element) {
             var messageView = MessageView(element, mentoring);
 
             if (result.message) {
-                messageView.showMessage('<div class="message-content">' + result.message + '</div>'+
-                                        '<div class="close icon-remove-sign fa-times-circle"></div>');
+                var msg = '<div class="message-content">' + result.message + '</div>' +
+                          '<div class="close icon-remove-sign fa-times-circle"></div>';
+                messageView.showMessage(msg);
+                if (options.checkmark) {
+                    options.checkmark.addClass('checkmark-clickable');
+                    options.checkmark.on('click', function(ev) {
+                        ev.stopPropagation();
+                        messageView.showMessage(msg);
+                    })
+                }
             }
 
             var questionnaireDOM = $('fieldset.questionnaire', element);

problem_builder/tests/integration/test_assessment.py

@@ -197,11 +197,11 @@ class MentoringAssessmentTest(MentoringAssessmentBaseTest):
     ):
         question = self.expect_question_visible(number, mentoring)
         self.assert_persistent_elements_present(mentoring)
-        self._selenium_bug_workaround_scroll_to(mentoring, question)
         self.assertIn("What do you like in this MRQ?", mentoring.text)
 
         if extended_feedback:
             self.assert_disabled(controls.submit)
+            self.check_question_feedback(mentoring, question)
             if alternative_review:
                 self.assert_clickable(controls.review_link)
                 self.assert_hidden(controls.try_again)
@@ -213,6 +213,18 @@ class MentoringAssessmentTest(MentoringAssessmentBaseTest):
 
         return question
 
+    def check_question_feedback(self, mentoring, question):
+        question_checkmark = mentoring.find_element_by_css_selector('.assessment-checkmark')
+        question_feedback = question.find_element_by_css_selector(".feedback")
+        self.assertTrue(question_feedback.is_displayed())
+        self.assertEqual(question_feedback.text, "Question Feedback Message")
+
+        question.click()
+        self.assertFalse(question_feedback.is_displayed())
+
+        question_checkmark.click()
+        self.assertTrue(question_feedback.is_displayed())
+
     def multiple_response_question(self, number, mentoring, controls, choice_names, result, last=False):
         question = self.peek_at_multiple_response_question(number, mentoring, controls, last=last)
 
@@ -298,6 +310,7 @@ class MentoringAssessmentTest(MentoringAssessmentBaseTest):
         incorrect_marks = mentoring.find_elements_by_css_selector('.checkmark-incorrect')
         self.assertEqual(len(correct_marks), 5)
         self.assertEqual(len(incorrect_marks), 0)
+
         item_feedbacks = [
             "This is something everyone has to like about this MRQ",
             "This is something everyone has to like about this MRQ",

problem_builder/tests/integration/xml_templates/assessment.xml

@@ -32,7 +32,7 @@
         <pb-tip values='["notwant"]'>Your loss!</pb-tip>
     </pb-rating>
 
-    <pb-mrq name="mrq_1_1" question="What do you like in this MRQ?" required_choices='["gracefulness","elegance","beauty"]'>
+    <pb-mrq name="mrq_1_1" question="What do you like in this MRQ?" required_choices='["gracefulness","elegance","beauty"]' message="Question Feedback Message">
         <pb-choice value="elegance">Its elegance</pb-choice>
         <pb-choice value="beauty">Its beauty</pb-choice>
         <pb-choice value="gracefulness">Its gracefulness</pb-choice>