eat-js-sdk 0.0.44 → 0.0.46

package/dist/eat-prompt-builder.mjs

@@ -698,7 +698,7 @@
     }
     component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
   }
-  function init(component, options, instance12, create_fragment24, not_equal, props, append_styles2 = null, dirty = [-1]) {
+  function init(component, options, instance12, create_fragment25, not_equal, props, append_styles2 = null, dirty = [-1]) {
     const parent_component = current_component;
     set_current_component(component);
     const $$ = component.$$ = {
@@ -737,7 +737,7 @@
     $$.update();
     ready = true;
     run_all($$.before_update);
-    $$.fragment = create_fragment24 ? create_fragment24($$.ctx) : false;
+    $$.fragment = create_fragment25 ? create_fragment25($$.ctx) : false;
     if (options.target) {
       if (options.hydrate) {
         start_hydrating();
@@ -2547,6 +2547,10 @@
   var TYPEIN_TYPE_SHORT = "Short-Text";
   var CONTAINER_WORD_BIN_ID = "container-word-bin";
   var SCREEN_MD = 732;
+  var EAT_DASH = "@eat-dash@";
+  var ANSWER_CORRECT = "correct";
+  var ANSWER_INCORRECT = "incorrect";
+  var ANSWER_MISSED = "missed";
 
   // src/lib/components/prompt/typein/PromptTypeIn.svelte
   function create_else_block_1(ctx) {
@@ -5332,7 +5336,8 @@
     currentWordBinIndex: 0,
     currentTabContainer: "",
     lastSelectedTabContainer: "",
-    selectedItemName: ""
+    selectedItemName: "",
+    previewResultSr: ""
   });
 
   // src/lib/assets/img/product/GripVertical.svelte
@@ -5376,8 +5381,212 @@
   create_custom_element(GripVertical, {}, [], [], true);
   var GripVertical_default = GripVertical;
 
-  // src/lib/components/prompt/categorise/PromptCategoriseWordButton.svelte
+  // src/lib/assets/img/messaging/Success.svelte
   function create_fragment8(ctx) {
+    let svg;
+    let path;
+    return {
+      c() {
+        svg = svg_element("svg");
+        path = svg_element("path");
+        attr(path, "fill-rule", "evenodd");
+        attr(path, "clip-rule", "evenodd");
+        attr(path, "d", "M13.2929 0.292893C13.6834 -0.0976311 14.3166 -0.0976311 14.7071 0.292893C15.0976 0.683418 15.0976 1.31658 14.7071 1.70711L5.70711 10.7071C5.31658 11.0976 4.68342 11.0976 4.29289 10.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683418 4.90237 1.31658 4.90237 1.70711 5.29289L5 8.58579L13.2929 0.292893Z");
+        attr(path, "fill", "currentColor");
+        attr(svg, "width", "15");
+        attr(svg, "height", "11");
+        attr(svg, "viewBox", "0 0 15 11");
+        attr(svg, "fill", "none");
+        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
+  }
+  var Success = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment8, safe_not_equal, {});
+    }
+  };
+  create_custom_element(Success, {}, [], [], true);
+  var Success_default = Success;
+
+  // src/lib/components/prompt/categorise/PromptCategoriseWordButton.svelte
+  function create_else_block3(ctx) {
+    let gripvertical;
+    let current;
+    gripvertical = new GripVertical_default({});
+    return {
+      c() {
+        create_component(gripvertical.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(gripvertical, target, anchor);
+        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) {
+        destroy_component(gripvertical, detaching);
+      }
+    };
+  }
+  function create_if_block_32(ctx) {
+    let span;
+    let success;
+    let current;
+    success = new Success_default({});
+    return {
+      c() {
+        span = element("span");
+        create_component(success.$$.fragment);
+        attr(span, "class", "text-green-800");
+      },
+      m(target, anchor) {
+        insert(target, span, anchor);
+        mount_component(success, span, null);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(success.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(success.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(span);
+        }
+        destroy_component(success);
+      }
+    };
+  }
+  function create_if_block_23(ctx) {
+    let span;
+    let errorsolid;
+    let current;
+    errorsolid = new ErrorSolid_default({});
+    return {
+      c() {
+        span = element("span");
+        create_component(errorsolid.$$.fragment);
+        attr(span, "class", "text-red-800 preview-icon");
+      },
+      m(target, anchor) {
+        insert(target, span, anchor);
+        mount_component(errorsolid, span, null);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(errorsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(errorsolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(span);
+        }
+        destroy_component(errorsolid);
+      }
+    };
+  }
+  function create_if_block_15(ctx) {
+    let span;
+    let successsolid;
+    let current;
+    successsolid = new SuccessSolid_default({});
+    return {
+      c() {
+        span = element("span");
+        create_component(successsolid.$$.fragment);
+        attr(span, "class", "text-green-800 preview-icon");
+      },
+      m(target, anchor) {
+        insert(target, span, anchor);
+        mount_component(successsolid, span, null);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(successsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(successsolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(span);
+        }
+        destroy_component(successsolid);
+      }
+    };
+  }
+  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;
     let t0;
@@ -5388,14 +5597,44 @@
     let span1_class_value;
     let t2;
     let span2;
-    let gripvertical;
+    let current_block_type_index;
+    let if_block0;
+    let t3;
     let div_class_value;
     let button_aria_label_value;
     let button_class_value;
     let current;
     let mounted;
     let dispose;
-    gripvertical = new GripVertical_default({});
+    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 && !/*isWordItemSelected*/
+        ctx2[10]
+      )
+        return 0;
+      if (
+        /*resultType*/
+        ctx2[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
+        ctx2[10]
+      )
+        return 1;
+      if (
+        /*resultType*/
+        ctx2[1] === ANSWER_MISSED
+      )
+        return 2;
+      return 3;
+    }
+    current_block_type_index = select_block_type(ctx, -1);
+    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");
@@ -5409,36 +5648,63 @@
         span1 = element("span");
         t2 = space();
         span2 = element("span");
-        create_component(gripvertical.$$.fragment);
+        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[8] ? "text-white" : ""));
+        (ctx[10] ? "text-white" : ""));
         attr(span1, "class", span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
-        ctx[7] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""));
+        ctx[9] && !/*disabledClick*/
+        ctx[6] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""));
         attr(span2, "class", "absolute");
         attr(div, "class", div_class_value = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon " + (!/*currentSelectedItemId*/
-        ctx[7] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""));
+        ctx[9] && !/*disabledClick*/
+        ctx[6] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""));
         attr(
           button,
           "id",
           /*wordButtonId*/
-          ctx[2]
+          ctx[3]
         );
         attr(
           button,
           "tabindex",
           /*tabIndex*/
-          ctx[4]
+          ctx[5]
         );
