eat-js-sdk 0.0.51 → 0.0.53

package/dist/eat-prompt-builder.mjs

@@ -5316,31 +5316,6 @@
     }(parseFloat(value));
   }
 
-  // src/lib/stores/prompt.ts
-  var categoriseSettings = writable({
-    considerContainerId: "",
-    considerItemId: "",
-    considerCloneItemId: "",
-    sourceCloneContainerId: "",
-    sourceContainerId: "",
-    dropContainerId: "",
-    isDraggingOver: false,
-    selectedItemId: "",
-    selectedContainerId: "",
-    sourceSelectedContainerId: "",
-    currentAnswer: [],
-    rawCategories: [],
-    rawCategoryItems: [],
-    hasAddItemAnimation: false,
-    openCategoryContainer: [],
-    currentWordBinIndex: 0,
-    currentTabContainer: "",
-    lastSelectedTabContainer: "",
-    selectedItemName: "",
-    previewResultSr: "",
-    isItemsAriaHidden: false
-  });
-
   // src/lib/assets/img/product/GripVertical.svelte
   function create_fragment7(ctx) {
     let svg;
@@ -5612,19 +5587,19 @@
     function select_block_type(ctx2, dirty) {
       if (
         /*resultType*/
-        ctx2[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
+        ctx2[0] === ANSWER_CORRECT && !/*isWordItemSelected*/
         ctx2[10]
       )
         return 0;
       if (
         /*resultType*/
-        ctx2[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
+        ctx2[0] === ANSWER_INCORRECT && !/*isWordItemSelected*/
         ctx2[10]
       )
         return 1;
       if (
         /*resultType*/
-        ctx2[1] === ANSWER_MISSED
+        ctx2[0] === ANSWER_MISSED
       )
         return 2;
       return 3;
@@ -5633,8 +5608,8 @@
     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)
+      (ctx[0] === ANSWER_CORRECT || /*resultType*/
+      ctx[0] === ANSWER_INCORRECT) && create_if_block5(ctx)
     );
     return {
       c() {
@@ -5642,7 +5617,7 @@
         span0 = element("span");
         t0 = text(
           /*word*/
-          ctx[0]
+          ctx[1]
         );
         t1 = space();
         div = element("div");
@@ -5656,11 +5631,11 @@
         attr(span0, "class", span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
         (ctx[10] ? "text-white" : ""));
         attr(span1, "class", span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
-        ctx[9] && !/*disabledClick*/
+        ctx[7] && !/*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[9] && !/*disabledClick*/
+        ctx[7] && !/*disabledClick*/
         ctx[6] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""));
         attr(
           button,
@@ -5669,42 +5644,42 @@
           ctx[3]
         );
         attr(button, "aria-label", button_aria_label_value = /*resultType*/
-        ctx[1] === ANSWER_INCORRECT && /*containerId*/
+        ctx[0] === ANSWER_INCORRECT && /*containerId*/
         ctx[5] === CONTAINER_WORD_BIN_ID && !/*isWordItemSelected*/
         ctx[10] ? `Skipped answer: ${/*word*/
-        ctx[0]}` : (
+        ctx[1]}` : (
           /*resultType*/
-          (ctx[1] === ANSWER_CORRECT || /*resultType*/
-          ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+          (ctx[0] === ANSWER_CORRECT || /*resultType*/
+          ctx[0] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
           ctx[10] ? `Student's answer: ${/*word*/
-          ctx[0]} (${/*resultType*/
-          ctx[1]})` : (
+          ctx[1]} (${/*resultType*/
+          ctx[0]})` : (
             /*resultType*/
-            ctx[1] === ANSWER_MISSED ? `Missing answer: ${/*word*/
-            ctx[0]}` : `${/*isWordItemSelected*/
+            ctx[0] === ANSWER_MISSED ? `Missing answer: ${/*word*/
+            ctx[1]}` : `${/*isWordItemSelected*/
             ctx[10] ? "Selected option" : "Option"}: ${/*word*/
-            ctx[0]}`
+            ctx[1]}`
           )
         ));
         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[2] + " " + /*isClonedItem*/
         (ctx[4] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
-        (ctx[8] === /*wordButtonId*/
+        (ctx[9] === /*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[7] && !/*disabledClick*/
         ctx[6] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
-        (ctx[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
+        (ctx[0] === ANSWER_CORRECT && !/*isWordItemSelected*/
         ctx[10] ? "border-green-800 bg-green-300" : (
           /*resultType*/
-          ctx[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
+          ctx[0] === ANSWER_INCORRECT && !/*isWordItemSelected*/
           ctx[10] ? "border-red-800 bg-red-300" : (
             /*resultType*/
-            ctx[1] === ANSWER_MISSED ? "border-green-800" : ""
+            ctx[0] === ANSWER_MISSED ? "border-green-800" : ""
           )
         )) + " " + /*resultType*/
-        ((ctx[1] === ANSWER_CORRECT || /*resultType*/
-        ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+        ((ctx[0] === ANSWER_CORRECT || /*resultType*/
+        ctx[0] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
         ctx[10] ? "td:hover:border-gray-800" : ""));
       },
       m(target, anchor) {
@@ -5720,7 +5695,7 @@
         append(span2, t3);
         if (if_block1)
           if_block1.m(span2, null);
-        ctx[14](button);
+        ctx[17](button);
         current = true;
         if (!mounted) {
           dispose = [
@@ -5763,11 +5738,11 @@
       p(new_ctx, [dirty]) {
         ctx = new_ctx;
         if (!current || dirty & /*word*/
-        1)
+        2)
           set_data(
             t0,
             /*word*/
-            ctx[0]
+            ctx[1]
           );
         if (!current || dirty & /*isWordItemSelected*/
         1024 && span0_class_value !== (span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
@@ -5775,8 +5750,8 @@
           attr(span0, "class", span0_class_value);
         }
         if (!current || dirty & /*currentSelectedItemId, disabledClick*/
-        576 && span1_class_value !== (span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
-        ctx[9] && !/*disabledClick*/
+        192 && span1_class_value !== (span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
+        ctx[7] && !/*disabledClick*/
         ctx[6] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""))) {
           attr(span1, "class", span1_class_value);
         }
@@ -5799,12 +5774,12 @@
         }
         if (
           /*resultType*/
-          ctx[1] === ANSWER_CORRECT || /*resultType*/
-          ctx[1] === ANSWER_INCORRECT
+          ctx[0] === ANSWER_CORRECT || /*resultType*/
+          ctx[0] === ANSWER_INCORRECT
         ) {
           if (if_block1) {
             if (dirty & /*resultType*/
-            2) {
+            1) {
               transition_in(if_block1, 1);
             }
           } else {
@@ -5821,8 +5796,8 @@
           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*/
+        192 && 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] && !/*disabledClick*/
         ctx[6] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""))) {
           attr(div, "class", div_class_value);
         }
@@ -5837,45 +5812,45 @@
         }
         if (!current || dirty & /*resultType, containerId, isWordItemSelected, word*/
         1059 && button_aria_label_value !== (button_aria_label_value = /*resultType*/
-        ctx[1] === ANSWER_INCORRECT && /*containerId*/
+        ctx[0] === ANSWER_INCORRECT && /*containerId*/
         ctx[5] === CONTAINER_WORD_BIN_ID && !/*isWordItemSelected*/
         ctx[10] ? `Skipped answer: ${/*word*/
-        ctx[0]}` : (
+        ctx[1]}` : (
           /*resultType*/
-          (ctx[1] === ANSWER_CORRECT || /*resultType*/
-          ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+          (ctx[0] === ANSWER_CORRECT || /*resultType*/
+          ctx[0] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
           ctx[10] ? `Student's answer: ${/*word*/
-          ctx[0]} (${/*resultType*/
-          ctx[1]})` : (
+          ctx[1]} (${/*resultType*/
+          ctx[0]})` : (
             /*resultType*/
-            ctx[1] === ANSWER_MISSED ? `Missing answer: ${/*word*/
-            ctx[0]}` : `${/*isWordItemSelected*/
+            ctx[0] === ANSWER_MISSED ? `Missing answer: ${/*word*/
+            ctx[1]}` : `${/*isWordItemSelected*/
             ctx[10] ? "Selected option" : "Option"}: ${/*word*/
-            ctx[0]}`
+            ctx[1]}`
           )
         ))) {
           attr(button, "aria-label", button_aria_label_value);
         }
         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*/
+        1757 && 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[9] === /*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[7] && !/*disabledClick*/
         ctx[6] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
-        (ctx[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
+        (ctx[0] === ANSWER_CORRECT && !/*isWordItemSelected*/
         ctx[10] ? "border-green-800 bg-green-300" : (
           /*resultType*/
-          ctx[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
+          ctx[0] === ANSWER_INCORRECT && !/*isWordItemSelected*/
           ctx[10] ? "border-red-800 bg-red-300" : (
             /*resultType*/
-            ctx[1] === ANSWER_MISSED ? "border-green-800" : ""
+            ctx[0] === ANSWER_MISSED ? "border-green-800" : ""
           )
         )) + " " + /*resultType*/
-        ((ctx[1] === ANSWER_CORRECT || /*resultType*/
-        ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
+        ((ctx[0] === ANSWER_CORRECT || /*resultType*/
+        ctx[0] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
         ctx[10] ? "td:hover:border-gray-800" : ""))) {
           attr(button, "class", button_class_value);
         }
@@ -5899,7 +5874,7 @@
         if_blocks[current_block_type_index].d();
         if (if_block1)
           if_block1.d();
-        ctx[14](null);
+        ctx[17](null);
         mounted = false;
         run_all(dispose);
       }
@@ -5914,34 +5889,33 @@
     let { containerId = "" } = $$props;
     let { wordFocus = false } = $$props;
     let { disabledClick = false } = $$props;
+    let { isPreviewModeInteractive = false } = $$props;
+    let { categoryData = [] } = $$props;
+    let { correctAnswerList = [] } = $$props;
+    const dispatch = createEventDispatcher();
     let considerCloneItemId = "";
     let currentSelectedItemId = "";
     let isWordItemSelected = false;
     let isSelecItemFunctionCalled = false;
     let wordButton;
-    categoriseSettings.subscribe((value) => {
-      const { considerCloneItemId: storeConsiderCloneItemId, selectedItemId: storeSelectedItemId } = value;
-      $$invalidate(8, considerCloneItemId = storeConsiderCloneItemId);
-      $$invalidate(9, currentSelectedItemId = storeSelectedItemId);
-      $$invalidate(10, isWordItemSelected = currentSelectedItemId === wordButtonId);
-    });
+    const updateCategoryData = (newSettings) => {
+      $$invalidate(13, categoryData = { ...categoryData, ...newSettings });
+      dispatch("updateCategorySettings", categoryData);
+    };
     const selectItem = (itemId) => {
       if (isSelecItemFunctionCalled || disabledClick) {
         return;
       }
       isSelecItemFunctionCalled = true;
-      const storeCategoriseSettings = get_store_value(categoriseSettings);
       if (!currentSelectedItemId) {
-        categoriseSettings.set({
-          ...storeCategoriseSettings,
+        updateCategoryData({
           selectedItemId: itemId,
           sourceSelectedContainerId: containerId,
           selectedItemName: word,
           isItemsAriaHidden: false
         });
       } else if (currentSelectedItemId === itemId) {
-        categoriseSettings.set({
-          ...storeCategoriseSettings,
+        updateCategoryData({
           selectedItemId: "",
           sourceSelectedContainerId: "",
           selectedItemName: ""
@@ -5960,9 +5934,8 @@
           selectItem(wordButtonId);
           return;
         }
-        const { currentTabContainer } = get_store_value(categoriseSettings);
-        categoriseSettings.set({
-          ...get_store_value(categoriseSettings),
+        const { currentTabContainer } = categoryData;
+        updateCategoryData({
           lastSelectedTabContainer: currentTabContainer,
           currentTabContainer: ""
         });
@@ -5974,14 +5947,14 @@
     function button_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         wordButton = $$value;
-        $$invalidate(7, wordButton);
+        $$invalidate(8, wordButton);
       });
     }
     $$self.$$set = ($$props2) => {
       if ("word" in $$props2)
-        $$invalidate(0, word = $$props2.word);
+        $$invalidate(1, word = $$props2.word);
       if ("resultType" in $$props2)
-        $$invalidate(1, resultType = $$props2.resultType);
+        $$invalidate(0, resultType = $$props2.resultType);
       if ("otherClass" in $$props2)
         $$invalidate(2, otherClass = $$props2.otherClass);
       if ("wordButtonId" in $$props2)
@@ -5991,13 +5964,19 @@
       if ("containerId" in $$props2)
         $$invalidate(5, containerId = $$props2.containerId);
       if ("wordFocus" in $$props2)
-        $$invalidate(13, wordFocus = $$props2.wordFocus);
+        $$invalidate(14, wordFocus = $$props2.wordFocus);
       if ("disabledClick" in $$props2)
         $$invalidate(6, disabledClick = $$props2.disabledClick);
+      if ("isPreviewModeInteractive" in $$props2)
+        $$invalidate(15, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
+      if ("categoryData" in $$props2)
+        $$invalidate(13, categoryData = $$props2.categoryData);
+      if ("correctAnswerList" in $$props2)
+        $$invalidate(16, correctAnswerList = $$props2.correctAnswerList);
     };
     $$self.$$.update = () => {
       if ($$self.$$.dirty & /*wordFocus, wordButton*/
-      8320) {
+      16640) {
         $:
           if (wordFocus) {
             setTimeout(
@@ -6008,22 +5987,47 @@
             );
           }
       }
+      if ($$self.$$.dirty & /*correctAnswerList, isPreviewModeInteractive, containerId, wordButtonId, resultType*/
+      98345) {
+        $:
+          if (correctAnswerList && isPreviewModeInteractive) {
+            const { answerList } = correctAnswerList;
+            const answers = answerList[containerId];
+            if (containerId !== CONTAINER_WORD_BIN_ID && answers.length) {
+              $$invalidate(0, resultType = answers.includes(wordButtonId) ? ANSWER_CORRECT : ANSWER_INCORRECT);
+              console.log("result:", resultType);
+            }
+          }
+      }
+      if ($$self.$$.dirty & /*categoryData, currentSelectedItemId, wordButtonId*/
+      8328) {
+        $:
+          if (categoryData) {
+            const { considerCloneItemId: storeConsiderCloneItemId, selectedItemId: storeSelectedItemId } = categoryData;
+            $$invalidate(9, considerCloneItemId = storeConsiderCloneItemId);
+            $$invalidate(7, currentSelectedItemId = storeSelectedItemId);
+            $$invalidate(10, isWordItemSelected = currentSelectedItemId === wordButtonId);
+          }
+      }
     };
     return [
-      word,
       resultType,
+      word,
       otherClass,
       wordButtonId,
       isClonedItem,
       containerId,
       disabledClick,
+      currentSelectedItemId,
       wordButton,
       considerCloneItemId,
-      currentSelectedItemId,
       isWordItemSelected,
       selectItem,
       removeContainerTabSelected,
+      categoryData,
       wordFocus,
+      isPreviewModeInteractive,
+      correctAnswerList,
       button_binding
     ];
   }
@@ -6031,25 +6035,28 @@
     constructor(options) {
       super();
       init(this, options, instance5, create_fragment9, safe_not_equal, {
-        word: 0,
-        resultType: 1,
+        word: 1,
+        resultType: 0,
         otherClass: 2,
         wordButtonId: 3,
         isClonedItem: 4,
         containerId: 5,
-        wordFocus: 13,
-        disabledClick: 6
+        wordFocus: 14,
+        disabledClick: 6,
+        isPreviewModeInteractive: 15,
+        categoryData: 13,
+        correctAnswerList: 16
       });
     }
     get word() {
-      return this.$$.ctx[0];
+      return this.$$.ctx[1];
     }
     set word(word) {
       this.$$set({ word });
       flush();
     }
     get resultType() {
-      return this.$$.ctx[1];
+      return this.$$.ctx[0];
     }
     set resultType(resultType) {
       this.$$set({ resultType });
@@ -6084,7 +6091,7 @@
       flush();
     }
     get wordFocus() {
-      return this.$$.ctx[13];
+      return this.$$.ctx[14];
     }
     set wordFocus(wordFocus) {
       this.$$set({ wordFocus });
@@ -6097,17 +6104,31 @@
       this.$$set({ disabledClick });
       flush();
     }
+    get isPreviewModeInteractive() {
+      return this.$$.ctx[15];
+    }
+    set isPreviewModeInteractive(isPreviewModeInteractive) {
+      this.$$set({ isPreviewModeInteractive });
+      flush();
+    }
+    get categoryData() {
+      return this.$$.ctx[13];
+    }
+    set categoryData(categoryData) {
+      this.$$set({ categoryData });
+      flush();
+    }
+    get correctAnswerList() {
+      return this.$$.ctx[16];
+    }
+    set correctAnswerList(correctAnswerList) {
+      this.$$set({ correctAnswerList });
+      flush();
+    }
   };
-  customElements.define("prompt-categorise-word-button", create_custom_element(PromptCategoriseWordButton, { "word": {}, "resultType": {}, "otherClass": {}, "wordButtonId": {}, "isClonedItem": { "type": "Boolean" }, "containerId": {}, "wordFocus": { "type": "Boolean" }, "disabledClick": { "type": "Boolean" } }, [], [], true));
+  customElements.define("prompt-categorise-word-button", create_custom_element(PromptCategoriseWordButton, { "word": {}, "resultType": {}, "otherClass": {}, "wordButtonId": {}, "isClonedItem": { "type": "Boolean" }, "containerId": {}, "wordFocus": { "type": "Boolean" }, "disabledClick": { "type": "Boolean" }, "isPreviewModeInteractive": { "type": "Boolean" }, "categoryData": {}, "correctAnswerList": {} }, [], [], true));
   var PromptCategoriseWordButton_default = PromptCategoriseWordButton;
 
-  // src/lib/stores/modal.ts
-  var modalSettings = writable({
-    isModalOpen: false,
-    modalAriaLabel: "",
-    isOpenLastStatus: false
-  });
-
   // src/lib/composables/useCategorise.ts
   var useNavigateItem = (currentIndex, currentAnswer, direction, addWordBin = false) => {
     const wordBinData = currentAnswer.filter(
@@ -6127,20 +6148,22 @@
         return;
       }
     }
-    categoriseSettings.set({
-      ...get_store_value(categoriseSettings),
+    return {
       currentWordBinIndex: newIndex < 0 ? lastIndex : newIndex >= totalItem ? 0 : newIndex
-    });
+    };
   };
   var useFilterUniqueObject = (data, identifier = "id") => {
     const uniqueMap = new Map(data.map((obj) => [obj[identifier], obj]));
     return Array.from(uniqueMap.values());
   };
+  var numberRandomizer = (min = 1, max = 9999) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  };
 
   // src/lib/components/prompt/categorise/PromptCategoriseDndContainer.svelte
   function get_each_context2(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[34] = list[i];
+    child_ctx[38] = list[i];
     return child_ctx;
   }
   function create_if_block_24(ctx) {
@@ -6155,10 +6178,10 @@
           button,
           "aria-label",
           /*ariaLabel*/
-          ctx[6]
+          ctx[7]
         );
         attr(button, "class", button_class_value = "focus-ring absolute inset-0 bg-transparent rounded-lg focus-visible:border " + /*isContainerWordBin*/
-        (ctx[19] ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"));
+        (ctx[22] ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -6167,19 +6190,19 @@
             button,
             "click",
             /*addAnswerItem*/
-            ctx[22]
+            ctx[25]
           );
           mounted = true;
         }
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*ariaLabel*/
-        64) {
+        128) {
           attr(
             button,
             "aria-label",
             /*ariaLabel*/
-            ctx2[6]
+            ctx2[7]
           );
         }
       },
@@ -6212,13 +6235,13 @@
               div,
               "click",
               /*addAnswerItem*/
-              ctx[22]
+              ctx[25]
             ),
             listen(
               div,
               "keypress",
               /*addAnswerItem*/
-              ctx[22]
+              ctx[25]
             )
           ];
           mounted = true;
@@ -6245,7 +6268,7 @@
         t2 = text("Missing answers:");
         attr(button, "aria-label", "Missing answers:");
         attr(button, "class", button_class_value = "text-base text-charcoal font-semibold w-full mt-1 mb-2 text-left " + (!/*showButton*/
-        ctx[4] ? "hidden md:missing-answer-label" : "missing-answer-label"));
+        ctx[5] ? "hidden md:missing-answer-label" : "missing-answer-label"));
         button.disabled = button_disabled_value = true;
       },
       m(target, anchor) {
@@ -6254,8 +6277,8 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*showButton*/
-        16 && button_class_value !== (button_class_value = "text-base text-charcoal font-semibold w-full mt-1 mb-2 text-left " + (!/*showButton*/
-        ctx2[4] ? "hidden md:missing-answer-label" : "missing-answer-label"))) {
+        32 && button_class_value !== (button_class_value = "text-base text-charcoal font-semibold w-full mt-1 mb-2 text-left " + (!/*showButton*/
+        ctx2[5] ? "hidden md:missing-answer-label" : "missing-answer-label"))) {
           attr(button, "class", button_class_value);
         }
       },
@@ -6273,53 +6296,70 @@
     let current;
     let if_block = (
       /*item*/
-      ctx[34].type === ANSWER_MISSED && create_if_block6(ctx)
+      ctx[38].type === ANSWER_MISSED && create_if_block6(ctx)
     );
     promptcategorisewordbutton = new PromptCategoriseWordButton_default({
       props: {
         otherClass: "mr-2 mb-2 last:mr-0 " + /*item*/
-        (ctx[34].id === /*considerItemId*/
-        ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
-        ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
-        (ctx[16][
+        (ctx[38].id === /*considerItemId*/
+        ctx[11] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
+        ctx[5] ? "hidden md:flex" : "") + "\n        " + /*items*/
+        (ctx[19][
           /*currentWordBinIndex*/
-          ctx[12]
+          ctx[15]
         ]?.id !== /*item*/
-        ctx[34].id && /*isContainerWordBin*/
-        ctx[19] ? "hidden md:flex" : ""),
+        ctx[38].id && /*isContainerWordBin*/
+        ctx[22] ? "hidden md:flex" : ""),
         word: (
           /*item*/
-          ctx[34].text
+          ctx[38].text
         ),
         wordButtonId: (
           /*item*/
-          ctx[34].id
+          ctx[38].id
         ),
         isClonedItem: (
           /*item*/
-          ctx[34].isClonedItem
+          ctx[38].isClonedItem
         ),
         containerId: (
           /*containerId*/
-          ctx[2]
+          ctx[3]
         ),
         wordFocus: (
           /*currentTabContainer*/
-          ctx[14] === /*containerId*/
-          ctx[2] && /*item*/
-          ctx[34].id === /*items*/
-          ctx[16][0].id
+          ctx[17] === /*containerId*/
+          ctx[3] && /*item*/
+          ctx[38].id === /*items*/
+          ctx[19][0].id
         ),
         disabledClick: (
           /*isFinished*/
-          ctx[7]
+          ctx[8]
         ),
         resultType: (
           /*item*/
-          ctx[34].type
+          ctx[38].type
+        ),
+        categoryData: (
+          /*categoryData*/
+          ctx[0]
+        ),
+        correctAnswerList: (
+          /*correctAnswerList*/
+          ctx[9]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
+          ctx[10]
         )
       }
     });
+    promptcategorisewordbutton.$on(
+      "updateCategorySettings",
+      /*updateCategoryByButton*/
+      ctx[26]
+    );
     return {
       key: key_1,
       first: null,
@@ -6343,7 +6383,7 @@
         ctx = new_ctx;
         if (
           /*item*/
-          ctx[34].type === ANSWER_MISSED
+          ctx[38].type === ANSWER_MISSED
         ) {
           if (if_block) {
             if_block.p(ctx, dirty);
@@ -6358,48 +6398,60 @@
         }
         const promptcategorisewordbutton_changes = {};
         if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex*/
-        69904)
+        559136)
           promptcategorisewordbutton_changes.otherClass = "mr-2 mb-2 last:mr-0 " + /*item*/
-          (ctx[34].id === /*considerItemId*/
-          ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
-          ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
-          (ctx[16][
+          (ctx[38].id === /*considerItemId*/
+          ctx[11] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
+          ctx[5] ? "hidden md:flex" : "") + "\n        " + /*items*/
+          (ctx[19][
             /*currentWordBinIndex*/
-            ctx[12]
+            ctx[15]
           ]?.id !== /*item*/
-          ctx[34].id && /*isContainerWordBin*/
-          ctx[19] ? "hidden md:flex" : "");
+          ctx[38].id && /*isContainerWordBin*/
+          ctx[22] ? "hidden md:flex" : "");
         if (dirty[0] & /*items*/
-        65536)
+        524288)
           promptcategorisewordbutton_changes.word = /*item*/
-          ctx[34].text;
+          ctx[38].text;
         if (dirty[0] & /*items*/
-        65536)
+        524288)
           promptcategorisewordbutton_changes.wordButtonId = /*item*/
-          ctx[34].id;
+          ctx[38].id;
         if (dirty[0] & /*items*/
-        65536)
+        524288)
           promptcategorisewordbutton_changes.isClonedItem = /*item*/
-          ctx[34].isClonedItem;
+          ctx[38].isClonedItem;
         if (dirty[0] & /*containerId*/
-        4)
+        8)
           promptcategorisewordbutton_changes.containerId = /*containerId*/
-          ctx[2];
+          ctx[3];
         if (dirty[0] & /*currentTabContainer, containerId, items*/
-        81924)
+        655368)
           promptcategorisewordbutton_changes.wordFocus = /*currentTabContainer*/
-          ctx[14] === /*containerId*/
-          ctx[2] && /*item*/
-          ctx[34].id === /*items*/
-          ctx[16][0].id;
+          ctx[17] === /*containerId*/
+          ctx[3] && /*item*/
+          ctx[38].id === /*items*/
+          ctx[19][0].id;
         if (dirty[0] & /*isFinished*/
-        128)
+        256)
           promptcategorisewordbutton_changes.disabledClick = /*isFinished*/
-          ctx[7];
+          ctx[8];
         if (dirty[0] & /*items*/
-        65536)
+        524288)
           promptcategorisewordbutton_changes.resultType = /*item*/
-          ctx[34].type;
+          ctx[38].type;
+        if (dirty[0] & /*categoryData*/
+        1)
+          promptcategorisewordbutton_changes.categoryData = /*categoryData*/
+          ctx[0];
+        if (dirty[0] & /*correctAnswerList*/
+        512)
+          promptcategorisewordbutton_changes.correctAnswerList = /*correctAnswerList*/
+          ctx[9];
+        if (dirty[0] & /*isPreviewModeInteractive*/
+        1024)
+          promptcategorisewordbutton_changes.isPreviewModeInteractive = /*isPreviewModeInteractive*/
+          ctx[10];
         promptcategorisewordbutton.$set(promptcategorisewordbutton_changes);
       },
       i(local) {
@@ -6437,23 +6489,23 @@
     let dispose;
     let if_block0 = (
       /*dragDisabled*/
-      ctx[10] && /*sourceSelectedContainerId*/
-      ctx[11] !== /*containerId*/
-      ctx[2] && !/*isFinished*/
-      ctx[7] && create_if_block_24(ctx)
+      ctx[13] && /*sourceSelectedContainerId*/
+      ctx[14] !== /*containerId*/
+      ctx[3] && !/*isFinished*/
+      ctx[8] && create_if_block_24(ctx)
     );
     let if_block1 = (
       /*totalRemainingWordBinItem*/
-      ctx[13] <= 0 && /*isContainerWordBin*/
-      ctx[19] && create_if_block_16(ctx)
+      ctx[16] <= 0 && /*isContainerWordBin*/
+      ctx[22] && create_if_block_16(ctx)
     );
     let each_value = ensure_array_like(Object.values(
       /*items*/
-      ctx[16]
+      ctx[19]
     ));
     const get_key = (ctx2) => (
       /*item*/
-      ctx2[34].id
+      ctx2[38].id
     );
     for (let i = 0; i < each_value.length; i += 1) {
       let child_ctx = get_each_context2(ctx, each_value, i);
@@ -6474,23 +6526,23 @@
         }
         attr(section, "role", "group");
         attr(section, "class", section_class_value = "flex flex-wrap " + /*containerClass*/
-        ctx[0] + " category-content");
+        ctx[1] + " category-content");
         attr(
           section,
           "aria-hidden",
           /*isItemsAriaHidden*/
-          ctx[17]
+          ctx[20]
         );
         attr(section, "aria-dropeffect", "move");
         attr(
           section,
           "id",
           /*containerId*/
-          ctx[2]
+          ctx[3]
         );
         attr(section, "style", section_style_value = !/*isContainerWordBin*/
-        ctx[19] ? `padding-top: ${/*paddingTop*/
-        ctx[5]}px;` : "");
+        ctx[22] ? `padding-top: ${/*paddingTop*/
+        ctx[6]}px;` : "");
       },
       m(target, anchor) {
         if (if_block0)
@@ -6511,32 +6563,32 @@
             action_destroyer(dndzone_action = dndzone$2.call(null, section, {
               items: (
                 /*items*/
-                ctx[16]
+                ctx[19]
               ),
               flipDurationMs: (
                 /*flipDurationMs*/
-                ctx[1]
+                ctx[2]
               ),
               type: (
                 /*type*/
-                ctx[3]
+                ctx[4]
               ),
               dropTargetClasses: (
                 /*dropTargetClasses*/
-                ctx[18]
+                ctx[21]
               ),
               morphDisabled: true,
               dragDisabled: (
                 /*dragDisabled*/
-                ctx[10]
+                ctx[13]
               ),
               autoAriaDisabled: true,
               zoneItemTabIndex: (
                 /*currentTabContainer*/
-                ctx[14] !== /*containerId*/
-                ctx[2] || /*selectedItemId*/
-                ctx[9] || /*isModalOpen*/
-                ctx[15] ? -1 : 0
+                ctx[17] !== /*containerId*/
+                ctx[3] || /*selectedItemId*/
+                ctx[12] || /*isModalOpen*/
+                ctx[18] ? -1 : 0
               ),
               zoneTabIndex: -1
             })),
@@ -6544,13 +6596,13 @@
               section,
               "consider",
               /*handleDndConsider*/
-              ctx[20]
+              ctx[23]
             ),
             listen(
               section,
               "finalize",
               /*handleDndFinalize*/
-              ctx[21]
+              ctx[24]
             )
           ];
           mounted = true;
