MCQ choices tips are now displayed in a blue popup like MRQ

mentoring/mcq.py

@@ -59,15 +59,23 @@ class MCQBlock(QuestionnaireAbstractBlock):
             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,
+            })
 
         self.student_choice = submission
         result = {
+            'type': self.type,
             'submission': submission,
             'completed': completed,
             'tips': formatted_tips,

mentoring/public/css/questionnaire.css

@@ -78,6 +78,10 @@
     color: #fff;
 }
 
+.mentoring .choices .choice-message p {
+    color: #fff;
+}
+
 .mentoring .rating .choice {
     margin-right: 10px;
 }

mentoring/public/js/questionnaire.js

@@ -14,12 +14,39 @@ function MCQBlock(runtime, element) {
         },
 
         handleSubmit: function(result) {
+          if (result.type == 'rating') {
             var tipsDom = $(element).parent().find('.messages'),
                 tipHtml = (result || {}).tips || '';
 
-            if(tipHtml) {
+            if(tipHtml)
               tipsDom.append(tipHtml);
           }
+          else { // choices
+            var messageDOM = $('.choice-message', element),
+                allPopupsDOM = $('.choice-tips, .choice-message', element),
+                clearPopupEvents = function() {
+                  allPopupsDOM.hide();
+                  $('.close', allPopupsDOM).off('click');
+                },
+                showPopup = function(popupDOM) {
+                  clearPopupEvents();
+                  popupDOM.show();
+
+                  popupDOM.on('click', function() {
+                    clearPopupEvents();
+                  });
+                };
+
+            if (_.isNull(result.submission)) {
+                messageDOM.html('<div class="message-content"><div class="close"></div>' +
+                                'You have not provided an answer.' + '</div>');
+                showPopup(messageDOM);
+            }
+            else if (result.tips) {
+                messageDOM.html(result.tips);
+                showPopup(messageDOM);
+            }
+          }
         }
     };
 }
@@ -71,7 +98,6 @@ function MRQBlock(runtime, element) {
 
                     popupDOM.on('click', function() {
                       clearPopupEvents();
-                        choiceTipsDOM.hide();
                     });
                 };
 

mentoring/templates/html/mcqblock_choices.html

@@ -8,6 +8,8 @@
         <input class="choice-selector" type="radio" name="{{ self.name }}" value="{{ choice.value }}"{% if self.student_choice == choice.value %} checked{% endif %}> {{ choice.content }}
       </label>
     </div>
+    <div class="choice-tips"></div>
     {% endfor %}
+    <div class="choice-message"></div>
   </div>
 </fieldset>