eat-js-sdk 0.0.46 → 0.0.47

package/dist/eat-prompt-builder.mjs

@@ -5612,13 +5612,13 @@
       if (
         /*resultType*/
         ctx2[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
-        ctx2[10]
+        ctx2[9]
       )
         return 0;
       if (
         /*resultType*/
         ctx2[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
-        ctx2[10]
+        ctx2[9]
       )
         return 1;
       if (
@@ -5653,58 +5653,52 @@
         if (if_block1)
           if_block1.c();
         attr(span0, "class", span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
-        (ctx[10] ? "text-white" : ""));
+        (ctx[9] ? "text-white" : ""));
         attr(span1, "class", span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
-        ctx[9] && !/*disabledClick*/
-        ctx[6] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""));
+        ctx[8] && !/*disabledClick*/
+        ctx[5] ? "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[6] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""));
+        ctx[8] && !/*disabledClick*/
+        ctx[5] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""));
         attr(
           button,
           "id",
           /*wordButtonId*/
           ctx[3]
         );
-        attr(
-          button,
-          "tabindex",
-          /*tabIndex*/
-          ctx[5]
-        );
         attr(button, "aria-label", button_aria_label_value = /*resultType*/
         (ctx[1] === ANSWER_CORRECT || /*resultType*/
         ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
-        ctx[10] ? `Student's answer: ${/*word*/
+        ctx[9] ? `Student's answer: ${/*word*/
         ctx[0]} (${/*resultType*/
         ctx[1]})` : (
           /*resultType*/
           ctx[1] === ANSWER_MISSED ? `Correct answer: ${/*word*/
           ctx[0]}` : `${/*isWordItemSelected*/
-          ctx[10] ? "Selected option" : "Option"}: ${/*word*/
+          ctx[9] ? "Selected option" : "Option"}: ${/*word*/
           ctx[0]}`
         ));
         attr(button, "class", button_class_value = "focus-ring flex items-center justify-between min-h-[54px] p-1 border border-gray-800 rounded-lg " + /*otherClass*/
         ctx[2] + " " + /*isClonedItem*/
         (ctx[4] ? "opacity-50 raw-focus-ring bg-violet-100" : "") + " " + /*considerCloneItemId*/
-        (ctx[8] === /*wordButtonId*/
+        (ctx[7] === /*wordButtonId*/
         ctx[3] ? "hidden" : "") + " " + /*isWordItemSelected*/
-        (ctx[10] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
-        ctx[9] && !/*disabledClick*/
-        ctx[6] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
+        (ctx[9] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
+        ctx[8] && !/*disabledClick*/
+        ctx[5] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
         (ctx[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
-        ctx[10] ? "border-green-800 bg-green-300" : (
+        ctx[9] ? "border-green-800 bg-green-300" : (
           /*resultType*/
           ctx[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
-          ctx[10] ? "border-red-800 bg-red-300" : (
+          ctx[9] ? "border-red-800 bg-red-300" : (
             /*resultType*/
             ctx[1] === ANSWER_MISSED ? "border-green-800" : ""
           )
         )) + " " + /*resultType*/
         ((ctx[1] === ANSWER_CORRECT || /*resultType*/
         ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
-        ctx[10] ? "td:hover:border-gray-800" : ""));
+        ctx[9] ? "td:hover:border-gray-800" : ""));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -5719,19 +5713,19 @@
         append(span2, t3);
         if (if_block1)
           if_block1.m(span2, null);
-        ctx[15](button);
+        ctx[14](button);
         current = true;
         if (!mounted) {
           dispose = [
             listen(button, "click", stop_propagation(function() {
               if (is_function(
                 /*selectItem*/
-                ctx[11](
+                ctx[10](
                   /*wordButtonId*/
                   ctx[3]
                 )
               ))
-                ctx[11](
+                ctx[10](
                   /*wordButtonId*/
                   ctx[3]
                 ).apply(this, arguments);
@@ -5739,12 +5733,12 @@
             listen(button, "touchend", stop_propagation(function() {
               if (is_function(
                 /*selectItem*/
-                ctx[11](
+                ctx[10](
                   /*wordButtonId*/
                   ctx[3]
                 )
               ))
-                ctx[11](
+                ctx[10](
                   /*wordButtonId*/
                   ctx[3]
                 ).apply(this, arguments);
@@ -5753,7 +5747,7 @@
               button,
               "keydown",
               /*removeContainerTabSelected*/
-              ctx[12]
+              ctx[11]
             )
           ];
           mounted = true;
@@ -5769,14 +5763,14 @@
             ctx[0]
           );
         if (!current || dirty & /*isWordItemSelected*/
-        1024 && span0_class_value !== (span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
-        (ctx[10] ? "text-white" : ""))) {
+        512 && span0_class_value !== (span0_class_value = "text-charcoal text-base pl-3 mr-4 " + /*isWordItemSelected*/
+        (ctx[9] ? "text-white" : ""))) {
           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*/
-        ctx[6] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""))) {
+        288 && span1_class_value !== (span1_class_value = "w-full h-full relative rounded-lg " + (!/*currentSelectedItemId*/
+        ctx[8] && !/*disabledClick*/
+        ctx[5] ? "td:group-hover:bg-black td:group-hover:opacity-5" : ""))) {
           attr(span1, "class", span1_class_value);
         }
         let previous_block_index = current_block_type_index;
@@ -5820,9 +5814,9 @@
           check_outros();
         }
         if (!current || dirty & /*currentSelectedItemId, disabledClick*/
-        576 && div_class_value !== (div_class_value = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon " + (!/*currentSelectedItemId*/
-        ctx[9] && !/*disabledClick*/
-        ctx[6] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""))) {
+        288 && 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[8] && !/*disabledClick*/
+        ctx[5] ? "td:hover:cursor-grab td:hover:text-soft-blue" : ""))) {
           attr(div, "class", div_class_value);
         }
         if (!current || dirty & /*wordButtonId*/
@@ -5834,51 +5828,42 @@
             ctx[3]
           );
         }
-        if (!current || dirty & /*tabIndex*/
-        32) {
-          attr(
-            button,
-            "tabindex",
-            /*tabIndex*/
-            ctx[5]
-          );
-        }
         if (!current || dirty & /*resultType, isWordItemSelected, word*/
-        1027 && button_aria_label_value !== (button_aria_label_value = /*resultType*/
+        515 && button_aria_label_value !== (button_aria_label_value = /*resultType*/
         (ctx[1] === ANSWER_CORRECT || /*resultType*/
         ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
-        ctx[10] ? `Student's answer: ${/*word*/
+        ctx[9] ? `Student's answer: ${/*word*/
         ctx[0]} (${/*resultType*/
         ctx[1]})` : (
           /*resultType*/
           ctx[1] === ANSWER_MISSED ? `Correct answer: ${/*word*/
           ctx[0]}` : `${/*isWordItemSelected*/
-          ctx[10] ? "Selected option" : "Option"}: ${/*word*/
+          ctx[9] ? "Selected option" : "Option"}: ${/*word*/
           ctx[0]}`
         ))) {
           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*/
+        958 && 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[7] === /*wordButtonId*/
         ctx[3] ? "hidden" : "") + " " + /*isWordItemSelected*/
