fix: quiz card layout

school/lms/md.py

@@ -105,7 +105,7 @@ def sanitize_html(html, macro):
     any broken tags. This makes sures that all those things are fixed
     before passing to the etree parser.
     """
-    soup = BeautifulSoup(html, features="lxml")
+    soup = BeautifulSoup(html, features="html5lib")
     nodes = soup.body.children
     classname = ""
     if macro == "YouTubeVideo":

school/public/css/style.css

@@ -824,10 +824,15 @@ input[type=checkbox] {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-top: 5rem;
 }
 
 .question {
   flex-direction: column;
+}
+
+.question-card {
+  flex-direction: column;
   padding: 1.25rem;
 }
 
@@ -1721,6 +1726,7 @@ pre {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 2rem;
 }
 
 .question-number {

school/templates/quiz.html

@@ -2,12 +2,12 @@
 
 <div class="card-divider"></div>
 
-<div class="">
+<div class="common-card-style question-card">
   <form id="quiz-form">
     <div class="questions">
       {% for question in quiz.questions %}
       {% set instruction = _("Choose all answers that apply") if question.multiple else _("Choose 1 answer") %}
-      <div class="question common-card-style {% if loop.index == 1 %} active-question {% else %} hide {% endif %}"
+      <div class="question {% if loop.index == 1 %} active-question {% else %} hide {% endif %}"
         data-question="{{ question.question }}" data-multi="{{ question.multiple}}" data-qt-index="{{ loop.index }}">
         <div class="question-header">
           <div class="question-number">{{ loop.index }}</div>
@@ -22,22 +22,22 @@
         {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
         {% for option in options %}
         {% if option %}
+        <div class="mb-2">
+          <div class="custom-checkbox">
+            <label class="quiz-label">
+              <div class="course-meta font-weight-bold ml-3"> {{ convert_number_to_character(loop.index - 1) }}</div>
+              <input class="option" value="{{ option | urlencode }}"
+                data-correct="{{ question['is_correct_' + loop.index | string] }}" {% if question.multiple %}
+                type="checkbox" {% else %} type="radio" name="{{ question.question | urlencode }}" {% endif %}>
+              <div class="option-text">{{ frappe.utils.md_to_html(option) }}</div>
+            </label>
+          </div>
 
-        <div class="custom-checkbox">
+          {% set explanation = question['explanation_' + loop.index | string] %}
-          <label class="quiz-label">
+          {% if explanation %}
-            <div class="course-meta font-weight-bold"> {{ convert_number_to_character(loop.index - 1) }}</div>
+          <small class="explanation muted-text hide">{{ explanation }}</small>
-            <input class="option" value="{{ option | urlencode }}"
+          {% endif %}
-              data-correct="{{ question['is_correct_' + loop.index | string] }}" {% if question.multiple %}
-              type="checkbox" {% else %} type="radio" name="{{ question.question | urlencode }}" {% endif %}>
-            <div class="option-text">{{ frappe.utils.md_to_html(option) }}</div>
-          </label>
         </div>
-
-        {% set explanation = question['explanation_' + loop.index | string] %}
-        {% if explanation %}
-        <small class="explanation muted-text hide">{{ explanation }}</small>
-        {% endif %}
-
         {% endif %}
         {% endfor %}
 

school/www/batch/learn.html

@@ -108,7 +108,7 @@
   {% set progress = get_progress(course.name, lesson.name) %}
   <div class="custom-checkbox {% if progress == 'Complete' %} hide {% endif %}">
     <label class="quiz-label">
-      <input class="option mark-progress" type="checkbox" checked>
+      <input class="mark-progress" type="checkbox" checked>
       <img class="empty-checkbox" />
       <span class="small">{{ _("Mark as complete on moving to the next lesson") }}</span>
     </label>