MRQ: Add message popup to MRQ, upon any click on submit

mentoring/mrq.py

@@ -78,6 +78,7 @@ class MRQBlock(QuestionnaireAbstractBlock):
             'submissions': submissions,
             'completed': completed,
             'choices': results,
+            'message': self.message,
         }
         log.debug(u'MRQ submissions result: %s', result)
         return result

mentoring/public/css/questionnaire.css

@@ -30,7 +30,8 @@
     cursor: pointer;
 }
 
-.mentoring .choices .choice-tips {
+.mentoring .choices .choice-tips,
+.mentoring .choices .choice-message {
     display: none;
     color: #fff;
     position: absolute;
@@ -51,11 +52,13 @@
     font-family: arial;
 }
 
-.mentoring .choices .choice-tips .tip-choice-group {
+.mentoring .choices .choice-tips .tip-choice-group,
+.mentoring .choices .choice-message .message-content {
     position: relative;
 }
 
-.mentoring .choices .choice-tips .tip-choice-group .close {
+.mentoring .choices .choice-tips .close,
+.mentoring .choices .choice-message .close {
     background-image: url({{ close_icon_url }});
     cursor: pointer;
     position: absolute;

mentoring/public/js/questionnaire.js

@@ -36,18 +36,34 @@ function MRQBlock(runtime, element) {
         },
 
         handleSubmit: function(result) {
+            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();
+                        choiceTipsDOM.hide();
+                    });
+                };
+
+            if (result.message) {
+                messageDOM.html('<div class="message-content"><div class="close"></div>' + 
+                                result.message + '</div>');
+                showPopup(messageDOM);
+            }
+
             $.each(result.choices, function(index, choice) {
                 var choiceInputDOM = $('.choice input[value='+choice.value+']', element),
                     choiceDOM = choiceInputDOM.closest('.choice'),
                     choiceResultDOM = $('.choice-result', choiceDOM),
                     choiceTipsDOM = $('.choice-tips', choiceDOM),
-                    choiceTipsCloseDOM,
-                    clearPopupEvents;
-
-                clearPopupEvents = function() {
-                    $('.choice-tips', element).hide();
-                    $('.choice-tips .close').off('click');
-                };
+                    choiceTipsCloseDOM;
 
                 if (choice.completed) {
                     choiceResultDOM.removeClass('incorrect').addClass('correct');
@@ -59,13 +75,7 @@ function MRQBlock(runtime, element) {
 
                 choiceTipsCloseDOM = $('.close', choiceTipsDOM);
                 choiceResultDOM.off('click').on('click', function() {
-                    clearPopupEvents();
-                    choiceTipsDOM.show();
-
-                    choiceTipsCloseDOM.on('click', function() {
-                        clearPopupEvents();
-                        choiceTipsDOM.hide();
-                    });
+                    showPopup(choiceTipsDOM);
                 });
             });
         }

mentoring/questionnaire.py

@@ -50,6 +50,7 @@ class QuestionnaireAbstractBlock(LightChild):
     """
     type = String(help="Type of questionnaire", scope=Scope.content, default="choices")
     question = String(help="Question to ask the student", scope=Scope.content, default="")
+    message = String(help="General feedback provided when submiting", scope=Scope.content, default="")
 
     valid_types = ('choices')
 
@@ -57,8 +58,10 @@ class QuestionnaireAbstractBlock(LightChild):
     def init_block_from_node(cls, block, node, attr):
         block.light_children = []
         for child_id, xml_child in enumerate(node):
-            if xml_child.tag == "question":
+            if xml_child.tag == 'question':
                 block.question = xml_child.text
+            elif xml_child.tag == 'message' and xml_child.get('type') == 'on-submit':
+                block.message = (xml_child.text or '').strip()
             else:
                 cls.add_node_as_child(block, xml_child, child_id)
 

mentoring/templates/html/mrqblock_choices.html

@@ -10,5 +10,6 @@
       <div class="choice-tips"></div>
     </div>
     {% endfor %}
+    <div class="choice-message"></div>
   </div>
 </fieldset>

mentoring/templates/xml/mentoring_default.xml

@@ -35,6 +35,8 @@
         <tip require="gracefulness">This MRQ is indeed very graceful</tip>
         <tip require="elegance,beauty">This is something everyone has to like about this MRQ</tip>
         <tip reject="bugs">Nah, there isn't any!</tip>
+
+        <message type="on-submit">Thank you for answering!</message>
     </mrq>
 
     <message type="completed">