From dc8ee4214c22c8f6404593909823e5049a577250 Mon Sep 17 00:00:00 2001
From: Jovyn Tan <jovyn.tls@gmail.com>
Date: Fri, 8 Apr 2022 17:44:08 +0800
Subject: [PATCH 1/4] Fix grid for quizzes

---
 docs/userGuide/syntax/questions.md                |  4 ++++
 packages/vue-components/src/questions/QOption.vue | 12 ++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/userGuide/syntax/questions.md b/docs/userGuide/syntax/questions.md
index 13a474b737..36b9e4aa59 100644
--- a/docs/userGuide/syntax/questions.md
+++ b/docs/userGuide/syntax/questions.md
@@ -38,6 +38,10 @@ You can also insert markdown into the **header** or **hint box**, by using the `
 
   <q-option correct reason="Multiply the numbers on the left together and add the leftmost number!">
     96
+    Lorem ipsum dolor 
+If you require more expressive formatting for your header or hint markup, you can use the 
+If you require more expressive formatting for your header or hint markup, you can use the
+If you require more expressive formatting for your header or hint markup, you can use th
   </q-option>
   <q-option reason="Under normal circumstances, this would be correct.">
     19
diff --git a/packages/vue-components/src/questions/QOption.vue b/packages/vue-components/src/questions/QOption.vue
index 8182c61b08..aecd7b564e 100644
--- a/packages/vue-components/src/questions/QOption.vue
+++ b/packages/vue-components/src/questions/QOption.vue
@@ -8,6 +8,7 @@
     @mouseleave="hover = false"
   >
     <div :class="['row', { 'disabled': qState.answered }]">
+      <div class="col-auto p-0">
       <svg viewBox="0 0 100 100" class="radio-svg">
         <circle
           cx="50"
@@ -25,6 +26,7 @@
           fill="dodgerblue"
         />
       </svg>
+      </div>
       <div class="col content">
         <slot></slot>
       </div>
@@ -60,7 +62,7 @@
     @mouseover="hover = true"
     @mouseleave="hover = false"
   >
-    <label :class="['checkbox-label', { 'disabled': qState.answered }]" @click.stop>
+    <label :class="['row', 'checkbox-label', 'm-0', { 'disabled': qState.answered }]" @click.stop>
       <input
         v-model="selected"
         class="checkbox"
@@ -71,7 +73,7 @@
       <div class="col content">
         <slot></slot>
       </div>
-      <div class="col-1">
+      <div class="col-auto">
         <div v-if="qState.answered">
           <i
             v-if="correct"
@@ -175,11 +177,8 @@ export default {
     }
 
     .checkbox-label {
-        display: flex;
-        align-items: center;
         cursor: pointer;
-        margin-bottom: 0;
-        vertical-align: text-bottom;
+        margin: 0;
     }
 
     .form-control {
@@ -202,6 +201,7 @@ export default {
     .radio-svg {
         width: 1em;
         height: 1em;
+        vertical-align: text-top;
     }
 
     .checkbox {

From 1f3b491506f7ddc437347586049c0eb6b3dafa11 Mon Sep 17 00:00:00 2001
From: Jovyn Tan <jovyn.tls@gmail.com>
Date: Fri, 8 Apr 2022 17:48:52 +0800
Subject: [PATCH 2/4] Update tests

---
 .../__snapshots__/Questions.spec.js.snap      | 800 ++++++++++--------
 .../__tests__/__snapshots__/Quiz.spec.js.snap | 276 +++---
 2 files changed, 582 insertions(+), 494 deletions(-)

diff --git a/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap
index 78a2a9b26e..30831c2786 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap
@@ -15,7 +15,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -31,7 +31,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -47,7 +47,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -63,7 +63,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -87,7 +87,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -103,7 +103,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -119,7 +119,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -135,7 +135,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -216,7 +216,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -232,7 +232,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -248,7 +248,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -264,7 +264,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -288,7 +288,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -304,7 +304,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -320,7 +320,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -336,7 +336,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -406,7 +406,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -421,7 +421,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -433,7 +433,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -448,7 +448,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -460,7 +460,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -475,7 +475,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -487,7 +487,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -502,7 +502,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -583,7 +583,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -598,7 +598,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -610,7 +610,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -625,7 +625,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -637,7 +637,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -652,7 +652,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -664,7 +664,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -679,7 +679,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -744,27 +744,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -791,27 +795,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -846,27 +854,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style=""
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style=""
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -893,27 +905,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1005,27 +1021,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1052,27 +1072,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style=""
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style=""
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1107,27 +1131,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1154,27 +1182,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1255,27 +1287,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1298,27 +1334,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style=""
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style=""
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1341,27 +1381,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1384,27 +1428,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1496,27 +1544,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1539,27 +1591,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1582,27 +1638,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1625,27 +1685,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap
index dfa03e04b9..ab6bb825b8 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap
@@ -92,27 +92,31 @@ exports[`Quizzes with 2 questions retry goes back to first 1`] = `
           <div
             class="row"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -136,27 +140,31 @@ exports[`Quizzes with 2 questions retry goes back to first 1`] = `
           <div
             class="row"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -180,27 +188,31 @@ exports[`Quizzes with 2 questions retry goes back to first 1`] = `
           <div
             class="row"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -407,7 +419,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
           class="form-control success"
         >
           <label
