Display MCQ Rating the same way than choices

mentoring/mcq.py

@@ -62,29 +62,17 @@ class MCQBlock(QuestionnaireAbstractBlock):
                 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),
-                    })
+            tips.append({
+                'choice': choice.value,
+                'tips': render_template('templates/html/tip_choice_group.html', {
+                    'self': self,
+                    'tips_fragments': choice_tips_fragments,
+                    'completed': completed,
                 })
+            })
 
         self.student_choice = submission
         result = {
-            'type': self.type,
             'submission': submission,
             'completed': completed,
             'tips': tips,

mentoring/public/css/questionnaire.css

-.mentoring .rating .choices-list {
-    margin: 5px 0 10px;
-}
-
-.mentoring .choices .choices-list {
+.mentoring .questionnaire .choices-list {
     position: relative;
     padding-top: 10px;
+    margin-bottom: 10px;
 }
 
-.mentoring .choices .choice {
+.mentoring .questionnaire .choice {
     margin: 10px 0;
 }
 
@@ -17,27 +14,28 @@
     margin-bottom: 5px;
 }
 
-.mentoring .choices .choice-result {
+.mentoring .questionnaire .choice-result {
     display: inline-block;
     width: 40px;
     vertical-align: middle;
     cursor: pointer;
 }
 
-.mentoring .choices .choice-result.correct, .choice-answer.correct {
+.mentoring .questionnaire .choice-result.correct,
+.mentoring .questionnaire .choice-answer.correct {
     cursor: pointer;
     color: #006600;
     position: relative;
     top: -3px;
 }
 
-.mentoring .choices .choice-result.incorrect {
+.mentoring .questionnaire .choice-result.incorrect {
     text-align:center;
     color: #ff0000;
 }
 
-.mentoring .choices .choice-tips,
-.mentoring .choices .choice-message {
+.mentoring .questionnaire .choice-tips,
+.mentoring .questionnaire .choice-message {
     display: none;
     color: #fff;
     position: absolute;
@@ -52,20 +50,20 @@
     width: 300px;
 }
 
-.mentoring .choices .choice-tips .title {
+.mentoring .questionnaire .choice-tips .title {
     margin: 0 0 5px;
     font-size: 18px;
     font-family: arial;
 }
 
-.mentoring .choices .choice-tips .tip-choice-group,
-.mentoring .choices .choice-message .tip-choice-group,
-.mentoring .choices .choice-message .message-content {
+.mentoring .questionnaire .choice-tips .tip-choice-group,
+.mentoring .questionnaire .choice-message .tip-choice-group,
+.mentoring .questionnaire .choice-message .message-content {
     position: relative;
 }
 
-.mentoring .choices .choice-tips .close,
-.mentoring .choices .choice-message .close {
+.mentoring .questionnaire .choice-tips .close,
+.mentoring .questionnaire .choice-message .close {
     background-image: url({{ close_icon_url }});
     cursor: pointer;
     position: absolute;
@@ -75,18 +73,11 @@
     height: 21px;
 }
 
-.mentoring .choices .choice-tips p {
+.mentoring .questionnaire .choice-tips p,
+.mentoring .questionnaire .choice-message p {
     color: #fff;
 }
 
-.mentoring .choices .choice-message p {
-    color: #fff;
-}
-
-.mentoring .rating .choice {
-    margin-right: 10px;
-}
-
 .mentoring .choices-list .choice-selector {
     margin-right: 5px;
 }

mentoring/public/js/questionnaire.js

@@ -10,10 +10,11 @@ function MessageView(element) {
       $('.close', this.allPopupsDOM).off('click');
     },
     showPopup: function(popupDOM) {
+      var self = this;
       this.clearPopupEvents();
       popupDOM.show();
       popupDOM.on('click', function() {
-        this.clearPopupEvents();
+        self.clearPopupEvents();
       });
     },
     showMessage: function(message) {
@@ -41,17 +42,6 @@ function MCQBlock(runtime, element) {
         },
 
         handleSubmit: function(result) {
-          if (result.type == 'rating') {
-            if (_.size(result.tips) > 0) {
-              var tipsDom = $(element).parent().find('.messages'),
-                  tipHtml = result.tips[0].tips || '';
-
-              if(tipHtml)
-                  tipsDom.append(tipHtml);
-            }
-          }
-          else { // choices
-
             var messageView = MessageView(element);
             var choiceInputs = $('.choice input', element);
             $.each(choiceInputs, function(index, choiceInput) {
@@ -78,7 +68,9 @@ function MCQBlock(runtime, element) {
 
               choiceTipsCloseDOM = $('.close', choiceTipsDOM);
                 choiceResultDOM.off('click').on('click', function() {
-                    messageView.showMessage(choiceTipsDOM);
+                    if (choiceTipsDOM.html() != '') {
+                      messageView.showMessage(choiceTipsDOM);
+                    }
                 });
             });
 
@@ -93,11 +85,10 @@ function MCQBlock(runtime, element) {
                 if (tips) {
                     messageView.showMessage(tips.tips);
                 } else {
-                    clearPopupEvents();
+                    messageView.clearPopupEvents();
                 }
             }
           }
-        }
     };
 }
 

mentoring/templates/html/mcqblock_choices.html

-<fieldset class="choices">
+<fieldset class="choices questionnaire">
   <legend class="question">{{ self.question }}</legend>
   <div class="choices-list">
     {% for choice in custom_choices %}

mentoring/templates/html/mcqblock_rating.html

-<fieldset class="rating">
+<fieldset class="rating questionnaire">
   <legend class="question">{{ self.question }}</legend>
   <div class="choices-list">
-    <span class="low">{{ self.low }}</span>
-    <span class="choice">
+    <div class="choice">
+      <span class="choice-result icon-2x"></span>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="1"{% if self.student_choice == '1' %} checked{% endif %}>1</label>
-    </span>
-    <span class="choice">
+      <span class="low"> - {{ self.low }}</span>
+      <div class="choice-tips"></div>
+    </div>
+    <div class="choice">
+      <span class="choice-result icon-2x"></span>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="2"{% if self.student_choice == '2' %} checked{% endif %}>2</label>
-    </span>
-    <span class="choice">
+      <div class="choice-tips"></div>
+    </div>
+    <div class="choice">
+      <span class="choice-result icon-2x"></span>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="3"{% if self.student_choice == '3' %} checked{% endif %}>3</label>
-    </span>
-    <span class="choice">
+      <div class="choice-tips"></div>
+    </div>
+    <div class="choice">
+      <span class="choice-result icon-2x"></span>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="4"{% if self.student_choice == '4' %} checked{% endif %}>4</label>
-    </span>
-    <span class="choice">
+      <div class="choice-tips"></div>
+    </div>
+    <div class="choice">
+      <span class="choice-result icon-2x"></span>
       <label><input class="choice-selector" type="radio" name="{{ self.name }}" value="5"{% if self.student_choice == '5' %} checked{% endif %}>5</label>
-    </span>
-    <span class="low">{{ self.high }}</span>
+      <span class="low"> - {{ self.high }}</span>
+      <div class="choice-tips"></div>
+    </div>
     {% for choice in custom_choices %}
-    <span class="choice">
+    <div class="choice">
+      <span class="choice-result icon-2x"></span>
       <label><input type="radio" name="{{ self.name }}" value="{{ choice.value }}"{% if self.student_choice == '{{ choice.value }}' %} checked{% endif %}> {{ choice.content }}</label>
-    </span>
+      <div class="choice-tips"></div>
+    </div>
     {% endfor %}
+    <div class="choice-message"></div>
   </div>
 </fieldset>

mentoring/templates/html/mrqblock_choices.html

 <h2 class="problem-header">Multiple Response</h2>
-<fieldset class="choices">
+<fieldset class="choices questionnaire">
   <legend class="question">{{ self.question }}</legend>
   <div class="choices-list">
     {% for choice in custom_choices %}