@@ -6559,10 +6611,10 @@
       p(ctx2, dirty) {
         if (
           /*dragDisabled*/
-          ctx2[10] && /*sourceSelectedContainerId*/
-          ctx2[11] !== /*containerId*/
-          ctx2[2] && !/*isFinished*/
-          ctx2[7]
+          ctx2[13] && /*sourceSelectedContainerId*/
+          ctx2[14] !== /*containerId*/
+          ctx2[3] && !/*isFinished*/
+          ctx2[8]
         ) {
           if (if_block0) {
             if_block0.p(ctx2, dirty);
@@ -6577,8 +6629,8 @@
         }
         if (
           /*totalRemainingWordBinItem*/
-          ctx2[13] <= 0 && /*isContainerWordBin*/
-          ctx2[19]
+          ctx2[16] <= 0 && /*isContainerWordBin*/
+          ctx2[22]
         ) {
           if (if_block1) {
             if_block1.p(ctx2, dirty);
@@ -6591,76 +6643,76 @@
           if_block1.d(1);
           if_block1 = null;
         }
-        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId, currentTabContainer, isFinished*/
-        610708) {
+        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId, currentTabContainer, isFinished, categoryData, correctAnswerList, isPreviewModeInteractive, updateCategoryByButton*/
+        71995177) {
           each_value = ensure_array_like(Object.values(
             /*items*/
-            ctx2[16]
+            ctx2[19]
           ));
           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*/
-        1 && section_class_value !== (section_class_value = "flex flex-wrap " + /*containerClass*/
-        ctx2[0] + " category-content")) {
+        2 && section_class_value !== (section_class_value = "flex flex-wrap " + /*containerClass*/
+        ctx2[1] + " category-content")) {
           attr(section, "class", section_class_value);
         }
         if (!current || dirty[0] & /*isItemsAriaHidden*/
-        131072) {
+        1048576) {
           attr(
             section,
             "aria-hidden",
             /*isItemsAriaHidden*/
-            ctx2[17]
+            ctx2[20]
           );
         }
         if (!current || dirty[0] & /*containerId*/
-        4) {
+        8) {
           attr(
             section,
             "id",
             /*containerId*/
-            ctx2[2]
+            ctx2[3]
           );
         }
         if (!current || dirty[0] & /*paddingTop*/
-        32 && section_style_value !== (section_style_value = !/*isContainerWordBin*/
-        ctx2[19] ? `padding-top: ${/*paddingTop*/
-        ctx2[5]}px;` : "")) {
+        64 && section_style_value !== (section_style_value = !/*isContainerWordBin*/
+        ctx2[22] ? `padding-top: ${/*paddingTop*/
+        ctx2[6]}px;` : "")) {
           attr(section, "style", section_style_value);
         }
         if (dndzone_action && is_function(dndzone_action.update) && dirty[0] & /*items, flipDurationMs, type, dragDisabled, currentTabContainer, containerId, selectedItemId, isModalOpen*/
-        116238)
+        929820)
           dndzone_action.update.call(null, {
             items: (
               /*items*/
-              ctx2[16]
+              ctx2[19]
             ),
             flipDurationMs: (
               /*flipDurationMs*/
-              ctx2[1]
+              ctx2[2]
             ),
             type: (
               /*type*/
-              ctx2[3]
+              ctx2[4]
             ),
             dropTargetClasses: (
               /*dropTargetClasses*/
-              ctx2[18]
+              ctx2[21]
             ),
             morphDisabled: true,
             dragDisabled: (
               /*dragDisabled*/
-              ctx2[10]
+              ctx2[13]
             ),
             autoAriaDisabled: true,
             zoneItemTabIndex: (
               /*currentTabContainer*/
-              ctx2[14] !== /*containerId*/
-              ctx2[2] || /*selectedItemId*/
-              ctx2[9] || /*isModalOpen*/
-              ctx2[15] ? -1 : 0
+              ctx2[17] !== /*containerId*/
+              ctx2[3] || /*selectedItemId*/
+              ctx2[12] || /*isModalOpen*/
+              ctx2[18] ? -1 : 0
             ),
             zoneTabIndex: -1
           });
@@ -6708,6 +6760,8 @@
     let { isFinished = false } = $$props;
     let { correctAnswerList = [] } = $$props;
     let { isPreviewModeInteractive = false } = $$props;
+    let { categoryData = [] } = $$props;
+    let { modalData = [] } = $$props;
     let considerItemId = "";
     let selectedItemId = "";
     let dragDisabled = isFinished;
@@ -6723,61 +6777,25 @@
     const dispatch = createEventDispatcher();
     const dropTargetClasses = ["!outline-none"];
     const isContainerWordBin = containerId === CONTAINER_WORD_BIN_ID;
-    const { rawCategoryItems } = get_store_value(categoriseSettings);
-    modalSettings.subscribe((value) => {
-      const { isModalOpen: storeIsModalOpen } = value;
-      $$invalidate(15, isModalOpen = storeIsModalOpen);
-    });
-    categoriseSettings.subscribe((value) => {
-      const { considerItemId: storeconsiderItemId, selectedItemId: storeSelectedItemId, currentAnswer: storeCurrentAnswer, sourceSelectedContainerId: storeSourceSelectedContainerId, currentWordBinIndex: storeCurrentWordBinIndex, currentTabContainer: storeCurrentTabContainer, isItemsAriaHidden: storeisItemsAriaHidden } = value;
-      $$invalidate(8, considerItemId = storeconsiderItemId);
-      $$invalidate(10, dragDisabled = isFinished || !!storeSelectedItemId);
-      currentAnswer = storeCurrentAnswer;
-      $$invalidate(9, selectedItemId = storeSelectedItemId);
-      $$invalidate(11, sourceSelectedContainerId = storeSourceSelectedContainerId);
-      $$invalidate(12, currentWordBinIndex = storeCurrentWordBinIndex);
-      $$invalidate(14, currentTabContainer = storeCurrentTabContainer);
-      $$invalidate(17, isItemsAriaHidden = storeisItemsAriaHidden);
-      const storeWordBinItem = currentAnswer.filter((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
-      $$invalidate(13, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
-      if (storeCurrentAnswer) {
-        const currentAnswerList = currentAnswer.filter((answer) => answer.categoryId === containerId);
-        if (currentAnswerList.length) {
-          $$invalidate(16, 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 {
-                id: cloneId,
-                text: rawCategoryItems[answerIndex].text,
-                isClonedItem: true,
-                cloneId: rawCategoryItems[answerIndex].id
-              };
-            }
-            return {
-              ...rawCategoryItems[answerIndex],
-              type: isFinished || isPreviewModeInteractive ? splitId[1] : ""
-            };
-          }));
-        }
-      }
-    });
+    const { rawCategoryItems } = categoryData;
+    const updateCategoryData = (newSettings) => {
+      $$invalidate(0, categoryData = { ...categoryData, ...newSettings });
+      dispatch("updateCategorySettings", categoryData);
+    };
     const handleDndConsider = (e2) => {
       const { detail, srcElement } = e2;
       const { info } = detail;
       const { trigger, id } = info;
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
+      updateCategoryData({
         considerContainerId: containerId,
         considerCloneItemId: id,
         considerItemId: id,
         isDraggingOver: true
       });
-      const { sourceContainerId, sourceCloneContainerId } = get_store_value(categoriseSettings);
+      const { sourceContainerId, sourceCloneContainerId } = categoryData;
       if (trigger === TRIGGERS.DRAG_STARTED) {
         const { items: cateoryItems } = detail;
-        $$invalidate(16, items = cateoryItems);
+        $$invalidate(19, 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, {
@@ -6787,21 +6805,14 @@
           clonedId: id
         });
         if (!sourceContainerId) {
-          categoriseSettings.set({
-            ...get_store_value(categoriseSettings),
-            sourceContainerId: srcElement.id
-          });
+          updateCategoryData({ sourceContainerId: srcElement.id });
         }
         if (!sourceCloneContainerId) {
-          categoriseSettings.set({
-            ...get_store_value(categoriseSettings),
-            sourceCloneContainerId: srcElement.id
-          });
+          updateCategoryData({ sourceCloneContainerId: srcElement.id });
         }
       }
       if (trigger === TRIGGERS.DRAGGED_LEFT) {
-        categoriseSettings.set({
-          ...get_store_value(categoriseSettings),
+        updateCategoryData({
           considerContainerId: "",
           isDraggingOver: false
         });
@@ -6810,24 +6821,20 @@
     const handleDndFinalize = (e2) => {
       const { items: categoryItems, info } = e2.detail;
       const { trigger, id } = info;
-      $$invalidate(16, items = categoryItems.filter((item) => !item.isClonedItem));
+      $$invalidate(19, 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),
+        updateCategoryData({
           selectedItemName: rawCategoryItems[itemIndex].text
         });
       }
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
-        considerCloneItemId: ""
-      });
+      updateCategoryData({ considerCloneItemId: "" });
       resetCategoriesSettings();
     };
     const saveAnswer = () => {
-      const { currentAnswer: currentAnswer2, rawCategories, rawCategoryItems: rawCategoryItems2 } = get_store_value(categoriseSettings);
+      const { currentAnswer: currentAnswer2, rawCategories, rawCategoryItems: rawCategoryItems2 } = categoryData;
       const categoryAnswer = currentAnswer2.filter((answer) => answer.categoryId !== CONTAINER_WORD_BIN_ID).map((answer) => {
         const { categoryId, itemId } = answer;
         const categoryList = rawCategories.filter((category) => category.id === categoryId).map((category) => category.name)[0];
@@ -6856,17 +6863,13 @@
           }
           return { ...answer };
         });
-        categoriseSettings.set({
-          ...get_store_value(categoriseSettings),
-          currentAnswer: answerResult
-        });
+        updateCategoryData({ currentAnswer: answerResult });
       } else {
         dispatch("saveCategory", { answer_list: categoryAnswer });
       }
     };
     const resetCategoriesSettings = () => {
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
+      updateCategoryData({
         considerContainerId: "",
         considerItemId: "",
         sourceContainerId: "",
@@ -6876,23 +6879,16 @@
     const showAddItemAnimation = (dropContainerId) => {
       setTimeout(
         () => {
-          categoriseSettings.set({
-            ...get_store_value(categoriseSettings),
-            dropContainerId
-          });
+          updateCategoryData({ dropContainerId });
           setTimeout(
             () => {
-              categoriseSettings.set({
-                ...get_store_value(categoriseSettings),
-                hasAddItemAnimation: true
-              });
+              updateCategoryData({ hasAddItemAnimation: true });
             },
             300
           );
           setTimeout(
             () => {
-              categoriseSettings.set({
-                ...get_store_value(categoriseSettings),
+              updateCategoryData({
                 dropContainerId: "",
                 sourceCloneContainerId: "",
                 hasAddItemAnimation: false
@@ -6909,8 +6905,7 @@
         return;
       }
       addAnswerItemStore(selectedItemId, containerId);
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
+      updateCategoryData({
         selectedItemId: "",
         selectedContainerId: "",
         sourceSelectedContainerId: "",
@@ -6962,40 +6957,97 @@
       }
       updateNavigateItem();
       showAddItemAnimation(targetContainerId);
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
+      updateCategoryData({
         currentAnswer: updatedCurrentAnswer,
         previewResultSr
       });
       saveAnswer();
     };
     const updateNavigateItem = () => {
-      const { currentWordBinIndex: currentWordBinIndex2, currentAnswer: currentAnswer2 } = get_store_value(categoriseSettings);
-      useNavigateItem(currentWordBinIndex2, currentAnswer2, "right", true);
+      const { currentWordBinIndex: currentWordBinIndex2, currentAnswer: currentAnswer2 } = categoryData;
+      const navigateItem = useNavigateItem(currentWordBinIndex2, currentAnswer2, "right", true);
+      updateCategoryData(navigateItem);
+    };
+    const updateCategoryByButton = ({ detail }) => {
+      updateCategoryData(detail);
     };
     $$self.$$set = ($$props2) => {
       if ("containerClass" in $$props2)
-        $$invalidate(0, containerClass = $$props2.containerClass);
+        $$invalidate(1, containerClass = $$props2.containerClass);
       if ("flipDurationMs" in $$props2)
-        $$invalidate(1, flipDurationMs = $$props2.flipDurationMs);
+        $$invalidate(2, flipDurationMs = $$props2.flipDurationMs);
       if ("containerId" in $$props2)
-        $$invalidate(2, containerId = $$props2.containerId);
+        $$invalidate(3, containerId = $$props2.containerId);
       if ("type" in $$props2)
-        $$invalidate(3, type = $$props2.type);
+        $$invalidate(4, type = $$props2.type);
       if ("showButton" in $$props2)
-        $$invalidate(4, showButton = $$props2.showButton);
+        $$invalidate(5, showButton = $$props2.showButton);
       if ("paddingTop" in $$props2)
-        $$invalidate(5, paddingTop = $$props2.paddingTop);
+        $$invalidate(6, paddingTop = $$props2.paddingTop);
       if ("ariaLabel" in $$props2)
-        $$invalidate(6, ariaLabel = $$props2.ariaLabel);
+        $$invalidate(7, ariaLabel = $$props2.ariaLabel);
       if ("isFinished" in $$props2)
-        $$invalidate(7, isFinished = $$props2.isFinished);
+        $$invalidate(8, isFinished = $$props2.isFinished);
       if ("correctAnswerList" in $$props2)
-        $$invalidate(23, correctAnswerList = $$props2.correctAnswerList);
+        $$invalidate(9, correctAnswerList = $$props2.correctAnswerList);
       if ("isPreviewModeInteractive" in $$props2)
-        $$invalidate(24, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
+        $$invalidate(10, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
+      if ("categoryData" in $$props2)
+        $$invalidate(0, categoryData = $$props2.categoryData);
+      if ("modalData" in $$props2)
+        $$invalidate(27, modalData = $$props2.modalData);
+    };
+    $$self.$$.update = () => {
+      if ($$self.$$.dirty[0] & /*modalData*/
+      134217728) {
+        $:
+          if (modalData) {
+            const { isModalOpen: storeIsModalOpen } = modalData;
+            $$invalidate(18, isModalOpen = storeIsModalOpen);
+          }
+      }
+      if ($$self.$$.dirty[0] & /*categoryData, isFinished, currentAnswer, containerId, considerItemId, isPreviewModeInteractive*/
+      268438793) {
+        $:
+          if (categoryData) {
+            const { considerItemId: storeconsiderItemId, selectedItemId: storeSelectedItemId, currentAnswer: storeCurrentAnswer, sourceSelectedContainerId: storeSourceSelectedContainerId, currentWordBinIndex: storeCurrentWordBinIndex, currentTabContainer: storeCurrentTabContainer, isItemsAriaHidden: storeisItemsAriaHidden } = categoryData;
+            $$invalidate(11, considerItemId = storeconsiderItemId);
+            $$invalidate(13, dragDisabled = isFinished || !!storeSelectedItemId);
+            $$invalidate(28, currentAnswer = storeCurrentAnswer);
+            $$invalidate(12, selectedItemId = storeSelectedItemId);
+            $$invalidate(14, sourceSelectedContainerId = storeSourceSelectedContainerId);
+            $$invalidate(15, currentWordBinIndex = storeCurrentWordBinIndex);
+            $$invalidate(17, currentTabContainer = storeCurrentTabContainer);
+            $$invalidate(20, isItemsAriaHidden = storeisItemsAriaHidden);
+            const storeWordBinItem = currentAnswer.filter((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
+            $$invalidate(16, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
+            if (storeCurrentAnswer) {
+              const currentAnswerList = currentAnswer.filter((answer) => answer.categoryId === containerId);
+              if (currentAnswerList.length) {
+                $$invalidate(19, 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 {
+                      id: cloneId,
+                      text: rawCategoryItems[answerIndex].text,
+                      isClonedItem: true,
+                      cloneId: rawCategoryItems[answerIndex].id
+                    };
+                  }
+                  return {
+                    ...rawCategoryItems[answerIndex],
+                    type: isFinished || isPreviewModeInteractive ? splitId[1] : ""
+                  };
+                }));
+              }
+            }
+          }
+      }
     };
     return [
+      categoryData,
       containerClass,
       flipDurationMs,
       containerId,
@@ -7004,6 +7056,8 @@
       paddingTop,
       ariaLabel,
       isFinished,
+      correctAnswerList,
+      isPreviewModeInteractive,
       considerItemId,
       selectedItemId,
       dragDisabled,
@@ -7019,8 +7073,9 @@
       handleDndConsider,
       handleDndFinalize,
       addAnswerItem,
-      correctAnswerList,
-      isPreviewModeInteractive
+      updateCategoryByButton,
+      modalData,
+      currentAnswer
     ];
   }
   var PromptCategoriseDndContainer = class extends SvelteComponent {
@@ -7033,93 +7088,109 @@
         create_fragment10,
         safe_not_equal,
         {
-          containerClass: 0,
-          flipDurationMs: 1,
-          containerId: 2,
-          type: 3,
-          showButton: 4,
-          paddingTop: 5,
-          ariaLabel: 6,
-          isFinished: 7,
-          correctAnswerList: 23,
-          isPreviewModeInteractive: 24
+          containerClass: 1,
+          flipDurationMs: 2,
+          containerId: 3,
+          type: 4,
+          showButton: 5,
+          paddingTop: 6,
+          ariaLabel: 7,
+          isFinished: 8,
+          correctAnswerList: 9,
+          isPreviewModeInteractive: 10,
+          categoryData: 0,
+          modalData: 27
         },
         null,
         [-1, -1]
       );
     }
     get containerClass() {
-      return this.$$.ctx[0];
+      return this.$$.ctx[1];
     }
     set containerClass(containerClass) {
       this.$$set({ containerClass });
       flush();
     }
     get flipDurationMs() {
-      return this.$$.ctx[1];
+      return this.$$.ctx[2];
     }
     set flipDurationMs(flipDurationMs) {
       this.$$set({ flipDurationMs });
       flush();
     }
     get containerId() {
-      return this.$$.ctx[2];
+      return this.$$.ctx[3];
     }
     set containerId(containerId) {
       this.$$set({ containerId });
       flush();
     }
     get type() {
-      return this.$$.ctx[3];
+      return this.$$.ctx[4];
     }
     set type(type) {
       this.$$set({ type });
       flush();
     }
     get showButton() {
-      return this.$$.ctx[4];
+      return this.$$.ctx[5];
     }
     set showButton(showButton) {
       this.$$set({ showButton });
       flush();
     }
     get paddingTop() {
-      return this.$$.ctx[5];
+      return this.$$.ctx[6];
     }
     set paddingTop(paddingTop) {
       this.$$set({ paddingTop });
       flush();
     }
     get ariaLabel() {
-      return this.$$.ctx[6];
+      return this.$$.ctx[7];
     }
     set ariaLabel(ariaLabel) {
       this.$$set({ ariaLabel });
       flush();
     }
     get isFinished() {
-      return this.$$.ctx[7];
+      return this.$$.ctx[8];
     }
     set isFinished(isFinished) {
       this.$$set({ isFinished });
       flush();
     }
     get correctAnswerList() {
-      return this.$$.ctx[23];
+      return this.$$.ctx[9];
     }
     set correctAnswerList(correctAnswerList) {
       this.$$set({ correctAnswerList });
       flush();
     }
     get isPreviewModeInteractive() {
-      return this.$$.ctx[24];
+      return this.$$.ctx[10];
     }
     set isPreviewModeInteractive(isPreviewModeInteractive) {
       this.$$set({ isPreviewModeInteractive });
       flush();
     }
+    get categoryData() {
+      return this.$$.ctx[0];
+    }
+    set categoryData(categoryData) {
+      this.$$set({ categoryData });
+      flush();
+    }
+    get modalData() {
+      return this.$$.ctx[27];
+    }
+    set modalData(modalData) {
+      this.$$set({ modalData });
+      flush();
+    }
   };
-  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));
+  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" }, "categoryData": {}, "modalData": {} }, [], [], true));
   var PromptCategoriseDndContainer_default = PromptCategoriseDndContainer;
 
   // src/lib/components/common/CommonModal.svelte
@@ -7134,13 +7205,13 @@
     let dispose;
     const default_slot_template = (
       /*#slots*/
-      ctx[4].default
+      ctx[5].default
     );
     const default_slot = create_slot(
       default_slot_template,
       ctx,
       /*$$scope*/
-      ctx[3],
+      ctx[4],
       null
     );
     return {
@@ -7195,20 +7266,20 @@
       p(ctx2, [dirty]) {
         if (default_slot) {
           if (default_slot.p && (!current || dirty & /*$$scope*/
-          8)) {
+          16)) {
             update_slot_base(
               default_slot,
               default_slot_template,
               ctx2,
               /*$$scope*/
-              ctx2[3],
+              ctx2[4],
               !current ? get_all_dirty_from_scope(
                 /*$$scope*/
-                ctx2[3]
+                ctx2[4]
               ) : get_slot_changes(
                 default_slot_template,
                 /*$$scope*/
-                ctx2[3],
+                ctx2[4],
                 dirty,
                 null
               ),
@@ -7257,33 +7328,47 @@
   };
   function instance7($$self, $$props, $$invalidate) {
     let { $$slots: slots = {}, $$scope } = $$props;
+    let { modalData = [] } = $$props;
+    const dispatch = createEventDispatcher();
     let modalAriaLabel = "";
     let isModalOpen = false;
-    modalSettings.subscribe((value) => {
-      const { modalAriaLabel: storeModalAriaLabel, isModalOpen: storeIsmodalOpen } = value;
-      $$invalidate(0, modalAriaLabel = storeModalAriaLabel);
-      $$invalidate(1, isModalOpen = storeIsmodalOpen);
-    });
     const clickModalBackground = () => {
-      modalSettings.set({
-        ...get_store_value(modalSettings),
-        isModalOpen: false,
-        modalAriaLabel: ""
-      });
+      $$invalidate(3, modalData = { isModalOpen: false, modalAriaLabel: "" });
+      dispatch("updateModalSettings", modalData);
     };
     $$self.$$set = ($$props2) => {
+      if ("modalData" in $$props2)
+        $$invalidate(3, modalData = $$props2.modalData);
       if ("$$scope" in $$props2)
-        $$invalidate(3, $$scope = $$props2.$$scope);
+        $$invalidate(4, $$scope = $$props2.$$scope);
+    };
+    $$self.$$.update = () => {
+      if ($$self.$$.dirty & /*modalData*/
+      8) {
+        $:
+          if (modalData) {
+            const { modalAriaLabel: storeModalAriaLabel, isModalOpen: storeIsmodalOpen } = modalData;
+            $$invalidate(0, modalAriaLabel = storeModalAriaLabel);
+            $$invalidate(1, isModalOpen = storeIsmodalOpen);
+          }
+      }
     };
-    return [modalAriaLabel, isModalOpen, clickModalBackground, $$scope, slots];
+    return [modalAriaLabel, isModalOpen, clickModalBackground, modalData, $$scope, slots];
   }
   var CommonModal = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance7, create_fragment11, safe_not_equal, {});
+      init(this, options, instance7, create_fragment11, safe_not_equal, { modalData: 3 });
+    }
+    get modalData() {
+      return this.$$.ctx[3];
+    }
+    set modalData(modalData) {
+      this.$$set({ modalData });
+      flush();
     }
   };
-  customElements.define("common-modal", create_custom_element(CommonModal, {}, ["default"], [], true));
+  customElements.define("common-modal", create_custom_element(CommonModal, { "modalData": {} }, ["default"], [], true));
   var CommonModal_default = CommonModal;
 
   // src/lib/assets/img/messaging/AlertIcon.svelte
@@ -7425,7 +7510,7 @@
           div0,
           "aria-hidden",
           /*ariaHidden*/
-          ctx[1]
+          ctx[2]
         );
         attr(span1, "class", "text-xl leading-6 font-bold ml-3 grow");
         attr(button0, "aria-label", "Close");
@@ -7442,7 +7527,7 @@
       m(target, anchor) {
         insert(target, div0, anchor);
         append(div0, t0);
-        ctx[4](div0);
+        ctx[7](div0);
         insert(target, t1, anchor);
         insert(target, div3, anchor);
         append(div3, div1);
@@ -7467,19 +7552,19 @@
               button0,
               "click",
               /*closeResetModal*/
-              ctx[2]
+              ctx[3]
             ),
             listen(
               button1,
               "click",
               /*closeResetModal*/
-              ctx[2]
+              ctx[3]
             ),
             listen(
               button2,
               "click",
               /*resetCategories*/
-              ctx[3]
+              ctx[5]
             )
           ];
           mounted = true;
@@ -7487,12 +7572,12 @@
       },
       p(ctx2, dirty) {
         if (!current || dirty & /*ariaHidden*/
-        2) {
+        4) {
           attr(
             div0,
             "aria-hidden",
             /*ariaHidden*/
-            ctx2[1]
+            ctx2[2]
           );
         }
       },
@@ -7514,7 +7599,7 @@
           detach(t1);
           detach(div3);
         }
-        ctx[4](null);
+        ctx[7](null);
         destroy_component(alerticon);
         destroy_component(crossicon);
         mounted = false;
@@ -7527,10 +7612,19 @@
     let current;
     commonmodal = new CommonModal_default({
       props: {
+        modalData: (
+          /*modalData*/
+          ctx[0]
+        ),
         $$slots: { default: [create_default_slot3] },
         $$scope: { ctx }
       }
     });
+    commonmodal.$on(
+      "updateModalSettings",
+      /*updateModal*/
+      ctx[4]
+    );
     return {
       c() {
         create_component(commonmodal.$$.fragment);
@@ -7541,8 +7635,12 @@
       },
       p(ctx2, [dirty]) {
         const commonmodal_changes = {};
+        if (dirty & /*modalData*/
+        1)
+          commonmodal_changes.modalData = /*modalData*/
+          ctx2[0];
         if (dirty & /*$$scope, ariaHidden, categoryModal*/
-        131) {
+        2054) {
           commonmodal_changes.$$scope = { dirty, ctx: ctx2 };
         }
         commonmodal.$set(commonmodal_changes);
@@ -7563,26 +7661,35 @@
     };
   }
   function instance8($$self, $$props, $$invalidate) {
+    let { categoryData = [] } = $$props;
+    let { modalData = [] } = $$props;
     let categoryModal;
     let ariaHidden = false;
-    const { isModalOpen } = get_store_value(modalSettings);
+    const { isModalOpen } = modalData;
+    const dispatch = createEventDispatcher();
     if (isModalOpen) {
       setTimeout(() => {
         categoryModal.focus();
-        $$invalidate(1, ariaHidden = true);
+        $$invalidate(2, ariaHidden = true);
       });
     }
     const closeResetModal = () => {
-      modalSettings.set({
-        ...get_store_value(modalSettings),
+      $$invalidate(0, modalData = {
         isModalOpen: false,
         modalAriaLabel: "",
         isOpenLastStatus: true
       });
+      dispatchModalData(modalData);
+    };
+    const updateModal = ({ detail }) => {
+      $$invalidate(0, modalData = { ...modalData, ...detail });
+      dispatchModalData(modalData);
+    };
+    const dispatchModalData = (newSettings) => {
+      dispatch("updateModalSettings", newSettings);
     };
-    const dispatch = createEventDispatcher();
     const resetCategories = () => {
-      const { currentAnswer, rawCategoryItems } = get_store_value(categoriseSettings);
+      const { currentAnswer, rawCategoryItems } = categoryData;
       const wordBinItems = rawCategoryItems.map((item) => item.id);
       const shuffledWordBinItems = wordBinItems.map((value) => ({ value, sort: Math.random() })).sort((a, b) => a.sort - b.sort).map(({ value }) => value);
       const resetCurrentAnswer = currentAnswer.map((answer) => {
@@ -7591,8 +7698,8 @@
           itemId: answer.categoryId === CONTAINER_WORD_BIN_ID ? shuffledWordBinItems : []
         };
       });
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
+      $$invalidate(6, categoryData = {
+        ...categoryData,
         considerContainerId: "",
         considerItemId: "",
         considerCloneItemId: "",
@@ -7606,24 +7713,54 @@
         currentAnswer: resetCurrentAnswer,
         hasAddItemAnimation: false
       });
+      dispatch("updateCategorySettings", categoryData);
       dispatch("resetCategory", { answer_list: [] });
       closeResetModal();
     };
     function div0_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         categoryModal = $$value;
-        $$invalidate(0, categoryModal);
+        $$invalidate(1, categoryModal);
       });
     }
-    return [categoryModal, ariaHidden, closeResetModal, resetCategories, div0_binding];
+    $$self.$$set = ($$props2) => {
+      if ("categoryData" in $$props2)
+        $$invalidate(6, categoryData = $$props2.categoryData);
+      if ("modalData" in $$props2)
+        $$invalidate(0, modalData = $$props2.modalData);
+    };
+    return [
+      modalData,
+      categoryModal,
+      ariaHidden,
+      closeResetModal,
+      updateModal,
+      resetCategories,
+      categoryData,
+      div0_binding
+    ];
   }
   var PromptCategoriseModal = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance8, create_fragment14, safe_not_equal, {});
+      init(this, options, instance8, create_fragment14, safe_not_equal, { categoryData: 6, modalData: 0 });
+    }
+    get categoryData() {
+      return this.$$.ctx[6];
+    }
+    set categoryData(categoryData) {
+      this.$$set({ categoryData });
+      flush();
+    }
+    get modalData() {
+      return this.$$.ctx[0];
+    }
+    set modalData(modalData) {
+      this.$$set({ modalData });
+      flush();
     }
   };
