eat-js-sdk 0.0.45 → 0.0.46

package/dist/eat-prompt-builder.mjs

@@ -5336,7 +5336,8 @@
     currentWordBinIndex: 0,
     currentTabContainer: "",
     lastSelectedTabContainer: "",
-    selectedItemName: ""
+    selectedItemName: "",
+    previewResultSr: ""
   });
 
   // src/lib/assets/img/product/GripVertical.svelte
@@ -5449,7 +5450,7 @@
       }
     };
   }
-  function create_if_block_23(ctx) {
+  function create_if_block_32(ctx) {
     let span;
     let success;
     let current;
@@ -5483,7 +5484,7 @@
       }
     };
   }
-  function create_if_block_15(ctx) {
+  function create_if_block_23(ctx) {
     let span;
     let errorsolid;
     let current;
@@ -5492,7 +5493,7 @@
       c() {
         span = element("span");
         create_component(errorsolid.$$.fragment);
-        attr(span, "class", "text-red-800");
+        attr(span, "class", "text-red-800 preview-icon");
       },
       m(target, anchor) {
         insert(target, span, anchor);
@@ -5517,7 +5518,7 @@
       }
     };
   }
-  function create_if_block5(ctx) {
+  function create_if_block_15(ctx) {
     let span;
     let successsolid;
     let current;
@@ -5526,7 +5527,7 @@
       c() {
         span = element("span");
         create_component(successsolid.$$.fragment);
-        attr(span, "class", "text-green-800");
+        attr(span, "class", "text-green-800 preview-icon");
       },
       m(target, anchor) {
         insert(target, span, anchor);
@@ -5551,6 +5552,40 @@
       }
     };
   }