-        attr(button, "aria-label", button_aria_label_value = `${/*isWordItemSelected*/
-        ctx[8] ? "Selected option" : "Option"}: ${/*word*/
-        ctx[0]}`);
+        attr(button, "aria-label", button_aria_label_value = /*resultType*/
+        (ctx[1] === ANSWER_CORRECT || /*resultType*/
+        ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+        ctx[10] ? `Student's answer: ${/*word*/
+        ctx[0]} (${/*resultType*/
+        ctx[1]})` : (
+          /*resultType*/
+          ctx[1] === ANSWER_MISSED ? `Correct answer: ${/*word*/
+          ctx[0]}` : `${/*isWordItemSelected*/
+          ctx[10] ? "Selected option" : "Option"}: ${/*word*/
+          ctx[0]}`
+        ));
         attr(button, "class", button_class_value = "focus-ring flex items-center justify-between min-h-[54px] p-1 border border-gray-800 rounded-lg " + /*otherClass*/
-        ctx[1] + " " + /*isClonedItem*/
-        (ctx[3] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
-        (ctx[6] === /*wordButtonId*/
-        ctx[2] ? "hidden" : "") + " " + /*isWordItemSelected*/
-        (ctx[8] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
-        ctx[7] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default"));
+        ctx[2] + " " + /*isClonedItem*/
+        (ctx[4] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
+        (ctx[8] === /*wordButtonId*/
+        ctx[3] ? "hidden" : "") + " " + /*isWordItemSelected*/
+        (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 && !/*isWordItemSelected*/
+        ctx[10] ? "border-green-800 bg-green-300" : (
+          /*resultType*/
+          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);
@@ -5449,42 +5715,45 @@
         append(div, span1);
         append(div, t2);
         append(div, span2);
-        mount_component(gripvertical, span2, null);
-        ctx[13](button);
+        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) {
           dispose = [
             listen(button, "click", stop_propagation(function() {
               if (is_function(
                 /*selectItem*/
-                ctx[9](
+                ctx[11](
                   /*wordButtonId*/
-                  ctx[2]
+                  ctx[3]
                 )
               ))
-                ctx[9](
+                ctx[11](
                   /*wordButtonId*/
-                  ctx[2]
+                  ctx[3]
                 ).apply(this, arguments);
             })),
             listen(button, "touchend", stop_propagation(function() {
               if (is_function(
                 /*selectItem*/
-                ctx[9](
+                ctx[11](
                   /*wordButtonId*/
-                  ctx[2]
+                  ctx[3]
                 )
               ))
-                ctx[9](
+                ctx[11](
                   /*wordButtonId*/
-                  ctx[2]
+                  ctx[3]
                 ).apply(this, arguments);
             })),
             listen(
               button,
               "keydown",
               /*removeContainerTabSelected*/
-              ctx[10]
+              ctx[12]
             )
           ];
           mounted = true;
@@ -5500,71 +5769,139 @@
             ctx[0]
           );
         if (!current || dirty & /*isWordItemSelected*/
-        256 && span0_class_value !== (span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
-        (ctx[8] ? "text-white" : ""))) {
+        1024 && span0_class_value !== (span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
+        (ctx[10] ? "text-white" : ""))) {
           attr(span0, "class", span0_class_value);
         }
-        if (!current || dirty & /*currentSelectedItemId*/
-        128 && span1_class_value !== (span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
-        ctx[7] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""))) {
+        if (!current || dirty & /*currentSelectedItemId, disabledClick*/
+        576 && span1_class_value !== (span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
+        ctx[9] && !/*disabledClick*/
+        ctx[6] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""))) {
           attr(span1, "class", span1_class_value);
         }
-        if (!current || dirty & /*currentSelectedItemId*/
-        128 && 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*/
-        ctx[7] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""))) {
+        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) {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+          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_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*/
+        ctx[9] && !/*disabledClick*/
+        ctx[6] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""))) {
           attr(div, "class", div_class_value);
         }
         if (!current || dirty & /*wordButtonId*/
-        4) {
+        8) {
           attr(
             button,
             "id",
             /*wordButtonId*/
-            ctx[2]
+            ctx[3]
           );
         }
         if (!current || dirty & /*tabIndex*/
-        16) {
+        32) {
           attr(
             button,
             "tabindex",
             /*tabIndex*/
-            ctx[4]
+            ctx[5]
           );
         }
-        if (!current || dirty & /*isWordItemSelected, word*/
-        257 && button_aria_label_value !== (button_aria_label_value = `${/*isWordItemSelected*/
-        ctx[8] ? "Selected option" : "Option"}: ${/*word*/
-        ctx[0]}`)) {
+        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) && !/*isWordItemSelected*/
+        ctx[10] ? `Student's answer: ${/*word*/
+        ctx[0]} (${/*resultType*/
+        ctx[1]})` : (
+          /*resultType*/
+          ctx[1] === ANSWER_MISSED ? `Correct answer: ${/*word*/
+          ctx[0]}` : `${/*isWordItemSelected*/
+          ctx[10] ? "Selected option" : "Option"}: ${/*word*/
+          ctx[0]}`
+        ))) {
           attr(button, "aria-label", button_aria_label_value);
         }
-        if (!current || dirty & /*otherClass, isClonedItem, considerCloneItemId, wordButtonId, isWordItemSelected, currentSelectedItemId*/
-        462 && button_class_value !== (button_class_value = "focus-ring flex items-center justify-between min-h-[54px] p-1 border border-gray-800 rounded-lg " + /*otherClass*/
-        ctx[1] + " " + /*isClonedItem*/
-        (ctx[3] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
-        (ctx[6] === /*wordButtonId*/
-        ctx[2] ? "hidden" : "") + " " + /*isWordItemSelected*/
-        (ctx[8] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
-        ctx[7] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default"))) {
+        if (!current || dirty & /*otherClass, isClonedItem, considerCloneItemId, wordButtonId, isWordItemSelected, currentSelectedItemId, disabledClick, resultType*/
+        1886 && button_class_value !== (button_class_value = "focus-ring flex items-center justify-between min-h-[54px] p-1 border border-gray-800 rounded-lg " + /*otherClass*/
+        ctx[2] + " " + /*isClonedItem*/
+        (ctx[4] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
+        (ctx[8] === /*wordButtonId*/
+        ctx[3] ? "hidden" : "") + " " + /*isWordItemSelected*/
+        (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 && !/*isWordItemSelected*/
+        ctx[10] ? "border-green-800 bg-green-300" : (
+          /*resultType*/
+          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(gripvertical.$$.fragment, local);
+        transition_in(if_block0);
+        transition_in(if_block1);
         current = true;
       },
       o(local) {
-        transition_out(gripvertical.$$.fragment, local);
+        transition_out(if_block0);
+        transition_out(if_block1);
         current = false;
       },
       d(detaching) {
         if (detaching) {
           detach(button);
         }
-        destroy_component(gripvertical);
-        ctx[13](null);
+        if_blocks[current_block_type_index].d();
+        if (if_block1)
+          if_block1.d();
+        ctx[15](null);
         mounted = false;
         run_all(dispose);
       }
@@ -5572,12 +5909,14 @@
   }
   function instance5($$self, $$props, $$invalidate) {
     let { word = "" } = $$props;
+    let { resultType = "" } = $$props;
     let { otherClass = "" } = $$props;
     let { wordButtonId = "" } = $$props;
     let { isClonedItem = false } = $$props;
     let { containerId = "" } = $$props;
     let { tabIndex = -1 } = $$props;
     let { wordFocus = false } = $$props;
+    let { disabledClick = false } = $$props;
     let considerCloneItemId = "";
     let currentSelectedItemId = "";
     let isWordItemSelected = false;
@@ -5585,12 +5924,12 @@
     let wordButton;
     categoriseSettings.subscribe((value) => {
       const { considerCloneItemId: storeConsiderCloneItemId, selectedItemId: storeSelectedItemId } = value;
-      $$invalidate(6, considerCloneItemId = storeConsiderCloneItemId);
-      $$invalidate(7, currentSelectedItemId = storeSelectedItemId);
-      $$invalidate(8, isWordItemSelected = currentSelectedItemId === wordButtonId);
+      $$invalidate(8, considerCloneItemId = storeConsiderCloneItemId);
+      $$invalidate(9, currentSelectedItemId = storeSelectedItemId);
+      $$invalidate(10, isWordItemSelected = currentSelectedItemId === wordButtonId);
     });
     const selectItem = (itemId) => {
-      if (isSelecItemFunctionCalled) {
+      if (isSelecItemFunctionCalled || disabledClick) {
         return;
       }
       isSelecItemFunctionCalled = true;
@@ -5637,28 +5976,32 @@
     function button_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         wordButton = $$value;
-        $$invalidate(5, wordButton);
+        $$invalidate(7, wordButton);
       });
     }
     $$self.$$set = ($$props2) => {
       if ("word" in $$props2)
         $$invalidate(0, word = $$props2.word);
+      if ("resultType" in $$props2)
+        $$invalidate(1, resultType = $$props2.resultType);
       if ("otherClass" in $$props2)
-        $$invalidate(1, otherClass = $$props2.otherClass);
+        $$invalidate(2, otherClass = $$props2.otherClass);
       if ("wordButtonId" in $$props2)
-        $$invalidate(2, wordButtonId = $$props2.wordButtonId);
+        $$invalidate(3, wordButtonId = $$props2.wordButtonId);
       if ("isClonedItem" in $$props2)
-        $$invalidate(3, isClonedItem = $$props2.isClonedItem);
+        $$invalidate(4, isClonedItem = $$props2.isClonedItem);
       if ("containerId" in $$props2)
-        $$invalidate(11, containerId = $$props2.containerId);
+        $$invalidate(13, containerId = $$props2.containerId);
       if ("tabIndex" in $$props2)
-        $$invalidate(4, tabIndex = $$props2.tabIndex);
+        $$invalidate(5, tabIndex = $$props2.tabIndex);
       if ("wordFocus" in $$props2)
-        $$invalidate(12, wordFocus = $$props2.wordFocus);
+        $$invalidate(14, wordFocus = $$props2.wordFocus);
+      if ("disabledClick" in $$props2)
+        $$invalidate(6, disabledClick = $$props2.disabledClick);
     };
     $$self.$$.update = () => {
       if ($$self.$$.dirty & /*wordFocus, wordButton*/
-      4128) {
+      16512) {
         $:
           if (wordFocus) {
             setTimeout(
@@ -5672,10 +6015,12 @@
     };
     return [
       word,
+      resultType,
       otherClass,
       wordButtonId,
       isClonedItem,
       tabIndex,
+      disabledClick,
       wordButton,
       considerCloneItemId,
       currentSelectedItemId,
@@ -5690,14 +6035,16 @@
   var PromptCategoriseWordButton = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance5, create_fragment8, safe_not_equal, {
+      init(this, options, instance5, create_fragment9, safe_not_equal, {
         word: 0,
-        otherClass: 1,
-        wordButtonId: 2,
-        isClonedItem: 3,
-        containerId: 11,
-        tabIndex: 4,
-        wordFocus: 12
+        resultType: 1,
+        otherClass: 2,
+        wordButtonId: 3,
+        isClonedItem: 4,
+        containerId: 13,
+        tabIndex: 5,
+        wordFocus: 14,
+        disabledClick: 6
       });
     }
     get word() {
@@ -5707,50 +6054,64 @@
       this.$$set({ word });
       flush();
     }
-    get otherClass() {
+    get resultType() {
       return this.$$.ctx[1];
     }
+    set resultType(resultType) {
+      this.$$set({ resultType });
+      flush();
+    }
+    get otherClass() {
+      return this.$$.ctx[2];
+    }
     set otherClass(otherClass) {
       this.$$set({ otherClass });
       flush();
     }
     get wordButtonId() {
-      return this.$$.ctx[2];
+      return this.$$.ctx[3];
     }
     set wordButtonId(wordButtonId) {
       this.$$set({ wordButtonId });
       flush();
     }
     get isClonedItem() {
-      return this.$$.ctx[3];
+      return this.$$.ctx[4];
     }
     set isClonedItem(isClonedItem) {
       this.$$set({ isClonedItem });
       flush();
     }
     get containerId() {
-      return this.$$.ctx[11];
+      return this.$$.ctx[13];
     }
     set containerId(containerId) {
       this.$$set({ containerId });
       flush();
     }
     get tabIndex() {
-      return this.$$.ctx[4];
+      return this.$$.ctx[5];
     }
     set tabIndex(tabIndex) {
       this.$$set({ tabIndex });
       flush();
     }
     get wordFocus() {
-      return this.$$.ctx[12];
+      return this.$$.ctx[14];
     }
     set wordFocus(wordFocus) {
       this.$$set({ wordFocus });
       flush();
     }
+    get disabledClick() {
+      return this.$$.ctx[6];
+    }
+    set disabledClick(disabledClick) {
+      this.$$set({ disabledClick });
+      flush();
+    }
   };
-  customElements.define("prompt-categorise-word-button", create_custom_element(PromptCategoriseWordButton, { "word": {}, "otherClass": {}, "wordButtonId": {}, "isClonedItem": { "type": "Boolean" }, "containerId": {}, "tabIndex": {}, "wordFocus": { "type": "Boolean" } }, [], [], true));
+  customElements.define("prompt-categorise-word-button", create_custom_element(PromptCategoriseWordButton, { "word": {}, "resultType": {}, "otherClass": {}, "wordButtonId": {}, "isClonedItem": { "type": "Boolean" }, "containerId": {}, "tabIndex": {}, "wordFocus": { "type": "Boolean" }, "disabledClick": { "type": "Boolean" } }, [], [], true));
   var PromptCategoriseWordButton_default = PromptCategoriseWordButton;
 
   // src/lib/stores/modal.ts
@@ -5792,10 +6153,10 @@
   // src/lib/components/prompt/categorise/PromptCategoriseDndContainer.svelte
   function get_each_context2(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[30] = list[i];
+    child_ctx[33] = list[i];
     return child_ctx;
   }
-  function create_if_block_15(ctx) {
+  function create_if_block_24(ctx) {
     let button;
     let button_class_value;
     let mounted;
@@ -5807,10 +6168,10 @@
           button,
           "aria-label",
           /*ariaLabel*/
-          ctx[7]
+          ctx[6]
         );
         attr(button, "class", button_class_value = "focus-ring absolute inset-0 bg-transparent rounded-lg focus-visible:border " + /*isContainerWordBin*/
-        (ctx[16] ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"));
+        (ctx[17] ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -5819,19 +6180,19 @@
             button,
             "click",
             /*addAnswerItem*/
-            ctx[19]
+            ctx[20]
           );
           mounted = true;
         }
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*ariaLabel*/
-        128) {
+        64) {
           attr(
             button,
             "aria-label",
             /*ariaLabel*/
-            ctx2[7]
+            ctx2[6]
           );
         }
       },
@@ -5844,7 +6205,7 @@
       }
     };
   }
-  function create_if_block5(ctx) {
+  function create_if_block_16(ctx) {
     let div;
     let mounted;
     let dispose;
@@ -5864,13 +6225,13 @@
               div,
               "click",
               /*addAnswerItem*/
-              ctx[19]
+              ctx[20]
             ),
             listen(
               div,
               "keypress",
               /*addAnswerItem*/
-              ctx[19]
+              ctx[20]
             )
           ];
           mounted = true;
@@ -5886,50 +6247,92 @@
       }
     };
   }
+  function create_if_block6(ctx) {
+    let div;
+    let t2;
+    let div_class_value;
+    return {
+      c() {
+        div = element("div");
+        t2 = text("Missing answers:");
+        attr(div, "class", div_class_value = "text-base text-charcoal font-semibold w-full mt-1 mb-2 " + (!/*showButton*/
+        ctx[4] ? "hidden md:missing-answer-label" : "missing-answer-label"));
+      },
+      m(target, anchor) {
+        insert(target, div, anchor);
+        append(div, t2);
+      },
+      p(ctx2, dirty) {
+        if (dirty[0] & /*showButton*/
+        16 && div_class_value !== (div_class_value = "text-base text-charcoal font-semibold w-full mt-1 mb-2 " + (!/*showButton*/
+        ctx2[4] ? "hidden md:missing-answer-label" : "missing-answer-label"))) {
+          attr(div, "class", div_class_value);
+        }
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(div);
+        }
+      }
+    };
+  }
   function create_each_block2(key_1, ctx) {
     let first;
+    let t2;
     let promptcategorisewordbutton;
     let current;
+    let if_block = (
+      /*item*/
+      ctx[33].type === ANSWER_MISSED && create_if_block6(ctx)
+    );
     promptcategorisewordbutton = new PromptCategoriseWordButton_default({
       props: {
         otherClass: "mr-2 mb-2 last:mr-0 " + /*item*/
-        (ctx[30].id === /*considerItemId*/
+        (ctx[33].id === /*considerItemId*/
         ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
-        ctx[5] ? "hidden md:flex" : "") + "\n        " + /*items*/
-        (ctx[0][
+        ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
+        (ctx[15][
           /*currentWordBinIndex*/
           ctx[11]
         ]?.id !== /*item*/
-        ctx[30].id && /*isContainerWordBin*/
-        ctx[16] ? "hidden md:flex" : ""),
+        ctx[33].id && /*isContainerWordBin*/
+        ctx[17] ? "hidden md:flex" : ""),
         word: (
           /*item*/
-          ctx[30].text
+          ctx[33].text
         ),
         wordButtonId: (
           /*item*/
-          ctx[30].id
+          ctx[33].id
         ),
         isClonedItem: (
           /*item*/
-          ctx[30].isClonedItem
+          ctx[33].isClonedItem
         ),
         containerId: (
           /*containerId*/
-          ctx[3]
+          ctx[2]
         ),
         tabIndex: (
           /*currentTabContainer*/
           ctx[13] !== /*containerId*/
-          ctx[3] || /*isModalOpen*/
+          ctx[2] || /*isModalOpen*/
           ctx[14] ? -1 : 0
         ),
         wordFocus: (
           /*currentTabContainer*/
           ctx[13] === /*containerId*/
-          ctx[3] && /*item*/
-          ctx[30].id === /*items*/
-          ctx[0][0].id
+          ctx[2] && /*item*/
+          ctx[33].id === /*items*/
+          ctx[15][0].id
+        ),
+        disabledClick: (
+          /*isFinished*/
+          ctx[7]
+        ),
+        resultType: (
+          /*item*/
+          ctx[33].type
         )
       }
     });
@@ -5938,58 +6341,87 @@
       first: null,
       c() {
         first = empty();
+        if (if_block)
+          if_block.c();
+        t2 = space();
         create_component(promptcategorisewordbutton.$$.fragment);
         this.first = first;
       },
       m(target, anchor) {
         insert(target, first, anchor);
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, t2, anchor);
         mount_component(promptcategorisewordbutton, target, anchor);
         current = true;
       },
       p(new_ctx, dirty) {
         ctx = new_ctx;
+        if (
+          /*item*/
+          ctx[33].type === ANSWER_MISSED
+        ) {
+          if (if_block) {
+            if_block.p(ctx, dirty);
+          } else {
+            if_block = create_if_block6(ctx);
+            if_block.c();
+            if_block.m(t2.parentNode, t2);
+          }
+        } else if (if_block) {
+          if_block.d(1);
+          if_block = null;
+        }
         const promptcategorisewordbutton_changes = {};
         if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex*/
-        2337)
+        35088)
           promptcategorisewordbutton_changes.otherClass = "mr-2 mb-2 last:mr-0 " + /*item*/
-          (ctx[30].id === /*considerItemId*/
+          (ctx[33].id === /*considerItemId*/
           ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
-          ctx[5] ? "hidden md:flex" : "") + "\n        " + /*items*/
-          (ctx[0][
+          ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
+          (ctx[15][
             /*currentWordBinIndex*/
             ctx[11]
           ]?.id !== /*item*/
-          ctx[30].id && /*isContainerWordBin*/
-          ctx[16] ? "hidden md:flex" : "");
+          ctx[33].id && /*isContainerWordBin*/
+          ctx[17] ? "hidden md:flex" : "");
         if (dirty[0] & /*items*/
-        1)
+        32768)
           promptcategorisewordbutton_changes.word = /*item*/
-          ctx[30].text;
+          ctx[33].text;
         if (dirty[0] & /*items*/
-        1)
+        32768)
           promptcategorisewordbutton_changes.wordButtonId = /*item*/
-          ctx[30].id;
+          ctx[33].id;
         if (dirty[0] & /*items*/
-        1)
+        32768)
           promptcategorisewordbutton_changes.isClonedItem = /*item*/
-          ctx[30].isClonedItem;
+          ctx[33].isClonedItem;
         if (dirty[0] & /*containerId*/
-        8)
+        4)
           promptcategorisewordbutton_changes.containerId = /*containerId*/
-          ctx[3];
+          ctx[2];
         if (dirty[0] & /*currentTabContainer, containerId, isModalOpen*/
-        24584)
+        24580)
           promptcategorisewordbutton_changes.tabIndex = /*currentTabContainer*/
           ctx[13] !== /*containerId*/
-          ctx[3] || /*isModalOpen*/
+          ctx[2] || /*isModalOpen*/
           ctx[14] ? -1 : 0;
         if (dirty[0] & /*currentTabContainer, containerId, items*/
-        8201)
+        40964)
           promptcategorisewordbutton_changes.wordFocus = /*currentTabContainer*/
           ctx[13] === /*containerId*/
-          ctx[3] && /*item*/
-          ctx[30].id === /*items*/
-          ctx[0][0].id;
+          ctx[2] && /*item*/
+          ctx[33].id === /*items*/
+          ctx[15][0].id;
+        if (dirty[0] & /*isFinished*/
+        128)
+          promptcategorisewordbutton_changes.disabledClick = /*isFinished*/
+          ctx[7];
+        if (dirty[0] & /*items*/
+        32768)
+          promptcategorisewordbutton_changes.resultType = /*item*/
+          ctx[33].type;
         promptcategorisewordbutton.$set(promptcategorisewordbutton_changes);
       },
       i(local) {
@@ -6005,12 +6437,15 @@
       d(detaching) {
         if (detaching) {
           detach(first);
+          detach(t2);
         }
+        if (if_block)
+          if_block.d(detaching);
         destroy_component(promptcategorisewordbutton, detaching);
       }
     };
   }
-  function create_fragment9(ctx) {
+  function create_fragment10(ctx) {
     let t0;
     let t1;
     let section;
@@ -6026,20 +6461,21 @@
       /*dragDisabled*/
       ctx[9] && /*sourceSelectedContainerId*/
       ctx[10] !== /*containerId*/
-      ctx[3] && create_if_block_15(ctx)
+      ctx[2] && !/*isFinished*/
+      ctx[7] && create_if_block_24(ctx)
     );
     let if_block1 = (
       /*totalRemainingWordBinItem*/
       ctx[12] <= 0 && /*isContainerWordBin*/
-      ctx[16] && create_if_block5(ctx)
+      ctx[17] && create_if_block_16(ctx)
     );
     let each_value = ensure_array_like(Object.values(
       /*items*/
-      ctx[0]
+      ctx[15]
     ));
     const get_key = (ctx2) => (
       /*item*/
-      ctx2[30].id
+      ctx2[33].id
     );
     for (let i = 0; i < each_value.length; i += 1) {
       let child_ctx = get_each_context2(ctx, each_value, i);
@@ -6060,17 +6496,17 @@
         }
         attr(section, "role", "group");
         attr(section, "class", section_class_value = "flex flex-wrap " + /*containerClass*/
-        ctx[1]);
+        ctx[0] + " category-content");
         attr(section, "aria-dropeffect", "move");
         attr(
           section,
           "id",
           /*containerId*/
-          ctx[3]
+          ctx[2]
         );
         attr(section, "style", section_style_value = !/*isContainerWordBin*/
-        ctx[16] ? `padding-top: ${/*paddingTop*/
-        ctx[6]}px;` : "");
+        ctx[17] ? `padding-top: ${/*paddingTop*/
+        ctx[5]}px;` : "");
       },
       m(target, anchor) {
         if (if_block0)
@@ -6091,19 +6527,19 @@
             action_destroyer(dndzone_action = dndzone$2.call(null, section, {
               items: (
                 /*items*/
-                ctx[0]
+                ctx[15]
               ),
               flipDurationMs: (
                 /*flipDurationMs*/
-                ctx[2]
+                ctx[1]
               ),
               type: (
                 /*type*/
-                ctx[4]
+                ctx[3]
               ),
               dropTargetClasses: (
                 /*dropTargetClasses*/
-                ctx[15]
+                ctx[16]
               ),
               morphDisabled: true,
               dragDisabled: (
@@ -6118,13 +6554,13 @@
               section,
               "consider",
               /*handleDndConsider*/
-              ctx[17]
+              ctx[18]
             ),
             listen(
               section,
               "finalize",
               /*handleDndFinalize*/
-              ctx[18]
+              ctx[19]
             )
           ];
           mounted = true;
@@ -6135,12 +6571,13 @@
           /*dragDisabled*/
           ctx2[9] && /*sourceSelectedContainerId*/
           ctx2[10] !== /*containerId*/
-          ctx2[3]
+          ctx2[2] && !/*isFinished*/
+          ctx2[7]
         ) {
           if (if_block0) {
             if_block0.p(ctx2, dirty);
           } else {
-            if_block0 = create_if_block_15(ctx2);
+            if_block0 = create_if_block_24(ctx2);
             if_block0.c();
             if_block0.m(t0.parentNode, t0);
           }
@@ -6151,12 +6588,12 @@
         if (
           /*totalRemainingWordBinItem*/
           ctx2[12] <= 0 && /*isContainerWordBin*/
-          ctx2[16]
+          ctx2[17]
         ) {
           if (if_block1) {
             if_block1.p(ctx2, dirty);
           } else {
-            if_block1 = create_if_block5(ctx2);
+            if_block1 = create_if_block_16(ctx2);
             if_block1.c();
             if_block1.m(t1.parentNode, t1);
           }
@@ -6164,54 +6601,54 @@
           if_block1.d(1);
           if_block1 = null;
         }
-        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId, currentTabContainer, isModalOpen*/
-        92457) {
+        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId, currentTabContainer, isModalOpen, isFinished*/
+        190868) {
           each_value = ensure_array_like(Object.values(
             /*items*/
-            ctx2[0]
+            ctx2[15]
           ));
           group_outros();
           each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, section, outro_and_destroy_block, create_each_block2, null, get_each_context2);
           check_outros();
         }
         if (!current || dirty[0] & /*containerClass*/
-        2 && section_class_value !== (section_class_value = "flex flex-wrap " + /*containerClass*/
-        ctx2[1])) {
+        1 && section_class_value !== (section_class_value = "flex flex-wrap " + /*containerClass*/
+        ctx2[0] + " category-content")) {
           attr(section, "class", section_class_value);
         }
         if (!current || dirty[0] & /*containerId*/
-        8) {
+        4) {
           attr(
             section,
             "id",
             /*containerId*/
-            ctx2[3]
+            ctx2[2]
           );
         }
         if (!current || dirty[0] & /*paddingTop*/
-        64 && section_style_value !== (section_style_value = !/*isContainerWordBin*/
-        ctx2[16] ? `padding-top: ${/*paddingTop*/
-        ctx2[6]}px;` : "")) {
+        32 && section_style_value !== (section_style_value = !/*isContainerWordBin*/
+        ctx2[17] ? `padding-top: ${/*paddingTop*/
+        ctx2[5]}px;` : "")) {
           attr(section, "style", section_style_value);
         }
         if (dndzone_action && is_function(dndzone_action.update) && dirty[0] & /*items, flipDurationMs, type, dragDisabled*/
-        533)
+        33290)
           dndzone_action.update.call(null, {
             items: (
               /*items*/
-              ctx2[0]
+              ctx2[15]
             ),
             flipDurationMs: (
               /*flipDurationMs*/
-              ctx2[2]
+              ctx2[1]
             ),
             type: (
               /*type*/
-              ctx2[4]
+              ctx2[3]
             ),
             dropTargetClasses: (
               /*dropTargetClasses*/
-              ctx2[15]
+              ctx2[16]
             ),
             morphDisabled: true,
             dragDisabled: (
@@ -6256,7 +6693,6 @@
     };
   }
   function instance6($$self, $$props, $$invalidate) {
-    let { items = [] } = $$props;
     let { containerClass = "" } = $$props;
     let { flipDurationMs = 5 } = $$props;
     let { containerId = "" } = $$props;
@@ -6264,9 +6700,12 @@
     let { showButton = true } = $$props;
     let { paddingTop = 73 } = $$props;
     let { ariaLabel = "" } = $$props;
+    let { isFinished = false } = $$props;
+    let { correctAnswerList = [] } = $$props;
+    let { isPreviewModeInteractive = false } = $$props;
     let considerItemId = "";
     let selectedItemId = "";
-    let dragDisabled = false;
+    let dragDisabled = isFinished;
     let currentAnswer = [];
     let sourceSelectedContainerId = "";
     let cloneId;
@@ -6274,6 +6713,7 @@
     let totalRemainingWordBinItem = 0;
     let currentTabContainer = "";
     let isModalOpen = false;
+    let items = [];
     const dispatch = createEventDispatcher();
     const dropTargetClasses = ["!outline-none"];
     const isContainerWordBin = containerId === CONTAINER_WORD_BIN_ID;
@@ -6285,7 +6725,7 @@
     categoriseSettings.subscribe((value) => {
       const { considerItemId: storeconsiderItemId, selectedItemId: storeSelectedItemId, currentAnswer: storeCurrentAnswer, sourceSelectedContainerId: storeSourceSelectedContainerId, currentWordBinIndex: storeCurrentWordBinIndex, currentTabContainer: storeCurrentTabContainer } = value;
       $$invalidate(8, considerItemId = storeconsiderItemId);
-      $$invalidate(9, dragDisabled = !!storeSelectedItemId);
+      $$invalidate(9, dragDisabled = isFinished || !!storeSelectedItemId);
       currentAnswer = storeCurrentAnswer;
       selectedItemId = storeSelectedItemId;
       $$invalidate(10, sourceSelectedContainerId = storeSourceSelectedContainerId);
@@ -6296,7 +6736,9 @@
       if (storeCurrentAnswer) {
         const currentAnswerList = currentAnswer.filter((answer) => answer.categoryId === containerId);
         if (currentAnswerList.length) {
-          $$invalidate(0, items = currentAnswerList[0].itemId.map((answerId) => {
+          $$invalidate(15, items = currentAnswerList[0].itemId.map((rawAnswerId) => {
+            const splitId = rawAnswerId.split(EAT_DASH);
+            const answerId = splitId[0];
             const answerIndex = rawCategoryItems.findIndex((answer) => answer.id === answerId);
             if (answerId === considerItemId) {
               return {
@@ -6306,7 +6748,10 @@
                 cloneId: rawCategoryItems[answerIndex].id
               };
             }
-            return { ...rawCategoryItems[answerIndex] };
+            return {
+              ...rawCategoryItems[answerIndex],
+              type: isFinished || isPreviewModeInteractive ? splitId[1] : ""
+            };
           }));
         }
       }
@@ -6325,7 +6770,7 @@
       const { sourceContainerId, sourceCloneContainerId } = get_store_value(categoriseSettings);
       if (trigger === TRIGGERS.DRAG_STARTED) {
         const { items: cateoryItems } = detail;
-        $$invalidate(0, items = cateoryItems);
+        $$invalidate(15, items = cateoryItems);
         const orginalId = items.filter((item) => item[SHADOW_ITEM_MARKER_PROPERTY_NAME]);
         const originalItemIndex = items.findIndex((item) => item.id === orginalId[0].id);
         items.splice(originalItemIndex, 1, {
@@ -6358,10 +6803,15 @@
     const handleDndFinalize = (e2) => {
       const { items: categoryItems, info } = e2.detail;
       const { trigger, id } = info;
-      $$invalidate(0, items = categoryItems.filter((item) => !item.isClonedItem));
+      $$invalidate(15, items = categoryItems.filter((item) => !item.isClonedItem));
       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),
@@ -6384,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({
@@ -6442,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 = [
           {
@@ -6450,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;
         }
@@ -6474,7 +6957,8 @@
       showAddItemAnimation(targetContainerId);
       categoriseSettings.set({
         ...get_store_value(categoriseSettings),
-        currentAnswer: updatedCurrentAnswer
+        currentAnswer: updatedCurrentAnswer,
+        previewResultSr
       });
       saveAnswer();
     };
@@ -6483,25 +6967,28 @@
       useNavigateItem(currentWordBinIndex2, currentAnswer2, "right", true);
     };
     $$self.$$set = ($$props2) => {
-      if ("items" in $$props2)
-        $$invalidate(0, items = $$props2.items);
       if ("containerClass" in $$props2)
-        $$invalidate(1, containerClass = $$props2.containerClass);
+        $$invalidate(0, containerClass = $$props2.containerClass);
       if ("flipDurationMs" in $$props2)
-        $$invalidate(2, flipDurationMs = $$props2.flipDurationMs);
+        $$invalidate(1, flipDurationMs = $$props2.flipDurationMs);
       if ("containerId" in $$props2)
-        $$invalidate(3, containerId = $$props2.containerId);
+        $$invalidate(2, containerId = $$props2.containerId);
       if ("type" in $$props2)
-        $$invalidate(4, type = $$props2.type);
+        $$invalidate(3, type = $$props2.type);
       if ("showButton" in $$props2)
-        $$invalidate(5, showButton = $$props2.showButton);
+        $$invalidate(4, showButton = $$props2.showButton);
       if ("paddingTop" in $$props2)
-        $$invalidate(6, paddingTop = $$props2.paddingTop);
+        $$invalidate(5, paddingTop = $$props2.paddingTop);
       if ("ariaLabel" in $$props2)
-        $$invalidate(7, ariaLabel = $$props2.ariaLabel);
+        $$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 [
-      items,
       containerClass,
       flipDurationMs,
       containerId,
@@ -6509,6 +6996,7 @@
       showButton,
       paddingTop,
       ariaLabel,
+      isFinished,
       considerItemId,
       dragDisabled,
       sourceSelectedContainerId,
@@ -6516,11 +7004,14 @@
       totalRemainingWordBinItem,
       currentTabContainer,
       isModalOpen,
+      items,
       dropTargetClasses,
       isContainerWordBin,
       handleDndConsider,
       handleDndFinalize,
-      addAnswerItem
+      addAnswerItem,
+      correctAnswerList,
+      isPreviewModeInteractive
     ];
   }
   var PromptCategoriseDndContainer = class extends SvelteComponent {
@@ -6530,84 +7021,100 @@
         this,
         options,
         instance6,
-        create_fragment9,
+        create_fragment10,
         safe_not_equal,
         {
-          items: 0,
-          containerClass: 1,
-          flipDurationMs: 2,
-          containerId: 3,
-          type: 4,
-          showButton: 5,
-          paddingTop: 6,
-          ariaLabel: 7
+          containerClass: 0,
+          flipDurationMs: 1,
+          containerId: 2,
+          type: 3,
+          showButton: 4,
+          paddingTop: 5,
+          ariaLabel: 6,
+          isFinished: 7,
+          correctAnswerList: 21,
+          isPreviewModeInteractive: 22
         },
         null,
         [-1, -1]
       );
     }
-    get items() {
-      return this.$$.ctx[0];
-    }
-    set items(items) {
-      this.$$set({ items });
-      flush();
-    }
     get containerClass() {
-      return this.$$.ctx[1];
+      return this.$$.ctx[0];
     }
     set containerClass(containerClass) {
       this.$$set({ containerClass });
       flush();
     }
     get flipDurationMs() {
-      return this.$$.ctx[2];
+      return this.$$.ctx[1];
     }
     set flipDurationMs(flipDurationMs) {
       this.$$set({ flipDurationMs });
       flush();
     }
     get containerId() {
-      return this.$$.ctx[3];
+      return this.$$.ctx[2];
     }
     set containerId(containerId) {
       this.$$set({ containerId });
       flush();
     }
     get type() {
-      return this.$$.ctx[4];
+      return this.$$.ctx[3];
     }
     set type(type) {
       this.$$set({ type });
       flush();
     }
     get showButton() {
-      return this.$$.ctx[5];
+      return this.$$.ctx[4];
     }
     set showButton(showButton) {
       this.$$set({ showButton });
       flush();
     }
     get paddingTop() {
-      return this.$$.ctx[6];
+      return this.$$.ctx[5];
     }
     set paddingTop(paddingTop) {
       this.$$set({ paddingTop });
       flush();
     }
     get ariaLabel() {
-      return this.$$.ctx[7];
+      return this.$$.ctx[6];
     }
     set ariaLabel(ariaLabel) {
       this.$$set({ ariaLabel });
       flush();
     }
+    get isFinished() {
+      return this.$$.ctx[7];
+    }
+    set isFinished(isFinished) {
+      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, { "items": {}, "containerClass": {}, "flipDurationMs": {}, "containerId": {}, "type": {}, "showButton": { "type": "Boolean" }, "paddingTop": {}, "ariaLabel": {} }, [], [], 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
-  function create_fragment10(ctx) {
+  function create_fragment11(ctx) {
     let div2;
     let div0;
     let t2;
@@ -6764,14 +7271,14 @@
   var CommonModal = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance7, create_fragment10, safe_not_equal, {});
+      init(this, options, instance7, create_fragment11, safe_not_equal, {});
     }
   };
   customElements.define("common-modal", create_custom_element(CommonModal, {}, ["default"], [], true));
   var CommonModal_default = CommonModal;
 
   // src/lib/assets/img/messaging/AlertIcon.svelte
-  function create_fragment11(ctx) {
+  function create_fragment12(ctx) {
     let svg;
     let path;
     return {
@@ -6805,14 +7312,14 @@
   var AlertIcon = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment11, safe_not_equal, {});
+      init(this, options, null, create_fragment12, safe_not_equal, {});
     }
   };
   create_custom_element(AlertIcon, {}, [], [], true);
   var AlertIcon_default = AlertIcon;
 
   // src/lib/assets/img/messaging/CrossIcon.svelte
-  function create_fragment12(ctx) {
+  function create_fragment13(ctx) {
     let svg;
     let path;
     return {
@@ -6846,7 +7353,7 @@
   var CrossIcon = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment12, safe_not_equal, {});
+      init(this, options, null, create_fragment13, safe_not_equal, {});
     }
   };
   create_custom_element(CrossIcon, {}, [], [], true);
@@ -7006,7 +7513,7 @@
       }
     };
   }
-  function create_fragment13(ctx) {
+  function create_fragment14(ctx) {
     let commonmodal;
     let current;
     commonmodal = new CommonModal_default({
@@ -7063,7 +7570,6 @@
         modalAriaLabel: "",
         isOpenLastStatus: true
       });
-      showModalAria = true;
     };
     const dispatch = createEventDispatcher();
     const resetCategories = () => {
@@ -7105,14 +7611,14 @@
   var PromptCategoriseModal = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance8, create_fragment13, safe_not_equal, {});
+      init(this, options, instance8, create_fragment14, safe_not_equal, {});
     }
   };
   customElements.define("prompy-categorise-modal", create_custom_element(PromptCategoriseModal, {}, [], [], true));
   var PromptCategoriseModal_default = PromptCategoriseModal;
 
   // src/lib/assets/img/action/Switch.svelte
-  function create_fragment14(ctx) {
+  function create_fragment15(ctx) {
     let svg;
     let path;
     return {
@@ -7144,14 +7650,14 @@
   var Switch = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment14, safe_not_equal, {});
+      init(this, options, null, create_fragment15, safe_not_equal, {});
     }
   };
   create_custom_element(Switch, {}, [], [], true);
   var Switch_default = Switch;
 
   // src/lib/assets/img/messaging/SmallChevronUp.svelte
-  function create_fragment15(ctx) {
+  function create_fragment16(ctx) {
     let svg;
     let path;
     return {
@@ -7185,14 +7691,14 @@
   var SmallChevronUp = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment15, safe_not_equal, {});
+      init(this, options, null, create_fragment16, safe_not_equal, {});
     }
   };
   create_custom_element(SmallChevronUp, {}, [], [], true);
   var SmallChevronUp_default = SmallChevronUp;
 
   // src/lib/assets/img/messaging/SmallChevronDown.svelte
-  function create_fragment16(ctx) {
+  function create_fragment17(ctx) {
     let svg;
     let path;
     return {
@@ -7226,14 +7732,14 @@
   var SmallChevronDown = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment16, safe_not_equal, {});
+      init(this, options, null, create_fragment17, safe_not_equal, {});
     }
   };
   create_custom_element(SmallChevronDown, {}, [], [], true);
   var SmallChevronDown_default = SmallChevronDown;
 
   // src/lib/assets/img/messaging/SmallChevronLeft.svelte
-  function create_fragment17(ctx) {
+  function create_fragment18(ctx) {
     let svg;
     let path;
     return {
@@ -7267,14 +7773,14 @@
   var SmallChevronLeft = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment17, safe_not_equal, {});
+      init(this, options, null, create_fragment18, safe_not_equal, {});
     }
   };
   create_custom_element(SmallChevronLeft, {}, [], [], true);
   var SmallChevronLeft_default = SmallChevronLeft;
 
   // src/lib/assets/img/messaging/SmallChevronRight.svelte
-  function create_fragment18(ctx) {
+  function create_fragment19(ctx) {
     let svg;
     let path;
     return {
@@ -7308,14 +7814,14 @@
   var SmallChevronRight = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment18, safe_not_equal, {});
+      init(this, options, null, create_fragment19, safe_not_equal, {});
     }
   };
   create_custom_element(SmallChevronRight, {}, [], [], true);
   var SmallChevronRight_default = SmallChevronRight;
 
   // src/lib/assets/img/messaging/ArrowDownCircle.svelte
-  function create_fragment19(ctx) {
+  function create_fragment20(ctx) {
     let svg;
     let path;
     return {
@@ -7349,7 +7855,7 @@
   var ArrowDownCircle = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment19, safe_not_equal, {});
+      init(this, options, null, create_fragment20, safe_not_equal, {});
     }
   };
   create_custom_element(ArrowDownCircle, {}, [], [], true);
@@ -7520,19 +8026,19 @@
   // src/lib/components/prompt/categorise/PromptCategorise.svelte
   function get_each_context3(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[48] = list[i];
-    child_ctx[49] = list;
-    child_ctx[50] = 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[29]
+      ctx[33]
     );
     return {
       c() {
@@ -7558,7 +8064,7 @@
       }
     };
   }
-  function create_if_block_32(ctx) {
+  function create_if_block_42(ctx) {
     let button;
     let span0;
     let switchicon;
@@ -7582,7 +8088,7 @@
           button,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[13]
+          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");
@@ -7599,19 +8105,19 @@
             button,
             "click",
             /*openResetModal*/
-            ctx[24]
+            ctx[28]
           );
           mounted = true;
         }
       },
       p(ctx2, dirty) {
         if (!current || dirty[0] & /*categoryTabIndex*/
-        8192) {
+        32768) {
           attr(
             button,
             "tabindex",
             /*categoryTabIndex*/
-            ctx2[13]
+            ctx2[15]
           );
         }
       },
@@ -7635,7 +8141,7 @@
       }
     };
   }
-  function create_if_block_23(ctx) {
+  function create_if_block_33(ctx) {
     let span;
     let t0;
     let t1;
@@ -7646,7 +8152,7 @@
         t0 = text("Option ");
         t1 = text(
           /*selectedItemName*/
-          ctx[14]
+          ctx[16]
         );
         t2 = text(" added in:\xA0");
         attr(span, "class", "sr-only");
@@ -7659,11 +8165,11 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*selectedItemName*/
-        16384)
+        65536)
           set_data(
             t1,
             /*selectedItemName*/
-            ctx2[14]
+            ctx2[16]
           );
       },
       d(detaching) {
@@ -7673,7 +8179,61 @@
       }
     };
   }