-        (ctx[10] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
-        ctx[9] && !/*disabledClick*/
-        ctx[6] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
+        (ctx[9] ? "bg-blue-1000 !border-blue-1000 raw-focus-ring !cursor-pointer" : "bg-gray-100") + " " + (!/*currentSelectedItemId*/
+        ctx[8] && !/*disabledClick*/
+        ctx[5] ? "td:hover-focus-ring td:hover:bg-violet-100 !cursor-pointer" : "!cursor-default") + " " + /*resultType*/
         (ctx[1] === ANSWER_CORRECT && !/*isWordItemSelected*/
-        ctx[10] ? "border-green-800 bg-green-300" : (
+        ctx[9] ? "border-green-800 bg-green-300" : (
           /*resultType*/
           ctx[1] === ANSWER_INCORRECT && !/*isWordItemSelected*/
-          ctx[10] ? "border-red-800 bg-red-300" : (
+          ctx[9] ? "border-red-800 bg-red-300" : (
             /*resultType*/
             ctx[1] === ANSWER_MISSED ? "border-green-800" : ""
           )
         )) + " " + /*resultType*/
         ((ctx[1] === ANSWER_CORRECT || /*resultType*/
         ctx[1] === ANSWER_INCORRECT) && !/*isWordItemSelected*/
-        ctx[10] ? "td:hover:border-gray-800" : ""))) {
+        ctx[9] ? "td:hover:border-gray-800" : ""))) {
           attr(button, "class", button_class_value);
         }
       },
@@ -5901,7 +5886,7 @@
         if_blocks[current_block_type_index].d();
         if (if_block1)
           if_block1.d();
-        ctx[15](null);
+        ctx[14](null);
         mounted = false;
         run_all(dispose);
       }
@@ -5914,7 +5899,6 @@
     let { wordButtonId = "" } = $$props;
     let { isClonedItem = false } = $$props;
     let { containerId = "" } = $$props;
-    let { tabIndex = -1 } = $$props;
     let { wordFocus = false } = $$props;
     let { disabledClick = false } = $$props;
     let considerCloneItemId = "";
@@ -5924,9 +5908,9 @@
     let wordButton;
     categoriseSettings.subscribe((value) => {
       const { considerCloneItemId: storeConsiderCloneItemId, selectedItemId: storeSelectedItemId } = value;
-      $$invalidate(8, considerCloneItemId = storeConsiderCloneItemId);
-      $$invalidate(9, currentSelectedItemId = storeSelectedItemId);
-      $$invalidate(10, isWordItemSelected = currentSelectedItemId === wordButtonId);
+      $$invalidate(7, considerCloneItemId = storeConsiderCloneItemId);
+      $$invalidate(8, currentSelectedItemId = storeSelectedItemId);
+      $$invalidate(9, isWordItemSelected = currentSelectedItemId === wordButtonId);
     });
     const selectItem = (itemId) => {
       if (isSelecItemFunctionCalled || disabledClick) {
@@ -5976,7 +5960,7 @@
     function button_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         wordButton = $$value;
-        $$invalidate(7, wordButton);
+        $$invalidate(6, wordButton);
       });
     }
     $$self.$$set = ($$props2) => {
@@ -5991,17 +5975,15 @@
       if ("isClonedItem" in $$props2)
         $$invalidate(4, isClonedItem = $$props2.isClonedItem);
       if ("containerId" in $$props2)
-        $$invalidate(13, containerId = $$props2.containerId);
-      if ("tabIndex" in $$props2)
-        $$invalidate(5, tabIndex = $$props2.tabIndex);
+        $$invalidate(12, containerId = $$props2.containerId);
       if ("wordFocus" in $$props2)
-        $$invalidate(14, wordFocus = $$props2.wordFocus);
+        $$invalidate(13, wordFocus = $$props2.wordFocus);
       if ("disabledClick" in $$props2)
-        $$invalidate(6, disabledClick = $$props2.disabledClick);
+        $$invalidate(5, disabledClick = $$props2.disabledClick);
     };
     $$self.$$.update = () => {
       if ($$self.$$.dirty & /*wordFocus, wordButton*/
-      16512) {
+      8256) {
         $:
           if (wordFocus) {
             setTimeout(
@@ -6019,7 +6001,6 @@
       otherClass,
       wordButtonId,
       isClonedItem,
-      tabIndex,
       disabledClick,
       wordButton,
       considerCloneItemId,
@@ -6041,10 +6022,9 @@
         otherClass: 2,
         wordButtonId: 3,
         isClonedItem: 4,
-        containerId: 13,
-        tabIndex: 5,
-        wordFocus: 14,
-        disabledClick: 6
+        containerId: 12,
+        wordFocus: 13,
+        disabledClick: 5
       });
     }
     get word() {
@@ -6083,35 +6063,28 @@
       flush();
     }
     get containerId() {
-      return this.$$.ctx[13];
+      return this.$$.ctx[12];
     }
     set containerId(containerId) {
       this.$$set({ containerId });
       flush();
     }
-    get tabIndex() {
-      return this.$$.ctx[5];
-    }
-    set tabIndex(tabIndex) {
-      this.$$set({ tabIndex });
-      flush();
-    }
     get wordFocus() {
-      return this.$$.ctx[14];
+      return this.$$.ctx[13];
     }
     set wordFocus(wordFocus) {
       this.$$set({ wordFocus });
       flush();
     }
     get disabledClick() {
-      return this.$$.ctx[6];
+      return this.$$.ctx[5];
     }
     set disabledClick(disabledClick) {
       this.$$set({ disabledClick });
       flush();
     }
   };
-  customElements.define("prompt-categorise-word-button", create_custom_element(PromptCategoriseWordButton, { "word": {}, "resultType": {}, "otherClass": {}, "wordButtonId": {}, "isClonedItem": { "type": "Boolean" }, "containerId": {}, "tabIndex": {}, "wordFocus": { "type": "Boolean" }, "disabledClick": { "type": "Boolean" } }, [], [], true));
+  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));
   var PromptCategoriseWordButton_default = PromptCategoriseWordButton;
 
   // src/lib/stores/modal.ts
