MRQ: Add skinning of feedback popups next to each response

mentoring/public/css/questionnaire.css

@@ -27,6 +27,39 @@
     cursor: pointer;
 }
 
+.mentoring .choices .choices .choice-tips {
+    display: none;
+    background-color: #0384ce;
+    color: #fff;
+    padding: 20px;
+    position: absolute;
+    width: 600px;
+    margin: 10px 0;
+}
+
+.mentoring .choices .choices .choice-tips .title {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.mentoring .choices .choices .choice-tips .tip-choice-group {
+    position: relative;
+}
+
+.mentoring .choices .choices .choice-tips .tip-choice-group .close {
+    background-image: url({{ close_icon_url }});
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 18px;
+    height: 19px;
+}
+
+.mentoring .choices .choices .choice-tips p {
+    color: #fff;
+}
+
 .mentoring .rating .choices .choice {
     margin-right: 10px;
 }

mentoring/public/js/questionnaire.js

@@ -37,18 +37,36 @@ function MRQBlock(runtime, element) {
 
         handleSubmit: function(result) {
             $.each(result.choices, function(index, choice) {
-                var choice_input_dom = $('.choice input[value='+choice.value+']', element),
-                    choice_dom = choice_input_dom.closest('.choice'),
-                    choice_result_dom = $('.choice-result', choice_dom),
-                    choice_tips_dom = $('.choice-tips', choice_dom);
+                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');
+                };
 
                 if (choice.completed) {
-                    choice_result_dom.removeClass('incorrect').addClass('correct');
+                    choiceResultDOM.removeClass('incorrect').addClass('correct');
                 } else {
-                    choice_result_dom.removeClass('correct').addClass('incorrect');
+                    choiceResultDOM.removeClass('correct').addClass('incorrect');
                 }
 
-                choice_tips_dom.html(choice.tips);
+                choiceTipsDOM.html(choice.tips);
+
+                choiceTipsCloseDOM = $('.close', choiceTipsDOM);
+                choiceResultDOM.off('click').on('click', function() {
+                    clearPopupEvents();
+                    choiceTipsDOM.show();
+
+                    choiceTipsCloseDOM.on('click', function() {
+                        clearPopupEvents();
+                        choiceTipsDOM.hide();
+                    });
+                });
             });
         }
     };

mentoring/questionnaire.py

@@ -86,6 +86,8 @@ class QuestionnaireAbstractBlock(LightChild):
                                                                 'public/img/correct-icon.png'),
             'incorrect_icon_url': self.runtime.local_resource_url(self.xblock_container,
                                                                   'public/img/incorrect-icon.png'),
+            'close_icon_url': self.runtime.local_resource_url(self.xblock_container,
+                                                              'public/img/close.png'),
         }))
         fragment.add_javascript_url(self.runtime.local_resource_url(self.xblock_container,
                                                                     'public/js/questionnaire.js'))

mentoring/templates/html/tip_choice_group.html

 <div class="tip-choice-group">
-  <strong>
+  <div class="close"></div>
+  <div class="title">
     {% if completed %}
       Correct! You have made the right choice.
     {% else %}
       This is not the right choice.
     {% endif %}
-  </strong>
+  </div>
   {% for tip_fragment in tips_fragments %}
     {{ tip_fragment.body_html|safe }}
   {% endfor %}