+  function create_if_block5(ctx) {
+    let span;
+    let gripvertical;
+    let current;
+    gripvertical = new GripVertical_default({});
+    return {
+      c() {
+        span = element("span");
+        create_component(gripvertical.$$.fragment);
+        attr(span, "class", "preview-vertical hidden");
+      },
+      m(target, anchor) {
+        insert(target, span, anchor);
+        mount_component(gripvertical, span, null);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(gripvertical.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(gripvertical.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(span);
+        }
+        destroy_component(gripvertical);
+      }
+    };
+  }
   function create_fragment9(ctx) {
     let button;
     let span0;
@@ -5563,24 +5598,27 @@
     let t2;
     let span2;
     let current_block_type_index;
-    let if_block;
+    let if_block0;
+    let t3;
     let div_class_value;
     let button_aria_label_value;
     let button_class_value;
     let current;
     let mounted;
     let dispose;
-    const if_block_creators = [create_if_block5, create_if_block_15, create_if_block_23, create_else_block3];
+    const if_block_creators = [create_if_block_15, create_if_block_23, create_if_block_32, create_else_block3];
     const if_blocks = [];
     function select_block_type(ctx2, dirty) {
       if (
         /*resultType*/
-        ctx2[1] === ANSWER_CORRECT
+        ctx2[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
+        ctx2[10]
       )
         return 0;
       if (
         /*resultType*/
-        ctx2[1] === ANSWER_INCORRECT
+        ctx2[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
+        ctx2[10]
       )
         return 1;
       if (
@@ -5591,7 +5629,12 @@
       return 3;
     }
     current_block_type_index = select_block_type(ctx, -1);
-    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    let if_block1 = (
+      /*resultType*/
+      (ctx[1] === ANSWER_CORRECT || /*resultType*/
+      ctx[1] === ANSWER_INCORRECT) && create_if_block5(ctx)
+    );
     return {
       c() {
         button = element("button");
@@ -5605,7 +5648,10 @@
         span1 = element("span");
         t2 = space();
         span2 = element("span");
-        if_block.c();
+        if_block0.c();
+        t3 = space();
+        if (if_block1)
+          if_block1.c();
         attr(span0, "class", span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
         (ctx[10] ? "text-white" : ""));
         attr(span1, "class", span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
@@ -5628,8 +5674,9 @@
           ctx[5]
         );
         attr(button, "aria-label", button_aria_label_value = /*resultType*/
-        ctx[1] === ANSWER_CORRECT || /*resultType*/
-        ctx[1] === ANSWER_INCORRECT ? `Student's answer: ${/*word*/
+        (ctx[1] === ANSWER_CORRECT || /*resultType*/
+        ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+        ctx[10] ? `Student's answer: ${/*word*/
         ctx[0]} (${/*resultType*/
         ctx[1]})` : (
           /*resultType*/
@@ -5646,13 +5693,18 @@
         (ctx[10] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
         ctx[9] && !/*disabledClick*/
         ctx[6] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
-        (ctx[1] === ANSWER_CORRECT ? "border-green-800 bg-green-300" : (
+        (ctx[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
+        ctx[10] ? "border-green-800 bg-green-300" : (
           /*resultType*/
-          ctx[1] === ANSWER_INCORRECT ? "border-red-800 bg-red-300" : (
+          ctx[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
+          ctx[10] ? "border-red-800 bg-red-300" : (
             /*resultType*/
             ctx[1] === ANSWER_MISSED ? "border-green-800" : ""
           )
-        )));
+        )) + " " + /*resultType*/
+        ((ctx[1] === ANSWER_CORRECT || /*resultType*/
+        ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+        ctx[10] ? "td:hover:border-gray-800" : ""));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -5664,6 +5716,9 @@
         append(div, t2);
         append(div, span2);
         if_blocks[current_block_type_index].m(span2, null);
+        append(span2, t3);
+        if (if_block1)
+          if_block1.m(span2, null);
         ctx[15](button);
         current = true;
         if (!mounted) {
@@ -5732,14 +5787,37 @@
             if_blocks[previous_block_index] = null;
           });
           check_outros();
-          if_block = if_blocks[current_block_type_index];
-          if (!if_block) {
-            if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-            if_block.c();
+          if_block0 = if_blocks[current_block_type_index];
+          if (!if_block0) {
+            if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+            if_block0.c();
           } else {
           }
-          transition_in(if_block, 1);
-          if_block.m(span2, null);
+          transition_in(if_block0, 1);
+          if_block0.m(span2, t3);
+        }
+        if (
+          /*resultType*/
+          ctx[1] === ANSWER_CORRECT || /*resultType*/
+          ctx[1] === ANSWER_INCORRECT
+        ) {
+          if (if_block1) {
+            if (dirty & /*resultType*/
+            2) {
+              transition_in(if_block1, 1);
+            }
+          } else {
+            if_block1 = create_if_block5(ctx);
+            if_block1.c();
+            transition_in(if_block1, 1);
+            if_block1.m(span2, null);
+          }
+        } else if (if_block1) {
+          group_outros();
+          transition_out(if_block1, 1, 1, () => {
+            if_block1 = null;
+          });
+          check_outros();
         }
         if (!current || dirty & /*currentSelectedItemId, disabledClick*/
         576 && div_class_value !== (div_class_value = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon " + (!/*currentSelectedItemId*/
@@ -5765,10 +5843,11 @@
             ctx[5]
           );
         }
-        if (!current || dirty & /*resultType, word, isWordItemSelected*/
+        if (!current || dirty & /*resultType, isWordItemSelected, word*/
         1027 && button_aria_label_value !== (button_aria_label_value = /*resultType*/
-        ctx[1] === ANSWER_CORRECT || /*resultType*/
-        ctx[1] === ANSWER_INCORRECT ? `Student's answer: ${/*word*/
+        (ctx[1] === ANSWER_CORRECT || /*resultType*/
+        ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+        ctx[10] ? `Student's answer: ${/*word*/
         ctx[0]} (${/*resultType*/
         ctx[1]})` : (
           /*resultType*/
@@ -5788,24 +5867,31 @@
         (ctx[10] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
         ctx[9] && !/*disabledClick*/
         ctx[6] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
-        (ctx[1] === ANSWER_CORRECT ? "border-green-800 bg-green-300" : (
+        (ctx[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
+        ctx[10] ? "border-green-800 bg-green-300" : (
           /*resultType*/
-          ctx[1] === ANSWER_INCORRECT ? "border-red-800 bg-red-300" : (
+          ctx[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
+          ctx[10] ? "border-red-800 bg-red-300" : (
             /*resultType*/
             ctx[1] === ANSWER_MISSED ? "border-green-800" : ""
           )
-        )))) {
+        )) + " " + /*resultType*/
+        ((ctx[1] === ANSWER_CORRECT || /*resultType*/
+        ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+        ctx[10] ? "td:hover:border-gray-800" : ""))) {
           attr(button, "class", button_class_value);
         }
       },
       i(local) {
         if (current)
           return;
-        transition_in(if_block);
+        transition_in(if_block0);
+        transition_in(if_block1);
         current = true;
       },
       o(local) {
-        transition_out(if_block);
+        transition_out(if_block0);
+        transition_out(if_block1);
         current = false;
       },
       d(detaching) {
@@ -5813,6 +5899,8 @@
           detach(button);
         }
         if_blocks[current_block_type_index].d();
+        if (if_block1)
+          if_block1.d();
         ctx[15](null);
         mounted = false;
         run_all(dispose);
@@ -6065,7 +6153,7 @@
   // src/lib/components/prompt/categorise/PromptCategoriseDndContainer.svelte
   function get_each_context2(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[31] = list[i];
+    child_ctx[33] = list[i];
     return child_ctx;
   }
   function create_if_block_24(ctx) {
@@ -6195,31 +6283,31 @@
     let current;
     let if_block = (
       /*item*/
-      ctx[31].type === ANSWER_MISSED && create_if_block6(ctx)
+      ctx[33].type === ANSWER_MISSED && create_if_block6(ctx)
     );
     promptcategorisewordbutton = new PromptCategoriseWordButton_default({
       props: {
         otherClass: "mr-2 mb-2 last:mr-0 " + /*item*/
-        (ctx[31].id === /*considerItemId*/
+        (ctx[33].id === /*considerItemId*/
         ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
         ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
         (ctx[15][
           /*currentWordBinIndex*/
           ctx[11]
         ]?.id !== /*item*/
-        ctx[31].id && /*isContainerWordBin*/
+        ctx[33].id && /*isContainerWordBin*/
         ctx[17] ? "hidden md:flex" : ""),
         word: (
           /*item*/
-          ctx[31].text
+          ctx[33].text
         ),
         wordButtonId: (
           /*item*/
-          ctx[31].id
+          ctx[33].id
         ),
         isClonedItem: (
           /*item*/
-          ctx[31].isClonedItem
+          ctx[33].isClonedItem
         ),
         containerId: (
           /*containerId*/
@@ -6235,7 +6323,7 @@
           /*currentTabContainer*/
           ctx[13] === /*containerId*/
           ctx[2] && /*item*/
-          ctx[31].id === /*items*/
+          ctx[33].id === /*items*/
           ctx[15][0].id
         ),
         disabledClick: (
@@ -6244,7 +6332,7 @@
         ),
         resultType: (
           /*item*/
-          ctx[31].type
+          ctx[33].type
         )
       }
     });
@@ -6271,7 +6359,7 @@
         ctx = new_ctx;
         if (
           /*item*/
-          ctx[31].type === ANSWER_MISSED
+          ctx[33].type === ANSWER_MISSED
         ) {
           if (if_block) {
             if_block.p(ctx, dirty);
@@ -6288,27 +6376,27 @@
         if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex*/
         35088)
           promptcategorisewordbutton_changes.otherClass = "mr-2 mb-2 last:mr-0 " + /*item*/
-          (ctx[31].id === /*considerItemId*/
+          (ctx[33].id === /*considerItemId*/
           ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
           ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
           (ctx[15][
             /*currentWordBinIndex*/
             ctx[11]
           ]?.id !== /*item*/
-          ctx[31].id && /*isContainerWordBin*/
+          ctx[33].id && /*isContainerWordBin*/
           ctx[17] ? "hidden md:flex" : "");
         if (dirty[0] & /*items*/
         32768)
           promptcategorisewordbutton_changes.word = /*item*/
-          ctx[31].text;
+          ctx[33].text;
         if (dirty[0] & /*items*/
         32768)
           promptcategorisewordbutton_changes.wordButtonId = /*item*/
-          ctx[31].id;
+          ctx[33].id;
         if (dirty[0] & /*items*/
         32768)
           promptcategorisewordbutton_changes.isClonedItem = /*item*/
-          ctx[31].isClonedItem;
+          ctx[33].isClonedItem;
         if (dirty[0] & /*containerId*/
         4)
           promptcategorisewordbutton_changes.containerId = /*containerId*/
@@ -6324,7 +6412,7 @@
           promptcategorisewordbutton_changes.wordFocus = /*currentTabContainer*/
           ctx[13] === /*containerId*/
           ctx[2] && /*item*/
-          ctx[31].id === /*items*/
+          ctx[33].id === /*items*/
           ctx[15][0].id;
         if (dirty[0] & /*isFinished*/
         128)
@@ -6333,7 +6421,7 @@
         if (dirty[0] & /*items*/
         32768)
           promptcategorisewordbutton_changes.resultType = /*item*/
-          ctx[31].type;
+          ctx[33].type;
         promptcategorisewordbutton.$set(promptcategorisewordbutton_changes);
       },
       i(local) {
@@ -6387,7 +6475,7 @@
     ));
     const get_key = (ctx2) => (
       /*item*/
-      ctx2[31].id
+      ctx2[33].id
     );
     for (let i = 0; i < each_value.length; i += 1) {
       let child_ctx = get_each_context2(ctx, each_value, i);
@@ -6613,6 +6701,8 @@
     let { paddingTop = 73 } = $$props;
     let { ariaLabel = "" } = $$props;
     let { isFinished = false } = $$props;
+    let { correctAnswerList = [] } = $$props;
+    let { isPreviewModeInteractive = false } = $$props;
     let considerItemId = "";
     let selectedItemId = "";
     let dragDisabled = isFinished;
@@ -6660,7 +6750,7 @@
             }
             return {
               ...rawCategoryItems[answerIndex],
-              type: isFinished ? splitId[1] : ""
+              type: isFinished || isPreviewModeInteractive ? splitId[1] : ""
             };
           }));
         }
@@ -6717,6 +6807,11 @@
       if (trigger === TRIGGERS.DROPPED_INTO_ZONE) {
         const { currentTarget } = e2;
         addAnswerItemStore(id, currentTarget.id);
+        const itemIndex = rawCategoryItems.findIndex((item) => item.id === id);
+        categoriseSettings.set({
+          ...get_store_value(categoriseSettings),
+          selectedItemName: rawCategoryItems[itemIndex].text
+        });
       }
       categoriseSettings.set({
         ...get_store_value(categoriseSettings),
@@ -6739,7 +6834,28 @@
           item: itemList
         };
       }).filter((answer) => answer.item_id.length);
-      dispatch("saveCategory", { answer_list: categoryAnswer });
+      if (isPreviewModeInteractive) {
+        const { answerList } = correctAnswerList;
+        const answerResult = currentAnswer2.map((answer) => {
+          const { categoryId: answerCategoryId, itemId: answerItemId } = answer;
+          if (answerCategoryId !== CONTAINER_WORD_BIN_ID) {
+            const items2 = answerItemId.map((item) => {
+              return `${item}${EAT_DASH}${answerList[answerCategoryId].includes(item) ? ANSWER_CORRECT : ANSWER_INCORRECT}`;
+            });
+            return {
+              categoryId: answerCategoryId,
+              itemId: items2
+            };
+          }
+          return { ...answer };
+        });
+        categoriseSettings.set({
+          ...get_store_value(categoriseSettings),
+          currentAnswer: answerResult
+        });
+      } else {
+        dispatch("saveCategory", { answer_list: categoryAnswer });
+      }
     };
     const resetCategoriesSettings = () => {
       categoriseSettings.set({
@@ -6797,6 +6913,11 @@
     };
     const addAnswerItemStore = (itemId, targetContainerId) => {
       let updatedCurrentAnswer;
+      let previewResultSr = "";
+      if (targetContainerId !== CONTAINER_WORD_BIN_ID && isPreviewModeInteractive) {
+        const { answerList } = correctAnswerList;
+        previewResultSr = answerList[containerId].includes(itemId) ? ANSWER_CORRECT : ANSWER_INCORRECT;
+      }
       if (!currentAnswer.length) {
         updatedCurrentAnswer = [
           {
@@ -6805,8 +6926,15 @@
           }
         ];
       } else {
-        const itemCategoryIndex = currentAnswer.findIndex((answer) => answer.itemId.includes(itemId));
-        const itemIndex = currentAnswer[itemCategoryIndex].itemId.indexOf(itemId);
+        const filteredDash = currentAnswer.map((answer) => {
+          const { itemId: itemId2 } = answer;
+          const items2 = itemId2.map((item) => {
+            return item.split(EAT_DASH)[0];
+          });
+          return { ...answer, itemId: items2 };
+        });
+        const itemCategoryIndex = filteredDash.findIndex((answer) => answer.itemId.includes(itemId));
+        const itemIndex = filteredDash[itemCategoryIndex].itemId.indexOf(itemId);
         if (targetContainerId === currentAnswer[itemCategoryIndex].categoryId) {
           return currentAnswer;
         }
@@ -6829,7 +6957,8 @@
       showAddItemAnimation(targetContainerId);
       categoriseSettings.set({
         ...get_store_value(categoriseSettings),
-        currentAnswer: updatedCurrentAnswer
+        currentAnswer: updatedCurrentAnswer,
+        previewResultSr
       });
       saveAnswer();
     };
@@ -6854,6 +6983,10 @@
         $$invalidate(6, ariaLabel = $$props2.ariaLabel);
       if ("isFinished" in $$props2)
         $$invalidate(7, isFinished = $$props2.isFinished);
+      if ("correctAnswerList" in $$props2)
+        $$invalidate(21, correctAnswerList = $$props2.correctAnswerList);
+      if ("isPreviewModeInteractive" in $$props2)
+        $$invalidate(22, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
     };
     return [
       containerClass,
@@ -6876,7 +7009,9 @@
       isContainerWordBin,
       handleDndConsider,
       handleDndFinalize,
-      addAnswerItem
+      addAnswerItem,
+      correctAnswerList,
+      isPreviewModeInteractive
     ];
   }
   var PromptCategoriseDndContainer = class extends SvelteComponent {
@@ -6896,7 +7031,9 @@
           showButton: 4,
           paddingTop: 5,
           ariaLabel: 6,
-          isFinished: 7
+          isFinished: 7,
+          correctAnswerList: 21,
+          isPreviewModeInteractive: 22
         },
         null,
         [-1, -1]
@@ -6958,8 +7095,22 @@
       this.$$set({ isFinished });
       flush();
     }
+    get correctAnswerList() {
+      return this.$$.ctx[21];
+    }
+    set correctAnswerList(correctAnswerList) {
+      this.$$set({ correctAnswerList });
+      flush();
+    }
+    get isPreviewModeInteractive() {
+      return this.$$.ctx[22];
+    }
+    set isPreviewModeInteractive(isPreviewModeInteractive) {
+      this.$$set({ isPreviewModeInteractive });
+      flush();
+    }
   };
-  customElements.define("prompt-categorise-dnd-container", create_custom_element(PromptCategoriseDndContainer, { "containerClass": {}, "flipDurationMs": {}, "containerId": {}, "type": {}, "showButton": { "type": "Boolean" }, "paddingTop": {}, "ariaLabel": {}, "isFinished": { "type": "Boolean" } }, [], [], true));
+  customElements.define("prompt-categorise-dnd-container", create_custom_element(PromptCategoriseDndContainer, { "containerClass": {}, "flipDurationMs": {}, "containerId": {}, "type": {}, "showButton": { "type": "Boolean" }, "paddingTop": {}, "ariaLabel": {}, "isFinished": { "type": "Boolean" }, "correctAnswerList": {}, "isPreviewModeInteractive": { "type": "Boolean" } }, [], [], true));
   var PromptCategoriseDndContainer_default = PromptCategoriseDndContainer;
 
   // src/lib/components/common/CommonModal.svelte
@@ -7419,7 +7570,6 @@
         modalAriaLabel: "",
         isOpenLastStatus: true
       });
-      showModalAria = true;
     };
     const dispatch = createEventDispatcher();
     const resetCategories = () => {
@@ -7876,19 +8026,19 @@
   // src/lib/components/prompt/categorise/PromptCategorise.svelte
   function get_each_context3(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[50] = list[i];
-    child_ctx[51] = list;
-    child_ctx[52] = i;
+    child_ctx[53] = list[i];
+    child_ctx[54] = list;
+    child_ctx[55] = i;
     return child_ctx;
   }
-  function create_if_block_42(ctx) {
+  function create_if_block_5(ctx) {
     let promptcategorisemodal;
     let current;
     promptcategorisemodal = new PromptCategoriseModal_default({});
     promptcategorisemodal.$on(
       "resetCategory",
       /*saveCategory*/
-      ctx[30]
+      ctx[33]
     );
     return {
       c() {
@@ -7914,7 +8064,7 @@
       }
     };
   }
-  function create_if_block_32(ctx) {
+  function create_if_block_42(ctx) {
     let button;
     let span0;
     let switchicon;
@@ -7938,7 +8088,7 @@
           button,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[14]
+          ctx[15]
         );
         attr(button, "aria-label", "Reset words");
         attr(button, "class", "group focus-ring flex items-center rounded-lg border-2 border-soft-blue text-blue-1000 px-3 py-2 absolute right-0 -top-2.5 hover:bg-blue-100");
@@ -7955,19 +8105,19 @@
             button,
             "click",
             /*openResetModal*/
-            ctx[25]
+            ctx[28]
           );
           mounted = true;
         }
       },
       p(ctx2, dirty) {
         if (!current || dirty[0] & /*categoryTabIndex*/
-        16384) {
+        32768) {
           attr(
             button,
             "tabindex",
             /*categoryTabIndex*/
-            ctx2[14]
+            ctx2[15]
           );
         }
       },
@@ -7991,7 +8141,7 @@
       }
     };
   }
-  function create_if_block_25(ctx) {
+  function create_if_block_33(ctx) {
     let span;
     let t0;
     let t1;
@@ -8002,7 +8152,7 @@
         t0 = text("Option ");
         t1 = text(
           /*selectedItemName*/
-          ctx[15]
+          ctx[16]
         );
         t2 = text(" added in:\xA0");
         attr(span, "class", "sr-only");
@@ -8015,11 +8165,65 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*selectedItemName*/
-        32768)
+        65536)
           set_data(
             t1,
             /*selectedItemName*/
-            ctx2[15]
+            ctx2[16]
+          );
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(span);
+        }
+      }
+    };
+  }
+  function create_if_block_25(ctx) {
+    let span;
+    let t0;
+    let t1;
+    let t2;
+    let t3;
+    let t4;
+    return {
+      c() {
+        span = element("span");
+        t0 = text(". Student's answer: ");
+        t1 = text(
+          /*selectedItemName*/
+          ctx[16]
+        );
+        t2 = text(" (");
+        t3 = text(
+          /*previewResultSr*/
+          ctx[17]
+        );
+        t4 = text(")");
+        attr(span, "class", "sr-only");
+      },
+      m(target, anchor) {
+        insert(target, span, anchor);
+        append(span, t0);
+        append(span, t1);
+        append(span, t2);
+        append(span, t3);
+        append(span, t4);
+      },
+      p(ctx2, dirty) {
+        if (dirty[0] & /*selectedItemName*/
+        65536)
+          set_data(
+            t1,
+            /*selectedItemName*/
+            ctx2[16]
+          );
+        if (dirty[0] & /*previewResultSr*/
+        131072)
+          set_data(
+            t3,
+            /*previewResultSr*/
+            ctx2[17]
           );
       },
       d(detaching) {
@@ -8088,11 +8292,11 @@
     let div0;
     let show_if_1 = (
       /*checkContainerDroppedItem*/
-      ctx[23](
+      ctx[26](
         /*category*/
-        ctx[50].id,
+        ctx[53].id,
         /*dropContainerId*/
-        ctx[5]
+        ctx[6]
       )
     );
     let t0;
@@ -8100,149 +8304,162 @@
     let t4;
     let span1;
     let t6;
+    let t7;
     let button;
     let span2;
-    let t7_value = (
+    let t8_value = (
       /*getTotalWords*/
-      ctx[26](
+      ctx[29](
         /*category*/
-        ctx[50].id,
+        ctx[53].id,
         /*currentAnswer*/
-        ctx[8]
+        ctx[9]
       ) + ""
     );
-    let t7;
     let t8;
+    let t9;
     let span3;
     let show_if;
     let current_block_type_index;
-    let if_block1;
+    let if_block2;
     let button_aria_label_value;
     let div0_id_value;
     let div0_aria_live_value;
     let div0_class_value;
     let div0_resize_listener;
-    let t9;
-    let promptcategorisedndcontainer;
     let t10;
+    let promptcategorisedndcontainer;
+    let t11;
     let div1_class_value;
     let category = (
       /*category*/
-      ctx[50]
+      ctx[53]
     );
     let current;
     let mounted;
     let dispose;
-    let if_block0 = show_if_1 && create_if_block_25(ctx);
+    let if_block0 = show_if_1 && create_if_block_33(ctx);
+    let if_block1 = (
+      /*previewResultSr*/
+      ctx[17] && create_if_block_25(ctx)
+    );
     const if_block_creators = [create_if_block_17, create_else_block4];
     const if_blocks = [];
     function select_block_type(ctx2, dirty) {
       if (dirty[0] & /*openCategoryContainer*/
-      4096)
+      8192)
         show_if = null;
       if (show_if == null)
         show_if = !!/*checkifCategoryContainerOpen*/
-        ctx2[27](
+        ctx2[30](
           /*category*/
-          ctx2[50].id,
+          ctx2[53].id,
           /*openCategoryContainer*/
-          ctx2[12]
+          ctx2[13]
         );
       if (show_if)
         return 0;
       return 1;
     }
     current_block_type_index = select_block_type(ctx, [-1, -1]);
-    if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    if_block2 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     function div0_elementresize_handler() {
-      ctx[35].call(
+      ctx[39].call(
         div0,
         /*category*/
-        ctx[50]
+        ctx[53]
       );
     }
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-        (ctx[22](
+        (ctx[25](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[3],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[4]
+          ctx[5]
         ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-        (ctx[27](
+        (ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) ? "h-full p-3 min-h-[86px] md:min-h-0" : ""),
         paddingTop: (
           /*checkifCategoryContainerOpen*/
-          ctx[27](
+          ctx[30](
             /*category*/
-            ctx[50].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[12]
+            ctx[13]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[17][
+            ctx[19][
               /*category*/
-              ctx[50].id
+              ctx[53].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[17][
+            ctx[19][
               /*category*/
-              ctx[50].id
+              ctx[53].id
             ]
           )
         ),
         containerId: (
           /*category*/
-          ctx[50].id
+          ctx[53].id
         ),
         showButton: (
           /*checkifCategoryContainerOpen*/
-          ctx[27](
+          ctx[30](
             /*category*/
-            ctx[50].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[12]
+            ctx[13]
           )
         ),
         ariaLabel: `Category ${/*index*/
-        ctx[52] + 1}: ${/*category*/
-        ctx[50].name}`,
+        ctx[55] + 1}: ${/*category*/
+        ctx[53].name}`,
         isFinished: (
           /*isFinished*/
           ctx[0]
+        ),
+        correctAnswerList: (
+          /*scoringMetadata*/
+          ctx[21]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
+          ctx[1]
         )
       }
     });
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[30]
+      ctx[33]
     );
     function keydown_handler(...args) {
       return (
         /*keydown_handler*/
-        ctx[36](
+        ctx[40](
           /*category*/
-          ctx[50],
+          ctx[53],
           ...args
         )
       );
     }
     const assign_div1 = () => (
       /*div1_binding*/
-      ctx[37](div1, category)
+      ctx[41](div1, category)
     );
     const unassign_div1 = () => (
       /*div1_binding*/
-      ctx[37](null, category)
+      ctx[41](null, category)
     );
     return {
       c() {
@@ -8253,132 +8470,135 @@
         t0 = space();
         span0 = element("span");
         span0.textContent = `Category ${/*index*/
-        ctx[52] + 1}:\xA0`;
+        ctx[55] + 1}:\xA0`;
         t4 = space();
         span1 = element("span");
         span1.textContent = `${/*category*/
-        ctx[50].name}`;
+        ctx[53].name}`;
         t6 = space();
+        if (if_block1)
+          if_block1.c();
+        t7 = space();
         button = element("button");
         span2 = element("span");
-        t7 = text(t7_value);
-        t8 = space();
-        span3 = element("span");
-        if_block1.c();
+        t8 = text(t8_value);
         t9 = space();
-        create_component(promptcategorisedndcontainer.$$.fragment);
+        span3 = element("span");
+        if_block2.c();
         t10 = space();
+        create_component(promptcategorisedndcontainer.$$.fragment);
+        t11 = space();
         attr(span0, "class", "sr-only");
         attr(span1, "class", "text-base leading-5 !text-gray-900 md:item-heading");
         attr(span2, "class", "mx-0.5");
         attr(span3, "class", "w-4 h-4 text-inherit flex items-center justify-center");
         attr(button, "aria-label", button_aria_label_value = /*getTotalWords*/
-        ctx[26](
+        ctx[29](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*currentAnswer*/
-          ctx[8]
+          ctx[9]
         ));
         attr(button, "class", "focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55 md:hidden");
         attr(div0, "id", div0_id_value = `category-title${/*index*/
-        ctx[52]}`);
+        ctx[55]}`);
         attr(div0, "aria-live", div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[23](
+        ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "polite" : "off");
         attr(div0, "class", div0_class_value = "absolute flex items-center justify-between border-b border-gray-800 w-full rounded-t-lg p-3 md:p-4 md:justify-center " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[27](
+        ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) && /*checkContainerDragOver*/
-        ctx[22](
+        ctx[25](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[3],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[4]
+          ctx[5]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[27](
+        (ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[27](
+        ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) && /*checkSelectedSourceContainer*/
-        ctx[24](
+        ctx[27](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[7],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[6]
+          ctx[7]
         ) ? "group-hover/itemContainer:bg-violet-100 md:group-hover/itemContainer:bg-white" : ""));
         add_render_callback(() => div0_elementresize_handler.call(div0));
         attr(
           div1,
           "aria-hidden",
           /*isModalOpen*/
-          ctx[11]
+          ctx[12]
         );
         attr(
           div1,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[14]
+          ctx[15]
         );
         attr(div1, "role", "group");
         attr(div1, "class", div1_class_value = "focus-ring group/itemContainer flex flex-col border border-gray-800 rounded-lg basis-0 grow relative md:h-fit md:min-h-[140px] md:items-center lg:mr-6 lg:last:mr-0 lg:min-h-[224px] " + /*checkContainerDragOver*/
-        (ctx[22](
+        (ctx[25](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[3],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[4]
+          ctx[5]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[10] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[24](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[7],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[6]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[27](
+        (ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) ? "min-h-[140px]" : ""));
       },
       m(target, anchor) {
@@ -8391,16 +8611,19 @@
         append(div0, t4);
         append(div0, span1);
         append(div0, t6);
+        if (if_block1)
+          if_block1.m(div0, null);
+        append(div0, t7);
         append(div0, button);
         append(button, span2);
-        append(span2, t7);
-        append(button, t8);
+        append(span2, t8);
+        append(button, t9);
         append(button, span3);
         if_blocks[current_block_type_index].m(span3, null);
         div0_resize_listener = add_iframe_resize_listener(div0, div0_elementresize_handler.bind(div0));
-        append(div1, t9);
-        mount_component(promptcategorisedndcontainer, div1, null);
         append(div1, t10);
+        mount_component(promptcategorisedndcontainer, div1, null);
+        append(div1, t11);
         assign_div1();
         current = true;
         if (!mounted) {
@@ -8408,18 +8631,18 @@
             listen(button, "click", function() {
               if (is_function(
                 /*addCategoryContainer*/
-                ctx[28](
+                ctx[31](
                   /*category*/
-                  ctx[50].id,
+                  ctx[53].id,
                   /*openCategoryContainer*/
-                  ctx[12]
+                  ctx[13]
                 )
               ))
-                ctx[28](
+                ctx[31](
                   /*category*/
-                  ctx[50].id,
+                  ctx[53].id,
                   /*openCategoryContainer*/
-                  ctx[12]
+                  ctx[13]
                 ).apply(this, arguments);
             }),
             listen(div1, "keydown", keydown_handler),
@@ -8427,7 +8650,7 @@
               div1,
               "focus",
               /*resetTabCategory*/
-              ctx[32]
+              ctx[35]
             )
           ];
           mounted = true;
@@ -8436,19 +8659,19 @@
       p(new_ctx, dirty) {
         ctx = new_ctx;
         if (dirty[0] & /*dropContainerId*/
-        32)
+        64)
           show_if_1 = /*checkContainerDroppedItem*/
-          ctx[23](
+          ctx[26](
             /*category*/
-            ctx[50].id,
+            ctx[53].id,
             /*dropContainerId*/
-            ctx[5]
+            ctx[6]
           );
         if (show_if_1) {
           if (if_block0) {
             if_block0.p(ctx, dirty);
           } else {
-            if_block0 = create_if_block_25(ctx);
+            if_block0 = create_if_block_33(ctx);
             if_block0.c();
             if_block0.m(div0, t0);
           }
@@ -8456,15 +8679,30 @@
           if_block0.d(1);
           if_block0 = null;
         }
+        if (
+          /*previewResultSr*/
+          ctx[17]
+        ) {
+          if (if_block1) {
+            if_block1.p(ctx, dirty);
+          } else {
+            if_block1 = create_if_block_25(ctx);
+            if_block1.c();
+            if_block1.m(div0, t7);
+          }
+        } else if (if_block1) {
+          if_block1.d(1);
+          if_block1 = null;
+        }
         if ((!current || dirty[0] & /*currentAnswer*/
-        256) && t7_value !== (t7_value = /*getTotalWords*/
-        ctx[26](
+        512) && t8_value !== (t8_value = /*getTotalWords*/
+        ctx[29](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*currentAnswer*/
-          ctx[8]
+          ctx[9]
         ) + ""))
-          set_data(t7, t7_value);
+          set_data(t8, t8_value);
         let previous_block_index = current_block_type_index;
         current_block_type_index = select_block_type(ctx, dirty);
         if (current_block_type_index !== previous_block_index) {
@@ -8473,206 +8711,210 @@
             if_blocks[previous_block_index] = null;
           });
           check_outros();
-          if_block1 = if_blocks[current_block_type_index];
-          if (!if_block1) {
-            if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-            if_block1.c();
+          if_block2 = if_blocks[current_block_type_index];
+          if (!if_block2) {
+            if_block2 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+            if_block2.c();
           } else {
           }
-          transition_in(if_block1, 1);
-          if_block1.m(span3, null);
+          transition_in(if_block2, 1);
+          if_block2.m(span3, null);
         }
         if (!current || dirty[0] & /*currentAnswer*/
-        256 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
-        ctx[26](
+        512 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
+        ctx[29](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*currentAnswer*/
-          ctx[8]
+          ctx[9]
         ))) {
           attr(button, "aria-label", button_aria_label_value);
         }
         if (!current || dirty[0] & /*dropContainerId*/
-        32 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[23](
+        64 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "polite" : "off")) {
           attr(div0, "aria-live", div0_aria_live_value);
         }
         if (!current || dirty[0] & /*dropContainerId, openCategoryContainer, considerContainerId, isDraggingOver, sourceSelectedContainerId, currentSelectedItemId*/
-        4344 && div0_class_value !== (div0_class_value = "absolute flex items-center justify-between border-b border-gray-800 w-full rounded-t-lg p-3 md:p-4 md:justify-center " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        8688 && div0_class_value !== (div0_class_value = "absolute flex items-center justify-between border-b border-gray-800 w-full rounded-t-lg p-3 md:p-4 md:justify-center " + /*checkContainerDroppedItem*/
+        (ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[27](
+        ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) && /*checkContainerDragOver*/
-        ctx[22](
+        ctx[25](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[3],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[4]
+          ctx[5]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[27](
+        (ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[27](
+        ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) && /*checkSelectedSourceContainer*/
-        ctx[24](
+        ctx[27](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[7],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[6]
+          ctx[7]
         ) ? "group-hover/itemContainer:bg-violet-100 md:group-hover/itemContainer:bg-white" : ""))) {
           attr(div0, "class", div0_class_value);
         }
         const promptcategorisedndcontainer_changes = {};
         if (dirty[0] & /*considerContainerId, isDraggingOver, openCategoryContainer*/
-        4120)
+        8240)
           promptcategorisedndcontainer_changes.containerClass = "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-          (ctx[22](
+          (ctx[25](
             /*category*/
-            ctx[50].id,
+            ctx[53].id,
             /*considerContainerId*/
-            ctx[3],
+            ctx[4],
             /*isDraggingOver*/
-            ctx[4]
+            ctx[5]
           ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-          (ctx[27](
+          (ctx[30](
             /*category*/
-            ctx[50].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[12]
+            ctx[13]
           ) ? "h-full p-3 min-h-[86px] md:min-h-0" : "");
         if (dirty[0] & /*openCategoryContainer, categoryTitleHeight*/
-        135168)
+        532480)
           promptcategorisedndcontainer_changes.paddingTop = /*checkifCategoryContainerOpen*/
-          ctx[27](
+          ctx[30](
             /*category*/
-            ctx[50].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[12]
+            ctx[13]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[17][
+            ctx[19][
               /*category*/
-              ctx[50].id
+              ctx[53].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[17][
+            ctx[19][
               /*category*/
-              ctx[50].id
+              ctx[53].id
             ]
           );
         if (dirty[0] & /*openCategoryContainer*/
-        4096)
+        8192)
           promptcategorisedndcontainer_changes.showButton = /*checkifCategoryContainerOpen*/
-          ctx[27](
+          ctx[30](
             /*category*/
-            ctx[50].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[12]
+            ctx[13]
           );
         if (dirty[0] & /*isFinished*/
         1)
           promptcategorisedndcontainer_changes.isFinished = /*isFinished*/
           ctx[0];
+        if (dirty[0] & /*isPreviewModeInteractive*/
+        2)
+          promptcategorisedndcontainer_changes.isPreviewModeInteractive = /*isPreviewModeInteractive*/
+          ctx[1];
         promptcategorisedndcontainer.$set(promptcategorisedndcontainer_changes);
         if (!current || dirty[0] & /*isModalOpen*/
-        2048) {
+        4096) {
           attr(
             div1,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[11]
+            ctx[12]
           );
         }
         if (!current || dirty[0] & /*categoryTabIndex*/
-        16384) {
+        32768) {
           attr(
             div1,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[14]
+            ctx[15]
           );
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer*/
-        5368 && div1_class_value !== (div1_class_value = "focus-ring group/itemContainer flex flex-col border border-gray-800 rounded-lg basis-0 grow relative md:h-fit md:min-h-[140px] md:items-center lg:mr-6 lg:last:mr-0 lg:min-h-[224px] " + /*checkContainerDragOver*/
-        (ctx[22](
+        10736 && div1_class_value !== (div1_class_value = "focus-ring group/itemContainer flex flex-col border border-gray-800 rounded-lg basis-0 grow relative md:h-fit md:min-h-[140px] md:items-center lg:mr-6 lg:last:mr-0 lg:min-h-[224px] " + /*checkContainerDragOver*/
+        (ctx[25](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[3],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[4]
+          ctx[5]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[10] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[24](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[7],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[6]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[27](
+        (ctx[30](
           /*category*/
-          ctx[50].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[12]
+          ctx[13]
         ) ? "min-h-[140px]" : ""))) {
           attr(div1, "class", div1_class_value);
         }
         if (category !== /*category*/
-        ctx[50]) {
+        ctx[53]) {
           unassign_div1();
           category = /*category*/
-          ctx[50];
+          ctx[53];
           assign_div1();
         }
       },
       i(local) {
         if (current)
           return;
-        transition_in(if_block1);
+        transition_in(if_block2);
         transition_in(promptcategorisedndcontainer.$$.fragment, local);
         current = true;
       },
       o(local) {
-        transition_out(if_block1);
+        transition_out(if_block2);
         transition_out(promptcategorisedndcontainer.$$.fragment, local);
         current = false;
       },
@@ -8682,6 +8924,8 @@
         }
         if (if_block0)
           if_block0.d();
+        if (if_block1)
+          if_block1.d();
         if_blocks[current_block_type_index].d();
         div0_resize_listener();
         destroy_component(promptcategorisedndcontainer);
@@ -8702,7 +8946,7 @@
         t0 = text("Option ");
         t1 = text(
           /*selectedItemName*/
-          ctx[15]
+          ctx[16]
         );
         t2 = text(" added in:\xA0");
         attr(span, "class", "sr-only");
@@ -8715,11 +8959,11 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*selectedItemName*/
-        32768)
+        65536)
           set_data(
             t1,
             /*selectedItemName*/
-            ctx2[15]
+            ctx2[16]
           );
       },
       d(detaching) {
@@ -8747,10 +8991,10 @@
     let div2;
     let show_if = (
       /*checkContainerDroppedItem*/
-      ctx[23](
+      ctx[26](
         CONTAINER_WORD_BIN_ID,
         /*dropContainerId*/
-        ctx[5]
+        ctx[6]
       )
     );
     let t8;
@@ -8784,17 +9028,17 @@
     arrowdowncircle = new ArrowDownCircle_default({});
     let if_block0 = (
       /*isModalOpen*/
-      ctx[11] && create_if_block_42(ctx)
+      ctx[12] && create_if_block_5(ctx)
     );
     let if_block1 = (
       /*totalRemainingWordBinItem*/
-      ctx[9] !== /*totalCategoryItems*/
-      ctx[2] && !/*isFinished*/
-      ctx[0] && create_if_block_32(ctx)
+      ctx[10] !== /*totalCategoryItems*/
+      ctx[3] && !/*isFinished*/
+      ctx[0] && create_if_block_42(ctx)
     );
     let each_value = ensure_array_like(Object.values(
       /*categoryGroups*/
-      ctx[21]
+      ctx[24]
     ));
     let each_blocks = [];
     for (let i = 0; i < each_value.length; i += 1) {
@@ -8808,27 +9052,35 @@
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "bg-transparent p-4 pt-[55px] grow md:grow-0 md:pt-20.5 justify-center md:justify-normal\n        " + /*isWordBInTotalZero*/
-        (ctx[29](
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[9]
+          ctx[10]
         ) && !/*currentSelectedItemId*/
-        ctx[6] ? "absolute inset-0" : ""),
+        ctx[7] ? "absolute inset-0" : ""),
         items: (
           /*categoryItems*/
-          ctx[20]
+          ctx[23]
         ),
         containerId: CONTAINER_WORD_BIN_ID,
         ariaLabel: "Word bin",
         isFinished: (
           /*isFinished*/
           ctx[0]
+        ),
+        correctAnswerList: (
+          /*scoringMetadata*/
+          ctx[21]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
+          ctx[1]
         )
       }
     });
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[30]
+      ctx[33]
     );
     smallchevronright = new SmallChevronRight_default({});
     return {
@@ -8866,12 +9118,12 @@
         span3 = element("span");
         t11 = text(
           /*totalRemainingWordBinItem*/
-          ctx[9]
+          ctx[10]
         );
         t12 = text(" out of ");
         t13 = text(
           /*totalCategoryItems*/
-          ctx[2]
+          ctx[3]
         );
         t14 = text(" left");
         t15 = space();
@@ -8891,7 +9143,7 @@
           button0,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[14]
+          ctx[15]
         );
         attr(button0, "aria-label", "Skip to word bin");
         attr(button0, "class", "flex items-center text-charcoal border-l-6 border-charcoal bg-yellow-1000 py-1.5 pr-3 pl-4 focus-visible:border-charcoal left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none");
@@ -8901,7 +9153,7 @@
           div0,
           "aria-hidden",
           /*isModalOpen*/
-          ctx[11]
+          ctx[12]
         );
         attr(div1, "class", "mb-5 grid gap-2 grid-cols-1 md:grid-cols-2 md:gap-6 lg:flex lg:gap-0");
         attr(span2, "class", "text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading");
@@ -8910,67 +9162,67 @@
         attr(span4, "class", "w-6 h-6 text-inherit flex items-center justify-center");
         attr(button1, "aria-label", "Left");
         attr(button1, "class", button1_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[29](
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[9]
+          ctx[10]
         ) ? "hidden" : ""));
         button1.disabled = button1_disabled_value = /*currentWordBinIndex*/
-        ctx[13] === 0;
+        ctx[14] === 0;
         attr(span5, "class", "w-6 h-6 text-inherit flex items-center justify-center ml-[3px]");
         attr(button2, "aria-label", "Right");
         attr(button2, "class", button2_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[29](
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[9]
+          ctx[10]
         ) ? "hidden" : ""));
         button2.disabled = button2_disabled_value = /*currentWordBinIndex*/
-        ctx[13] === /*totalRemainingWordBinItem*/
-        ctx[9] - 1;
+        ctx[14] === /*totalRemainingWordBinItem*/
+        ctx[10] - 1;
         attr(div3, "class", "flex items-center justify-between px-4 min-h-[133px] md:min-h-0 md:block md:px-0 md:justify-normal");
         attr(
           div4,
           "aria-hidden",
           /*isModalOpen*/
-          ctx[11]
+          ctx[12]
         );
         attr(
           div4,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[14]
+          ctx[15]
         );
         attr(div4, "aria-live", div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[23](
+        ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "polite" : "off");
         attr(div4, "role", "group");
         attr(div4, "class", div4_class_value = "focus-ring shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
-        (ctx[22](
+        (ctx[25](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
-          ctx[3],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[4]
+          ctx[5]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[10] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[24](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
-          ctx[7],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[6]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""));
       },
       m(target, anchor) {
@@ -9019,7 +9271,7 @@
         append(div3, button2);
         append(button2, span5);
         mount_component(smallchevronright, span5, null);
-        ctx[39](div4);
+        ctx[43](div4);
         current = true;
         if (!mounted) {
           dispose = [
@@ -9027,37 +9279,37 @@
               button0,
               "keypress",
               /*goToWordBin*/
-              ctx[33]
+              ctx[36]
             ),
             listen(button1, "click", function() {
               if (is_function(useNavigateItem(
                 /*currentWordBinIndex*/
-                ctx[13],
+                ctx[14],
                 /*currentAnswer*/
-                ctx[8],
+                ctx[9],
                 "left"
               )))
                 useNavigateItem(
                   /*currentWordBinIndex*/
-                  ctx[13],
+                  ctx[14],
                   /*currentAnswer*/
-                  ctx[8],
+                  ctx[9],
                   "left"
                 ).apply(this, arguments);
             }),
             listen(button2, "click", function() {
               if (is_function(useNavigateItem(
                 /*currentWordBinIndex*/
-                ctx[13],
+                ctx[14],
                 /*currentAnswer*/
-                ctx[8],
+                ctx[9],
                 "right"
               )))
                 useNavigateItem(
                   /*currentWordBinIndex*/
-                  ctx[13],
+                  ctx[14],
                   /*currentAnswer*/
-                  ctx[8],
+                  ctx[9],
                   "right"
                 ).apply(this, arguments);
             }),
@@ -9065,13 +9317,13 @@
               div4,
               "keydown",
               /*keydown_handler_1*/
-              ctx[38]
+              ctx[42]
             ),
             listen(
               div4,
               "focus",
               /*resetTabCategory*/
-              ctx[32]
+              ctx[35]
             )
           ];
           mounted = true;
@@ -9080,26 +9332,26 @@
       p(new_ctx, dirty) {
         ctx = new_ctx;
         if (!current || dirty[0] & /*categoryTabIndex*/
-        16384) {
+        32768) {
           attr(
             button0,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[14]
+            ctx[15]
           );
         }
         if (
           /*isModalOpen*/
-          ctx[11]
+          ctx[12]
         ) {
           if (if_block0) {
             if_block0.p(ctx, dirty);
             if (dirty[0] & /*isModalOpen*/
-            2048) {
+            4096) {
               transition_in(if_block0, 1);
             }
           } else {
-            if_block0 = create_if_block_42(ctx);
+            if_block0 = create_if_block_5(ctx);
             if_block0.c();
             transition_in(if_block0, 1);
             if_block0.m(t3.parentNode, t3);
@@ -9113,18 +9365,18 @@
         }
         if (
           /*totalRemainingWordBinItem*/
-          ctx[9] !== /*totalCategoryItems*/
-          ctx[2] && !/*isFinished*/
+          ctx[10] !== /*totalCategoryItems*/
+          ctx[3] && !/*isFinished*/
           ctx[0]
         ) {
           if (if_block1) {
             if_block1.p(ctx, dirty);
             if (dirty[0] & /*totalRemainingWordBinItem, totalCategoryItems, isFinished*/
-            517) {
+            1033) {
               transition_in(if_block1, 1);
             }
           } else {
-            if_block1 = create_if_block_32(ctx);
+            if_block1 = create_if_block_42(ctx);
             if_block1.c();
             transition_in(if_block1, 1);
             if_block1.m(div0, null);
@@ -9137,20 +9389,20 @@
           check_outros();
         }
         if (!current || dirty[0] & /*isModalOpen*/
-        2048) {
+        4096) {
           attr(
             div0,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[11]
+            ctx[12]
           );
         }
-        if (dirty[0] & /*isModalOpen, categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, checkifCategoryContainerOpen, openCategoryContainer, tabCategory, categoryTitleHeight, isFinished, saveCategory, getTotalWords, currentAnswer, addCategoryContainer, selectedItemName*/
-        1575214585 | dirty[1] & /*getContainerTabSelected, resetTabCategory*/
-        3) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, checkifCategoryContainerOpen, openCategoryContainer, tabCategory, categoryTitleHeight, isFinished, scoringMetadata, isPreviewModeInteractive, getTotalWords, currentAnswer, previewResultSr, selectedItemName*/
+        1865399283 | dirty[1] & /*getContainerTabSelected, resetTabCategory, saveCategory, addCategoryContainer*/
+        29) {
           each_value = ensure_array_like(Object.values(
             /*categoryGroups*/
-            ctx[21]
+            ctx[24]
           ));
           let i;
           for (i = 0; i < each_value.length; i += 1) {
@@ -9172,12 +9424,12 @@
           check_outros();
         }
         if (dirty[0] & /*dropContainerId*/
-        32)
+        64)
           show_if = /*checkContainerDroppedItem*/
-          ctx[23](
+          ctx[26](
             CONTAINER_WORD_BIN_ID,
             /*dropContainerId*/
-            ctx[5]
+            ctx[6]
           );
         if (show_if) {
           if (if_block2) {
@@ -9192,113 +9444,117 @@
           if_block2 = null;
         }
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        512)
+        1024)
           set_data(
             t11,
             /*totalRemainingWordBinItem*/
-            ctx[9]
+            ctx[10]
           );
         if (!current || dirty[0] & /*totalCategoryItems*/
-        4)
+        8)
           set_data(
             t13,
             /*totalCategoryItems*/
-            ctx[2]
+            ctx[3]
           );
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        512 && button1_class_value !== (button1_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[29](
+        1024 && button1_class_value !== (button1_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[9]
+          ctx[10]
         ) ? "hidden" : ""))) {
           attr(button1, "class", button1_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex*/
-        8192 && button1_disabled_value !== (button1_disabled_value = /*currentWordBinIndex*/
-        ctx[13] === 0)) {
+        16384 && button1_disabled_value !== (button1_disabled_value = /*currentWordBinIndex*/
+        ctx[14] === 0)) {
           button1.disabled = button1_disabled_value;
         }
         const promptcategorisedndcontainer_changes = {};
         if (dirty[0] & /*totalRemainingWordBinItem, currentSelectedItemId*/
-        576)
+        1152)
           promptcategorisedndcontainer_changes.containerClass = "bg-transparent p-4 pt-[55px] grow md:grow-0 md:pt-20.5 justify-center md:justify-normal\n        " + /*isWordBInTotalZero*/
-          (ctx[29](
+          (ctx[32](
             /*totalRemainingWordBinItem*/
-            ctx[9]
+            ctx[10]
           ) && !/*currentSelectedItemId*/
-          ctx[6] ? "absolute inset-0" : "");
+          ctx[7] ? "absolute inset-0" : "");
         if (dirty[0] & /*isFinished*/
         1)
           promptcategorisedndcontainer_changes.isFinished = /*isFinished*/
           ctx[0];
+        if (dirty[0] & /*isPreviewModeInteractive*/
+        2)
+          promptcategorisedndcontainer_changes.isPreviewModeInteractive = /*isPreviewModeInteractive*/
+          ctx[1];
         promptcategorisedndcontainer.$set(promptcategorisedndcontainer_changes);
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        512 && button2_class_value !== (button2_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
-        (ctx[29](
+        1024 && button2_class_value !== (button2_class_value = "focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden " + /*isWordBInTotalZero*/
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[9]
+          ctx[10]
         ) ? "hidden" : ""))) {
           attr(button2, "class", button2_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex, totalRemainingWordBinItem*/
-        8704 && button2_disabled_value !== (button2_disabled_value = /*currentWordBinIndex*/
-        ctx[13] === /*totalRemainingWordBinItem*/
-        ctx[9] - 1)) {
+        17408 && button2_disabled_value !== (button2_disabled_value = /*currentWordBinIndex*/
+        ctx[14] === /*totalRemainingWordBinItem*/
+        ctx[10] - 1)) {
           button2.disabled = button2_disabled_value;
         }
         if (!current || dirty[0] & /*isModalOpen*/
-        2048) {
+        4096) {
           attr(
             div4,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[11]
+            ctx[12]
           );
         }
         if (!current || dirty[0] & /*categoryTabIndex*/
-        16384) {
+        32768) {
           attr(
             div4,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[14]
+            ctx[15]
           );
         }
         if (!current || dirty[0] & /*dropContainerId*/
-        32 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[23](
+        64 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "polite" : "off")) {
           attr(div4, "aria-live", div4_aria_live_value);
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId*/
-        1272 && div4_class_value !== (div4_class_value = "focus-ring shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
-        (ctx[22](
+        2544 && div4_class_value !== (div4_class_value = "focus-ring shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
+        (ctx[25](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
-          ctx[3],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[4]
+          ctx[5]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[23](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[5]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[10] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[24](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
-          ctx[7],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[6]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""))) {
           attr(div4, "class", div4_class_value);
         }
@@ -9352,7 +9608,7 @@
         destroy_component(smallchevronleft);
         destroy_component(promptcategorisedndcontainer);
         destroy_component(smallchevronright);
-        ctx[39](null);
+        ctx[43](null);
         mounted = false;
         run_all(dispose);
       }
@@ -9366,11 +9622,11 @@
       props: {
         rubric: (
           /*rubric*/
-          ctx[18].text
+          ctx[20].text
         ),
         prompt: (
           /*prompt*/
-          ctx[19]
+          ctx[22]
         ),
         $$slots: { default: [create_default_slot4] },
         $$scope: { ctx }
@@ -9385,14 +9641,14 @@
       m(target, anchor) {
         insert(target, div, anchor);
         mount_component(promptbody, div, null);
-        ctx[40](div);
+        ctx[44](div);
         current = true;
       },
       p(ctx2, dirty) {
         const promptbody_changes = {};
-        if (dirty[0] & /*isModalOpen, categoryTabIndex, dropContainerId, considerContainerId, isDraggingOver, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, tabCategory, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, isFinished, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight*/
-        262141 | dirty[1] & /*$$scope*/
-        4194304) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, dropContainerId, considerContainerId, isDraggingOver, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, tabCategory, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, isFinished, isPreviewModeInteractive, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight, previewResultSr*/
+        1048571 | dirty[1] & /*$$scope*/
+        33554432) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -9412,13 +9668,15 @@
           detach(div);
         }
         destroy_component(promptbody);
-        ctx[40](null);
+        ctx[44](null);
       }
     };
   }
   function instance9($$self, $$props, $$invalidate) {
     let { sessionData } = $$props;
     let { isFinished = false } = $$props;
+    let { isPreviewMode = false } = $$props;
+    let { isPreviewModeInteractive = false } = $$props;
     const dispatch = createEventDispatcher();
     let srDiv;
     let totalCategoryItems = 0;
@@ -9436,12 +9694,13 @@
     let currentWordBinIndex = [];
     let categoryTabIndex = 0;
     let selectedItemName = "";
+    let previewResultSr = "";
     const { rubric, interaction, metadata, scoringMetadata } = sessionData;
     const { prompt, category_groups: interactionCategoryGroups, category_items: interactionCategoryItems } = interaction;
     const categoryItems = useFilterUniqueObject(interactionCategoryItems);
     const categoryGroups = useFilterUniqueObject(interactionCategoryGroups);
     const tabCategory = [];
-    categoryGroups.map((group) => $$invalidate(16, tabCategory[group.id] = false, tabCategory));
+    categoryGroups.map((group) => $$invalidate(18, tabCategory[group.id] = false, tabCategory));
     totalCategoryItems = totalRemainingWordBinItem = Object.keys(categoryItems).length;
     let wordBinItems = categoryItems.map((item) => item.id);
     let initialCategoryAnswer = [
@@ -9452,7 +9711,7 @@
     ];
     let categoryTitleHeight = [];
     categoryGroups.map((category) => {
-      $$invalidate(17, categoryTitleHeight[category.id] = "", categoryTitleHeight);
+      $$invalidate(19, categoryTitleHeight[category.id] = "", categoryTitleHeight);
     });
     if (metadata) {
       const { events } = metadata.interactions;
@@ -9491,14 +9750,14 @@
         } else {
           missedItems = categoryAnswerList;
         }
-        missedItems?.map((item) => items.push(`${item}${EAT_DASH}${ANSWER_MISSED}`));
+        missedItems?.map((item) => items.push(`${item}${EAT_DASH}${isPreviewMode ? ANSWER_CORRECT : ANSWER_MISSED}`));
         return { categoryId, itemId: items };
       });
       const wordBinIndex = initialCategoryAnswer.findIndex((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
       const wordBinData = initialCategoryAnswer[wordBinIndex].itemId?.map((item) => `${item}${EAT_DASH}${ANSWER_INCORRECT}`);
       categoryWithAnswer.push({
         categoryId: CONTAINER_WORD_BIN_ID,
-        itemId: wordBinData
+        itemId: isPreviewMode ? [] : wordBinData
       });
       initialCategoryAnswer = categoryWithAnswer;
       categoriseSettings.set({
@@ -9514,13 +9773,13 @@
     });
     modalSettings.subscribe((value) => {
       const { isModalOpen: storeIsModalOpen, isOpenLastStatus } = value;
-      $$invalidate(11, isModalOpen = storeIsModalOpen);
-      $$invalidate(14, categoryTabIndex = storeIsModalOpen ? -1 : 0);
+      $$invalidate(12, isModalOpen = storeIsModalOpen);
+      $$invalidate(15, categoryTabIndex = storeIsModalOpen ? -1 : 0);
       if (!storeIsModalOpen && isOpenLastStatus) {
         setTimeout(() => {
-          $$invalidate(1, srDiv.tabIndex = 0, srDiv);
+          $$invalidate(2, srDiv.tabIndex = 0, srDiv);
           srDiv.focus();
-          $$invalidate(1, srDiv.tabIndex = -1, srDiv);
+          $$invalidate(2, srDiv.tabIndex = -1, srDiv);
           modalSettings.set({
             ...get_store_value(modalSettings),
             isOpenLastStatus: false
@@ -9529,21 +9788,22 @@
       }
     });
     categoriseSettings.subscribe((value) => {
-      const { considerContainerId: storeConsiderContainerId, isDraggingOver: storeIsDraggingOver, dropContainerId: storeDropContainerId, sourceCloneContainerId: storeSourceCloneContainerId, selectedItemId: storeSelectedItemId, sourceSelectedContainerId: storeSourceSelectedContainerId, currentAnswer: storeCurrentAnswer, hasAddItemAnimation: storeHasAddItemAnimation, openCategoryContainer: storeOpenCategoryContainer, currentWordBinIndex: storeCurrentWordBinIndex, selectedItemName: storeSelectedItemName, lastSelectedTabContainer } = value;
-      $$invalidate(3, considerContainerId = storeConsiderContainerId);
-      $$invalidate(4, isDraggingOver = storeIsDraggingOver);
-      $$invalidate(5, dropContainerId = storeDropContainerId);
+      const { considerContainerId: storeConsiderContainerId, isDraggingOver: storeIsDraggingOver, dropContainerId: storeDropContainerId, sourceCloneContainerId: storeSourceCloneContainerId, selectedItemId: storeSelectedItemId, sourceSelectedContainerId: storeSourceSelectedContainerId, currentAnswer: storeCurrentAnswer, hasAddItemAnimation: storeHasAddItemAnimation, openCategoryContainer: storeOpenCategoryContainer, currentWordBinIndex: storeCurrentWordBinIndex, selectedItemName: storeSelectedItemName, lastSelectedTabContainer, previewResultSr: storepreviewResultSr } = value;
+      $$invalidate(4, considerContainerId = storeConsiderContainerId);
+      $$invalidate(5, isDraggingOver = storeIsDraggingOver);
+      $$invalidate(6, dropContainerId = storeDropContainerId);
       sourceCloneContainerId = storeSourceCloneContainerId;
-      $$invalidate(6, currentSelectedItemId = storeSelectedItemId);
-      $$invalidate(7, sourceSelectedContainerId = storeSourceSelectedContainerId);
-      $$invalidate(8, currentAnswer = storeCurrentAnswer);
-      $$invalidate(10, hasAddItemAnimation = storeHasAddItemAnimation);
-      $$invalidate(12, openCategoryContainer = storeOpenCategoryContainer);
-      $$invalidate(13, currentWordBinIndex = storeCurrentWordBinIndex);
-      $$invalidate(15, selectedItemName = storeSelectedItemName);
-      $$invalidate(14, categoryTabIndex = storeSelectedItemId.length ? -1 : 0);
+      $$invalidate(7, currentSelectedItemId = storeSelectedItemId);
+      $$invalidate(8, sourceSelectedContainerId = storeSourceSelectedContainerId);
+      $$invalidate(9, currentAnswer = storeCurrentAnswer);
+      $$invalidate(11, hasAddItemAnimation = storeHasAddItemAnimation);
+      $$invalidate(13, openCategoryContainer = storeOpenCategoryContainer);
+      $$invalidate(14, currentWordBinIndex = storeCurrentWordBinIndex);
+      $$invalidate(16, selectedItemName = storeSelectedItemName);
+      $$invalidate(17, previewResultSr = storepreviewResultSr);
+      $$invalidate(15, categoryTabIndex = storeSelectedItemId.length ? -1 : 0);
       const storeWordBinItem = currentAnswer.filter((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
-      $$invalidate(9, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
+      $$invalidate(10, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
       if (lastSelectedTabContainer) {
         setTimeout(
           () => {
@@ -9605,6 +9865,8 @@
       return totalRemainingWordBinItem2 <= 0;
     };
     const saveCategory = ({ detail }) => {
+      if (isPreviewModeInteractive)
+        return;
       dispatch("saveCategory", detail);
     };
     const getContainerTabSelected = (key, containerId) => {
@@ -9635,36 +9897,41 @@
     };
     function div0_elementresize_handler(category) {
       categoryTitleHeight[category.id] = this.clientHeight;
-      $$invalidate(17, categoryTitleHeight);
+      $$invalidate(19, categoryTitleHeight);
     }
     const keydown_handler = (category, { key }) => getContainerTabSelected(key, category.id);
     function div1_binding($$value, category) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         tabCategory[category.id] = $$value;
-        $$invalidate(16, tabCategory);
+        $$invalidate(18, tabCategory);
       });
     }
     const keydown_handler_1 = ({ key }) => getContainerTabSelected(key, CONTAINER_WORD_BIN_ID);
     function div4_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         tabCategory[CONTAINER_WORD_BIN_ID] = $$value;
-        $$invalidate(16, tabCategory);
+        $$invalidate(18, tabCategory);
       });
     }
     function div_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         srDiv = $$value;
-        $$invalidate(1, srDiv);
+        $$invalidate(2, srDiv);
       });
     }
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(34, sessionData = $$props2.sessionData);
+        $$invalidate(37, sessionData = $$props2.sessionData);
       if ("isFinished" in $$props2)
         $$invalidate(0, isFinished = $$props2.isFinished);
+      if ("isPreviewMode" in $$props2)
+        $$invalidate(38, isPreviewMode = $$props2.isPreviewMode);
+      if ("isPreviewModeInteractive" in $$props2)
+        $$invalidate(1, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
     };
     return [
       isFinished,
+      isPreviewModeInteractive,
       srDiv,
       totalCategoryItems,
       considerContainerId,
@@ -9680,9 +9947,11 @@
       currentWordBinIndex,
       categoryTabIndex,
       selectedItemName,
+      previewResultSr,
       tabCategory,
       categoryTitleHeight,
       rubric,
+      scoringMetadata,
       prompt,
       categoryItems,
       categoryGroups,
@@ -9699,6 +9968,7 @@
       resetTabCategory,
       goToWordBin,
       sessionData,
+      isPreviewMode,
       div0_elementresize_handler,
       keydown_handler,
       div1_binding,
@@ -9710,10 +9980,24 @@
   var PromptCategorise = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance9, create_fragment21, safe_not_equal, { sessionData: 34, isFinished: 0 }, null, [-1, -1]);
+      init(
+        this,
+        options,
+        instance9,
+        create_fragment21,
+        safe_not_equal,
+        {
+          sessionData: 37,
+          isFinished: 0,
+          isPreviewMode: 38,
+          isPreviewModeInteractive: 1
+        },
+        null,
+        [-1, -1]
+      );
     }
     get sessionData() {
-      return this.$$.ctx[34];
+      return this.$$.ctx[37];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -9726,8 +10010,22 @@
       this.$$set({ isFinished });
       flush();
     }
+    get isPreviewMode() {
+      return this.$$.ctx[38];
+    }
+    set isPreviewMode(isPreviewMode) {
+      this.$$set({ isPreviewMode });
+      flush();
+    }
+    get isPreviewModeInteractive() {
+      return this.$$.ctx[1];
+    }
+    set isPreviewModeInteractive(isPreviewModeInteractive) {
+      this.$$set({ isPreviewModeInteractive });
+      flush();
+    }
   };
-  customElements.define("prompt-categorise", create_custom_element(PromptCategorise, { "sessionData": {}, "isFinished": { "type": "Boolean" } }, [], [], true));
+  customElements.define("prompt-categorise", create_custom_element(PromptCategorise, { "sessionData": {}, "isFinished": { "type": "Boolean" }, "isPreviewMode": { "type": "Boolean" }, "isPreviewModeInteractive": { "type": "Boolean" } }, [], [], true));
   var PromptCategorise_default = PromptCategorise;
 
   // src/lib/components/prompt/skeleton/PromptSkeleton.svelte
@@ -9821,7 +10119,7 @@
 
   // src/lib/components/prompt/PromptBuilder.svelte
   function add_css(target) {
-    append_styles(target, "svelte-w34tju", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}input::-moz-selection,textarea::-moz-selection{background-color:hsla(0, 0%, 85%, 0.4)}input::selection,textarea::selection{background-color:hsla(0, 0%, 85%, 0.4)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.p2{font-size:0.875rem;font-weight:600;line-height:1.25rem;line-height:1.5}.blanket-overlay{--tw-bg-opacity:1;background-color:rgb(33 37 41/var(--tw-bg-opacity));inset:0;opacity:0.3;position:absolute}.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.hover-focus-ring:hover,.raw-focus-ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(218 224 224/var(--tw-border-opacity))}@keyframes svelte-w34tju-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-w34tju-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;justify-content:space-between;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>span>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>span>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>span>.choice{--tw-border-opacity:1}.btn-mcq-option.selected.correct{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity));border-color:rgb(0 102 5/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity));border-color:rgb(217 12 85/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.correct>span>.choice,.btn-mcq-option.selected.incorrect>span>.choice{--tw-border-opacity:1;border-color:rgb(113 115 119/var(--tw-border-opacity));border-width:1px}.typein-textbox:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.typein-textbox{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(93 99 107/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem;padding:0.75rem 1rem;width:100%}.typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox:focus{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px;outline:2px solid transparent;outline-offset:2px}}.typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));transition-duration:50ms}}#dnd-action-dragged-el{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));cursor:grabbing !important;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}#dnd-action-dragged-el .btn-vertical-icon{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));cursor:grabbing !important}.category-content>.missing-answer-label{display:block}.category-content>.missing-answer-label~.missing-answer-label{display:none}.sr-only{clip:rect(0, 0, 0, 0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{bottom:0;top:0}.-top-2{top:-0.5rem}.-top-2\\.5{top:-0.625rem}.bottom-4{bottom:1rem}.left-4{left:1rem}.left-\\[-9999px\\]{left:-9999px}.right-0{right:0}.right-4{right:1rem}.top-12{top:3rem}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-0\\.5{margin-left:0.125rem;margin-right:0.125rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:0.25rem}.ml-3{margin-left:0.75rem}.ml-\\[3px\\]{margin-left:3px}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mr-4{margin-right:1rem}.mt-0{margin-top:0}.mt-0\\.5{margin-top:0.125rem}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-7{margin-top:1.75rem}.mt-7\\.5{margin-top:1.875}.mt-9{margin-top:2.25rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-4{height:1rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.min-h-\\[133px\\]{min-height:133px}.min-h-\\[140px\\]{min-height:140px}.min-h-\\[54px\\]{min-height:54px}.min-h-\\[86px\\]{min-height:86px}.w-11{width:2.75rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\\[44px\\]{min-width:44px}.min-w-\\[85px\\]{min-width:85px}.max-w-\\[400px\\]{max-width:400px}.grow{flex-grow:1}.basis-0{flex-basis:0px}.\\!cursor-default{cursor:default !important}.\\!cursor-pointer{cursor:pointer !important}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0.5rem * var(--tw-space-y-reverse));margin-top:calc(0.5rem * (1 - var(--tw-space-y-reverse)))}.space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-\\[32px\\]{border-radius:32px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-b-lg{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-6,.border-l-\\[6px\\]{border-left-width:6px}.border-dashed{border-style:dashed}.\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(8 38 99/var(--tw-border-opacity)) !important}.border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.border-charcoal{--tw-border-opacity:1;border-color:rgb(33 37 41/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.border-green-800{--tw-border-opacity:1;border-color:rgb(0 102 5/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity:1;border-color:rgb(217 12 85/var(--tw-border-opacity))}.border-soft-blue{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235 235 255/var(--tw-bg-opacity)) !important}.\\!bg-violet-150{--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important}.\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(8 38 99/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247 250 250/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244 244 244/var(--tw-bg-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity))}.bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84 101 251/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205 208 254/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-1000{--tw-bg-opacity:1;background-color:rgb(251 217 27/var(--tw-bg-opacity))}.p-0{padding:0}.p-0\\.5{padding:0.125rem}.p-1{padding:0.25rem}.p-1\\.5{padding:0.375rem}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:0.25rem;padding-top:0.25rem}.py-1\\.5{padding-bottom:0.375rem;padding-top:0.375rem}.py-2{padding-bottom:0.5rem;padding-top:0.5rem}.pb-3{padding-bottom:0.75rem}.pl-3{padding-left:0.75rem}.pl-4{padding-left:1rem}.pr-3{padding-right:0.75rem}.pt-\\[55px\\]{padding-top:55px}.text-left{text-align:left}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57 62 69/var(--tw-text-opacity)) !important}.text-blue-1000{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity))}.text-charcoal{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(93 99 107/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(0 102 5/var(--tw-text-opacity))}.text-inherit{color:inherit}.text-red-800{--tw-text-opacity:1;color:rgb(217 12 85/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:0.5}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\]{--tw-shadow:0 -12px 14px -16px #00000033;--tw-shadow-colored:0 -12px 14px -16px var(--tw-shadow-color)}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\],.shadow-md{box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.shadow-md{--tw-shadow:0px 2px 8px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 8px var(--tw-shadow-color)}.\\!outline-none{outline:2px solid transparent !important;outline-offset:2px !important}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:0.15s;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.duration-300{transition-duration:0.3s}.active\\:raw-focus-ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}@media(min-width: 732px){.md\\:item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.category-content>.md\\:missing-answer-label{display:block}.category-content>.md\\:missing-answer-label~.md\\:missing-answer-label{display:none}}@media(hover: hover) and (pointer: fine){.td\\:hover-focus-ring:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}}.last\\:mr-0:last-child{margin-right:0}.focus-within\\:left-0:focus-within{left:0}.focus-within\\:right-0:focus-within{right:0}.focus-within\\:top-0:focus-within{top:0}.focus-within\\:z-30:focus-within{z-index:30}.hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251 217 27/var(--tw-bg-opacity))}.hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.focus\\:outline-transparent:focus{outline-color:transparent}.focus-visible\\:border:focus-visible{border-width:1px}.focus-visible\\:border-charcoal:focus-visible{--tw-border-opacity:1;border-color:rgb(33 37 41/var(--tw-border-opacity))}.focus-visible\\:border-gray-400:focus-visible{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.focus-visible\\:border-gray-800:focus-visible{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.active\\:bg-black-55:active,.active\\:bg-black-60:active{background-color:rgba(0, 0, 0, 0.1019607843)}.active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238 206 26/var(--tw-bg-opacity))}.active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142 147 153/var(--tw-text-opacity))}.disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group\\/itemContainer:hover .group-hover\\/itemContainer\\:bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.group:hover .group-hover\\:underline{text-decoration-line:underline}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:inset-0{inset:0}.md\\:top-20{top:5rem}.md\\:mb-2{margin-bottom:0.5rem}.md\\:mb-4{margin-bottom:1rem}.md\\:mb-8{margin-bottom:2rem}.md\\:mt-14{margin-top:3.5rem}.md\\:block{display:block}.md\\:inline-block{display:inline-block}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:h-fit{height:-moz-fit-content;height:fit-content}.md\\:min-h-0{min-height:0}.md\\:min-h-\\[140px\\]{min-height:140px}.md\\:min-h-\\[164px\\]{min-height:164px}.md\\:w-fit{width:-moz-fit-content;width:fit-content}.md\\:grow-0{flex-grow:0}.md\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\\:flex-row{flex-direction:row}.md\\:flex-col{flex-direction:column}.md\\:items-center{align-items:center}.md\\:justify-normal{justify-content:normal}.md\\:justify-center{justify-content:center}.md\\:justify-between{justify-content:space-between}.md\\:gap-6{gap:1.5rem}.md\\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px * var(--tw-space-y-reverse));margin-top:calc(0px * (1 - var(--tw-space-y-reverse)))}.md\\:rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.md\\:border{border-width:1px}.md\\:border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.md\\:p-4{padding:1rem}.md\\:px-0{padding-left:0;padding-right:0}.md\\:pb-0{padding-bottom:0}.md\\:pt-20{padding-top:5rem}.md\\:pt-20\\.5{padding-top:5.125rem}.md\\:text-center{text-align:center}.md\\:shadow-\\[0_0_\\#0000\\]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.group\\/itemContainer:hover .md\\:group-hover\\/itemContainer\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}}@media(min-width: 1196px){.lg\\:mr-6{margin-right:1.5rem}.lg\\:flex{display:flex}.lg\\:min-h-\\[224px\\]{min-height:224px}.lg\\:gap-0{gap:0}.lg\\:last\\:mr-0:last-child{margin-right:0}}@media(hover: hover) and (pointer: fine){.td\\:hover\\:cursor-grab:hover{cursor:grab}.td\\:hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84 101 251/var(--tw-text-opacity))}.group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.group:hover .td\\:group-hover\\:opacity-5{opacity:0.05}}');
+    append_styles(target, "svelte-v7ouvz", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}input::-moz-selection,textarea::-moz-selection{background-color:hsla(0, 0%, 85%, 0.4)}input::selection,textarea::selection{background-color:hsla(0, 0%, 85%, 0.4)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.p2{font-size:0.875rem;font-weight:600;line-height:1.25rem;line-height:1.5}.blanket-overlay{--tw-bg-opacity:1;background-color:rgb(33 37 41/var(--tw-bg-opacity));inset:0;opacity:0.3;position:absolute}.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.hover-focus-ring:hover,.raw-focus-ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(218 224 224/var(--tw-border-opacity))}@keyframes svelte-v7ouvz-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-v7ouvz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;justify-content:space-between;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>span>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>span>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>span>.choice{--tw-border-opacity:1}.btn-mcq-option.selected.correct{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity));border-color:rgb(0 102 5/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity));border-color:rgb(217 12 85/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.correct>span>.choice,.btn-mcq-option.selected.incorrect>span>.choice{--tw-border-opacity:1;border-color:rgb(113 115 119/var(--tw-border-opacity));border-width:1px}.typein-textbox:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.typein-textbox{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(93 99 107/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem;padding:0.75rem 1rem;width:100%}.typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox:focus{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px;outline:2px solid transparent;outline-offset:2px}}.typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));transition-duration:50ms}}#dnd-action-dragged-el{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;--tw-border-opacity:1!important;--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important;border-color:rgb(93 99 107/var(--tw-border-opacity)) !important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));cursor:grabbing !important;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}#dnd-action-dragged-el .btn-vertical-icon{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));cursor:grabbing !important}#dnd-action-dragged-el .preview-icon{display:none !important}#dnd-action-dragged-el .preview-vertical{display:block !important}.category-content>.missing-answer-label{display:block}.category-content>.missing-answer-label~.missing-answer-label{display:none}.sr-only{clip:rect(0, 0, 0, 0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{bottom:0;top:0}.-top-2{top:-0.5rem}.-top-2\\.5{top:-0.625rem}.bottom-4{bottom:1rem}.left-4{left:1rem}.left-\\[-9999px\\]{left:-9999px}.right-0{right:0}.right-4{right:1rem}.top-12{top:3rem}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-0\\.5{margin-left:0.125rem;margin-right:0.125rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:0.25rem}.ml-3{margin-left:0.75rem}.ml-\\[3px\\]{margin-left:3px}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mr-4{margin-right:1rem}.mt-0{margin-top:0}.mt-0\\.5{margin-top:0.125rem}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-7{margin-top:1.75rem}.mt-7\\.5{margin-top:1.875}.mt-9{margin-top:2.25rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-4{height:1rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.min-h-\\[133px\\]{min-height:133px}.min-h-\\[140px\\]{min-height:140px}.min-h-\\[54px\\]{min-height:54px}.min-h-\\[86px\\]{min-height:86px}.w-11{width:2.75rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\\[44px\\]{min-width:44px}.min-w-\\[85px\\]{min-width:85px}.max-w-\\[400px\\]{max-width:400px}.grow{flex-grow:1}.basis-0{flex-basis:0px}.\\!cursor-default{cursor:default !important}.\\!cursor-pointer{cursor:pointer !important}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0.5rem * var(--tw-space-y-reverse));margin-top:calc(0.5rem * (1 - var(--tw-space-y-reverse)))}.space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-\\[32px\\]{border-radius:32px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-b-lg{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-6,.border-l-\\[6px\\]{border-left-width:6px}.border-dashed{border-style:dashed}.\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(8 38 99/var(--tw-border-opacity)) !important}.border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.border-charcoal{--tw-border-opacity:1;border-color:rgb(33 37 41/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.border-green-800{--tw-border-opacity:1;border-color:rgb(0 102 5/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity:1;border-color:rgb(217 12 85/var(--tw-border-opacity))}.border-soft-blue{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235 235 255/var(--tw-bg-opacity)) !important}.\\!bg-violet-150{--tw-bg-opacity:1!important;background-color:rgb(205 208 254/var(--tw-bg-opacity)) !important}.\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(8 38 99/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247 250 250/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244 244 244/var(--tw-bg-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity))}.bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84 101 251/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205 208 254/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-1000{--tw-bg-opacity:1;background-color:rgb(251 217 27/var(--tw-bg-opacity))}.p-0{padding:0}.p-0\\.5{padding:0.125rem}.p-1{padding:0.25rem}.p-1\\.5{padding:0.375rem}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:0.25rem;padding-top:0.25rem}.py-1\\.5{padding-bottom:0.375rem;padding-top:0.375rem}.py-2{padding-bottom:0.5rem;padding-top:0.5rem}.pb-3{padding-bottom:0.75rem}.pl-3{padding-left:0.75rem}.pl-4{padding-left:1rem}.pr-3{padding-right:0.75rem}.pt-\\[55px\\]{padding-top:55px}.text-left{text-align:left}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57 62 69/var(--tw-text-opacity)) !important}.text-blue-1000{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity))}.text-charcoal{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(93 99 107/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(0 102 5/var(--tw-text-opacity))}.text-inherit{color:inherit}.text-red-800{--tw-text-opacity:1;color:rgb(217 12 85/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:0.5}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\]{--tw-shadow:0 -12px 14px -16px #00000033;--tw-shadow-colored:0 -12px 14px -16px var(--tw-shadow-color)}.shadow-\\[0_-12px_14px_-16px_\\#00000033\\],.shadow-md{box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.shadow-md{--tw-shadow:0px 2px 8px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 8px var(--tw-shadow-color)}.\\!outline-none{outline:2px solid transparent !important;outline-offset:2px !important}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:0.15s;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.duration-300{transition-duration:0.3s}.active\\:raw-focus-ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}@media(min-width: 732px){.md\\:item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.category-content>.md\\:missing-answer-label{display:block}.category-content>.md\\:missing-answer-label~.md\\:missing-answer-label{display:none}}@media(hover: hover) and (pointer: fine){.td\\:hover-focus-ring:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}}.last\\:mr-0:last-child{margin-right:0}.focus-within\\:left-0:focus-within{left:0}.focus-within\\:right-0:focus-within{right:0}.focus-within\\:top-0:focus-within{top:0}.focus-within\\:z-30:focus-within{z-index:30}.hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251 217 27/var(--tw-bg-opacity))}.hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.focus\\:outline-transparent:focus{outline-color:transparent}.focus-visible\\:border:focus-visible{border-width:1px}.focus-visible\\:border-charcoal:focus-visible{--tw-border-opacity:1;border-color:rgb(33 37 41/var(--tw-border-opacity))}.focus-visible\\:border-gray-400:focus-visible{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.focus-visible\\:border-gray-800:focus-visible{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.active\\:bg-black-55:active,.active\\:bg-black-60:active{background-color:rgba(0, 0, 0, 0.1019607843)}.active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238 206 26/var(--tw-bg-opacity))}.active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142 147 153/var(--tw-text-opacity))}.disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group\\/itemContainer:hover .group-hover\\/itemContainer\\:bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.group:hover .group-hover\\:underline{text-decoration-line:underline}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:inset-0{inset:0}.md\\:top-20{top:5rem}.md\\:mb-2{margin-bottom:0.5rem}.md\\:mb-4{margin-bottom:1rem}.md\\:mb-8{margin-bottom:2rem}.md\\:mt-14{margin-top:3.5rem}.md\\:block{display:block}.md\\:inline-block{display:inline-block}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:h-fit{height:-moz-fit-content;height:fit-content}.md\\:min-h-0{min-height:0}.md\\:min-h-\\[140px\\]{min-height:140px}.md\\:min-h-\\[164px\\]{min-height:164px}.md\\:w-fit{width:-moz-fit-content;width:fit-content}.md\\:grow-0{flex-grow:0}.md\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\\:flex-row{flex-direction:row}.md\\:flex-col{flex-direction:column}.md\\:items-center{align-items:center}.md\\:justify-normal{justify-content:normal}.md\\:justify-center{justify-content:center}.md\\:justify-between{justify-content:space-between}.md\\:gap-6{gap:1.5rem}.md\\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px * var(--tw-space-y-reverse));margin-top:calc(0px * (1 - var(--tw-space-y-reverse)))}.md\\:rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.md\\:border{border-width:1px}.md\\:border-gray-400{--tw-border-opacity:1;border-color:rgb(196 201 204/var(--tw-border-opacity))}.md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity)) !important}.md\\:p-4{padding:1rem}.md\\:px-0{padding-left:0;padding-right:0}.md\\:pb-0{padding-bottom:0}.md\\:pt-20{padding-top:5rem}.md\\:pt-20\\.5{padding-top:5.125rem}.md\\:text-center{text-align:center}.md\\:shadow-\\[0_0_\\#0000\\]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)}.group\\/itemContainer:hover .md\\:group-hover\\/itemContainer\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}}@media(min-width: 1196px){.lg\\:mr-6{margin-right:1.5rem}.lg\\:flex{display:flex}.lg\\:min-h-\\[224px\\]{min-height:224px}.lg\\:gap-0{gap:0}.lg\\:last\\:mr-0:last-child{margin-right:0}}@media(hover: hover) and (pointer: fine){.td\\:hover\\:cursor-grab:hover{cursor:grab}.td\\:hover\\:border-gray-800:hover{--tw-border-opacity:1;border-color:rgb(93 99 107/var(--tw-border-opacity))}.td\\:hover\\:bg-black-50:hover{background-color:rgba(0, 0, 0, 0.0509803922)}.td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235 235 255/var(--tw-bg-opacity))}.td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84 101 251/var(--tw-text-opacity))}.group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.group:hover .td\\:group-hover\\:opacity-5{opacity:0.05}}');
   }
   function create_else_block_12(ctx) {
     let invalidbanner;
@@ -9856,7 +10154,7 @@
     let if_block;
     let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block_26, create_if_block_33, create_if_block_43, create_else_block5];
+    const if_block_creators = [create_if_block_26, create_if_block_34, create_if_block_43, create_else_block5];
     const if_blocks = [];
     function select_block_type_1(ctx2, dirty) {
       if (
@@ -9996,6 +10294,14 @@
         isFinished: (
           /*isFinished*/
           ctx[4]
+        ),
+        isPreviewMode: (
+          /*isPreviewMode*/
+          ctx[7]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
+          ctx[6]
         )
       }
     });
@@ -10039,7 +10345,7 @@
       }
     };
   }
-  function create_if_block_33(ctx) {
+  function create_if_block_34(ctx) {
     let prompttypein;
     let current;
     prompttypein = new PromptTypeIn_default({
@@ -10337,17 +10643,7 @@
               scoringMetadata = { ...scoringMetadata, answerId: answer[0] };
               break;
             case INTERACTION_TYPE_CATEGORISE:
-              const { correct_answer: correctAnswer } = sessionRawData.interaction;
-              const correctAnswerList = [];
-              correctAnswer.map((answer2) => {
-                const { id, correct_answer_list: answerList } = answer2;
-                const list = answerList.map((list2) => list2.id);
-                correctAnswerList[id] = list;
-              });
-              scoringMetadata = {
-                ...scoringMetadata,
-                answerList: correctAnswerList
-              };
+              scoringMetadata = getCategoriseCorrectAnswer(sessionRawData);
               break;
             case INTERACTION_TYPE_TYPEIN:
             default:
@@ -10377,6 +10673,10 @@
             previewMcqCorrectAnswerId = answerId[0];
           }
           return;
+        case INTERACTION_TYPE_CATEGORISE:
+          scoringMetadata = getCategoriseCorrectAnswer(data);
+          $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
+          return;
         case INTERACTION_TYPE_TYPEIN:
         default:
           const { correct_answer: correctAnswer, typein_type: typeinType } = data.interaction;
@@ -10397,6 +10697,19 @@
           return;
       }
     };
+    const getCategoriseCorrectAnswer = (data) => {
+      const { correct_answer: categoryCorrectAnswer } = data.interaction;
+      const correctAnswerList = [];
+      categoryCorrectAnswer.map((answer) => {
+        const { id, correct_answer_list: answerList } = answer;
+        const list = answerList.map((list2) => list2.id);
+        correctAnswerList[id] = list;
+      });
+      return {
+        hasAnswer: true,
+        answerList: correctAnswerList
+      };
+    };
     const updatePreviewData = (data) => {
       const { scoringMetadata: metadata, interaction } = sessionData;
       let scoringMetadata;
@@ -10453,7 +10766,7 @@
       getSessionData(sessionId);
     }
     $$self.$$set = ($$new_props) => {
-      $$invalidate(26, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+      $$invalidate(27, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
     };
     $$props = exclude_internal_props($$props);
     return [