@@ -6171,7 +6144,7 @@
           ctx[6]
         );
         attr(button, "class", button_class_value = "focus-ring absolute inset-0 bg-transparent rounded-lg focus-visible:border " + /*isContainerWordBin*/
-        (ctx[17] ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"));
+        (ctx[18] ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -6180,7 +6153,7 @@
             button,
             "click",
             /*addAnswerItem*/
-            ctx[20]
+            ctx[21]
           );
           mounted = true;
         }
@@ -6225,13 +6198,13 @@
               div,
               "click",
               /*addAnswerItem*/
-              ctx[20]
+              ctx[21]
             ),
             listen(
               div,
               "keypress",
               /*addAnswerItem*/
-              ctx[20]
+              ctx[21]
             )
           ];
           mounted = true;
@@ -6291,12 +6264,12 @@
         (ctx[33].id === /*considerItemId*/
         ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
         ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
-        (ctx[15][
+        (ctx[16][
           /*currentWordBinIndex*/
-          ctx[11]
+          ctx[12]
         ]?.id !== /*item*/
         ctx[33].id && /*isContainerWordBin*/
-        ctx[17] ? "hidden md:flex" : ""),
+        ctx[18] ? "hidden md:flex" : ""),
         word: (
           /*item*/
           ctx[33].text
@@ -6313,18 +6286,12 @@
           /*containerId*/
           ctx[2]
         ),
-        tabIndex: (
-          /*currentTabContainer*/
-          ctx[13] !== /*containerId*/
-          ctx[2] || /*isModalOpen*/
-          ctx[14] ? -1 : 0
-        ),
         wordFocus: (
           /*currentTabContainer*/
-          ctx[13] === /*containerId*/
+          ctx[14] === /*containerId*/
           ctx[2] && /*item*/
           ctx[33].id === /*items*/
-          ctx[15][0].id
+          ctx[16][0].id
         ),
         disabledClick: (
           /*isFinished*/
@@ -6374,52 +6341,46 @@
         }
         const promptcategorisewordbutton_changes = {};
         if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex*/
-        35088)
+        69904)
           promptcategorisewordbutton_changes.otherClass = "mr-2 mb-2 last:mr-0 " + /*item*/
           (ctx[33].id === /*considerItemId*/
           ctx[8] ? "!bg-violet-150" : "") + "\n        " + (!/*showButton*/
           ctx[4] ? "hidden md:flex" : "") + "\n        " + /*items*/
-          (ctx[15][
+          (ctx[16][
             /*currentWordBinIndex*/
-            ctx[11]
+            ctx[12]
           ]?.id !== /*item*/
           ctx[33].id && /*isContainerWordBin*/
-          ctx[17] ? "hidden md:flex" : "");
+          ctx[18] ? "hidden md:flex" : "");
         if (dirty[0] & /*items*/
-        32768)
+        65536)
           promptcategorisewordbutton_changes.word = /*item*/
           ctx[33].text;
         if (dirty[0] & /*items*/
-        32768)
+        65536)
           promptcategorisewordbutton_changes.wordButtonId = /*item*/
           ctx[33].id;
         if (dirty[0] & /*items*/
-        32768)
+        65536)
           promptcategorisewordbutton_changes.isClonedItem = /*item*/
           ctx[33].isClonedItem;
         if (dirty[0] & /*containerId*/
         4)
           promptcategorisewordbutton_changes.containerId = /*containerId*/
           ctx[2];
-        if (dirty[0] & /*currentTabContainer, containerId, isModalOpen*/
-        24580)
-          promptcategorisewordbutton_changes.tabIndex = /*currentTabContainer*/
-          ctx[13] !== /*containerId*/
-          ctx[2] || /*isModalOpen*/
-          ctx[14] ? -1 : 0;
         if (dirty[0] & /*currentTabContainer, containerId, items*/
-        40964)
+        81924)
           promptcategorisewordbutton_changes.wordFocus = /*currentTabContainer*/
-          ctx[13] === /*containerId*/
+          ctx[14] === /*containerId*/
           ctx[2] && /*item*/
           ctx[33].id === /*items*/
-          ctx[15][0].id;
+          ctx[16][0].id;
         if (dirty[0] & /*isFinished*/
         128)
           promptcategorisewordbutton_changes.disabledClick = /*isFinished*/
           ctx[7];
         if (dirty[0] & /*items*/
-        32768)
+        65536)
           promptcategorisewordbutton_changes.resultType = /*item*/
           ctx[33].type;
         promptcategorisewordbutton.$set(promptcategorisewordbutton_changes);
@@ -6459,19 +6420,19 @@
     let dispose;
     let if_block0 = (
       /*dragDisabled*/
-      ctx[9] && /*sourceSelectedContainerId*/
-      ctx[10] !== /*containerId*/
+      ctx[10] && /*sourceSelectedContainerId*/
+      ctx[11] !== /*containerId*/
       ctx[2] && !/*isFinished*/
       ctx[7] && create_if_block_24(ctx)
     );
     let if_block1 = (
       /*totalRemainingWordBinItem*/
-      ctx[12] <= 0 && /*isContainerWordBin*/
-      ctx[17] && create_if_block_16(ctx)
+      ctx[13] <= 0 && /*isContainerWordBin*/
+      ctx[18] && create_if_block_16(ctx)
     );
     let each_value = ensure_array_like(Object.values(
       /*items*/
-      ctx[15]
+      ctx[16]
     ));
     const get_key = (ctx2) => (
       /*item*/
@@ -6505,7 +6466,7 @@
           ctx[2]
         );
         attr(section, "style", section_style_value = !/*isContainerWordBin*/
-        ctx[17] ? `padding-top: ${/*paddingTop*/
+        ctx[18] ? `padding-top: ${/*paddingTop*/
         ctx[5]}px;` : "");
       },
       m(target, anchor) {
@@ -6527,7 +6488,7 @@
             action_destroyer(dndzone_action = dndzone$2.call(null, section, {
               items: (
                 /*items*/
-                ctx[15]
+                ctx[16]
               ),
               flipDurationMs: (
                 /*flipDurationMs*/
@@ -6539,28 +6500,34 @@
               ),
               dropTargetClasses: (
                 /*dropTargetClasses*/
-                ctx[16]
+                ctx[17]
               ),
               morphDisabled: true,
               dragDisabled: (
                 /*dragDisabled*/
-                ctx[9]
+                ctx[10]
               ),
               autoAriaDisabled: true,
-              zoneItemTabIndex: -1,
+              zoneItemTabIndex: (
+                /*currentTabContainer*/
+                ctx[14] !== /*containerId*/
+                ctx[2] || /*selectedItemId*/
+                ctx[9] || /*isModalOpen*/
+                ctx[15] ? -1 : 0
+              ),
               zoneTabIndex: -1
             })),
             listen(
               section,
               "consider",
               /*handleDndConsider*/
-              ctx[18]
+              ctx[19]
             ),
             listen(
               section,
               "finalize",
               /*handleDndFinalize*/
-              ctx[19]
+              ctx[20]
             )
           ];
           mounted = true;
@@ -6569,8 +6536,8 @@
       p(ctx2, dirty) {
         if (
           /*dragDisabled*/
-          ctx2[9] && /*sourceSelectedContainerId*/
-          ctx2[10] !== /*containerId*/
+          ctx2[10] && /*sourceSelectedContainerId*/
+          ctx2[11] !== /*containerId*/
           ctx2[2] && !/*isFinished*/
           ctx2[7]
         ) {
@@ -6587,8 +6554,8 @@
         }
         if (
           /*totalRemainingWordBinItem*/
-          ctx2[12] <= 0 && /*isContainerWordBin*/
-          ctx2[17]
+          ctx2[13] <= 0 && /*isContainerWordBin*/
+          ctx2[18]
         ) {
           if (if_block1) {
             if_block1.p(ctx2, dirty);
@@ -6601,11 +6568,11 @@
           if_block1.d(1);
           if_block1 = null;
         }
-        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId, currentTabContainer, isModalOpen, isFinished*/
-        190868) {
+        if (dirty[0] & /*items, considerItemId, showButton, currentWordBinIndex, isContainerWordBin, containerId, currentTabContainer, isFinished*/
+        348564) {
           each_value = ensure_array_like(Object.values(
             /*items*/
-            ctx2[15]
+            ctx2[16]
           ));
           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);
@@ -6627,16 +6594,16 @@
         }
         if (!current || dirty[0] & /*paddingTop*/
         32 && section_style_value !== (section_style_value = !/*isContainerWordBin*/
-        ctx2[17] ? `padding-top: ${/*paddingTop*/
+        ctx2[18] ? `padding-top: ${/*paddingTop*/
         ctx2[5]}px;` : "")) {
           attr(section, "style", section_style_value);
         }