-  customElements.define("prompy-categorise-modal", create_custom_element(PromptCategoriseModal, {}, [], [], true));
+  customElements.define("prompy-categorise-modal", create_custom_element(PromptCategoriseModal, { "categoryData": {}, "modalData": {} }, [], [], true));
   var PromptCategoriseModal_default = PromptCategoriseModal;
 
   // src/lib/assets/img/action/Switch.svelte
@@ -8035,19 +8172,40 @@
   // src/lib/components/prompt/categorise/PromptCategorise.svelte
   function get_each_context3(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[59] = list[i];
-    child_ctx[60] = list;
-    child_ctx[61] = i;
+    child_ctx[67] = list[i];
+    child_ctx[68] = list;
+    child_ctx[69] = i;
     return child_ctx;
   }
   function create_if_block_6(ctx) {
     let promptcategorisemodal;
     let current;
-    promptcategorisemodal = new PromptCategoriseModal_default({});
+    promptcategorisemodal = new PromptCategoriseModal_default({
+      props: {
+        categoryData: (
+          /*categoriseSettingsData*/
+          ctx[6]
+        ),
+        modalData: (
+          /*modalSettingsData*/
+          ctx[7]
+        )
+      }
+    });
+    promptcategorisemodal.$on(
+      "updateCategorySettings",
+      /*updateCategory*/
+      ctx[40]
+    );
+    promptcategorisemodal.$on(
+      "updateModalSettings",
+      /*updateModal*/
+      ctx[46]
+    );
     promptcategorisemodal.$on(
       "resetCategory",
       /*saveCategory*/
-      ctx[36]
+      ctx[39]
     );
     return {
       c() {
@@ -8057,7 +8215,18 @@
         mount_component(promptcategorisemodal, target, anchor);
         current = true;
       },
-      p: noop,
+      p(ctx2, dirty) {
+        const promptcategorisemodal_changes = {};
+        if (dirty[0] & /*categoriseSettingsData*/
+        64)
+          promptcategorisemodal_changes.categoryData = /*categoriseSettingsData*/
+          ctx2[6];
+        if (dirty[0] & /*modalSettingsData*/
+        128)
+          promptcategorisemodal_changes.modalData = /*modalSettingsData*/
+          ctx2[7];
+        promptcategorisemodal.$set(promptcategorisemodal_changes);
+      },
       i(local) {
         if (current)
           return;
@@ -8097,7 +8266,7 @@
           button,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[15]
+          ctx[20]
         );
         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");
@@ -8114,19 +8283,19 @@
             button,
             "click",
             /*openResetModal*/
-            ctx[30]
+            ctx[33]
           );
           mounted = true;
         }
       },
       p(ctx2, dirty) {
         if (!current || dirty[0] & /*categoryTabIndex*/
-        32768) {
+        1048576) {
           attr(
             button,
             "tabindex",
             /*categoryTabIndex*/
-            ctx2[15]
+            ctx2[20]
           );
         }
       },