-            class="checkbox-label disabled"
+            class="row checkbox-label m-0 disabled"
           >
             <input
               class="checkbox"
@@ -423,7 +435,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
             </div>
              
             <div
-              class="col-1"
+              class="col-auto"
             >
               <div>
                 <i
@@ -440,7 +452,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
           class="form-control danger"
         >
           <label
-            class="checkbox-label disabled"
+            class="row checkbox-label m-0 disabled"
           >
             <input
               class="checkbox"
@@ -456,7 +468,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
             </div>
              
             <div
-              class="col-1"
+              class="col-auto"
             >
               <div>
                 <i
@@ -473,7 +485,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
           class="form-control success"
         >
           <label
-            class="checkbox-label disabled"
+            class="row checkbox-label m-0 disabled"
           >
             <input
               class="checkbox"
@@ -489,7 +501,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
             </div>
              
             <div
-              class="col-1"
+              class="col-auto"
             >
               <div>
                 <i
@@ -590,27 +602,31 @@ exports[`Quizzes with mcq question marked correct shows next button after answer
           <div
             class="row disabled"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style=""
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style=""
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -638,27 +654,31 @@ exports[`Quizzes with mcq question marked correct shows next button after answer
           <div
             class="row disabled"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -686,27 +706,31 @@ exports[`Quizzes with mcq question marked correct shows next button after answer
           <div
             class="row disabled"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"

From 5bd9034c88061bd2fbf53a4687f24a0d18132c24 Mon Sep 17 00:00:00 2001
From: Jovyn Tan <jovyn.tls@gmail.com>
Date: Fri, 8 Apr 2022 17:54:38 +0800
Subject: [PATCH 3/4] Revert test change

---
 docs/userGuide/syntax/questions.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/userGuide/syntax/questions.md b/docs/userGuide/syntax/questions.md
index 36b9e4aa59..13a474b737 100644
--- a/docs/userGuide/syntax/questions.md
+++ b/docs/userGuide/syntax/questions.md
@@ -38,10 +38,6 @@ You can also insert markdown into the **header** or **hint box**, by using the `
 
   <q-option correct reason="Multiply the numbers on the left together and add the leftmost number!">
     96
-    Lorem ipsum dolor 
-If you require more expressive formatting for your header or hint markup, you can use the 
-If you require more expressive formatting for your header or hint markup, you can use the
-If you require more expressive formatting for your header or hint markup, you can use th
   </q-option>
   <q-option reason="Under normal circumstances, this would be correct.">
     19

From 254a670168bdf4715edbbb65014fb1a191595de6 Mon Sep 17 00:00:00 2001
From: Jovyn Tan <jovyn.tls@gmail.com>
Date: Fri, 8 Apr 2022 17:56:06 +0800
Subject: [PATCH 4/4] Linting

---
 .../vue-components/src/questions/QOption.vue  | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/vue-components/src/questions/QOption.vue b/packages/vue-components/src/questions/QOption.vue
index aecd7b564e..7f3246e800 100644
--- a/packages/vue-components/src/questions/QOption.vue
+++ b/packages/vue-components/src/questions/QOption.vue
@@ -9,23 +9,23 @@
   >
     <div :class="['row', { 'disabled': qState.answered }]">
       <div class="col-auto p-0">
-      <svg viewBox="0 0 100 100" class="radio-svg">
-        <circle
-          cx="50"
-          cy="50"
-          r="47"
-          fill="none"
-          stroke="black"
-          stroke-width="4"
-        />
-        <circle
-          v-show="selected"
-          cx="50"
-          cy="50"
-          r="25"
-          fill="dodgerblue"
-        />
-      </svg>
+        <svg viewBox="0 0 100 100" class="radio-svg">
+          <circle
+            cx="50"
+            cy="50"
+            r="47"
+            fill="none"
+            stroke="black"
+            stroke-width="4"
+          />
+          <circle
+            v-show="selected"
+            cx="50"
+            cy="50"
+            r="25"
+            fill="dodgerblue"
+          />
+        </svg>
       </div>
       <div class="col content">
         <slot></slot>
@@ -178,7 +178,6 @@ export default {
 
     .checkbox-label {
         cursor: pointer;
-        margin: 0;
     }
 
     .form-control {