-        if (dndzone_action && is_function(dndzone_action.update) && dirty[0] & /*items, flipDurationMs, type, dragDisabled*/
-        33290)
+        if (dndzone_action && is_function(dndzone_action.update) && dirty[0] & /*items, flipDurationMs, type, dragDisabled, currentTabContainer, containerId, selectedItemId, isModalOpen*/
+        116238)
           dndzone_action.update.call(null, {
             items: (
               /*items*/
-              ctx2[15]
+              ctx2[16]
             ),
             flipDurationMs: (
               /*flipDurationMs*/
@@ -6648,15 +6615,21 @@
             ),
             dropTargetClasses: (
               /*dropTargetClasses*/
-              ctx2[16]
+              ctx2[17]
             ),
             morphDisabled: true,
             dragDisabled: (
               /*dragDisabled*/
-              ctx2[9]
+              ctx2[10]
             ),
             autoAriaDisabled: true,
-            zoneItemTabIndex: -1,
+            zoneItemTabIndex: (
+              /*currentTabContainer*/
+              ctx2[14] !== /*containerId*/
+              ctx2[2] || /*selectedItemId*/
+              ctx2[9] || /*isModalOpen*/
+              ctx2[15] ? -1 : 0
+            ),
             zoneTabIndex: -1
           });
       },
