Display the right/wrong icons and tips the same way we do for MRQs

mentoring/mcq.py

@@ -53,32 +53,41 @@ class MCQBlock(QuestionnaireAbstractBlock):
         log.debug(u'Received MCQ submission: "%s"', submission)
 
         completed = True
-        tips_fragments = []
-        for tip in self.get_tips():
-            completed = completed and self.is_tip_completed(tip, submission)
-            if submission in tip.display_with_defaults:
-                tips_fragments.append(tip.render())
-
-        if self.type == 'rating':
-            formatted_tips = render_template('templates/html/tip_question_group.html', {
-                'self': self,
-                'tips_fragments': tips_fragments,
-                'submission': submission,
-                'submission_display': self.get_submission_display(submission),
-            })
-        else:
-            formatted_tips = render_template('templates/html/tip_choice_group.html', {
-                'self': self,
-                'tips_fragments': tips_fragments,
-                'completed': completed,
-            })
+        tips = []
+
+        for choice in self.custom_choices:
+            choice_tips_fragments = []
+            for tip in self.get_tips():
+                completed = completed and self.is_tip_completed(tip, submission)
+                if choice.value in tip.display_with_defaults:
+                    choice_tips_fragments.append(tip.render())
+
+            if self.type == 'choices':
+                tips.append({
+                    'choice': choice.value,
+                    'tips': render_template('templates/html/tip_choice_group.html', {
+                        'self': self,
+                        'tips_fragments': choice_tips_fragments,
+                        'completed': completed,
+                    })
+                })
+            else:
+                tips.append({
+                    'choice': choice.value,
+                    'tips': render_template('templates/html/tip_question_group.html', {
+                        'self': self,
+                        'tips_fragments': choice_tips_fragments,
+                        'submission': submission,
+                        'submission_display': self.get_submission_display(submission),
+                    })
+                })
 
         self.student_choice = submission
         result = {
             'type': self.type,
             'submission': submission,
             'completed': completed,
-            'tips': formatted_tips,
+            'tips': tips,
         }
         log.debug(u'MCQ submission result: %s', result)
         return result

mentoring/public/css/questionnaire.css

@@ -59,7 +59,7 @@
 }
 
 .mentoring .choices .choice-tips .tip-choice-group,
-.mentoring .choices .choice-message .message-content {
+.mentoring .choices .choice-message > div {
     position: relative;
 }
 

mentoring/public/js/questionnaire.js

@@ -14,14 +14,47 @@ function MCQBlock(runtime, element) {
         },
 
         handleSubmit: function(result) {
+
           if (result.type == 'rating') {
-            var tipsDom = $(element).parent().find('.messages'),
-                tipHtml = (result || {}).tips || '';
+            if (_.size(result.tips) > 0) {
+              var tipsDom = $(element).parent().find('.messages'),
+                  tipHtml = result.tips[0].tips || '';
 
-            if(tipHtml)
-              tipsDom.append(tipHtml);
+              if(tipHtml)
+                  tipsDom.append(tipHtml);
+            }
           }
           else { // choices
+
+            var choiceInputs = $('.choice input', element);
+            $.each(choiceInputs, function(index, choiceInput) {
+                var choiceInputDOM = $(choiceInput),
+                    choiceDOM = choiceInputDOM.closest('.choice'),
+                    choiceResultDOM = $('.choice-result', choiceDOM),
+                    choiceTipsDOM = $('.choice-tips', choiceDOM),
+                    choiceTipsCloseDOM;
+
+                choiceResultDOM.removeClass('incorrect icon-exclamation correct icon-ok');
+                if (result.completed && choiceInputDOM.val() == result.submission) {
+                    choiceResultDOM.addClass('correct icon-ok');
+                }
+                else if (choiceInputDOM.val() == result.submission || _.isNull(result.submission)) {
+                    choiceResultDOM.addClass('incorrect icon-exclamation');
+                }
+
+              var tips = _.find(result.tips, function(obj) {
+                           return obj.choice == choiceInputDOM.val();
+                         });
+              if (tips) {
+                  choiceTipsDOM.html(tips.tips);
+              }
+
+              choiceTipsCloseDOM = $('.close', choiceTipsDOM);
+                choiceResultDOM.off('click').on('click', function() {
+                    showPopup(choiceTipsDOM);
+                });
+            });
+
             var messageDOM = $('.choice-message', element),
                 allPopupsDOM = $('.choice-tips, .choice-message', element),
                 clearPopupEvents = function() {
@@ -43,8 +76,15 @@ function MCQBlock(runtime, element) {
                 showPopup(messageDOM);
             }
             else if (result.tips) {
-                messageDOM.html(result.tips);
-                showPopup(messageDOM);
+                var tips = _.find(result.tips, function(obj) {
+                               return obj.choice == result.submission;
+                           });
+                if (tips) {
+                    messageDOM.html(tips.tips);
+                    showPopup(messageDOM);
+                } else {
+                    clearPopupEvents();
+                }
             }
           }
         }

mentoring/templates/html/mcqblock_choices.html

@@ -3,12 +3,12 @@
   <div class="choices-list">
     {% for choice in custom_choices %}
     <div class="choice">
-      <span class="choice-result"></span>
+      <span class="choice-result icon-2x"></span>
       <label class="choice-label">
         <input class="choice-selector" type="radio" name="{{ self.name }}" value="{{ choice.value }}"{% if self.student_choice == choice.value %} checked{% endif %}> {{ choice.content }}
       </label>
+      <div class="choice-tips"></div>
     </div>
-    <div class="choice-tips"></div>
     {% endfor %}
     <div class="choice-message"></div>
   </div>