Merge pull request #139 from open-craft/fix-long-choices

Fix display of MCQ/MRQ choices with long text.

problem_builder/public/css/questionnaire.css

@@ -2,19 +2,23 @@
     display: table;
     position: relative;
     width: 100%;
-    border-spacing: 0 6px;
+    border-spacing: 0 2px;
     padding-top: 10px;
     margin-bottom: 10px;
 }
 
 .mentoring .questionnaire .choice-result {
-    display: inline-block;
+    display: table-cell;
     width: 34px;
     vertical-align: top;
     cursor: pointer;
     float: none;
 }
 
+.mentoring div[data-block-type=pb-mrq] .questionnaire .choice-result {
+    display: inline-block;
+}
+
 .mentoring .questionnaire .choice {
     overflow-y: hidden;
     display: table-row;
@@ -78,7 +82,13 @@
 }
 
 .mentoring .choices-list .choice-selector {
-    display: inline-block;
+    display: table-cell;
+}
+
+.mentoring .choices-list .choice-label-text {
+    display: table-cell;
+    padding-left: 0.4em;
+    padding-right: 0.4em;
 }
 
 .mentoring .choice-tips-container,

problem_builder/public/js/questionnaire.js

@@ -221,7 +221,9 @@ function MRQBlock(runtime, element) {
                 display_message(result.message, messageView, options.checkmark);
             }
 
-            $.each(result.choices, function(index, choice) {
+            // If user has never submitted an answer for this MRQ, `result` will be empty.
+            // So we need to fall back on an empty list for `result.choices` to avoid errors in the next step:
+            $.each(result.choices || [], function(index, choice) {
                 var choiceInputDOM = $('.choice input[value='+choice.value+']', element);
                 var choiceDOM = choiceInputDOM.closest('.choice');
                 var choiceResultDOM = $('.choice-result', choiceDOM);

problem_builder/templates/html/mcqblock.html

@@ -8,15 +8,17 @@
     {% for choice in custom_choices %}
     <div class="choice" aria-live="polite" aria-atomic="true">
       <label class="choice-label"
-        aria-describedby="feedback_{{ self.html_id }} choice_tips_{{ self.html_id }}-{{ forloop.counter }}">
-        <div class="choice-result fa icon-2x" aria-label=""
-          data-label_correct="{% trans "Correct" %}" data-label_incorrect="{% trans "Incorrect" %}"></div>
-        <div class="choice-selector">
+             aria-describedby="feedback_{{ self.html_id }} choice_tips_{{ self.html_id }}-{{ forloop.counter }}">
+        <span class="choice-result fa icon-2x"
+              aria-label=""
+              data-label_correct="{% trans "Correct" %}"
+              data-label_incorrect="{% trans "Incorrect" %}"></span>
+        <span class="choice-selector">
           <input type="radio" name="{{ self.name }}" value="{{ choice.value }}"
             {% if self.student_choice == choice.value and not hide_prev_answer %} checked{% endif %}
           />
-        </div>
-        {{ choice.content|safe }}
+        </span>
+        <span class="choice-label-text">{{ choice.content|safe }}</span>
       </label>
       <div class="choice-tips-container">
         <div class="choice-tips" id="choice_tips_{{ self.html_id }}-{{ forloop.counter }}"></div>

problem_builder/templates/html/mrqblock.html

@@ -8,17 +8,20 @@
   <div class="choices-list">
     {% for choice in custom_choices %}
     <div class="choice" aria-live="polite" aria-atomic="true">
-      <div class="choice-result fa icon-2x" id="result_{{ self.html_id }}-{{ forloop.counter }}" aria-label=""
-        data-label_correct="{% trans "Correct" %}" data-label_incorrect="{% trans "Incorrect" %}"></div>
+      <div class="choice-result fa icon-2x"
+           id="result_{{ self.html_id }}-{{ forloop.counter }}"
+           aria-label=""
+           data-label_correct="{% trans "Correct" %}"
+           data-label_incorrect="{% trans "Incorrect" %}"></div>
       <label class="choice-label" aria-describedby="feedback_{{ self.html_id }}
                                                     result_{{ self.html_id }}-{{ forloop.counter }}
                                                     choice_tips_{{ self.html_id }}-{{ forloop.counter }}">
-        <div class="choice-selector">
+        <span class="choice-selector">
           <input type="checkbox" name="{{ self.name }}" value="{{ choice.value }}"
              {% if choice.value in self.student_choices and not hide_prev_answer %} checked{% endif %}
           />
-        </div>
-        {{ choice.content|safe }}
+        </span>
+        <span class="choice-label-text">{{ choice.content|safe }}</span>
       </label>
       <div class="choice-tips-container">
         <div class="choice-tips" id="choice_tips_{{ self.html_id }}-{{ forloop.counter }}"></div>

problem_builder/templates/html/ratingblock.html

@@ -8,17 +8,19 @@
     {% for i in '12345' %}
     <div class="choice" aria-live="polite" aria-atomic="true">
       <label class="choice-label"
-        aria-describedby="feedback_{{ self.html_id }} choice_tips_{{ self.html_id }}-{{ i }}">
-        <div class="choice-result fa icon-2x" aria-label=""
-          data-label_correct="{% trans "Correct" %}" data-label_incorrect="{% trans "Incorrect" %}"></div>
-        <div class="choice-selector">
+             aria-describedby="feedback_{{ self.html_id }} choice_tips_{{ self.html_id }}-{{ i }}">
+        <span class="choice-result fa icon-2x" aria-label=""
+              data-label_correct="{% trans "Correct" %}" data-label_incorrect="{% trans "Incorrect" %}"></span>
+        <span class="choice-selector">
           <input type="radio" name="{{ self.name }}" value="{{i}}"
             {% if self.student_choice == i and not hide_prev_answer %} checked{%else%} data-student-choice='{{self.student_choice}}'{% endif %}
           />
+        </span>
+        <span class="choice-label-text">
           {{i}}
           {% if i == '1' %} - {{ self.low|safe }}{% endif %}
           {% if i == '5' %} - {{ self.high|safe }}{% endif %}
-        </div>
+        </span>
       </label>
       <div class="choice-tips-container">
         <div class="choice-tips" id="choice_tips_{{ self.html_id }}-{{ i }}"></div>
@@ -29,15 +31,15 @@
     {% for choice in custom_choices %}
     <div class="choice" aria-live="polite" aria-atomic="true">
       <label class="choice-label"
-        aria-describedby="feedback_{{ self.html_id }} choice_tips_{{ self.html_id }}-{{ forloop.counter }}">
-        <div class="choice-result fa icon-2x" aria-label=""
-          data-label_correct="{% trans "Correct" %}" data-label_incorrect="{% trans "Incorrect" %}"></div>
-        <div class="choice-selector">
+             aria-describedby="feedback_{{ self.html_id }} choice_tips_{{ self.html_id }}-{{ forloop.counter }}">
+        <span class="choice-result fa icon-2x" aria-label=""
+              data-label_correct="{% trans "Correct" %}" data-label_incorrect="{% trans "Incorrect" %}"></span>
+        <span class="choice-selector">
           <input type="radio" name="{{ self.name }}" value="{{ choice.value }}"
             {% if self.student_choice == choice.value and not hide_prev_answer %} checked{%else%} data-student-choice='{{self.student_choice}}'{% endif %}
           />
-        </div>
-        {{ choice.content|safe }}
+        </span>
+        <span class="choice-label-text">{{ choice.content|safe }}</span>
       </label>
       <div class="choice-tips-container">
         <div class="choice-tips" id="choice_tips_{{ self.html_id }}-{{ forloop.counter }}"></div>