@@ -8161,7 +8330,7 @@
         t0 = text("Option ");
         t1 = text(
           /*selectedItemName*/
-          ctx[16]
+          ctx[21]
         );
         t2 = text(" added in:\xA0");
         attr(span, "class", "sr-only");
@@ -8174,11 +8343,11 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*selectedItemName*/
-        65536)
+        2097152)
           set_data(
             t1,
             /*selectedItemName*/
-            ctx2[16]
+            ctx2[21]
           );
       },
       d(detaching) {
@@ -8193,11 +8362,11 @@
     let t0;
     let t1_value = (
       /*getTotalWordsLabel*/
-      ctx[32](
+      ctx[35](
         /*totalCategoryWords*/
-        ctx[19][
+        ctx[5][
           /*category*/
-          ctx[59].id
+          ctx[67].id
         ]
       ) + ""
     );
@@ -8219,12 +8388,12 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*totalCategoryWords*/
-        524288 && t1_value !== (t1_value = /*getTotalWordsLabel*/
-        ctx2[32](
+        32 && t1_value !== (t1_value = /*getTotalWordsLabel*/
+        ctx2[35](
           /*totalCategoryWords*/
-          ctx2[19][
+          ctx2[5][
             /*category*/
-            ctx2[59].id
+            ctx2[67].id
           ]
         ) + ""))
           set_data(t1, t1_value);
@@ -8249,12 +8418,12 @@
         t0 = text(". Student's answer: ");
         t1 = text(
           /*selectedItemName*/
-          ctx[16]
+          ctx[21]
         );
         t2 = text(" (");
         t3 = text(
           /*previewResultSr*/
-          ctx[17]
+          ctx[4]
         );
         t4 = text(")");
         attr(span, "class", "sr-only");
@@ -8269,18 +8438,18 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*selectedItemName*/
-        65536)
+        2097152)
           set_data(
             t1,
             /*selectedItemName*/
-            ctx2[16]
+            ctx2[21]
           );
         if (dirty[0] & /*previewResultSr*/
-        131072)
+        16)
           set_data(
             t3,
             /*previewResultSr*/
-            ctx2[17]
+            ctx2[4]
           );
       },
       d(detaching) {
@@ -8349,11 +8518,11 @@
     let div0;
     let show_if_1 = (
       /*checkContainerDroppedItem*/
-      ctx[28](
+      ctx[31](
         /*category*/
-        ctx[59].id,
+        ctx[67].id,
         /*dropContainerId*/
-        ctx[6]
+        ctx[12]
       )
     );
     let t0;
@@ -8367,11 +8536,11 @@
     let span2;
     let t9_value = (
       /*getTotalWords*/
-      ctx[31](
+      ctx[34](
         /*category*/
-        ctx[59].id,
+        ctx[67].id,
         /*currentAnswer*/
-        ctx[9]
+        ctx[3]
       ) + ""
     );
     let t9;
@@ -8391,31 +8560,31 @@
     let div1_class_value;
     let category = (
       /*category*/
-      ctx[59]
+      ctx[67]
     );
     let current;
     let mounted;
     let dispose;
     let if_block0 = show_if_1 && create_if_block_42(ctx);
     let if_block1 = !/*previewResultSr*/
-    ctx[17] && create_if_block_33(ctx);
+    ctx[4] && create_if_block_33(ctx);
     let if_block2 = (
       /*previewResultSr*/
-      ctx[17] && create_if_block_25(ctx)
+      ctx[4] && 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*/
-      8192)
+      262144)
         show_if = null;
       if (show_if == null)
         show_if = !!/*checkifCategoryContainerOpen*/
-        ctx2[33](
+        ctx2[36](
           /*category*/
-          ctx2[59].id,
+          ctx2[67].id,
           /*openCategoryContainer*/
-          ctx2[13]
+          ctx2[18]
         );
       if (show_if)
         return 0;
@@ -8424,102 +8593,115 @@
     current_block_type_index = select_block_type(ctx, [-1, -1, -1]);
     if_block3 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     function div0_elementresize_handler() {
-      ctx[43].call(
+      ctx[49].call(
         div0,
         /*category*/
-        ctx[59]
+        ctx[67]
       );
     }
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-        (ctx[27](
+        (ctx[30](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*considerContainerId*/
-          ctx[4],
+          ctx[10],
           /*isDraggingOver*/
-          ctx[5]
+          ctx[11]
         ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-        (ctx[33](
+        (ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) ? "h-full p-3 min-h-[86px] md:min-h-0" : ""),
         paddingTop: (
           /*checkifCategoryContainerOpen*/
-          ctx[33](
+          ctx[36](
             /*category*/
-            ctx[59].id,
+            ctx[67].id,
             /*openCategoryContainer*/
-            ctx[13]
+            ctx[18]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[21][
+            ctx[23][
               /*category*/
-              ctx[59].id
+              ctx[67].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[21][
+            ctx[23][
               /*category*/
-              ctx[59].id
+              ctx[67].id
             ]
           )
         ),
         containerId: (
           /*category*/
-          ctx[59].id
+          ctx[67].id
         ),
         showButton: (
           /*checkifCategoryContainerOpen*/
-          ctx[33](
+          ctx[36](
             /*category*/
-            ctx[59].id,
+            ctx[67].id,
             /*openCategoryContainer*/
-            ctx[13]
+            ctx[18]
           )
         ),
         ariaLabel: `Category ${/*index*/
-        ctx[61] + 1}: ${/*category*/
-        ctx[59].name}`,
+        ctx[69] + 1}: ${/*category*/
+        ctx[67].name}`,
         isFinished: (
           /*isFinished*/
           ctx[0]
         ),
         correctAnswerList: (
           /*scoringMetadata*/
-          ctx[23]
+          ctx[26]
         ),
         isPreviewModeInteractive: (
           /*isPreviewModeInteractive*/
           ctx[1]
+        ),
+        categoryData: (
+          /*categoriseSettingsData*/
+          ctx[6]
+        ),
+        type: (
+          /*categoryDndType*/
+          ctx[24]
         )
       }
     });
+    promptcategorisedndcontainer.$on(
+      "updateCategorySettings",
+      /*updateCategory*/
+      ctx[40]
+    );
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[36]
+      ctx[39]
     );
     function keydown_handler(...args) {
       return (
         /*keydown_handler*/
-        ctx[44](
+        ctx[50](
           /*category*/
-          ctx[59],
+          ctx[67],
           ...args
         )
       );
     }
     const assign_div1 = () => (
       /*div1_binding*/
-      ctx[46](div1, category)
+      ctx[52](div1, category)
     );
     const unassign_div1 = () => (
       /*div1_binding*/
-      ctx[46](null, category)
+      ctx[52](null, category)
     );
     return {
       c() {
@@ -8530,11 +8712,11 @@
         t0 = space();
         span0 = element("span");
         span0.textContent = `Category ${/*index*/
-        ctx[61] + 1}:\xA0`;
+        ctx[69] + 1}:\xA0`;
         t4 = space();
         span1 = element("span");
         span1.textContent = `${/*category*/
-        ctx[59].name}`;
+        ctx[67].name}`;
         t6 = space();
         if (if_block1)
           if_block1.c();
@@ -8556,113 +8738,113 @@
         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[31](
+        ctx[34](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*currentAnswer*/
-          ctx[9]
+          ctx[3]
         ));
         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[61]}`);
+        ctx[69]}`);
         attr(div0, "aria-live", div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[28](
+        ctx[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) && /*enableAriaLive*/
-        ctx[18] ? "polite" : "off");
+        ctx[22] ? "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[28](
+        (ctx[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[33](
+        ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) && /*checkContainerDragOver*/
-        ctx[27](
+        ctx[30](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*considerContainerId*/
-          ctx[4],
+          ctx[10],
           /*isDraggingOver*/
-          ctx[5]
+          ctx[11]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[33](
+        (ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[33](
+        ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) && /*checkSelectedSourceContainer*/
-        ctx[29](
+        ctx[32](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*sourceSelectedContainerId*/
-          ctx[8],
+          ctx[14],
           /*currentSelectedItemId*/
-          ctx[7]
+          ctx[13]
         ) ? "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[12]
+          ctx[17]
         );
         attr(
           div1,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[15]
+          ctx[20]
         );
         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[27](
+        (ctx[30](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*considerContainerId*/
-          ctx[4],
+          ctx[10],
           /*isDraggingOver*/
-          ctx[5]
+          ctx[11]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) && /*hasAddItemAnimation*/
-        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[29](
+        ctx[16] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[32](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*sourceSelectedContainerId*/
-          ctx[8],
+          ctx[14],
           /*currentSelectedItemId*/
-          ctx[7]
+          ctx[13]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[33](
+        (ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) ? "min-h-[140px]" : ""));
       },
       m(target, anchor) {
@@ -8698,18 +8880,18 @@
             listen(button, "click", function() {
               if (is_function(
                 /*addCategoryContainer*/
-                ctx[34](
+                ctx[37](
                   /*category*/
-                  ctx[59].id,
+                  ctx[67].id,
                   /*openCategoryContainer*/
-                  ctx[13]
+                  ctx[18]
                 )
               ))
-                ctx[34](
+                ctx[37](
                   /*category*/
-                  ctx[59].id,
+                  ctx[67].id,
                   /*openCategoryContainer*/
-                  ctx[13]
+                  ctx[18]
                 ).apply(this, arguments);
             }),
             listen(div1, "keydown", keydown_handler),
@@ -8717,13 +8899,13 @@
               div1,
               "focus",
               /*resetTabCategory*/
-              ctx[38]
+              ctx[42]
             ),
             listen(
               div1,
               "blur",
               /*blur_handler*/
-              ctx[45]
+              ctx[51]
             )
           ];
           mounted = true;
@@ -8732,13 +8914,13 @@
       p(new_ctx, dirty) {
         ctx = new_ctx;
         if (dirty[0] & /*dropContainerId*/
-        64)
+        4096)
           show_if_1 = /*checkContainerDroppedItem*/
-          ctx[28](
+          ctx[31](
             /*category*/
-            ctx[59].id,
+            ctx[67].id,
             /*dropContainerId*/
-            ctx[6]
+            ctx[12]
           );
         if (show_if_1) {
           if (if_block0) {
@@ -8753,7 +8935,7 @@
           if_block0 = null;
         }
         if (!/*previewResultSr*/
-        ctx[17]) {
+        ctx[4]) {
           if (if_block1) {
             if_block1.p(ctx, dirty);
           } else {
@@ -8767,7 +8949,7 @@
         }
         if (
           /*previewResultSr*/
-          ctx[17]
+          ctx[4]
         ) {
           if (if_block2) {
             if_block2.p(ctx, dirty);
@@ -8781,12 +8963,12 @@
           if_block2 = null;
         }
         if ((!current || dirty[0] & /*currentAnswer*/
-        512) && t9_value !== (t9_value = /*getTotalWords*/
-        ctx[31](
+        8) && t9_value !== (t9_value = /*getTotalWords*/
+        ctx[34](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*currentAnswer*/
-          ctx[9]
+          ctx[3]
         ) + ""))
           set_data(t9, t9_value);
         let previous_block_index = current_block_type_index;
@@ -8807,117 +8989,117 @@
           if_block3.m(span3, null);
         }
         if (!current || dirty[0] & /*currentAnswer*/
-        512 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
-        ctx[31](
+        8 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
+        ctx[34](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*currentAnswer*/
-          ctx[9]
+          ctx[3]
         ))) {
           attr(button, "aria-label", button_aria_label_value);
         }
         if (!current || dirty[0] & /*dropContainerId, enableAriaLive*/
-        262208 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[28](
+        4198400 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) && /*enableAriaLive*/
-        ctx[18] ? "polite" : "off")) {
+        ctx[22] ? "polite" : "off")) {
           attr(div0, "aria-live", div0_aria_live_value);
         }
         if (!current || dirty[0] & /*dropContainerId, openCategoryContainer, considerContainerId, isDraggingOver, sourceSelectedContainerId, currentSelectedItemId*/
-        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[28](
+        293888 && 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[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[33](
+        ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) && /*checkContainerDragOver*/
-        ctx[27](
+        ctx[30](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*considerContainerId*/
-          ctx[4],
+          ctx[10],
           /*isDraggingOver*/
-          ctx[5]
+          ctx[11]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[33](
+        (ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[33](
+        ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) && /*checkSelectedSourceContainer*/
-        ctx[29](
+        ctx[32](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*sourceSelectedContainerId*/
-          ctx[8],
+          ctx[14],
           /*currentSelectedItemId*/
-          ctx[7]
+          ctx[13]
         ) ? "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*/
-        8240)
+        265216)
           promptcategorisedndcontainer_changes.containerClass = "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-          (ctx[27](
+          (ctx[30](
             /*category*/
-            ctx[59].id,
+            ctx[67].id,
             /*considerContainerId*/
-            ctx[4],
+            ctx[10],
             /*isDraggingOver*/
-            ctx[5]
+            ctx[11]
           ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-          (ctx[33](
+          (ctx[36](
             /*category*/
-            ctx[59].id,
+            ctx[67].id,
             /*openCategoryContainer*/
-            ctx[13]
+            ctx[18]
           ) ? "h-full p-3 min-h-[86px] md:min-h-0" : "");
         if (dirty[0] & /*openCategoryContainer, categoryTitleHeight*/
-        2105344)
+        8650752)
           promptcategorisedndcontainer_changes.paddingTop = /*checkifCategoryContainerOpen*/
-          ctx[33](
+          ctx[36](
             /*category*/
-            ctx[59].id,
+            ctx[67].id,
             /*openCategoryContainer*/
-            ctx[13]
+            ctx[18]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[21][
+            ctx[23][
               /*category*/
-              ctx[59].id
+              ctx[67].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[21][
+            ctx[23][
               /*category*/
-              ctx[59].id
+              ctx[67].id
             ]
           );
         if (dirty[0] & /*openCategoryContainer*/
-        8192)
+        262144)
           promptcategorisedndcontainer_changes.showButton = /*checkifCategoryContainerOpen*/
-          ctx[33](
+          ctx[36](
             /*category*/
-            ctx[59].id,
+            ctx[67].id,
             /*openCategoryContainer*/
-            ctx[13]
+            ctx[18]
           );
         if (dirty[0] & /*isFinished*/
         1)
@@ -8927,69 +9109,73 @@
         2)
           promptcategorisedndcontainer_changes.isPreviewModeInteractive = /*isPreviewModeInteractive*/
           ctx[1];
+        if (dirty[0] & /*categoriseSettingsData*/
+        64)
+          promptcategorisedndcontainer_changes.categoryData = /*categoriseSettingsData*/
+          ctx[6];
         promptcategorisedndcontainer.$set(promptcategorisedndcontainer_changes);
         if (!current || dirty[0] & /*isModalOpen*/
-        4096) {
+        131072) {
           attr(
             div1,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[12]
+            ctx[17]
           );
         }
         if (!current || dirty[0] & /*categoryTabIndex*/
-        32768) {
+        1048576) {
           attr(
             div1,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[15]
+            ctx[20]
           );
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer*/
-        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[27](
+        359424 && 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[30](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*considerContainerId*/
-          ctx[4],
+          ctx[10],
           /*isDraggingOver*/
-          ctx[5]
+          ctx[11]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) && /*hasAddItemAnimation*/
-        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[29](
+        ctx[16] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[32](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*sourceSelectedContainerId*/
-          ctx[8],
+          ctx[14],
           /*currentSelectedItemId*/
-          ctx[7]
+          ctx[13]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[33](
+        (ctx[36](
           /*category*/
-          ctx[59].id,
+          ctx[67].id,
           /*openCategoryContainer*/
-          ctx[13]
+          ctx[18]
         ) ? "min-h-[140px]" : ""))) {
           attr(div1, "class", div1_class_value);
         }
         if (category !== /*category*/
-        ctx[59]) {
+        ctx[67]) {
           unassign_div1();
           category = /*category*/
-          ctx[59];
+          ctx[67];
           assign_div1();
         }
       },
@@ -9035,7 +9221,7 @@
         t0 = text("Option ");
         t1 = text(
           /*selectedItemName*/
-          ctx[16]
+          ctx[21]
         );
         t2 = text(" added in:\xA0");
         attr(span, "class", "sr-only");
@@ -9048,11 +9234,11 @@
       },
       p(ctx2, dirty) {
         if (dirty[0] & /*selectedItemName*/
-        65536)
+        2097152)
           set_data(
             t1,
             /*selectedItemName*/
-            ctx2[16]
+            ctx2[21]
           );
       },
       d(detaching) {
@@ -9080,10 +9266,10 @@
     let div2;
     let show_if = (
       /*checkContainerDroppedItem*/
-      ctx[28](
+      ctx[31](
         CONTAINER_WORD_BIN_ID,
         /*dropContainerId*/
-        ctx[6]
+        ctx[12]
       )
     );
     let t8;
@@ -9117,17 +9303,17 @@
     arrowdowncircle = new ArrowDownCircle_default({});
     let if_block0 = (
       /*isModalOpen*/
-      ctx[12] && create_if_block_6(ctx)
+      ctx[17] && create_if_block_6(ctx)
     );
     let if_block1 = (
       /*totalRemainingWordBinItem*/
-      ctx[10] !== /*totalCategoryItems*/
-      ctx[3] && !/*isFinished*/
+      ctx[15] !== /*totalCategoryItems*/
+      ctx[9] && !/*isFinished*/
       ctx[0] && create_if_block_5(ctx)
     );
     let each_value = ensure_array_like(Object.values(
       /*categoryGroups*/
-      ctx[26]
+      ctx[29]
     ));
     let each_blocks = [];
     for (let i = 0; i < each_value.length; i += 1) {
@@ -9141,14 +9327,14 @@
     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[35](
+        (ctx[38](
           /*totalRemainingWordBinItem*/
-          ctx[10]
+          ctx[15]
         ) && !/*currentSelectedItemId*/
-        ctx[7] ? "absolute inset-0" : ""),
+        ctx[13] ? "absolute inset-0" : ""),
         items: (
           /*categoryItems*/
-          ctx[25]
+          ctx[28]
         ),
         containerId: CONTAINER_WORD_BIN_ID,
         ariaLabel: "Word bin",
@@ -9158,18 +9344,31 @@
         ),
         correctAnswerList: (
           /*scoringMetadata*/
-          ctx[23]
+          ctx[26]
         ),
         isPreviewModeInteractive: (
           /*isPreviewModeInteractive*/
           ctx[1]
+        ),
+        categoryData: (
+          /*categoriseSettingsData*/
+          ctx[6]
+        ),
+        type: (
+          /*categoryDndType*/
+          ctx[24]
         )
       }
     });
+    promptcategorisedndcontainer.$on(
+      "updateCategorySettings",
+      /*updateCategory*/
+      ctx[40]
+    );
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[36]
+      ctx[39]
     );
     smallchevronright = new SmallChevronRight_default({});
     return {
@@ -9207,12 +9406,12 @@
         span3 = element("span");
         t11 = text(
           /*totalRemainingWordBinItem*/
-          ctx[10]
+          ctx[15]
         );
         t12 = text(" out of ");
         t13 = text(
           /*totalCategoryItems*/
-          ctx[3]
+          ctx[9]
         );
         t14 = text(" left");
         t15 = space();
@@ -9232,7 +9431,7 @@
           button0,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[15]
+          ctx[20]
         );
         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");
@@ -9242,7 +9441,7 @@
           div0,
           "aria-hidden",
           /*isModalOpen*/
-          ctx[12]
+          ctx[17]
         );
         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");
@@ -9251,67 +9450,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[35](
+        (ctx[38](
           /*totalRemainingWordBinItem*/
-          ctx[10]
+          ctx[15]
         ) ? "hidden" : ""));
         button1.disabled = button1_disabled_value = /*currentWordBinIndex*/
-        ctx[14] === 0;
+        ctx[19] === 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[35](
+        (ctx[38](
           /*totalRemainingWordBinItem*/
-          ctx[10]
+          ctx[15]
         ) ? "hidden" : ""));
         button2.disabled = button2_disabled_value = /*currentWordBinIndex*/
-        ctx[14] === /*totalRemainingWordBinItem*/
-        ctx[10] - 1;
+        ctx[19] === /*totalRemainingWordBinItem*/
+        ctx[15] - 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[12]
+          ctx[17]
         );
         attr(
           div4,
           "tabindex",
           /*categoryTabIndex*/
-          ctx[15]
+          ctx[20]
         );
         attr(div4, "aria-live", div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[28](
+        ctx[31](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "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[27](
+        (ctx[30](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
-          ctx[4],
+          ctx[10],
           /*isDraggingOver*/
-          ctx[5]
+          ctx[11]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) && /*hasAddItemAnimation*/
-        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[29](
+        ctx[16] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[32](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
-          ctx[8],
+          ctx[14],
           /*currentSelectedItemId*/
-          ctx[7]
+          ctx[13]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""));
       },
       m(target, anchor) {
@@ -9360,7 +9559,7 @@
         append(div3, button2);
         append(button2, span5);
         mount_component(smallchevronright, span5, null);
-        ctx[49](div4);
+        ctx[55](div4);
         current = true;
         if (!mounted) {
           dispose = [
@@ -9368,37 +9567,43 @@
               button0,
               "keypress",
               /*goToWordBin*/
-              ctx[39]
+              ctx[43]
             ),
             listen(button1, "click", function() {
-              if (is_function(useNavigateItem(
-                /*currentWordBinIndex*/
-                ctx[14],
-                /*currentAnswer*/
-                ctx[9],
-                "left"
-              )))
-                useNavigateItem(
+              if (is_function(
+                /*navigateCategoryItem*/
+                ctx[45](
                   /*currentWordBinIndex*/
-                  ctx[14],
+                  ctx[19],
                   /*currentAnswer*/
-                  ctx[9],
+                  ctx[3],
+                  "left"
+                )
+              ))
+                ctx[45](
+                  /*currentWordBinIndex*/
+                  ctx[19],
+                  /*currentAnswer*/
+                  ctx[3],
                   "left"
                 ).apply(this, arguments);
             }),
             listen(button2, "click", function() {
-              if (is_function(useNavigateItem(
-                /*currentWordBinIndex*/
-                ctx[14],
-                /*currentAnswer*/
-                ctx[9],
-                "right"
-              )))
-                useNavigateItem(
+              if (is_function(
+                /*navigateCategoryItem*/
+                ctx[45](
+                  /*currentWordBinIndex*/
+                  ctx[19],
+                  /*currentAnswer*/
+                  ctx[3],
+                  "right"
+                )
+              ))
+                ctx[45](
                   /*currentWordBinIndex*/
-                  ctx[14],
+                  ctx[19],
                   /*currentAnswer*/
-                  ctx[9],
+                  ctx[3],
                   "right"
                 ).apply(this, arguments);
             }),
@@ -9406,19 +9611,19 @@
               div4,
               "keydown",
               /*keydown_handler_1*/
-              ctx[47]
+              ctx[53]
             ),
             listen(
               div4,
               "focus",
               /*resetTabCategory*/
-              ctx[38]
+              ctx[42]
             ),
             listen(
               div4,
               "blur",
               /*blur_handler_1*/
-              ctx[48]
+              ctx[54]
             )
           ];
           mounted = true;
@@ -9427,22 +9632,22 @@
       p(new_ctx, dirty) {
         ctx = new_ctx;
         if (!current || dirty[0] & /*categoryTabIndex*/
-        32768) {
+        1048576) {
           attr(
             button0,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[15]
+            ctx[20]
           );
         }
         if (
           /*isModalOpen*/
-          ctx[12]
+          ctx[17]
         ) {
           if (if_block0) {
             if_block0.p(ctx, dirty);
             if (dirty[0] & /*isModalOpen*/
-            4096) {
+            131072) {
               transition_in(if_block0, 1);
             }
           } else {
@@ -9460,14 +9665,14 @@
         }
         if (
           /*totalRemainingWordBinItem*/
-          ctx[10] !== /*totalCategoryItems*/
-          ctx[3] && !/*isFinished*/
+          ctx[15] !== /*totalCategoryItems*/
+          ctx[9] && !/*isFinished*/
           ctx[0]
         ) {
           if (if_block1) {
             if_block1.p(ctx, dirty);
             if (dirty[0] & /*totalRemainingWordBinItem, totalCategoryItems, isFinished*/
-            1033) {
+            33281) {
               transition_in(if_block1, 1);
             }
           } else {
@@ -9484,20 +9689,20 @@
           check_outros();
         }
         if (!current || dirty[0] & /*isModalOpen*/
-        4096) {
+        131072) {
           attr(
             div0,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[12]
+            ctx[17]
           );
         }
-        if (dirty[0] & /*isModalOpen, categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer, tabCategory, categoryTitleHeight, isFinished, scoringMetadata, isPreviewModeInteractive, enableAriaLive, currentAnswer, previewResultSr, selectedItemName, totalCategoryWords*/
-        1019198451 | dirty[1] & /*checkifCategoryContainerOpen, getContainerTabSelected, resetTabCategory, handleItemAriaHidden, saveCategory, getTotalWords, addCategoryContainer, getTotalWordsLabel*/
-        751) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer, tabCategory, categoryTitleHeight, isFinished, scoringMetadata, isPreviewModeInteractive, categoriseSettingsData, categoryDndType, enableAriaLive, currentAnswer, previewResultSr, selectedItemName, totalCategoryWords*/
+        1710718331 | dirty[1] & /*checkContainerDroppedItem, checkSelectedSourceContainer, checkifCategoryContainerOpen, getContainerTabSelected, resetTabCategory, handleItemAriaHidden, updateCategory, saveCategory, getTotalWords, addCategoryContainer, getTotalWordsLabel*/
+        12155) {
           each_value = ensure_array_like(Object.values(
             /*categoryGroups*/
-            ctx[26]
+            ctx[29]
           ));
           let i;
           for (i = 0; i < each_value.length; i += 1) {
@@ -9519,12 +9724,12 @@
           check_outros();
         }
         if (dirty[0] & /*dropContainerId*/
-        64)
+        4096)
           show_if = /*checkContainerDroppedItem*/
-          ctx[28](
+          ctx[31](
             CONTAINER_WORD_BIN_ID,
             /*dropContainerId*/
-            ctx[6]
+            ctx[12]
           );
         if (show_if) {
           if (if_block2) {
@@ -9539,41 +9744,41 @@
           if_block2 = null;
         }
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        1024)
+        32768)
           set_data(
             t11,
             /*totalRemainingWordBinItem*/
-            ctx[10]
+            ctx[15]
           );
         if (!current || dirty[0] & /*totalCategoryItems*/
-        8)
+        512)
           set_data(
             t13,
             /*totalCategoryItems*/
-            ctx[3]
+            ctx[9]
           );
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        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[35](
+        32768 && 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[38](
           /*totalRemainingWordBinItem*/
-          ctx[10]
+          ctx[15]
         ) ? "hidden" : ""))) {
           attr(button1, "class", button1_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex*/
-        16384 && button1_disabled_value !== (button1_disabled_value = /*currentWordBinIndex*/
-        ctx[14] === 0)) {
+        524288 && button1_disabled_value !== (button1_disabled_value = /*currentWordBinIndex*/
+        ctx[19] === 0)) {
           button1.disabled = button1_disabled_value;
         }
         const promptcategorisedndcontainer_changes = {};
         if (dirty[0] & /*totalRemainingWordBinItem, currentSelectedItemId*/
-        1152)
+        40960)
           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[35](
+          (ctx[38](
             /*totalRemainingWordBinItem*/
-            ctx[10]
+            ctx[15]
           ) && !/*currentSelectedItemId*/
-          ctx[7] ? "absolute inset-0" : "");
+          ctx[13] ? "absolute inset-0" : "");
         if (dirty[0] & /*isFinished*/
         1)
           promptcategorisedndcontainer_changes.isFinished = /*isFinished*/
@@ -9582,74 +9787,78 @@
         2)
           promptcategorisedndcontainer_changes.isPreviewModeInteractive = /*isPreviewModeInteractive*/
           ctx[1];
+        if (dirty[0] & /*categoriseSettingsData*/
+        64)
+          promptcategorisedndcontainer_changes.categoryData = /*categoriseSettingsData*/
+          ctx[6];
         promptcategorisedndcontainer.$set(promptcategorisedndcontainer_changes);
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
-        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[35](
+        32768 && 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[38](
           /*totalRemainingWordBinItem*/
-          ctx[10]
+          ctx[15]
         ) ? "hidden" : ""))) {
           attr(button2, "class", button2_class_value);
         }
         if (!current || dirty[0] & /*currentWordBinIndex, totalRemainingWordBinItem*/
-        17408 && button2_disabled_value !== (button2_disabled_value = /*currentWordBinIndex*/
-        ctx[14] === /*totalRemainingWordBinItem*/
-        ctx[10] - 1)) {
+        557056 && button2_disabled_value !== (button2_disabled_value = /*currentWordBinIndex*/
+        ctx[19] === /*totalRemainingWordBinItem*/
+        ctx[15] - 1)) {
           button2.disabled = button2_disabled_value;
         }
         if (!current || dirty[0] & /*isModalOpen*/
-        4096) {
+        131072) {
           attr(
             div4,
             "aria-hidden",
             /*isModalOpen*/
-            ctx[12]
+            ctx[17]
           );
         }
         if (!current || dirty[0] & /*categoryTabIndex*/
-        32768) {
+        1048576) {
           attr(
             div4,
             "tabindex",
             /*categoryTabIndex*/
-            ctx[15]
+            ctx[20]
           );
         }
         if (!current || dirty[0] & /*dropContainerId*/
-        64 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[28](
+        4096 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[31](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "polite" : "off")) {
           attr(div4, "aria-live", div4_aria_live_value);
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId*/
-        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[27](
+        97280 && 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[30](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
-          ctx[4],
+          ctx[10],
           /*isDraggingOver*/
-          ctx[5]
+          ctx[11]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[28](
+        (ctx[31](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
-          ctx[6]
+          ctx[12]
         ) && /*hasAddItemAnimation*/
-        ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[29](
+        ctx[16] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
+        (ctx[32](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
-          ctx[8],
+          ctx[14],
           /*currentSelectedItemId*/
-          ctx[7]
+          ctx[13]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""))) {
           attr(div4, "class", div4_class_value);
         }
@@ -9703,7 +9912,7 @@
         destroy_component(smallchevronleft);
         destroy_component(promptcategorisedndcontainer);
         destroy_component(smallchevronright);
-        ctx[49](null);
+        ctx[55](null);
         mounted = false;
         run_all(dispose);
       }
@@ -9717,11 +9926,11 @@
       props: {
         rubric: (
           /*rubric*/
-          ctx[22].text
+          ctx[25].text
         ),
         prompt: (
           /*prompt*/
-          ctx[24]
+          ctx[27]
         ),
         $$slots: { default: [create_default_slot4] },
         $$scope: { ctx }
@@ -9736,14 +9945,14 @@
       m(target, anchor) {
         insert(target, div, anchor);
         mount_component(promptbody, div, null);
-        ctx[50](div);
+        ctx[56](div);
         current = true;
       },
       p(ctx2, dirty) {
         const promptbody_changes = {};
-        if (dirty[0] & /*isModalOpen, categoryTabIndex, dropContainerId, considerContainerId, isDraggingOver, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, tabCategory, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, isFinished, isPreviewModeInteractive, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight, enableAriaLive, previewResultSr, totalCategoryWords*/
-        4194299 | dirty[2] & /*$$scope*/
-        1) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, dropContainerId, considerContainerId, isDraggingOver, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, tabCategory, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, isFinished, isPreviewModeInteractive, categoriseSettingsData, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight, enableAriaLive, previewResultSr, totalCategoryWords, modalSettingsData*/
+        16777211 | dirty[2] & /*$$scope*/
+        256) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -9763,7 +9972,7 @@
           detach(div);
         }
         destroy_component(promptbody);
-        ctx[50](null);
+        ctx[56](null);
       }
     };
   }
@@ -9792,12 +10001,41 @@
     let previewResultSr = "";
     let enableAriaLive = true;
     const totalCategoryWords = [];
+    const categoryDndType = `category-type-${numberRandomizer()}`;
+    let categoriseSettingsData = {
+      considerContainerId: "",
+      considerItemId: "",
+      considerCloneItemId: "",
+      sourceCloneContainerId: "",
+      sourceContainerId: "",
+      dropContainerId: "",
+      isDraggingOver: false,
+      selectedItemId: "",
+      selectedContainerId: "",
+      sourceSelectedContainerId: "",
+      currentAnswer: [],
+      rawCategories: [],
+      rawCategoryItems: [],
+      hasAddItemAnimation: false,
+      openCategoryContainer: [],
+      currentWordBinIndex: 0,
+      currentTabContainer: "",
+      lastSelectedTabContainer: "",
+      selectedItemName: "",
+      previewResultSr: "",
+      isItemsAriaHidden: false
+    };
+    let modalSettingsData = {
+      isModalOpen: false,
+      modalAriaLabel: "",
+      isOpenLastStatus: false
+    };
     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(20, tabCategory[group.id] = false, tabCategory));
+    categoryGroups.map((group) => $$invalidate(8, tabCategory[group.id] = false, tabCategory));
     totalCategoryItems = totalRemainingWordBinItem = Object.keys(categoryItems).length;
     let wordBinItems = categoryItems.map((item) => item.id);
     let initialCategoryAnswer = [
@@ -9808,24 +10046,39 @@
     ];
     let categoryTitleHeight = [];
     categoryGroups.map((category) => {
-      $$invalidate(21, categoryTitleHeight[category.id] = "", categoryTitleHeight);
+      $$invalidate(23, categoryTitleHeight[category.id] = "", categoryTitleHeight);
+      initialCategoryAnswer.push({ categoryId: category.id, itemId: [] });
     });
     if (metadata) {
       const { events } = metadata.interactions;
       const currentCategoryList = events.pop();
       const { answer_list: answerList } = currentCategoryList;
       const selectedItems = [];
+      const selectedCategories = [];
       if (answerList.length) {
         const categorySavedItems = answerList.map((answer) => {
           const { category_id: categoryId, item_id: itemId } = answer;
+          selectedCategories.push(categoryId);
           itemId.map((item) => selectedItems.push(item));
           return { categoryId, itemId };
         });
+        if (selectedCategories.length) {
+          initialCategoryAnswer = initialCategoryAnswer.filter((answer) => !selectedCategories.includes(answer.categoryId));
+        }
         wordBinItems = wordBinItems.filter((item) => !new Set(selectedItems).has(item));
         initialCategoryAnswer[0].itemId = wordBinItems;
         initialCategoryAnswer = [...initialCategoryAnswer, ...categorySavedItems];
       }
     }
+    const updateCategoriseSettings = (newSettings) => {
+      $$invalidate(6, categoriseSettingsData = {
+        ...categoriseSettingsData,
+        ...newSettings
+      });
+    };
+    const updateModalSettings = (newSettings) => {
+      $$invalidate(7, modalSettingsData = { ...modalSettingsData, ...newSettings });
+    };
     if (isFinished) {
       const showOpenContainerList = [];
       const { answerList } = scoringMetadata;
@@ -9857,97 +10110,15 @@
         itemId: isPreviewMode ? [] : wordBinData
       });
       initialCategoryAnswer = categoryWithAnswer;
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
+      updateCategoriseSettings({
         openCategoryContainer: showOpenContainerList
       });
     }
-    categoriseSettings.set({
-      ...get_store_value(categoriseSettings),
+    updateCategoriseSettings({
       currentAnswer: initialCategoryAnswer,
       rawCategoryItems: categoryItems,
       rawCategories: categoryGroups
     });
-    modalSettings.subscribe((value) => {
-      const { isModalOpen: storeIsModalOpen, isOpenLastStatus } = value;
-      $$invalidate(12, isModalOpen = storeIsModalOpen);
-      $$invalidate(15, categoryTabIndex = storeIsModalOpen ? -1 : 0);
-      if (!storeIsModalOpen && isOpenLastStatus) {
-        setTimeout(() => {
-          $$invalidate(2, srDiv.tabIndex = 0, srDiv);
-          srDiv.focus();
-          $$invalidate(2, srDiv.tabIndex = -1, srDiv);
-          modalSettings.set({
-            ...get_store_value(modalSettings),
-            isOpenLastStatus: false
-          });
-        });
-      }
-    });
-    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, previewResultSr: storepreviewResultSr } = value;
-      $$invalidate(4, considerContainerId = storeConsiderContainerId);
-      $$invalidate(5, isDraggingOver = storeIsDraggingOver);
-      $$invalidate(6, dropContainerId = storeDropContainerId);
-      sourceCloneContainerId = storeSourceCloneContainerId;
-      $$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);
-      currentAnswer.map((answer) => {
-        const { categoryId, itemId } = answer;
-        let totalWordCount = itemId.length;
-        if (isFinished) {
-          const items = itemId.filter((item) => {
-            const itemType = item.split(EAT_DASH)[1];
-            return itemType !== ANSWER_MISSED;
-          });
-          totalWordCount = items.length;
-        }
-        $$invalidate(19, totalCategoryWords[categoryId] = totalWordCount, totalCategoryWords);
-      });
-      $$invalidate(10, totalRemainingWordBinItem = totalCategoryWords[CONTAINER_WORD_BIN_ID]);
-      if (lastSelectedTabContainer) {
-        setTimeout(
-          () => {
-            tabCategory[lastSelectedTabContainer].focus();
-            categoriseSettings.set({
-              ...get_store_value(categoriseSettings),
-              lastSelectedTabContainer: ""
-            });
-          },
-          150
-        );
-      }
-      if (previewResultSr) {
-        setTimeout(
-          () => {
-            $$invalidate(18, enableAriaLive = false);
-          },
-          400
-        );
-        setTimeout(
-          () => {
-            categoriseSettings.set({
-              ...get_store_value(categoriseSettings),
-              previewResultSr: ""
-            });
-            setTimeout(
-              () => {
-                $$invalidate(18, enableAriaLive = true);
-              },
-              400
-            );
-          },
-          600
-        );
-      }
-    });
     const checkContainerDragOver = (containerId, storeContainerId, isContainerDragOver) => {
       return containerId === storeContainerId && isContainerDragOver && sourceCloneContainerId !== containerId;
     };
@@ -9958,8 +10129,7 @@
       return !!currentSelectedItemId2 && storeContainerId !== containerId;
     };
     const openResetModal = () => {
-      modalSettings.set({
-        ...get_store_value(modalSettings),
+      updateModalSettings({
         isModalOpen: true,
         modalAriaLabel: "Reset words"
       });
@@ -9995,10 +10165,7 @@
         const index = openCategoryContainer2.indexOf(categoryId);
         openContainerList.splice(index, 1);
       }
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
-        openCategoryContainer: openContainerList
-      });
+      updateCategoriseSettings({ openCategoryContainer: openContainerList });
     };
     const isWordBInTotalZero = (totalRemainingWordBinItem2) => {
       return totalRemainingWordBinItem2 <= 0;
@@ -10008,12 +10175,14 @@
         return;
       dispatch("saveCategory", detail);
     };
+    const updateCategory = ({ detail }) => {
+      updateCategoriseSettings(detail);
+    };
     const getContainerTabSelected = (key, containerId) => {
       if (key === "Enter" && !currentSelectedItemId) {
         setTimeout(
           () => {
-            categoriseSettings.set({
-              ...get_store_value(categoriseSettings),
+            updateCategoriseSettings({
               currentTabContainer: containerId,
               isItemsAriaHidden: false
             });
@@ -10022,8 +10191,7 @@
         );
       }
       if (key === "Escape" && currentSelectedItemId) {
-        categoriseSettings.set({
-          ...get_store_value(categoriseSettings),
+        updateCategoriseSettings({
           selectedItemId: "",
           sourceSelectedContainerId: "",
           selectedItemName: ""
@@ -10031,8 +10199,7 @@
       }
     };
     const resetTabCategory = () => {
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
+      updateCategoriseSettings({
         isItemsAriaHidden: true,
         currentTabContainer: "",
         lastSelectedTabContainer: ""
@@ -10042,21 +10209,25 @@
       tabCategory[CONTAINER_WORD_BIN_ID].focus();
     };
     const handleItemAriaHidden = (type) => {
-      categoriseSettings.set({
-        ...get_store_value(categoriseSettings),
-        isItemsAriaHidden: type
-      });
+      updateCategoriseSettings({ isItemsAriaHidden: type });
+    };
+    const navigateCategoryItem = (currentWordBinIndex2, currentAnswer2, position) => {
+      const navigateItem = useNavigateItem(currentWordBinIndex2, currentAnswer2, position);
+      updateCategoriseSettings(navigateItem);
+    };
+    const updateModal = ({ detail }) => {
+      updateModalSettings(detail);
     };
     function div0_elementresize_handler(category) {
       categoryTitleHeight[category.id] = this.clientHeight;
-      $$invalidate(21, categoryTitleHeight);
+      $$invalidate(23, categoryTitleHeight);
     }
     const keydown_handler = (category, { key }) => getContainerTabSelected(key, category.id);
     const blur_handler = () => handleItemAriaHidden(false);
     function div1_binding($$value, category) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         tabCategory[category.id] = $$value;
-        $$invalidate(20, tabCategory);
+        $$invalidate(8, tabCategory);
       });
     }
     const keydown_handler_1 = ({ key }) => getContainerTabSelected(key, CONTAINER_WORD_BIN_ID);
@@ -10064,36 +10235,122 @@
     function div4_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         tabCategory[CONTAINER_WORD_BIN_ID] = $$value;
-        $$invalidate(20, tabCategory);
+        $$invalidate(8, tabCategory);
       });
     }
     function div_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         srDiv = $$value;
-        $$invalidate(2, srDiv);
+        $$invalidate(2, srDiv), $$invalidate(7, modalSettingsData);
       });
     }
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(41, sessionData = $$props2.sessionData);
+        $$invalidate(47, sessionData = $$props2.sessionData);
       if ("isFinished" in $$props2)
         $$invalidate(0, isFinished = $$props2.isFinished);
       if ("isPreviewMode" in $$props2)
-        $$invalidate(42, isPreviewMode = $$props2.isPreviewMode);
+        $$invalidate(48, isPreviewMode = $$props2.isPreviewMode);
       if ("isPreviewModeInteractive" in $$props2)
         $$invalidate(1, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
     };
+    $$self.$$.update = () => {
+      if ($$self.$$.dirty[0] & /*modalSettingsData, srDiv*/
+      132) {
+        $:
+          if (modalSettingsData) {
+            const { isModalOpen: storeIsModalOpen, isOpenLastStatus } = modalSettingsData;
+            $$invalidate(17, isModalOpen = storeIsModalOpen);
+            $$invalidate(20, categoryTabIndex = storeIsModalOpen ? -1 : 0);
+            if (!storeIsModalOpen && isOpenLastStatus) {
+              setTimeout(() => {
+                $$invalidate(2, srDiv.tabIndex = 0, srDiv);
+                srDiv.focus();
+                $$invalidate(2, srDiv.tabIndex = -1, srDiv);
+                updateModalSettings({ isOpenLastStatus: false });
+              });
+            }
+          }
+      }
+      if ($$self.$$.dirty[0] & /*categoriseSettingsData, currentAnswer, isFinished, totalCategoryWords, tabCategory, previewResultSr*/
+      377) {
+        $:
+          if (categoriseSettingsData) {
+            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 } = categoriseSettingsData;
+            $$invalidate(10, considerContainerId = storeConsiderContainerId);
+            $$invalidate(11, isDraggingOver = storeIsDraggingOver);
+            $$invalidate(12, dropContainerId = storeDropContainerId);
+            sourceCloneContainerId = storeSourceCloneContainerId;
+            $$invalidate(13, currentSelectedItemId = storeSelectedItemId);
+            $$invalidate(14, sourceSelectedContainerId = storeSourceSelectedContainerId);
+            $$invalidate(3, currentAnswer = storeCurrentAnswer);
+            $$invalidate(16, hasAddItemAnimation = storeHasAddItemAnimation);
+            $$invalidate(18, openCategoryContainer = storeOpenCategoryContainer);
+            $$invalidate(19, currentWordBinIndex = storeCurrentWordBinIndex);
+            $$invalidate(21, selectedItemName = storeSelectedItemName);
+            $$invalidate(4, previewResultSr = storepreviewResultSr);
+            $$invalidate(20, categoryTabIndex = storeSelectedItemId.length ? -1 : 0);
+            currentAnswer.map((answer) => {
+              const { categoryId, itemId } = answer;
+              let totalWordCount = itemId.length;
+              if (isFinished) {
+                const items = itemId.filter((item) => {
+                  const itemType = item.split(EAT_DASH)[1];
+                  return itemType !== ANSWER_MISSED;
+                });
+                totalWordCount = items.length;
+              }
+              $$invalidate(5, totalCategoryWords[categoryId] = totalWordCount, totalCategoryWords);
+            });
+            $$invalidate(15, totalRemainingWordBinItem = totalCategoryWords[CONTAINER_WORD_BIN_ID]);
+            if (lastSelectedTabContainer) {
+              setTimeout(
+                () => {
+                  tabCategory[lastSelectedTabContainer].focus();
+                  updateCategoriseSettings({ lastSelectedTabContainer: "" });
+                },
+                150
+              );
+            }
+            if (previewResultSr) {
+              setTimeout(
+                () => {
+                  $$invalidate(22, enableAriaLive = false);
+                },
+                400
+              );
+              setTimeout(
+                () => {
+                  updateCategoriseSettings({ previewResultSr: "" });
+                  setTimeout(
+                    () => {
+                      $$invalidate(22, enableAriaLive = true);
+                    },
+                    400
+                  );
+                },
+                600
+              );
+            }
+          }
+      }
+    };
     return [
       isFinished,
       isPreviewModeInteractive,
       srDiv,
+      currentAnswer,
+      previewResultSr,
+      totalCategoryWords,
+      categoriseSettingsData,
+      modalSettingsData,
+      tabCategory,
       totalCategoryItems,
       considerContainerId,
       isDraggingOver,
       dropContainerId,
       currentSelectedItemId,
       sourceSelectedContainerId,
-      currentAnswer,
       totalRemainingWordBinItem,
       hasAddItemAnimation,
       isModalOpen,
@@ -10101,11 +10358,9 @@
       currentWordBinIndex,
       categoryTabIndex,
       selectedItemName,
-      previewResultSr,
       enableAriaLive,
-      totalCategoryWords,
-      tabCategory,
       categoryTitleHeight,
+      categoryDndType,
       rubric,
       scoringMetadata,
       prompt,
@@ -10121,10 +10376,13 @@
       addCategoryContainer,
       isWordBInTotalZero,
       saveCategory,
+      updateCategory,
       getContainerTabSelected,
       resetTabCategory,
       goToWordBin,
       handleItemAriaHidden,
+      navigateCategoryItem,
+      updateModal,
       sessionData,
       isPreviewMode,
       div0_elementresize_handler,
@@ -10147,9 +10405,9 @@
         create_fragment21,
         safe_not_equal,
         {
-          sessionData: 41,
+          sessionData: 47,
           isFinished: 0,
-          isPreviewMode: 42,
+          isPreviewMode: 48,
           isPreviewModeInteractive: 1
         },
         null,
@@ -10157,7 +10415,7 @@
       );
     }
     get sessionData() {
-      return this.$$.ctx[41];
+      return this.$$.ctx[47];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -10171,7 +10429,7 @@
       flush();
     }
     get isPreviewMode() {
-      return this.$$.ctx[42];
+      return this.$$.ctx[48];
     }
     set isPreviewMode(isPreviewMode) {
       this.$$set({ isPreviewMode });