-  function create_else_block3(ctx) {
+  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) {
+        if (detaching) {
+          detach(span);
+        }
+      }
+    };
+  }
+  function create_else_block4(ctx) {
     let smallchevrondown;
     let current;
     smallchevrondown = new SmallChevronDown_default({});
@@ -7700,7 +8260,7 @@
       }
     };
   }
-  function create_if_block_16(ctx) {
+  function create_if_block_17(ctx) {
     let smallchevronup;
     let current;
     smallchevronup = new SmallChevronUp_default({});
@@ -7732,11 +8292,11 @@
     let div0;
     let show_if_1 = (
       /*checkContainerDroppedItem*/
-      ctx[22](
+      ctx[26](
         /*category*/
-        ctx[48].id,
+        ctx[53].id,
         /*dropContainerId*/
-        ctx[4]
+        ctx[6]
       )
     );
     let t0;
@@ -7744,145 +8304,162 @@
     let t4;
     let span1;
     let t6;
+    let t7;
     let button;
     let span2;
-    let t7_value = (
+    let t8_value = (
       /*getTotalWords*/
-      ctx[25](
+      ctx[29](
         /*category*/
-        ctx[48].id,
+        ctx[53].id,
         /*currentAnswer*/
-        ctx[7]
+        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[48]
+      ctx[53]
     );
     let current;
     let mounted;
     let dispose;
-    let if_block0 = show_if_1 && create_if_block_23(ctx);
-    const if_block_creators = [create_if_block_16, create_else_block3];
+    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*/
-      2048)
+      8192)
         show_if = null;
       if (show_if == null)
         show_if = !!/*checkifCategoryContainerOpen*/
-        ctx2[26](
+        ctx2[30](
           /*category*/
-          ctx2[48].id,
+          ctx2[53].id,
           /*openCategoryContainer*/
-          ctx2[11]
+          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[34].call(
+      ctx[39].call(
         div0,
         /*category*/
-        ctx[48]
+        ctx[53]
       );
     }
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-        (ctx[21](
+        (ctx[25](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[2],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[3]
+          ctx[5]
         ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-        (ctx[26](
+        (ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) ? "h-full p-3 min-h-[86px] md:min-h-0" : ""),
         paddingTop: (
           /*checkifCategoryContainerOpen*/
-          ctx[26](
+          ctx[30](
             /*category*/
-            ctx[48].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[11]
+            ctx[13]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[16][
+            ctx[19][
               /*category*/
-              ctx[48].id
+              ctx[53].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[16][
+            ctx[19][
               /*category*/
-              ctx[48].id
+              ctx[53].id
             ]
           )
         ),
         containerId: (
           /*category*/
-          ctx[48].id
+          ctx[53].id
         ),
         showButton: (
           /*checkifCategoryContainerOpen*/
-          ctx[26](
+          ctx[30](
             /*category*/
-            ctx[48].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[11]
+            ctx[13]
           )
         ),
         ariaLabel: `Category ${/*index*/
-        ctx[50] + 1}: ${/*category*/
-        ctx[48].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[29]
+      ctx[33]
     );
     function keydown_handler(...args) {
       return (
         /*keydown_handler*/
-        ctx[35](
+        ctx[40](
           /*category*/
-          ctx[48],
+          ctx[53],
           ...args
         )
       );
     }
     const assign_div1 = () => (
       /*div1_binding*/
-      ctx[36](div1, category)
+      ctx[41](div1, category)
     );
     const unassign_div1 = () => (
       /*div1_binding*/
-      ctx[36](null, category)
+      ctx[41](null, category)
     );
     return {
       c() {
@@ -7893,132 +8470,135 @@
         t0 = space();
         span0 = element("span");
         span0.textContent = `Category ${/*index*/
-        ctx[50] + 1}:\xA0`;
+        ctx[55] + 1}:\xA0`;
         t4 = space();
         span1 = element("span");
         span1.textContent = `${/*category*/
-        ctx[48].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[25](
+        ctx[29](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*currentAnswer*/
-          ctx[7]
+          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[50]}`);
+        ctx[55]}`);
         attr(div0, "aria-live", div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[22](
+        ctx[26](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          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[22](
+        (ctx[26](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[26](
+        ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) && /*checkContainerDragOver*/
-        ctx[21](
+        ctx[25](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[2],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[3]
+          ctx[5]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[26](
+        (ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[26](
+        ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) && /*checkSelectedSourceContainer*/
-        ctx[23](
+        ctx[27](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[6],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[5]
+          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[10]
+          ctx[12]
         );
         attr(
           div1,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[13]
+          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[21](
+        (ctx[25](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[2],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[3]
+          ctx[5]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[9] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[23](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[6],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[5]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[26](
+        (ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) ? "min-h-[140px]" : ""));
       },
       m(target, anchor) {
@@ -8031,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) {
@@ -8048,18 +8631,18 @@
             listen(button, "click", function() {
               if (is_function(
                 /*addCategoryContainer*/
-                ctx[27](
+                ctx[31](
                   /*category*/
-                  ctx[48].id,
+                  ctx[53].id,
                   /*openCategoryContainer*/
-                  ctx[11]
+                  ctx[13]
                 )
               ))
-                ctx[27](
+                ctx[31](
                   /*category*/
-                  ctx[48].id,
+                  ctx[53].id,
                   /*openCategoryContainer*/
-                  ctx[11]
+                  ctx[13]
                 ).apply(this, arguments);
             }),
             listen(div1, "keydown", keydown_handler),
@@ -8067,7 +8650,7 @@
               div1,
               "focus",
               /*resetTabCategory*/
-              ctx[31]
+              ctx[35]
             )
           ];
           mounted = true;
@@ -8076,19 +8659,19 @@
       p(new_ctx, dirty) {
         ctx = new_ctx;
         if (dirty[0] & /*dropContainerId*/
-        16)
+        64)
           show_if_1 = /*checkContainerDroppedItem*/
-          ctx[22](
+          ctx[26](
             /*category*/
-            ctx[48].id,
+            ctx[53].id,
             /*dropContainerId*/
-            ctx[4]
+            ctx[6]
           );
         if (show_if_1) {
           if (if_block0) {
             if_block0.p(ctx, dirty);
           } else {
-            if_block0 = create_if_block_23(ctx);
+            if_block0 = create_if_block_33(ctx);
             if_block0.c();
             if_block0.m(div0, t0);
           }
@@ -8096,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*/
-        128) && t7_value !== (t7_value = /*getTotalWords*/
-        ctx[25](
+        512) && t8_value !== (t8_value = /*getTotalWords*/
+        ctx[29](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*currentAnswer*/
-          ctx[7]
+          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) {
@@ -8113,202 +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*/
-        128 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
-        ctx[25](
+        512 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
+        ctx[29](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*currentAnswer*/
-          ctx[7]
+          ctx[9]
         ))) {
           attr(button, "aria-label", button_aria_label_value);
         }
         if (!current || dirty[0] & /*dropContainerId*/
-        16 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[22](
+        64 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[26](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "polite" : "off")) {
           attr(div0, "aria-live", div0_aria_live_value);
         }
         if (!current || dirty[0] & /*dropContainerId, openCategoryContainer, considerContainerId, isDraggingOver, sourceSelectedContainerId, currentSelectedItemId*/
-        2172 && 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[22](
+        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[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[26](
+        ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) && /*checkContainerDragOver*/
-        ctx[21](
+        ctx[25](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[2],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[3]
+          ctx[5]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[26](
+        (ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[26](
+        ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) && /*checkSelectedSourceContainer*/
-        ctx[23](
+        ctx[27](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[6],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[5]
+          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*/
-        2060)
+        8240)
           promptcategorisedndcontainer_changes.containerClass = "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-          (ctx[21](
+          (ctx[25](
             /*category*/
-            ctx[48].id,
+            ctx[53].id,
             /*considerContainerId*/
-            ctx[2],
+            ctx[4],
             /*isDraggingOver*/
-            ctx[3]
+            ctx[5]
           ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-          (ctx[26](
+          (ctx[30](
             /*category*/
-            ctx[48].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[11]
+            ctx[13]
           ) ? "h-full p-3 min-h-[86px] md:min-h-0" : "");
         if (dirty[0] & /*openCategoryContainer, categoryTitleHeight*/
-        67584)
+        532480)
           promptcategorisedndcontainer_changes.paddingTop = /*checkifCategoryContainerOpen*/
-          ctx[26](
+          ctx[30](
             /*category*/
-            ctx[48].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[11]
+            ctx[13]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[16][
+            ctx[19][
               /*category*/
-              ctx[48].id
+              ctx[53].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[16][
+            ctx[19][
               /*category*/
-              ctx[48].id
+              ctx[53].id
             ]
           );
         if (dirty[0] & /*openCategoryContainer*/
-        2048)
+        8192)
           promptcategorisedndcontainer_changes.showButton = /*checkifCategoryContainerOpen*/
-          ctx[26](
+          ctx[30](
             /*category*/
-            ctx[48].id,
+            ctx[53].id,
             /*openCategoryContainer*/
-            ctx[11]
+            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*/
-        1024) {
+        4096) {
           attr(
             div1,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[10]
+            ctx[12]
           );
         }
         if (!current || dirty[0] & /*categoryTabIndex*/
-        8192) {
+        32768) {
           attr(
             div1,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[13]
+            ctx[15]
           );
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer*/
-        2684 && 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[21](
+        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[48].id,
+          ctx[53].id,
           /*considerContainerId*/
-          ctx[2],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[3]
+          ctx[5]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[9] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[23](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*sourceSelectedContainerId*/
-          ctx[6],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[5]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[26](
+        (ctx[30](
           /*category*/
-          ctx[48].id,
+          ctx[53].id,
           /*openCategoryContainer*/
-          ctx[11]
+          ctx[13]
         ) ? "min-h-[140px]" : ""))) {
           attr(div1, "class", div1_class_value);
         }
         if (category !== /*category*/
-        ctx[48]) {
+        ctx[53]) {
           unassign_div1();
           category = /*category*/
-          ctx[48];
+          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;
       },
@@ -8318,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);
@@ -8327,7 +8935,7 @@
       }
     };
   }
-  function create_if_block6(ctx) {
+  function create_if_block7(ctx) {
     let span;
     let t0;
     let t1;
@@ -8338,7 +8946,7 @@
         t0 = text("Option ");
         t1 = text(
           /*selectedItemName*/
-          ctx[14]
+          ctx[16]
         );
         t2 = text(" added in:\xA0");
         attr(span, "class", "sr-only");
@@ -8351,11 +8959,11 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*selectedItemName*/
-        16384)
+        65536)
           set_data(
             t1,
             /*selectedItemName*/
-            ctx2[14]
+            ctx2[16]
           );
       },
       d(detaching) {
@@ -8383,10 +8991,10 @@
     let div2;
     let show_if = (
       /*checkContainerDroppedItem*/
-      ctx[22](
+      ctx[26](
         CONTAINER_WORD_BIN_ID,
         /*dropContainerId*/
-        ctx[4]
+        ctx[6]
       )
     );
     let t8;
@@ -8420,16 +9028,17 @@
     arrowdowncircle = new ArrowDownCircle_default({});
     let if_block0 = (
       /*isModalOpen*/
-      ctx[10] && create_if_block_42(ctx)
+      ctx[12] && create_if_block_5(ctx)
     );
     let if_block1 = (
       /*totalRemainingWordBinItem*/
-      ctx[8] !== /*totalCategoryItems*/
-      ctx[1] && 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[20]
+      ctx[24]
     ));
     let each_blocks = [];
     for (let i = 0; i < each_value.length; i += 1) {
@@ -8438,28 +9047,40 @@
     const out = (i) => transition_out(each_blocks[i], 1, 1, () => {
       each_blocks[i] = null;
     });
-    let if_block2 = show_if && create_if_block6(ctx);
+    let if_block2 = show_if && create_if_block7(ctx);
     smallchevronleft = new SmallChevronLeft_default({});
     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[28](
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[8]
+          ctx[10]
         ) && !/*currentSelectedItemId*/
-        ctx[5] ? "absolute inset-0" : ""),
+        ctx[7] ? "absolute inset-0" : ""),
         items: (
           /*categoryItems*/
-          ctx[19]
+          ctx[23]
         ),
         containerId: CONTAINER_WORD_BIN_ID,
-        ariaLabel: "Word bin"
+        ariaLabel: "Word bin",
+        isFinished: (
+          /*isFinished*/
+          ctx[0]
+        ),
+        correctAnswerList: (
+          /*scoringMetadata*/
+          ctx[21]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
+          ctx[1]
+        )
       }
     });
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[29]
+      ctx[33]
     );
     smallchevronright = new SmallChevronRight_default({});
     return {
@@ -8497,12 +9118,12 @@
         span3 = element("span");
         t11 = text(
           /*totalRemainingWordBinItem*/
-          ctx[8]
+          ctx[10]
         );
         t12 = text(" out of ");
         t13 = text(
           /*totalCategoryItems*/
-          ctx[1]
+          ctx[3]
         );
         t14 = text(" left");
         t15 = space();
@@ -8522,7 +9143,7 @@
           button0,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[13]
+          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");
@@ -8532,7 +9153,7 @@
           div0,
           "aria-hidden",
           /*isModalOpen*/
-          ctx[10]
+          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");
@@ -8541,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[28](
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[8]
+          ctx[10]
         ) ? "hidden" : ""));
         button1.disabled = button1_disabled_value = /*currentWordBinIndex*/
-        ctx[12] === 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[28](
+        (ctx[32](
           /*totalRemainingWordBinItem*/
-          ctx[8]
+          ctx[10]
         ) ? "hidden" : ""));
         button2.disabled = button2_disabled_value = /*currentWordBinIndex*/
-        ctx[12] === /*totalRemainingWordBinItem*/
-        ctx[8] - 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[10]
+          ctx[12]
         );
         attr(
           div4,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[13]
+          ctx[15]
         );
         attr(div4, "aria-live", div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[22](
+        ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[4]
+          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[21](
+        (ctx[25](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
-          ctx[2],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[3]
+          ctx[5]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[9] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[23](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
-          ctx[6],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[5]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""));
       },
       m(target, anchor) {
@@ -8650,7 +9271,7 @@
         append(div3, button2);
         append(button2, span5);
         mount_component(smallchevronright, span5, null);
-        ctx[38](div4);
+        ctx[43](div4);
         current = true;
         if (!mounted) {
           dispose = [
@@ -8658,37 +9279,37 @@
               button0,
               "keypress",
               /*goToWordBin*/
-              ctx[32]
+              ctx[36]
             ),
             listen(button1, "click", function() {
               if (is_function(useNavigateItem(
                 /*currentWordBinIndex*/
-                ctx[12],
+                ctx[14],
                 /*currentAnswer*/
-                ctx[7],
+                ctx[9],
                 "left"
               )))
                 useNavigateItem(
                   /*currentWordBinIndex*/
-                  ctx[12],
+                  ctx[14],
                   /*currentAnswer*/
-                  ctx[7],
+                  ctx[9],
                   "left"
                 ).apply(this, arguments);
             }),
             listen(button2, "click", function() {
               if (is_function(useNavigateItem(
                 /*currentWordBinIndex*/
-                ctx[12],
+                ctx[14],
                 /*currentAnswer*/
-                ctx[7],
+                ctx[9],
                 "right"
               )))
                 useNavigateItem(
                   /*currentWordBinIndex*/
-                  ctx[12],
+                  ctx[14],
                   /*currentAnswer*/
-                  ctx[7],
+                  ctx[9],
                   "right"
                 ).apply(this, arguments);
             }),
@@ -8696,13 +9317,13 @@
               div4,
               "keydown",
               /*keydown_handler_1*/
-              ctx[37]
+              ctx[42]
             ),
             listen(
               div4,
               "focus",
               /*resetTabCategory*/
-              ctx[31]
+              ctx[35]
             )
           ];
           mounted = true;
@@ -8711,26 +9332,26 @@
       p(new_ctx, dirty) {
         ctx = new_ctx;
         if (!current || dirty[0] & /*categoryTabIndex*/
-        8192) {
+        32768) {
           attr(
             button0,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[13]
+            ctx[15]
           );
         }
         if (
           /*isModalOpen*/
-          ctx[10]
+          ctx[12]
         ) {
           if (if_block0) {
             if_block0.p(ctx, dirty);
             if (dirty[0] & /*isModalOpen*/
-            1024) {
+            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);
@@ -8744,17 +9365,18 @@
         }
         if (
           /*totalRemainingWordBinItem*/
-          ctx[8] !== /*totalCategoryItems*/
-          ctx[1]
+          ctx[10] !== /*totalCategoryItems*/
+          ctx[3] && !/*isFinished*/
+          ctx[0]
         ) {
           if (if_block1) {
             if_block1.p(ctx, dirty);
-            if (dirty[0] & /*totalRemainingWordBinItem, totalCategoryItems*/
-            258) {
+            if (dirty[0] & /*totalRemainingWordBinItem, totalCategoryItems, isFinished*/
+            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);
@@ -8767,20 +9389,20 @@
           check_outros();
         }
         if (!current || dirty[0] & /*isModalOpen*/
-        1024) {
+        4096) {
           attr(
             div0,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[10]
+            ctx[12]
           );
         }
-        if (dirty[0] & /*isModalOpen, categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, checkifCategoryContainerOpen, openCategoryContainer, tabCategory, getContainerTabSelected, categoryTitleHeight, saveCategory, getTotalWords, currentAnswer, addCategoryContainer, selectedItemName*/
-        1861349116 | dirty[1] & /*resetTabCategory*/
-        1) {
+        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[20]
+            ctx[24]
           ));
           let i;
           for (i = 0; i < each_value.length; i += 1) {
@@ -8802,18 +9424,18 @@
           check_outros();
         }
         if (dirty[0] & /*dropContainerId*/
-        16)
+        64)
           show_if = /*checkContainerDroppedItem*/
-          ctx[22](
+          ctx[26](
             CONTAINER_WORD_BIN_ID,
             /*dropContainerId*/
-            ctx[4]
+            ctx[6]
           );
         if (show_if) {
           if (if_block2) {
             if_block2.p(ctx, dirty);
           } else {
-            if_block2 = create_if_block6(ctx);
+            if_block2 = create_if_block7(ctx);
             if_block2.c();
             if_block2.m(div2, t8);
           }
@@ -8822,109 +9444,117 @@
           if_block2 = null;
         }
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        256)
+        1024)
           set_data(
             t11,
             /*totalRemainingWordBinItem*/
-            ctx[8]
+            ctx[10]
           );
         if (!current || dirty[0] & /*totalCategoryItems*/
-        2)
+        8)
           set_data(
             t13,
             /*totalCategoryItems*/
-            ctx[1]
+            ctx[3]
           );
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        256 && 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[28](
+        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[8]
+          ctx[10]
         ) ? "hidden" : ""))) {
           attr(button1, "class", button1_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex*/
-        4096 && button1_disabled_value !== (button1_disabled_value = /*currentWordBinIndex*/
-        ctx[12] === 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*/
-        288)
+        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[28](
+          (ctx[32](
             /*totalRemainingWordBinItem*/
-            ctx[8]
+            ctx[10]
           ) && !/*currentSelectedItemId*/
-          ctx[5] ? "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*/
-        256 && 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[28](
+        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[8]
+          ctx[10]
         ) ? "hidden" : ""))) {
           attr(button2, "class", button2_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex, totalRemainingWordBinItem*/
-        4352 && button2_disabled_value !== (button2_disabled_value = /*currentWordBinIndex*/
-        ctx[12] === /*totalRemainingWordBinItem*/
-        ctx[8] - 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*/
-        1024) {
+        4096) {
           attr(
             div4,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[10]
+            ctx[12]
           );
         }
         if (!current || dirty[0] & /*categoryTabIndex*/
-        8192) {
+        32768) {
           attr(
             div4,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[13]
+            ctx[15]
           );
         }
         if (!current || dirty[0] & /*dropContainerId*/
-        16 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[22](
+        64 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "polite" : "off")) {
           attr(div4, "aria-live", div4_aria_live_value);
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId*/
-        636 && 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[21](
+        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[2],
+          ctx[4],
           /*isDraggingOver*/
-          ctx[3]
+          ctx[5]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[22](
+        (ctx[26](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[4]
+          ctx[6]
         ) && /*hasAddItemAnimation*/
-        ctx[9] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[23](
+        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[27](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
-          ctx[6],
+          ctx[8],
           /*currentSelectedItemId*/
-          ctx[5]
+          ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""))) {
           attr(div4, "class", div4_class_value);
         }
@@ -8978,13 +9608,13 @@
         destroy_component(smallchevronleft);
         destroy_component(promptcategorisedndcontainer);
         destroy_component(smallchevronright);
-        ctx[38](null);
+        ctx[43](null);
         mounted = false;
         run_all(dispose);
       }
     };
   }
-  function create_fragment20(ctx) {
+  function create_fragment21(ctx) {
     let div;
     let promptbody;
     let current;
@@ -8992,11 +9622,11 @@
       props: {
         rubric: (
           /*rubric*/
-          ctx[17].text
+          ctx[20].text
         ),
         prompt: (
           /*prompt*/
-          ctx[18]
+          ctx[22]
         ),
         $$slots: { default: [create_default_slot4] },
         $$scope: { ctx }
@@ -9011,14 +9641,14 @@
       m(target, anchor) {
         insert(target, div, anchor);
         mount_component(promptbody, div, null);
-        ctx[39](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, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight*/
-        131070 | dirty[1] & /*$$scope*/
-        1048576) {
+        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);
@@ -9038,12 +9668,15 @@
           detach(div);
         }
         destroy_component(promptbody);
-        ctx[39](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;
@@ -9061,12 +9694,13 @@
     let currentWordBinIndex = [];
     let categoryTabIndex = 0;
     let selectedItemName = "";
-    const { rubric, interaction, metadata } = sessionData;
+    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(15, 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 = [
@@ -9077,7 +9711,7 @@
     ];
     let categoryTitleHeight = [];
     categoryGroups.map((category) => {
-      $$invalidate(16, categoryTitleHeight[category.id] = "", categoryTitleHeight);
+      $$invalidate(19, categoryTitleHeight[category.id] = "", categoryTitleHeight);
     });
     if (metadata) {
       const { events } = metadata.interactions;
@@ -9095,6 +9729,42 @@
         initialCategoryAnswer = [...initialCategoryAnswer, ...categorySavedItems];
       }
     }
+    if (isFinished) {
+      const showOpenContainerList = [];
+      const { answerList } = scoringMetadata;
+      let categoryWithAnswer = categoryGroups.map((category) => {
+        const { id: categoryId } = category;
+        showOpenContainerList.push(categoryId);
+        const categoryIndex = initialCategoryAnswer.findIndex((answer) => answer.categoryId === categoryId);
+        const categoryData = initialCategoryAnswer[categoryIndex];
+        const categoryAnswerList = answerList[categoryId];
+        let missedItems = [];
+        const items = [];
+        if (categoryData) {
+          const { itemId } = categoryData;
+          const correctItems = itemId.filter((item) => categoryAnswerList.includes(item));
+          const incorrectItems = itemId.filter((item) => !categoryAnswerList.includes(item));
+          missedItems = categoryAnswerList.filter((item) => !itemId.includes(item));
+          correctItems?.map((item) => items.push(`${item}${EAT_DASH}${ANSWER_CORRECT}`));
+          incorrectItems?.map((item) => items.push(`${item}${EAT_DASH}${ANSWER_INCORRECT}`));
+        } else {
+          missedItems = categoryAnswerList;
+        }
+        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: isPreviewMode ? [] : wordBinData
+      });
+      initialCategoryAnswer = categoryWithAnswer;
+      categoriseSettings.set({
+        ...get_store_value(categoriseSettings),
+        openCategoryContainer: showOpenContainerList
+      });
+    }
     categoriseSettings.set({
       ...get_store_value(categoriseSettings),
       currentAnswer: initialCategoryAnswer,
@@ -9103,13 +9773,13 @@
     });
     modalSettings.subscribe((value) => {
       const { isModalOpen: storeIsModalOpen, isOpenLastStatus } = value;
-      $$invalidate(10, isModalOpen = storeIsModalOpen);
-      $$invalidate(13, categoryTabIndex = storeIsModalOpen ? -1 : 0);
+      $$invalidate(12, isModalOpen = storeIsModalOpen);
+      $$invalidate(15, categoryTabIndex = storeIsModalOpen ? -1 : 0);
       if (!storeIsModalOpen && isOpenLastStatus) {
         setTimeout(() => {
-          $$invalidate(0, srDiv.tabIndex = 0, srDiv);
+          $$invalidate(2, srDiv.tabIndex = 0, srDiv);
           srDiv.focus();
-          $$invalidate(0, srDiv.tabIndex = -1, srDiv);
+          $$invalidate(2, srDiv.tabIndex = -1, srDiv);
           modalSettings.set({
             ...get_store_value(modalSettings),
             isOpenLastStatus: false
@@ -9118,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(2, considerContainerId = storeConsiderContainerId);
-      $$invalidate(3, isDraggingOver = storeIsDraggingOver);
-      $$invalidate(4, 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(5, currentSelectedItemId = storeSelectedItemId);
-      $$invalidate(6, sourceSelectedContainerId = storeSourceSelectedContainerId);
-      $$invalidate(7, currentAnswer = storeCurrentAnswer);
-      $$invalidate(9, hasAddItemAnimation = storeHasAddItemAnimation);
-      $$invalidate(11, openCategoryContainer = storeOpenCategoryContainer);
-      $$invalidate(12, currentWordBinIndex = storeCurrentWordBinIndex);
-      $$invalidate(14, selectedItemName = storeSelectedItemName);
-      $$invalidate(13, 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(8, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
+      $$invalidate(10, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
       if (lastSelectedTabContainer) {
         setTimeout(
           () => {
@@ -9159,8 +9830,19 @@
       modalSettings.set({ ...get_store_value(modalSettings), isModalOpen: true });
     };
     const getTotalWords = (categoryId, currentAnswerData) => {
-      const category = currentAnswerData.filter((answer) => answer.categoryId === categoryId);
-      const totalWords = category[0] ? category[0].itemId.length : 0;
+      let totalWords = 0;
+      const category = currentAnswerData.filter((answer) => answer.categoryId === categoryId)[0];
+      if (category) {
+        const categoryItems2 = category.itemId;
+        totalWords = categoryItems2.length;
+        if (isFinished) {
+          const items = categoryItems2.filter((item) => {
+            const itemType = item.split(EAT_DASH)[1];
+            return itemType !== ANSWER_MISSED;
+          });
+          totalWords = items.length;
+        }
+      }
       return `${totalWords} ${totalWords === 1 ? "word" : "words"}`;
     };
     const checkifCategoryContainerOpen = (categoryId, openCategoryContainer2) => {
@@ -9183,6 +9865,8 @@
       return totalRemainingWordBinItem2 <= 0;
     };
     const saveCategory = ({ detail }) => {
+      if (isPreviewModeInteractive)
+        return;
       dispatch("saveCategory", detail);
     };
     const getContainerTabSelected = (key, containerId) => {
@@ -9213,33 +9897,41 @@
     };
     function div0_elementresize_handler(category) {
       categoryTitleHeight[category.id] = this.clientHeight;
-      $$invalidate(16, 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(15, 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(15, tabCategory);
+        $$invalidate(18, tabCategory);
       });
     }
     function div_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         srDiv = $$value;
-        $$invalidate(0, srDiv);
+        $$invalidate(2, srDiv);
       });
     }
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(33, 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,
@@ -9255,9 +9947,11 @@
       currentWordBinIndex,
       categoryTabIndex,
       selectedItemName,
+      previewResultSr,
       tabCategory,
       categoryTitleHeight,
       rubric,
+      scoringMetadata,
       prompt,
       categoryItems,
       categoryGroups,
@@ -9274,6 +9968,7 @@
       resetTabCategory,
       goToWordBin,
       sessionData,
+      isPreviewMode,
       div0_elementresize_handler,
       keydown_handler,
       div1_binding,
@@ -9285,21 +9980,56 @@
   var PromptCategorise = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance9, create_fragment20, safe_not_equal, { sessionData: 33 }, 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[33];
+      return this.$$.ctx[37];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
       flush();
     }
+    get isFinished() {
+      return this.$$.ctx[0];
+    }
+    set isFinished(isFinished) {
+      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": {} }, [], [], 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
-  function create_fragment21(ctx) {
+  function create_fragment22(ctx) {
     let div3;
     return {
       c() {
@@ -9322,14 +10052,14 @@
   var PromptSkeleton = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment21, safe_not_equal, {});
+      init(this, options, null, create_fragment22, safe_not_equal, {});
     }
   };
   customElements.define("prompt-skeleton", create_custom_element(PromptSkeleton, {}, [], [], true));
   var PromptSkeleton_default = PromptSkeleton;
 
   // src/lib/components/common/InvalidBanner.svelte
-  function create_fragment22(ctx) {
+  function create_fragment23(ctx) {
     let p;
     let t2;
     return {
@@ -9374,7 +10104,7 @@
   var InvalidBanner = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance10, create_fragment22, safe_not_equal, { bannerLabel: 0 });
+      init(this, options, instance10, create_fragment23, safe_not_equal, { bannerLabel: 0 });
     }
     get bannerLabel() {
       return this.$$.ctx[0];
@@ -9389,7 +10119,7 @@
 
   // src/lib/components/prompt/PromptBuilder.svelte
   function add_css(target) {
-    append_styles(target, "svelte-12ljqr6", '*,: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-12ljqr6-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-12ljqr6-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}.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-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}}@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;
@@ -9419,12 +10149,12 @@
       }
     };
   }
-  function create_if_block_17(ctx) {
+  function create_if_block_18(ctx) {
     let current_block_type_index;
     let if_block;
     let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block_24, create_if_block_33, create_if_block_43, create_else_block4];
+    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 (
@@ -9496,7 +10226,7 @@
       }
     };
   }
-  function create_if_block7(ctx) {
+  function create_if_block8(ctx) {
     let promptskeleton;
     let current;
     promptskeleton = new PromptSkeleton_default({});
@@ -9524,7 +10254,7 @@
       }
     };
   }
-  function create_else_block4(ctx) {
+  function create_else_block5(ctx) {
     let invalidbanner;
     let current;
     invalidbanner = new InvalidBanner_default({ props: { bannerLabel } });
@@ -9556,10 +10286,24 @@
     let promptcategorise;
     let current;
     promptcategorise = new PromptCategorise_default({
-      props: { sessionData: (
-        /*sessionData*/
-        ctx[0]
-      ) }
+      props: {
+        sessionData: (
+          /*sessionData*/
+          ctx[0]
+        ),
+        isFinished: (
+          /*isFinished*/
+          ctx[4]
+        ),
+        isPreviewMode: (
+          /*isPreviewMode*/
+          ctx[7]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
+          ctx[6]
+        )
+      }
     });
     promptcategorise.$on(
       "saveCategory",
@@ -9580,6 +10324,10 @@
         1)
           promptcategorise_changes.sessionData = /*sessionData*/
           ctx2[0];
+        if (dirty & /*isFinished*/
+        16)
+          promptcategorise_changes.isFinished = /*isFinished*/
+          ctx2[4];
         promptcategorise.$set(promptcategorise_changes);
       },
       i(local) {
@@ -9597,7 +10345,7 @@
       }
     };
   }
-  function create_if_block_33(ctx) {
+  function create_if_block_34(ctx) {
     let prompttypein;
     let current;
     prompttypein = new PromptTypeIn_default({
@@ -9676,7 +10424,7 @@
       }
     };
   }
-  function create_if_block_24(ctx) {
+  function create_if_block_26(ctx) {
     let promptmcq;
     let current;
     promptmcq = new PromptMCQ_default({
@@ -9751,12 +10499,12 @@
       }
     };
   }
-  function create_fragment23(ctx) {
+  function create_fragment24(ctx) {
     let current_block_type_index;
     let if_block;
     let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block7, create_if_block_17, create_else_block_12];
+    const if_block_creators = [create_if_block8, create_if_block_18, create_else_block_12];
     const if_blocks = [];
     function select_block_type(ctx2, dirty) {
       if (
@@ -9862,7 +10610,7 @@
         $$invalidate(3, interactionType = getInteractionType(data));
         $$invalidate(0, sessionData = { ...data, metadata });
         if (isFinished && isLocked && !isPreviewMode) {
-          await getSessionScore();
+          await getSessionScore(data);
         }
         if (isPreviewMode) {
           setPreviewData(data);
@@ -9883,7 +10631,7 @@
       }
       return interactionType2;
     };
-    const getSessionScore = async () => {
+    const getSessionScore = async (sessionRawData) => {
       try {
         const { data } = await useGet(`sessions/${sessionId}/score${skipUserValidationStr}`);
         if (data) {
@@ -9894,6 +10642,9 @@
             case INTERACTION_TYPE_MCQ:
               scoringMetadata = { ...scoringMetadata, answerId: answer[0] };
               break;
+            case INTERACTION_TYPE_CATEGORISE:
+              scoringMetadata = getCategoriseCorrectAnswer(sessionRawData);
+              break;
             case INTERACTION_TYPE_TYPEIN:
             default:
               scoringMetadata = { ...scoringMetadata, answer: answer[0] };
@@ -9922,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;
@@ -9942,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;
@@ -9998,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 [
@@ -10016,7 +10784,7 @@
   var PromptBuilder = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance11, create_fragment23, safe_not_equal, {}, add_css);
+      init(this, options, instance11, create_fragment24, safe_not_equal, {}, add_css);
     }
   };
   customElements.define("prompt-builder", create_custom_element(PromptBuilder, {}, [], [], true));