@@ -6720,23 +6693,23 @@
     const { rawCategoryItems } = get_store_value(categoriseSettings);
     modalSettings.subscribe((value) => {
       const { isModalOpen: storeIsModalOpen } = value;
-      $$invalidate(14, isModalOpen = storeIsModalOpen);
+      $$invalidate(15, isModalOpen = storeIsModalOpen);
     });
     categoriseSettings.subscribe((value) => {
       const { considerItemId: storeconsiderItemId, selectedItemId: storeSelectedItemId, currentAnswer: storeCurrentAnswer, sourceSelectedContainerId: storeSourceSelectedContainerId, currentWordBinIndex: storeCurrentWordBinIndex, currentTabContainer: storeCurrentTabContainer } = value;
       $$invalidate(8, considerItemId = storeconsiderItemId);
-      $$invalidate(9, dragDisabled = isFinished || !!storeSelectedItemId);
+      $$invalidate(10, dragDisabled = isFinished || !!storeSelectedItemId);
       currentAnswer = storeCurrentAnswer;
-      selectedItemId = storeSelectedItemId;
-      $$invalidate(10, sourceSelectedContainerId = storeSourceSelectedContainerId);
-      $$invalidate(11, currentWordBinIndex = storeCurrentWordBinIndex);
-      $$invalidate(13, currentTabContainer = storeCurrentTabContainer);
+      $$invalidate(9, selectedItemId = storeSelectedItemId);
+      $$invalidate(11, sourceSelectedContainerId = storeSourceSelectedContainerId);
+      $$invalidate(12, currentWordBinIndex = storeCurrentWordBinIndex);
+      $$invalidate(14, currentTabContainer = storeCurrentTabContainer);
       const storeWordBinItem = currentAnswer.filter((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
-      $$invalidate(12, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
+      $$invalidate(13, totalRemainingWordBinItem = storeWordBinItem[0].itemId.length);
       if (storeCurrentAnswer) {
         const currentAnswerList = currentAnswer.filter((answer) => answer.categoryId === containerId);
         if (currentAnswerList.length) {
-          $$invalidate(15, items = currentAnswerList[0].itemId.map((rawAnswerId) => {
+          $$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);
@@ -6770,7 +6743,7 @@
       const { sourceContainerId, sourceCloneContainerId } = get_store_value(categoriseSettings);
       if (trigger === TRIGGERS.DRAG_STARTED) {
         const { items: cateoryItems } = detail;
-        $$invalidate(15, items = cateoryItems);
+        $$invalidate(16, 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, {
@@ -6803,7 +6776,7 @@
     const handleDndFinalize = (e2) => {
       const { items: categoryItems, info } = e2.detail;
       const { trigger, id } = info;
-      $$invalidate(15, items = categoryItems.filter((item) => !item.isClonedItem));
+      $$invalidate(16, items = categoryItems.filter((item) => !item.isClonedItem));
       if (trigger === TRIGGERS.DROPPED_INTO_ZONE) {
         const { currentTarget } = e2;
         addAnswerItemStore(id, currentTarget.id);
@@ -6984,9 +6957,9 @@
       if ("isFinished" in $$props2)
         $$invalidate(7, isFinished = $$props2.isFinished);
       if ("correctAnswerList" in $$props2)
-        $$invalidate(21, correctAnswerList = $$props2.correctAnswerList);
+        $$invalidate(22, correctAnswerList = $$props2.correctAnswerList);
       if ("isPreviewModeInteractive" in $$props2)
-        $$invalidate(22, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
+        $$invalidate(23, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
     };
     return [
       containerClass,
@@ -6998,6 +6971,7 @@
       ariaLabel,
       isFinished,
       considerItemId,
+      selectedItemId,
       dragDisabled,
       sourceSelectedContainerId,
       currentWordBinIndex,
@@ -7032,8 +7006,8 @@
           paddingTop: 5,
           ariaLabel: 6,
           isFinished: 7,
-          correctAnswerList: 21,
-          isPreviewModeInteractive: 22
+          correctAnswerList: 22,
+          isPreviewModeInteractive: 23
         },
         null,
         [-1, -1]
@@ -7096,14 +7070,14 @@
       flush();
     }
     get correctAnswerList() {
-      return this.$$.ctx[21];
+      return this.$$.ctx[22];
     }
     set correctAnswerList(correctAnswerList) {
       this.$$set({ correctAnswerList });
       flush();
     }
     get isPreviewModeInteractive() {
-      return this.$$.ctx[22];
+      return this.$$.ctx[23];
     }
     set isPreviewModeInteractive(isPreviewModeInteractive) {
       this.$$set({ isPreviewModeInteractive });
@@ -8026,9 +8000,9 @@
   // src/lib/components/prompt/categorise/PromptCategorise.svelte
   function get_each_context3(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[53] = list[i];
-    child_ctx[54] = list;
-    child_ctx[55] = i;
+    child_ctx[55] = list[i];
+    child_ctx[56] = list;
+    child_ctx[57] = i;
     return child_ctx;
   }
   function create_if_block_5(ctx) {
@@ -8038,7 +8012,7 @@
     promptcategorisemodal.$on(
       "resetCategory",
       /*saveCategory*/
-      ctx[33]
+      ctx[35]
     );
     return {
       c() {
@@ -8105,7 +8079,7 @@
             button,
             "click",
             /*openResetModal*/
-            ctx[28]
+            ctx[30]
           );
           mounted = true;
         }
@@ -8292,32 +8266,32 @@
     let div0;
     let show_if_1 = (
       /*checkContainerDroppedItem*/
-      ctx[26](
+      ctx[28](
         /*category*/
-        ctx[53].id,
+        ctx[55].id,
         /*dropContainerId*/
         ctx[6]
       )
     );
     let t0;
     let span0;
-    let t4;
-    let span1;
     let t6;
-    let t7;
+    let span1;
+    let t8;
+    let t9;
     let button;
     let span2;
-    let t8_value = (
+    let t10_value = (
       /*getTotalWords*/
-      ctx[29](
+      ctx[31](
         /*category*/
-        ctx[53].id,
+        ctx[55].id,
         /*currentAnswer*/
         ctx[9]
       ) + ""
     );
-    let t8;
-    let t9;
+    let t10;
+    let t11;
     let span3;
     let show_if;
     let current_block_type_index;
@@ -8327,13 +8301,13 @@
     let div0_aria_live_value;
     let div0_class_value;
     let div0_resize_listener;
-    let t10;
+    let t12;
     let promptcategorisedndcontainer;
-    let t11;
+    let t13;
     let div1_class_value;
     let category = (
       /*category*/
-      ctx[53]
+      ctx[55]
     );
     let current;
     let mounted;
@@ -8351,9 +8325,9 @@
         show_if = null;
       if (show_if == null)
         show_if = !!/*checkifCategoryContainerOpen*/
-        ctx2[30](
+        ctx2[32](
           /*category*/
-          ctx2[53].id,
+          ctx2[55].id,
           /*openCategoryContainer*/
           ctx2[13]
         );
@@ -8364,73 +8338,74 @@
     current_block_type_index = select_block_type(ctx, [-1, -1]);
     if_block2 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     function div0_elementresize_handler() {
-      ctx[39].call(
+      ctx[41].call(
         div0,
         /*category*/
-        ctx[53]
+        ctx[55]
       );
     }
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-        (ctx[25](
+        (ctx[27](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*considerContainerId*/
           ctx[4],
           /*isDraggingOver*/
           ctx[5]
         ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-        (ctx[30](
+        (ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) ? "h-full p-3 min-h-[86px] md:min-h-0" : ""),
         paddingTop: (
           /*checkifCategoryContainerOpen*/
-          ctx[30](
+          ctx[32](
             /*category*/
-            ctx[53].id,
+            ctx[55].id,
             /*openCategoryContainer*/
             ctx[13]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[19][
+            ctx[20][
               /*category*/
-              ctx[53].id
+              ctx[55].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[19][
+            ctx[20][
               /*category*/
-              ctx[53].id
+              ctx[55].id
             ]
           )
         ),
         containerId: (
           /*category*/
-          ctx[53].id
+          ctx[55].id
         ),
         showButton: (
           /*checkifCategoryContainerOpen*/
-          ctx[30](
+          ctx[32](
             /*category*/
-            ctx[53].id,
+            ctx[55].id,
             /*openCategoryContainer*/
             ctx[13]
           )
         ),
         ariaLabel: `Category ${/*index*/
-        ctx[55] + 1}: ${/*category*/
-        ctx[53].name}`,
+        ctx[57] + 1} of ${/*totalCagories*/
+        ctx[26]}: ${/*category*/
+        ctx[55].name}`,
         isFinished: (
           /*isFinished*/
           ctx[0]
         ),
         correctAnswerList: (
           /*scoringMetadata*/
-          ctx[21]
+          ctx[22]
         ),
         isPreviewModeInteractive: (
           /*isPreviewModeInteractive*/
@@ -8441,25 +8416,25 @@
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[33]
+      ctx[35]
     );
     function keydown_handler(...args) {
       return (
         /*keydown_handler*/
-        ctx[40](
+        ctx[42](
           /*category*/
-          ctx[53],
+          ctx[55],
           ...args
         )
       );
     }
     const assign_div1 = () => (
       /*div1_binding*/
-      ctx[41](div1, category)
+      ctx[43](div1, category)
     );
     const unassign_div1 = () => (
       /*div1_binding*/
-      ctx[41](null, category)
+      ctx[43](null, category)
     );
     return {
       c() {
@@ -8470,81 +8445,83 @@
         t0 = space();
         span0 = element("span");
         span0.textContent = `Category ${/*index*/
-        ctx[55] + 1}:\xA0`;
-        t4 = space();
+        ctx[57] + 1} of ${/*totalCagories*/
+        ctx[26]}:\xA0`;
+        t6 = space();
         span1 = element("span");
         span1.textContent = `${/*category*/
-        ctx[53].name}`;
-        t6 = space();
+        ctx[55].name}`;
+        t8 = space();
         if (if_block1)
           if_block1.c();
-        t7 = space();
+        t9 = space();
         button = element("button");
         span2 = element("span");
-        t8 = text(t8_value);
-        t9 = space();
+        t10 = text(t10_value);
+        t11 = space();
         span3 = element("span");
         if_block2.c();
-        t10 = space();
+        t12 = space();
         create_component(promptcategorisedndcontainer.$$.fragment);
-        t11 = space();
+        t13 = space();
         attr(span0, "class", "sr-only");
         attr(span1, "class", "text-base leading-5 !text-gray-900 md:item-heading");
         attr(span2, "class", "mx-0.5");
         attr(span3, "class", "w-4 h-4 text-inherit flex items-center justify-center");
         attr(button, "aria-label", button_aria_label_value = /*getTotalWords*/
-        ctx[29](
+        ctx[31](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*currentAnswer*/
           ctx[9]
         ));
         attr(button, "class", "focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55 md:hidden");
         attr(div0, "id", div0_id_value = `category-title${/*index*/
-        ctx[55]}`);
+        ctx[57]}`);
         attr(div0, "aria-live", div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[26](
+        ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
-        ) ? "polite" : "off");
+        ) && /*enableAriaLive*/
+        ctx[18] ? "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[26](
+        (ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[30](
+        ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) && /*checkContainerDragOver*/
-        ctx[25](
+        ctx[27](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*considerContainerId*/
           ctx[4],
           /*isDraggingOver*/
           ctx[5]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[30](
+        (ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[30](
+        ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) && /*checkSelectedSourceContainer*/
-        ctx[27](
+        ctx[29](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*sourceSelectedContainerId*/
           ctx[8],
           /*currentSelectedItemId*/
@@ -8565,38 +8542,38 @@
         );
         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[25](
+        (ctx[27](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*considerContainerId*/
           ctx[4],
           /*isDraggingOver*/
           ctx[5]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
         ) && /*hasAddItemAnimation*/
         ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[27](
+        (ctx[29](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*sourceSelectedContainerId*/
           ctx[8],
           /*currentSelectedItemId*/
           ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[30](
+        (ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) ? "min-h-[140px]" : ""));
@@ -8608,22 +8585,22 @@
           if_block0.m(div0, null);
         append(div0, t0);
         append(div0, span0);
-        append(div0, t4);
-        append(div0, span1);
         append(div0, t6);
+        append(div0, span1);
+        append(div0, t8);
         if (if_block1)
           if_block1.m(div0, null);
-        append(div0, t7);
+        append(div0, t9);
         append(div0, button);
         append(button, span2);
-        append(span2, t8);
-        append(button, t9);
+        append(span2, t10);
+        append(button, t11);
         append(button, span3);
         if_blocks[current_block_type_index].m(span3, null);
         div0_resize_listener = add_iframe_resize_listener(div0, div0_elementresize_handler.bind(div0));
-        append(div1, t10);
+        append(div1, t12);
         mount_component(promptcategorisedndcontainer, div1, null);
-        append(div1, t11);
+        append(div1, t13);
         assign_div1();
         current = true;
         if (!mounted) {
@@ -8631,16 +8608,16 @@
             listen(button, "click", function() {
               if (is_function(
                 /*addCategoryContainer*/
-                ctx[31](
+                ctx[33](
                   /*category*/
-                  ctx[53].id,
+                  ctx[55].id,
                   /*openCategoryContainer*/
                   ctx[13]
                 )
               ))
-                ctx[31](
+                ctx[33](
                   /*category*/
-                  ctx[53].id,
+                  ctx[55].id,
                   /*openCategoryContainer*/
                   ctx[13]
                 ).apply(this, arguments);
@@ -8650,7 +8627,7 @@
               div1,
               "focus",
               /*resetTabCategory*/
-              ctx[35]
+              ctx[37]
             )
           ];
           mounted = true;
@@ -8661,9 +8638,9 @@
         if (dirty[0] & /*dropContainerId*/
         64)
           show_if_1 = /*checkContainerDroppedItem*/
-          ctx[26](
+          ctx[28](
             /*category*/
-            ctx[53].id,
+            ctx[55].id,
             /*dropContainerId*/
             ctx[6]
           );
@@ -8688,21 +8665,21 @@
           } else {
             if_block1 = create_if_block_25(ctx);
             if_block1.c();
-            if_block1.m(div0, t7);
+            if_block1.m(div0, t9);
           }
         } else if (if_block1) {
           if_block1.d(1);
           if_block1 = null;
         }
         if ((!current || dirty[0] & /*currentAnswer*/
-        512) && t8_value !== (t8_value = /*getTotalWords*/
-        ctx[29](
+        512) && t10_value !== (t10_value = /*getTotalWords*/
+        ctx[31](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*currentAnswer*/
           ctx[9]
         ) + ""))
-          set_data(t8, t8_value);
+          set_data(t10, t10_value);
         let previous_block_index = current_block_type_index;
         current_block_type_index = select_block_type(ctx, dirty);
         if (current_block_type_index !== previous_block_index) {
@@ -8722,61 +8699,62 @@
         }
         if (!current || dirty[0] & /*currentAnswer*/
         512 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
-        ctx[29](
+        ctx[31](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*currentAnswer*/
           ctx[9]
         ))) {
           attr(button, "aria-label", button_aria_label_value);
         }
-        if (!current || dirty[0] & /*dropContainerId*/
-        64 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[26](
+        if (!current || dirty[0] & /*dropContainerId, enableAriaLive*/
+        262208 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
-        ) ? "polite" : "off")) {
+        ) && /*enableAriaLive*/
+        ctx[18] ? "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[26](
+        (ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[30](
+        ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) && /*checkContainerDragOver*/
-        ctx[25](
+        ctx[27](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*considerContainerId*/
           ctx[4],
           /*isDraggingOver*/
           ctx[5]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[30](
+        (ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[30](
+        ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) && /*checkSelectedSourceContainer*/
-        ctx[27](
+        ctx[29](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*sourceSelectedContainerId*/
           ctx[8],
           /*currentSelectedItemId*/
@@ -8788,47 +8766,47 @@
         if (dirty[0] & /*considerContainerId, isDraggingOver, openCategoryContainer*/
         8240)
           promptcategorisedndcontainer_changes.containerClass = "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-          (ctx[25](
+          (ctx[27](
             /*category*/
-            ctx[53].id,
+            ctx[55].id,
             /*considerContainerId*/
             ctx[4],
             /*isDraggingOver*/
             ctx[5]
           ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-          (ctx[30](
+          (ctx[32](
             /*category*/
-            ctx[53].id,
+            ctx[55].id,
             /*openCategoryContainer*/
             ctx[13]
           ) ? "h-full p-3 min-h-[86px] md:min-h-0" : "");
         if (dirty[0] & /*openCategoryContainer, categoryTitleHeight*/
-        532480)
+        1056768)
           promptcategorisedndcontainer_changes.paddingTop = /*checkifCategoryContainerOpen*/
-          ctx[30](
+          ctx[32](
             /*category*/
-            ctx[53].id,
+            ctx[55].id,
             /*openCategoryContainer*/
             ctx[13]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
-            ctx[19][
+            ctx[20][
               /*category*/
-              ctx[53].id
+              ctx[55].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
-            ctx[19][
+            ctx[20][
               /*category*/
-              ctx[53].id
+              ctx[55].id
             ]
           );
         if (dirty[0] & /*openCategoryContainer*/
         8192)
           promptcategorisedndcontainer_changes.showButton = /*checkifCategoryContainerOpen*/
-          ctx[30](
+          ctx[32](
             /*category*/
-            ctx[53].id,
+            ctx[55].id,
             /*openCategoryContainer*/
             ctx[13]
           );
@@ -8861,48 +8839,48 @@
         }
         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[25](
+        (ctx[27](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*considerContainerId*/
           ctx[4],
           /*isDraggingOver*/
           ctx[5]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*dropContainerId*/
           ctx[6]
         ) && /*hasAddItemAnimation*/
         ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[27](
+        (ctx[29](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*sourceSelectedContainerId*/
           ctx[8],
           /*currentSelectedItemId*/
           ctx[7]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[30](
+        (ctx[32](
           /*category*/
-          ctx[53].id,
+          ctx[55].id,
           /*openCategoryContainer*/
           ctx[13]
         ) ? "min-h-[140px]" : ""))) {
           attr(div1, "class", div1_class_value);
         }
         if (category !== /*category*/
-        ctx[53]) {
+        ctx[55]) {
           unassign_div1();
           category = /*category*/
-          ctx[53];
+          ctx[55];
           assign_div1();
         }
       },
@@ -8991,7 +8969,7 @@
     let div2;
     let show_if = (
       /*checkContainerDroppedItem*/
-      ctx[26](
+      ctx[28](
         CONTAINER_WORD_BIN_ID,
         /*dropContainerId*/
         ctx[6]
@@ -9038,7 +9016,7 @@
     );
     let each_value = ensure_array_like(Object.values(
       /*categoryGroups*/
-      ctx[24]
+      ctx[25]
     ));
     let each_blocks = [];
     for (let i = 0; i < each_value.length; i += 1) {
@@ -9052,14 +9030,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[32](
+        (ctx[34](
           /*totalRemainingWordBinItem*/
           ctx[10]
         ) && !/*currentSelectedItemId*/
         ctx[7] ? "absolute inset-0" : ""),
         items: (
           /*categoryItems*/
-          ctx[23]
+          ctx[24]
         ),
         containerId: CONTAINER_WORD_BIN_ID,
         ariaLabel: "Word bin",
@@ -9069,7 +9047,7 @@
         ),
         correctAnswerList: (
           /*scoringMetadata*/
-          ctx[21]
+          ctx[22]
         ),
         isPreviewModeInteractive: (
           /*isPreviewModeInteractive*/
@@ -9080,7 +9058,7 @@
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[33]
+      ctx[35]
     );
     smallchevronright = new SmallChevronRight_default({});
     return {
@@ -9162,7 +9140,7 @@
         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[32](
+        (ctx[34](
           /*totalRemainingWordBinItem*/
           ctx[10]
         ) ? "hidden" : ""));
@@ -9171,7 +9149,7 @@
         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[32](
+        (ctx[34](
           /*totalRemainingWordBinItem*/
           ctx[10]
         ) ? "hidden" : ""));
@@ -9192,32 +9170,32 @@
           ctx[15]
         );
         attr(div4, "aria-live", div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[26](
+        ctx[28](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[6]
         ) ? "polite" : "off");
         attr(div4, "role", "group");
         attr(div4, "class", div4_class_value = "focus-ring shadow-[0_-12px_14px_-16px_#00000033] rounded-lg relative min-h-[133px] md:min-h-[164px] md:border md:shadow-[0_0_#0000] md:border-gray-400 " + /*checkContainerDragOver*/
-        (ctx[25](
+        (ctx[27](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
           ctx[4],
           /*isDraggingOver*/
           ctx[5]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[6]
         ) && /*hasAddItemAnimation*/
         ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[27](
+        (ctx[29](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
           ctx[8],
@@ -9271,7 +9249,7 @@
         append(div3, button2);
         append(button2, span5);
         mount_component(smallchevronright, span5, null);
-        ctx[43](div4);
+        ctx[45](div4);
         current = true;
         if (!mounted) {
           dispose = [
@@ -9279,7 +9257,7 @@
               button0,
               "keypress",
               /*goToWordBin*/
-              ctx[36]
+              ctx[38]
             ),
             listen(button1, "click", function() {
               if (is_function(useNavigateItem(
@@ -9317,13 +9295,13 @@
               div4,
               "keydown",
               /*keydown_handler_1*/
-              ctx[42]
+              ctx[44]
             ),
             listen(
               div4,
               "focus",
               /*resetTabCategory*/
-              ctx[35]
+              ctx[37]
             )
           ];
           mounted = true;
@@ -9397,12 +9375,12 @@
             ctx[12]
           );
         }
-        if (dirty[0] & /*isModalOpen, categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, checkifCategoryContainerOpen, openCategoryContainer, tabCategory, categoryTitleHeight, isFinished, scoringMetadata, isPreviewModeInteractive, getTotalWords, currentAnswer, previewResultSr, selectedItemName*/
-        1865399283 | dirty[1] & /*getContainerTabSelected, resetTabCategory, saveCategory, addCategoryContainer*/
-        29) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, checkContainerDragOver, categoryGroups, considerContainerId, isDraggingOver, checkContainerDroppedItem, dropContainerId, hasAddItemAnimation, checkSelectedSourceContainer, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer, tabCategory, categoryTitleHeight, totalCagories, isFinished, scoringMetadata, isPreviewModeInteractive, enableAriaLive, currentAnswer, previewResultSr, selectedItemName*/
+        1046461427 | dirty[1] & /*checkifCategoryContainerOpen, getContainerTabSelected, resetTabCategory, saveCategory, getTotalWords, addCategoryContainer*/
+        119) {
           each_value = ensure_array_like(Object.values(
             /*categoryGroups*/
-            ctx[24]
+            ctx[25]
           ));
           let i;
           for (i = 0; i < each_value.length; i += 1) {
@@ -9426,7 +9404,7 @@
         if (dirty[0] & /*dropContainerId*/
         64)
           show_if = /*checkContainerDroppedItem*/
-          ctx[26](
+          ctx[28](
             CONTAINER_WORD_BIN_ID,
             /*dropContainerId*/
             ctx[6]
@@ -9459,7 +9437,7 @@
           );
         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[32](
+        (ctx[34](
           /*totalRemainingWordBinItem*/
           ctx[10]
         ) ? "hidden" : ""))) {
@@ -9474,7 +9452,7 @@
         if (dirty[0] & /*totalRemainingWordBinItem, currentSelectedItemId*/
         1152)
           promptcategorisedndcontainer_changes.containerClass = "bg-transparent p-4 pt-[55px] grow md:grow-0 md:pt-20.5 justify-center md:justify-normal\n        " + /*isWordBInTotalZero*/
-          (ctx[32](
+          (ctx[34](
             /*totalRemainingWordBinItem*/
             ctx[10]
           ) && !/*currentSelectedItemId*/
@@ -9490,7 +9468,7 @@
         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[32](
+        (ctx[34](
           /*totalRemainingWordBinItem*/
           ctx[10]
         ) ? "hidden" : ""))) {
@@ -9522,7 +9500,7 @@
         }
         if (!current || dirty[0] & /*dropContainerId*/
         64 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[26](
+        ctx[28](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[6]
@@ -9531,25 +9509,25 @@
         }
         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[25](
+        (ctx[27](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
           ctx[4],
           /*isDraggingOver*/
           ctx[5]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[6]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[26](
+        (ctx[28](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[6]
         ) && /*hasAddItemAnimation*/
         ctx[11] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[27](
+        (ctx[29](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
           ctx[8],
@@ -9608,7 +9586,7 @@
         destroy_component(smallchevronleft);
         destroy_component(promptcategorisedndcontainer);
         destroy_component(smallchevronright);
-        ctx[43](null);
+        ctx[45](null);
         mounted = false;
         run_all(dispose);
       }
@@ -9622,11 +9600,11 @@
       props: {
         rubric: (
           /*rubric*/
-          ctx[20].text
+          ctx[21].text
         ),
         prompt: (
           /*prompt*/
-          ctx[22]
+          ctx[23]
         ),
         $$slots: { default: [create_default_slot4] },
         $$scope: { ctx }
@@ -9641,14 +9619,14 @@
       m(target, anchor) {
         insert(target, div, anchor);
         mount_component(promptbody, div, null);
-        ctx[44](div);
+        ctx[46](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, previewResultSr*/
-        1048571 | dirty[1] & /*$$scope*/
-        33554432) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, dropContainerId, considerContainerId, isDraggingOver, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, tabCategory, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, isFinished, isPreviewModeInteractive, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight, enableAriaLive, previewResultSr*/
+        2097147 | dirty[1] & /*$$scope*/
+        134217728) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -9668,7 +9646,7 @@
           detach(div);
         }
         destroy_component(promptbody);
-        ctx[44](null);
+        ctx[46](null);
       }
     };
   }
@@ -9695,12 +9673,14 @@
     let categoryTabIndex = 0;
     let selectedItemName = "";
     let previewResultSr = "";
+    let enableAriaLive = true;
     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(18, tabCategory[group.id] = false, tabCategory));
+    categoryGroups.map((group) => $$invalidate(19, tabCategory[group.id] = false, tabCategory));
+    const totalCagories = categoryGroups.length;
     totalCategoryItems = totalRemainingWordBinItem = Object.keys(categoryItems).length;
     let wordBinItems = categoryItems.map((item) => item.id);
     let initialCategoryAnswer = [
@@ -9711,7 +9691,7 @@
     ];
     let categoryTitleHeight = [];
     categoryGroups.map((category) => {
-      $$invalidate(19, categoryTitleHeight[category.id] = "", categoryTitleHeight);
+      $$invalidate(20, categoryTitleHeight[category.id] = "", categoryTitleHeight);
     });
     if (metadata) {
       const { events } = metadata.interactions;
@@ -9816,6 +9796,29 @@
           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;
@@ -9897,20 +9900,20 @@
     };
     function div0_elementresize_handler(category) {
       categoryTitleHeight[category.id] = this.clientHeight;
-      $$invalidate(19, categoryTitleHeight);
+      $$invalidate(20, categoryTitleHeight);
     }
     const keydown_handler = (category, { key }) => getContainerTabSelected(key, category.id);
     function div1_binding($$value, category) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         tabCategory[category.id] = $$value;
-        $$invalidate(18, tabCategory);
+        $$invalidate(19, tabCategory);
       });
     }
     const keydown_handler_1 = ({ key }) => getContainerTabSelected(key, CONTAINER_WORD_BIN_ID);
     function div4_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         tabCategory[CONTAINER_WORD_BIN_ID] = $$value;
-        $$invalidate(18, tabCategory);
+        $$invalidate(19, tabCategory);
       });
     }
     function div_binding($$value) {
@@ -9921,11 +9924,11 @@
     }
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(37, sessionData = $$props2.sessionData);
+        $$invalidate(39, sessionData = $$props2.sessionData);
       if ("isFinished" in $$props2)
         $$invalidate(0, isFinished = $$props2.isFinished);
       if ("isPreviewMode" in $$props2)
-        $$invalidate(38, isPreviewMode = $$props2.isPreviewMode);
+        $$invalidate(40, isPreviewMode = $$props2.isPreviewMode);
       if ("isPreviewModeInteractive" in $$props2)
         $$invalidate(1, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
     };
@@ -9948,6 +9951,7 @@
       categoryTabIndex,
       selectedItemName,
       previewResultSr,
+      enableAriaLive,
       tabCategory,
       categoryTitleHeight,
       rubric,
@@ -9955,6 +9959,7 @@
       prompt,
       categoryItems,
       categoryGroups,
+      totalCagories,
       checkContainerDragOver,
       checkContainerDroppedItem,
       checkSelectedSourceContainer,
@@ -9987,9 +9992,9 @@
         create_fragment21,
         safe_not_equal,
         {
-          sessionData: 37,
+          sessionData: 39,
           isFinished: 0,
-          isPreviewMode: 38,
+          isPreviewMode: 40,
           isPreviewModeInteractive: 1
         },
         null,
@@ -9997,7 +10002,7 @@
       );
     }
     get sessionData() {
-      return this.$$.ctx[37];
+      return this.$$.ctx[39];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -10011,7 +10016,7 @@
       flush();
     }
     get isPreviewMode() {
-      return this.$$.ctx[38];
+      return this.$$.ctx[40];
     }
     set isPreviewMode(isPreviewMode) {
       this.$$set({ isPreviewMode });