eat-js-sdk 1.0.31 → 1.0.32

package/dist/eat-prompt-builder.mjs

@@ -11346,7 +11346,7 @@
         create_component(crossicon.$$.fragment);
         t5 = space();
         p = element("p");
-        p.textContent = "Are you sure you want to reset your answers for this question? This cannot be undone.";
+        p.textContent = "Are you sure you want to reset your answers for this question? This\n            cannot be undone.";
         t7 = space();
         div2 = element("div");
         button1 = element("button");
@@ -11564,6 +11564,7 @@
         hasAddItemAnimation: false
       });
       dispatch("updateCategorySettings", categoryData);
+      dispatch("resetFeedback");
       dispatch("resetCategory", { answer_list: [] });
       closeResetModal();
     };
@@ -12132,11 +12133,78 @@
   // src/lib/components/prompt/categorise/PromptCategorise.svelte
   function get_each_context4(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[68] = list[i];
-    child_ctx[69] = list;
-    child_ctx[70] = i;
+    child_ctx[76] = list[i];
+    child_ctx[77] = list;
+    child_ctx[78] = i;
     return child_ctx;
   }
+  function create_if_block_84(ctx) {
+    let promptresult;
+    let current;
+    promptresult = new PromptResultFeedbackAlert_default({
+      props: {
+        hasIcon: true,
+        isFeedbackAlert: (
+          /*isPreviewModeInteractive*/
+          ctx[1] ? false : true
+        ),
+        isResultCorrect: (
+          /*allAnswersCorrect*/
+          ctx[26]
+        ),
+        isSkipped: (
+          /*isItemSkipped*/
+          ctx[27]
+        ),
+        resultFeedback: (
+          /*resultFeedback*/
+          ctx[28]
+        )
+      }
+    });
+    return {
+      c() {
+        create_component(promptresult.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(promptresult, target, anchor);
+        current = true;
+      },
+      p(ctx2, dirty) {
+        const promptresult_changes = {};
+        if (dirty[0] & /*isPreviewModeInteractive*/
+        2)
+          promptresult_changes.isFeedbackAlert = /*isPreviewModeInteractive*/
+          ctx2[1] ? false : true;
+        if (dirty[0] & /*allAnswersCorrect*/
+        67108864)
+          promptresult_changes.isResultCorrect = /*allAnswersCorrect*/
+          ctx2[26];
+        if (dirty[0] & /*isItemSkipped*/
+        134217728)
+          promptresult_changes.isSkipped = /*isItemSkipped*/
+          ctx2[27];
+        if (dirty[0] & /*resultFeedback*/
+        268435456)
+          promptresult_changes.resultFeedback = /*resultFeedback*/
+          ctx2[28];
+        promptresult.$set(promptresult_changes);
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(promptresult.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(promptresult.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(promptresult, detaching);
+      }
+    };
+  }
   function create_if_block_74(ctx) {
     let promptcategorisemodal;
     let current;
@@ -12155,17 +12223,22 @@
     promptcategorisemodal.$on(
       "updateCategorySettings",
       /*updateCategory*/
-      ctx[41]
+      ctx[46]
     );
     promptcategorisemodal.$on(
       "updateModalSettings",
       /*updateModal*/
-      ctx[47]
+      ctx[52]
     );
     promptcategorisemodal.$on(
       "resetCategory",
       /*saveCategory*/
-      ctx[40]
+      ctx[45]
+    );
+    promptcategorisemodal.$on(
+      "resetFeedback",
+      /*resetFeedbackStatus*/
+      ctx[35]
     );
     return {
       c() {
@@ -12243,7 +12316,7 @@
             button,
             "click",
             /*openResetModal*/
-            ctx[34]
+            ctx[39]
           );
           mounted = true;
         }
@@ -12324,7 +12397,7 @@
         span = element("span");
         span.textContent = `${useRemoveRichTextHtmlTags(
           /*category*/
-          ctx[68].name
+          ctx[76].name
         )}`;
         attr(span, "class", "sr-only");
       },
@@ -12344,11 +12417,11 @@
     let t0;
     let t1_value = (
       /*getTotalWordsLabel*/
-      ctx[36](
+      ctx[41](
         /*totalCategoryWords*/
         ctx[6][
           /*category*/
-          ctx[68].id
+          ctx[76].id
         ]
       ) + ""
     );
@@ -12371,11 +12444,11 @@
       p(ctx2, dirty) {
         if (dirty[0] & /*totalCategoryWords*/
         64 && t1_value !== (t1_value = /*getTotalWordsLabel*/
-        ctx2[36](
+        ctx2[41](
           /*totalCategoryWords*/
           ctx2[6][
             /*category*/
-            ctx2[68].id
+            ctx2[76].id
           ]
         ) + ""))
           set_data(t1, t1_value);
@@ -12500,9 +12573,9 @@
     let div0;
     let show_if_2 = (
       /*checkContainerDroppedItem*/
-      ctx[32](
+      ctx[37](
         /*category*/
-        ctx[68].id,
+        ctx[76].id,
         /*dropContainerId*/
         ctx[13]
       )
@@ -12514,9 +12587,9 @@
     let t5;
     let show_if_1 = (
       /*checkContainerDroppedItem*/
-      ctx[32](
+      ctx[37](
         /*category*/
-        ctx[68].id,
+        ctx[76].id,
         /*dropContainerId*/
         ctx[13]
       ) && /*enableAriaLive*/
@@ -12529,9 +12602,9 @@
     let span1;
     let t9_value = (
       /*getTotalWords*/
-      ctx[35](
+      ctx[40](
         /*category*/
-        ctx[68].id,
+        ctx[76].id,
         /*currentAnswer*/
         ctx[4]
       ) + ""
@@ -12553,7 +12626,7 @@
     let div1_class_value;
     let category = (
       /*category*/
-      ctx[68]
+      ctx[76]
     );
     let current;
     let mounted;
@@ -12563,9 +12636,9 @@
       props: {
         ariaHidden: (
           /*checkContainerDroppedItem*/
-          ctx[32](
+          ctx[37](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*dropContainerId*/
             ctx[13]
           ) && /*enableAriaLive*/
@@ -12573,7 +12646,7 @@
         ),
         htmlString: (
           /*category*/
-          ctx[68].name
+          ctx[76].name
         ),
         otherClass: "text-base leading-5 !text-gray-900 md:item-heading"
       }
@@ -12593,9 +12666,9 @@
         show_if = null;
       if (show_if == null)
         show_if = !!/*checkifCategoryContainerOpen*/
-        ctx2[37](
+        ctx2[42](
           /*category*/
-          ctx2[68].id,
+          ctx2[76].id,
           /*openCategoryContainer*/
           ctx2[19]
         );
@@ -12606,73 +12679,73 @@
     current_block_type_index = select_block_type(ctx, [-1, -1, -1]);
     if_block4 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     function div0_elementresize_handler() {
-      ctx[50].call(
+      ctx[55].call(
         div0,
         /*category*/
-        ctx[68]
+        ctx[76]
       );
     }
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-        (ctx[31](
+        (ctx[36](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*considerContainerId*/
           ctx[11],
           /*isDraggingOver*/
           ctx[12]
         ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-        (ctx[37](
+        (ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) ? "h-full p-3 min-h-[86px] md:min-h-0" : ""),
         paddingTop: (
           /*checkifCategoryContainerOpen*/
-          ctx[37](
+          ctx[42](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*openCategoryContainer*/
             ctx[19]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
             ctx[24][
               /*category*/
-              ctx[68].id
+              ctx[76].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
             ctx[24][
               /*category*/
-              ctx[68].id
+              ctx[76].id
             ]
           )
         ),
         containerId: (
           /*category*/
-          ctx[68].id
+          ctx[76].id
         ),
         showButton: (
           /*checkifCategoryContainerOpen*/
-          ctx[37](
+          ctx[42](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*openCategoryContainer*/
             ctx[19]
           )
         ),
         ariaLabel: `Category ${/*index*/
-        ctx[70] + 1}: ${/*category*/
-        ctx[68].name}`,
+        ctx[78] + 1}: ${/*category*/
+        ctx[76].name}`,
         isFinished: (
           /*isFinished*/
           ctx[0]
         ),
         correctAnswerList: (
           /*scoringMetadata*/
-          ctx[27]
+          ctx[31]
         ),
         isPreviewModeInteractive: (
           /*isPreviewModeInteractive*/
@@ -12684,7 +12757,7 @@
         ),
         type: (
           /*categoryDndType*/
-          ctx[25]
+          ctx[29]
         ),
         isDataSaving: (
           /*isDataSaving*/
@@ -12695,30 +12768,30 @@
     promptcategorisedndcontainer.$on(
       "updateCategorySettings",
       /*updateCategory*/
-      ctx[41]
+      ctx[46]
     );
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[40]
+      ctx[45]
     );
     function keydown_handler(...args) {
       return (
         /*keydown_handler*/
-        ctx[51](
+        ctx[56](
           /*category*/
-          ctx[68],
+          ctx[76],
           ...args
         )
       );
     }
     const assign_div1 = () => (
       /*div1_binding*/
-      ctx[53](div1, category)
+      ctx[58](div1, category)
     );
     const unassign_div1 = () => (
       /*div1_binding*/
-      ctx[53](null, category)
+      ctx[58](null, category)
     );
     return {
       c() {
@@ -12729,7 +12802,7 @@
         t0 = space();
         span0 = element("span");
         span0.textContent = `Category ${/*index*/
-        ctx[70] + 1}:\xA0`;
+        ctx[78] + 1}:\xA0`;
         t4 = space();
         create_component(commonstringtohtml.$$.fragment);
         t5 = space();
@@ -12755,59 +12828,59 @@
         attr(span1, "class", "mx-0.5");
         attr(span2, "class", "w-4 h-4 text-inherit flex items-center justify-center");
         attr(button, "aria-label", button_aria_label_value = /*getTotalWords*/
-        ctx[35](
+        ctx[40](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*currentAnswer*/
           ctx[4]
         ));
         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[70]}`);
+        ctx[78]}`);
         attr(div0, "aria-live", div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[32](
+        ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) && /*enableAriaLive*/
         ctx[23] ? "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[32](
+        (ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[37](
+        ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) && /*checkContainerDragOver*/
-        ctx[31](
+        ctx[36](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*considerContainerId*/
           ctx[11],
           /*isDraggingOver*/
           ctx[12]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[37](
+        (ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[37](
+        ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) && /*checkSelectedSourceContainer*/
-        ctx[33](
+        ctx[38](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*sourceSelectedContainerId*/
           ctx[15],
           /*currentSelectedItemId*/
@@ -12828,38 +12901,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[31](
+        (ctx[36](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*considerContainerId*/
           ctx[11],
           /*isDraggingOver*/
           ctx[12]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) && /*hasAddItemAnimation*/
         ctx[17] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[33](
+        (ctx[38](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*sourceSelectedContainerId*/
           ctx[15],
           /*currentSelectedItemId*/
           ctx[14]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[37](
+        (ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) ? "min-h-[140px]" : ""));
@@ -12900,16 +12973,16 @@
             listen(button, "click", function() {
               if (is_function(
                 /*addCategoryContainer*/
-                ctx[38](
+                ctx[43](
                   /*category*/
-                  ctx[68].id,
+                  ctx[76].id,
                   /*openCategoryContainer*/
                   ctx[19]
                 )
               ))
-                ctx[38](
+                ctx[43](
                   /*category*/
-                  ctx[68].id,
+                  ctx[76].id,
                   /*openCategoryContainer*/
                   ctx[19]
                 ).apply(this, arguments);
@@ -12919,13 +12992,13 @@
               div1,
               "focus",
               /*resetTabCategory*/
-              ctx[43]
+              ctx[48]
             ),
             listen(
               div1,
               "blur",
               /*blur_handler*/
-              ctx[52]
+              ctx[57]
             )
           ];
           mounted = true;
@@ -12936,9 +13009,9 @@
         if (dirty[0] & /*dropContainerId*/
         8192)
           show_if_2 = /*checkContainerDroppedItem*/
-          ctx[32](
+          ctx[37](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*dropContainerId*/
             ctx[13]
           );
@@ -12958,9 +13031,9 @@
         if (dirty[0] & /*dropContainerId, enableAriaLive*/
         8396800)
           commonstringtohtml_changes.ariaHidden = /*checkContainerDroppedItem*/
-          ctx[32](
+          ctx[37](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*dropContainerId*/
             ctx[13]
           ) && /*enableAriaLive*/
@@ -12969,9 +13042,9 @@
         if (dirty[0] & /*dropContainerId, enableAriaLive*/
         8396800)
           show_if_1 = /*checkContainerDroppedItem*/
-          ctx[32](
+          ctx[37](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*dropContainerId*/
             ctx[13]
           ) && /*enableAriaLive*/
@@ -13018,9 +13091,9 @@
         }
         if ((!current || dirty[0] & /*currentAnswer*/
         16) && t9_value !== (t9_value = /*getTotalWords*/
-        ctx[35](
+        ctx[40](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*currentAnswer*/
           ctx[4]
         ) + ""))
@@ -13044,9 +13117,9 @@
         }
         if (!current || dirty[0] & /*currentAnswer*/
         16 && button_aria_label_value !== (button_aria_label_value = /*getTotalWords*/
-        ctx[35](
+        ctx[40](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*currentAnswer*/
           ctx[4]
         ))) {
@@ -13054,9 +13127,9 @@
         }
         if (!current || dirty[0] & /*dropContainerId, enableAriaLive*/
         8396800 && div0_aria_live_value !== (div0_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[32](
+        ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) && /*enableAriaLive*/
@@ -13065,41 +13138,41 @@
         }
         if (!current || dirty[0] & /*dropContainerId, openCategoryContainer, considerContainerId, isDraggingOver, sourceSelectedContainerId, currentSelectedItemId*/
         587776 && 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[32](
+        (ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) ? "bg-tranparent" : "bg-white") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[37](
+        ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) && /*checkContainerDragOver*/
-        ctx[31](
+        ctx[36](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*considerContainerId*/
           ctx[11],
           /*isDraggingOver*/
           ctx[12]
         ) ? "!bg-violet-100 md:!bg-white" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[37](
+        (ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) ? "" : "rounded-b-lg md:rounded-b-none") + " " + (!/*checkifCategoryContainerOpen*/
-        ctx[37](
+        ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) && /*checkSelectedSourceContainer*/
-        ctx[33](
+        ctx[38](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*sourceSelectedContainerId*/
           ctx[15],
           /*currentSelectedItemId*/
@@ -13111,47 +13184,47 @@
         if (dirty[0] & /*considerContainerId, isDraggingOver, openCategoryContainer*/
         530432)
           promptcategorisedndcontainer_changes.containerClass = "content-start !outline-none rounded-lg grow w-full md:p-4\n          " + /*checkContainerDragOver*/
-          (ctx[31](
+          (ctx[36](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*considerContainerId*/
             ctx[11],
             /*isDraggingOver*/
             ctx[12]
           ) ? "bg-violet-100" : "") + "\n          " + /*checkifCategoryContainerOpen*/
-          (ctx[37](
+          (ctx[42](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*openCategoryContainer*/
             ctx[19]
           ) ? "h-full p-3 min-h-[86px] md:min-h-0" : "");
         if (dirty[0] & /*openCategoryContainer, categoryTitleHeight*/
         17301504)
           promptcategorisedndcontainer_changes.paddingTop = /*checkifCategoryContainerOpen*/
-          ctx[37](
+          ctx[42](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*openCategoryContainer*/
             ctx[19]
           ) || !useIsSmallScreen() ? (
             /*categoryTitleHeight*/
             ctx[24][
               /*category*/
-              ctx[68].id
+              ctx[76].id
             ] + 16
           ) : (
             /*categoryTitleHeight*/
             ctx[24][
               /*category*/
-              ctx[68].id
+              ctx[76].id
             ]
           );
         if (dirty[0] & /*openCategoryContainer*/
         524288)
           promptcategorisedndcontainer_changes.showButton = /*checkifCategoryContainerOpen*/
-          ctx[37](
+          ctx[42](
             /*category*/
-            ctx[68].id,
+            ctx[76].id,
             /*openCategoryContainer*/
             ctx[19]
           );
@@ -13192,48 +13265,48 @@
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer*/
         718848 && 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[31](
+        (ctx[36](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*considerContainerId*/
           ctx[11],
           /*isDraggingOver*/
           ctx[12]
         ) ? "raw-focus-ring" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*dropContainerId*/
           ctx[13]
         ) && /*hasAddItemAnimation*/
         ctx[17] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[33](
+        (ctx[38](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*sourceSelectedContainerId*/
           ctx[15],
           /*currentSelectedItemId*/
           ctx[14]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : "") + " " + /*checkifCategoryContainerOpen*/
-        (ctx[37](
+        (ctx[42](
           /*category*/
-          ctx[68].id,
+          ctx[76].id,
           /*openCategoryContainer*/
           ctx[19]
         ) ? "min-h-[140px]" : ""))) {
           attr(div1, "class", div1_class_value);
         }
         if (category !== /*category*/
-        ctx[68]) {
+        ctx[76]) {
           unassign_div1();
           category = /*category*/
-          ctx[68];
+          ctx[76];
           assign_div1();
         }
       },
@@ -13312,63 +13385,69 @@
     };
   }
   function create_default_slot4(ctx) {
+    let div0;
+    let t0;
     let button0;
     let span0;
-    let t1;
+    let t2;
     let span1;
     let arrowdowncircle;
-    let t2;
     let t3;
-    let div0;
+    let t4;
+    let div1;
     let p;
-    let t5;
     let t6;
-    let div1;
     let t7;
-    let div4;
     let div2;
+    let t8;
+    let div5;
+    let div3;
     let show_if = (
       /*checkContainerDroppedItem*/
-      ctx[32](
+      ctx[37](
         CONTAINER_WORD_BIN_ID,
         /*dropContainerId*/
         ctx[13]
       )
     );
-    let t8;
+    let t9;
     let span2;
-    let t10;
-    let span3;
     let t11;
+    let span3;
     let t12;
     let t13;
     let t14;
     let t15;
-    let div3;
+    let t16;
+    let div4;
     let button1;
     let span4;
     let smallchevronleft;
     let button1_class_value;
     let button1_disabled_value;
-    let t16;
-    let promptcategorisedndcontainer;
     let t17;
+    let promptcategorisedndcontainer;
+    let t18;
     let button2;
     let span5;
     let smallchevronright;
     let button2_class_value;
     let button2_disabled_value;
-    let div4_aria_live_value;
-    let div4_class_value;
+    let div5_aria_live_value;
+    let div5_class_value;
     let current;
     let mounted;
     let dispose;
-    arrowdowncircle = new ArrowDownCircle_default({});
     let if_block0 = (
+      /*isFeedbackShown*/
+      ctx[25] && create_if_block_84(ctx)
+    );
+    arrowdowncircle = new ArrowDownCircle_default({});
+    let if_block1 = (
       /*isModalOpen*/
       ctx[18] && create_if_block_74(ctx)
     );
-    let if_block1 = (
+    let if_block2 = (
       /*totalRemainingWordBinItem*/
       ctx[16] !== /*totalCategoryItems*/
       ctx[10] && !/*isFinished*/
@@ -13376,7 +13455,7 @@
     );
     let each_value = ensure_array_like(Object.values(
       /*categoryGroups*/
-      ctx[30]
+      ctx[34]
     ));
     let each_blocks = [];
     for (let i = 0; i < each_value.length; i += 1) {
@@ -13385,19 +13464,19 @@
     const out = (i) => transition_out(each_blocks[i], 1, 1, () => {
       each_blocks[i] = null;
     });
-    let if_block2 = show_if && create_if_block9(ctx);
+    let if_block3 = show_if && create_if_block9(ctx);
     smallchevronleft = new SmallChevronLeft_default({});
     promptcategorisedndcontainer = new PromptCategoriseDndContainer_default({
       props: {
         containerClass: "bg-transparent p-4 pt-[55px] grow md:grow-0 md:pt-20.5 justify-center md:justify-normal\n        " + /*isWordBInTotalZero*/
-        (ctx[39](
+        (ctx[44](
           /*totalRemainingWordBinItem*/
           ctx[16]
         ) && !/*currentSelectedItemId*/
         ctx[14] ? "absolute inset-0" : ""),
         items: (
           /*categoryItems*/
-          ctx[29]
+          ctx[33]
         ),
         containerId: CONTAINER_WORD_BIN_ID,
         ariaLabel: "Word bin",
@@ -13407,7 +13486,7 @@
         ),
         correctAnswerList: (
           /*scoringMetadata*/
-          ctx[27]
+          ctx[31]
         ),
         isPreviewModeInteractive: (
           /*isPreviewModeInteractive*/
@@ -13419,7 +13498,7 @@
         ),
         type: (
           /*categoryDndType*/
-          ctx[25]
+          ctx[29]
         ),
         isDataSaving: (
           /*isDataSaving*/
@@ -13430,68 +13509,73 @@
     promptcategorisedndcontainer.$on(
       "updateCategorySettings",
       /*updateCategory*/
-      ctx[41]
+      ctx[46]
     );
     promptcategorisedndcontainer.$on(
       "saveCategory",
       /*saveCategory*/
-      ctx[40]
+      ctx[45]
     );
     smallchevronright = new SmallChevronRight_default({});
     return {
       c() {
+        div0 = element("div");
+        if (if_block0)
+          if_block0.c();
+        t0 = space();
         button0 = element("button");
         span0 = element("span");
         span0.textContent = "Skip to Word Bin";
-        t1 = space();
+        t2 = space();
         span1 = element("span");
         create_component(arrowdowncircle.$$.fragment);
-        t2 = space();
-        if (if_block0)
-          if_block0.c();
         t3 = space();
-        div0 = element("div");
-        p = element("p");
-        p.textContent = "Categories";
-        t5 = space();
         if (if_block1)
           if_block1.c();
-        t6 = space();
+        t4 = space();
         div1 = element("div");
+        p = element("p");
+        p.textContent = "Categories";
+        t6 = space();
+        if (if_block2)
+          if_block2.c();
+        t7 = space();
+        div2 = element("div");
         for (let i = 0; i < each_blocks.length; i += 1) {
           each_blocks[i].c();
         }
-        t7 = space();
-        div4 = element("div");
-        div2 = element("div");
-        if (if_block2)
-          if_block2.c();
         t8 = space();
+        div5 = element("div");
+        div3 = element("div");
+        if (if_block3)
+          if_block3.c();
+        t9 = space();
         span2 = element("span");
         span2.textContent = "Word Bin\xA0";
-        t10 = space();
+        t11 = space();
         span3 = element("span");
-        t11 = text(
+        t12 = text(
           /*totalRemainingWordBinItem*/
           ctx[16]
         );
-        t12 = text(" out of ");
-        t13 = text(
+        t13 = text(" out of ");
+        t14 = text(
           /*totalCategoryItems*/
           ctx[10]
         );
-        t14 = text(" left");
-        t15 = space();
-        div3 = element("div");
+        t15 = text(" left");
+        t16 = space();
+        div4 = element("div");
         button1 = element("button");
         span4 = element("span");
         create_component(smallchevronleft.$$.fragment);
-        t16 = space();
-        create_component(promptcategorisedndcontainer.$$.fragment);
         t17 = space();
+        create_component(promptcategorisedndcontainer.$$.fragment);
+        t18 = space();
         button2 = element("button");
         span5 = element("span");
         create_component(smallchevronright.$$.fragment);
+        attr(div0, "aria-live", "polite");
         attr(span0, "class", "test-base font-semibold underline mr-1");
         attr(span1, "class", "text-inherit h-6 w-6 flex items-center justify-center");
         attr(
@@ -13503,21 +13587,21 @@
         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");
         attr(p, "class", "text-base leading-5 !text-gray-900 font-semibold md:item-heading");
-        attr(div0, "class", "mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14");
+        attr(div1, "class", "mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14");
         attr(
-          div0,
+          div1,
           "aria-hidden",
           /*isModalOpen*/
           ctx[18]
         );
-        attr(div1, "class", "mb-5 grid gap-2 grid-cols-1 md:grid-cols-2 md:gap-6 lg:flex lg:gap-0");
+        attr(div2, "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");
         attr(span3, "class", "text-base leading-5 !text-gray-900 md:item-heading");
-        attr(div2, "class", "p-4 pb-3 text-center w-full absolute flex flex-row items-center justify-between md:justify-center md:flex-col md:pb-0");
+        attr(div3, "class", "p-4 pb-3 text-center w-full absolute flex flex-row items-center justify-between md:justify-center md:flex-col md:pb-0");
         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[39](
+        (ctx[44](
           /*totalRemainingWordBinItem*/
           ctx[16]
         ) ? "hidden" : ""));
@@ -13526,53 +13610,53 @@
         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[39](
+        (ctx[44](
           /*totalRemainingWordBinItem*/
           ctx[16]
         ) ? "hidden" : ""));
         button2.disabled = button2_disabled_value = /*currentWordBinIndex*/
         ctx[20] === /*totalRemainingWordBinItem*/
         ctx[16] - 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, "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,
+          div5,
           "aria-hidden",
           /*isModalOpen*/
           ctx[18]
         );
         attr(
-          div4,
+          div5,
           "tabindex",
           /*categoryTabIndex*/
           ctx[21]
         );
-        attr(div4, "aria-live", div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[32](
+        attr(div5, "aria-live", div5_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[37](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[13]
         ) ? "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[31](
+        attr(div5, "role", "group");
+        attr(div5, "class", div5_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[36](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
           ctx[11],
           /*isDraggingOver*/
           ctx[12]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[13]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[13]
         ) && /*hasAddItemAnimation*/
         ctx[17] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[33](
+        (ctx[38](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
           ctx[15],
@@ -13581,52 +13665,56 @@
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""));
       },
       m(target, anchor) {
+        insert(target, div0, anchor);
+        if (if_block0)
+          if_block0.m(div0, null);
+        insert(target, t0, anchor);
         insert(target, button0, anchor);
         append(button0, span0);
-        append(button0, t1);
+        append(button0, t2);
         append(button0, span1);
         mount_component(arrowdowncircle, span1, null);
-        insert(target, t2, anchor);
-        if (if_block0)
-          if_block0.m(target, anchor);
         insert(target, t3, anchor);
-        insert(target, div0, anchor);
-        append(div0, p);
-        append(div0, t5);
         if (if_block1)
-          if_block1.m(div0, null);
-        insert(target, t6, anchor);
+          if_block1.m(target, anchor);
+        insert(target, t4, anchor);
         insert(target, div1, anchor);
+        append(div1, p);
+        append(div1, t6);
+        if (if_block2)
+          if_block2.m(div1, null);
+        insert(target, t7, anchor);
+        insert(target, div2, anchor);
         for (let i = 0; i < each_blocks.length; i += 1) {
           if (each_blocks[i]) {
-            each_blocks[i].m(div1, null);
+            each_blocks[i].m(div2, null);
           }
         }
-        insert(target, t7, anchor);
-        insert(target, div4, anchor);
-        append(div4, div2);
-        if (if_block2)
-          if_block2.m(div2, null);
-        append(div2, t8);
-        append(div2, span2);
-        append(div2, t10);
-        append(div2, span3);
-        append(span3, t11);
+        insert(target, t8, anchor);
+        insert(target, div5, anchor);
+        append(div5, div3);
+        if (if_block3)
+          if_block3.m(div3, null);
+        append(div3, t9);
+        append(div3, span2);
+        append(div3, t11);
+        append(div3, span3);
         append(span3, t12);
         append(span3, t13);
         append(span3, t14);
-        append(div4, t15);
-        append(div4, div3);
-        append(div3, button1);
+        append(span3, t15);
+        append(div5, t16);
+        append(div5, div4);
+        append(div4, button1);
         append(button1, span4);
         mount_component(smallchevronleft, span4, null);
-        append(div3, t16);
-        mount_component(promptcategorisedndcontainer, div3, null);
-        append(div3, t17);
-        append(div3, button2);
+        append(div4, t17);
+        mount_component(promptcategorisedndcontainer, div4, null);
+        append(div4, t18);
+        append(div4, button2);
         append(button2, span5);
         mount_component(smallchevronright, span5, null);
-        ctx[56](div4);
+        ctx[61](div5);
         current = true;
         if (!mounted) {
           dispose = [
@@ -13634,12 +13722,12 @@
               button0,
               "keypress",
               /*goToWordBin*/
-              ctx[44]
+              ctx[49]
             ),
             listen(button1, "click", function() {
               if (is_function(
                 /*navigateCategoryItem*/
-                ctx[46](
+                ctx[51](
                   /*currentWordBinIndex*/
                   ctx[20],
                   /*currentAnswer*/
@@ -13647,7 +13735,7 @@
                   "left"
                 )
               ))
-                ctx[46](
+                ctx[51](
                   /*currentWordBinIndex*/
                   ctx[20],
                   /*currentAnswer*/
@@ -13658,7 +13746,7 @@
             listen(button2, "click", function() {
               if (is_function(
                 /*navigateCategoryItem*/
-                ctx[46](
+                ctx[51](
                   /*currentWordBinIndex*/
                   ctx[20],
                   /*currentAnswer*/
@@ -13666,7 +13754,7 @@
                   "right"
                 )
               ))
-                ctx[46](
+                ctx[51](
                   /*currentWordBinIndex*/
                   ctx[20],
                   /*currentAnswer*/
@@ -13675,22 +13763,22 @@
                 ).apply(this, arguments);
             }),
             listen(
-              div4,
+              div5,
               "keydown",
               /*keydown_handler_1*/
-              ctx[54]
+              ctx[59]
             ),
             listen(
-              div4,
+              div5,
               "focus",
               /*resetTabCategory*/
-              ctx[43]
+              ctx[48]
             ),
             listen(
-              div4,
+              div5,
               "blur",
               /*blur_handler_1*/
-              ctx[55]
+              ctx[60]
             )
           ];
           mounted = true;
@@ -13698,6 +13786,29 @@
       },
       p(new_ctx, dirty) {
         ctx = new_ctx;
+        if (
+          /*isFeedbackShown*/
+          ctx[25]
+        ) {
+          if (if_block0) {
+            if_block0.p(ctx, dirty);
+            if (dirty[0] & /*isFeedbackShown*/
+            33554432) {
+              transition_in(if_block0, 1);
+            }
+          } else {
+            if_block0 = create_if_block_84(ctx);
+            if_block0.c();
+            transition_in(if_block0, 1);
+            if_block0.m(div0, null);
+          }
+        } else if (if_block0) {
+          group_outros();
+          transition_out(if_block0, 1, 1, () => {
+            if_block0 = null;
+          });
+          check_outros();
+        }
         if (!current || dirty[0] & /*categoryTabIndex*/
         2097152) {
           attr(
@@ -13711,22 +13822,22 @@
           /*isModalOpen*/
           ctx[18]
         ) {
-          if (if_block0) {
-            if_block0.p(ctx, dirty);
+          if (if_block1) {
+            if_block1.p(ctx, dirty);
             if (dirty[0] & /*isModalOpen*/
             262144) {
-              transition_in(if_block0, 1);
+              transition_in(if_block1, 1);
             }
           } else {
-            if_block0 = create_if_block_74(ctx);
-            if_block0.c();
-            transition_in(if_block0, 1);
-            if_block0.m(t3.parentNode, t3);
+            if_block1 = create_if_block_74(ctx);
+            if_block1.c();
+            transition_in(if_block1, 1);
+            if_block1.m(t4.parentNode, t4);
           }
-        } else if (if_block0) {
+        } else if (if_block1) {
           group_outros();
-          transition_out(if_block0, 1, 1, () => {
-            if_block0 = null;
+          transition_out(if_block1, 1, 1, () => {
+            if_block1 = null;
           });
           check_outros();
         }
@@ -13736,40 +13847,40 @@
           ctx[10] && !/*isFinished*/
           ctx[0]
         ) {
-          if (if_block1) {
-            if_block1.p(ctx, dirty);
+          if (if_block2) {
+            if_block2.p(ctx, dirty);
             if (dirty[0] & /*totalRemainingWordBinItem, totalCategoryItems, isFinished*/
             66561) {
-              transition_in(if_block1, 1);
+              transition_in(if_block2, 1);
             }
           } else {
-            if_block1 = create_if_block_64(ctx);
-            if_block1.c();
-            transition_in(if_block1, 1);
-            if_block1.m(div0, null);
+            if_block2 = create_if_block_64(ctx);
+            if_block2.c();
+            transition_in(if_block2, 1);
+            if_block2.m(div1, null);
           }
-        } else if (if_block1) {
+        } else if (if_block2) {
           group_outros();
-          transition_out(if_block1, 1, 1, () => {
-            if_block1 = null;
+          transition_out(if_block2, 1, 1, () => {
+            if_block2 = null;
           });
           check_outros();
         }
         if (!current || dirty[0] & /*isModalOpen*/
         262144) {
           attr(
-            div0,
+            div1,
             "aria-hidden",
             /*isModalOpen*/
             ctx[18]
           );
         }
-        if (dirty[0] & /*isModalOpen, categoryTabIndex, categoryGroups, considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer, tabCategory, categoryTitleHeight, isFinished, scoringMetadata, isPreviewModeInteractive, categoriseSettingsData, categoryDndType, isDataSaving, enableAriaLive, currentAnswer, previewResultSr, selectedItemName, totalCategoryWords*/
-        1273953015 | dirty[1] & /*checkContainerDragOver, checkContainerDroppedItem, checkSelectedSourceContainer, checkifCategoryContainerOpen, getContainerTabSelected, resetTabCategory, handleItemAriaHidden, updateCategory, saveCategory, getTotalWords, addCategoryContainer, getTotalWordsLabel*/
-        24311) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, openCategoryContainer, tabCategory, categoryTitleHeight, isFinished, isPreviewModeInteractive, categoriseSettingsData, categoryDndType, isDataSaving, enableAriaLive, currentAnswer, previewResultSr, selectedItemName, totalCategoryWords*/
+        569309943 | dirty[1] & /*checkContainerDragOver, categoryGroups, checkContainerDroppedItem, checkSelectedSourceContainer, checkifCategoryContainerOpen, getContainerTabSelected, resetTabCategory, handleItemAriaHidden, scoringMetadata, updateCategory, saveCategory, getTotalWords, addCategoryContainer, getTotalWordsLabel*/
+        777961) {
           each_value = ensure_array_like(Object.values(
             /*categoryGroups*/
-            ctx[30]
+            ctx[34]
           ));
           let i;
           for (i = 0; i < each_value.length; i += 1) {
@@ -13781,7 +13892,7 @@
               each_blocks[i] = create_each_block4(child_ctx);
               each_blocks[i].c();
               transition_in(each_blocks[i], 1);
-              each_blocks[i].m(div1, null);
+              each_blocks[i].m(div2, null);
             }
           }
           group_outros();
@@ -13793,40 +13904,40 @@
         if (dirty[0] & /*dropContainerId*/
         8192)
           show_if = /*checkContainerDroppedItem*/
-          ctx[32](
+          ctx[37](
             CONTAINER_WORD_BIN_ID,
             /*dropContainerId*/
             ctx[13]
           );
         if (show_if) {
-          if (if_block2) {
-            if_block2.p(ctx, dirty);
+          if (if_block3) {
+            if_block3.p(ctx, dirty);
           } else {
-            if_block2 = create_if_block9(ctx);
-            if_block2.c();
-            if_block2.m(div2, t8);
+            if_block3 = create_if_block9(ctx);
+            if_block3.c();
+            if_block3.m(div3, t9);
           }
-        } else if (if_block2) {
-          if_block2.d(1);
-          if_block2 = null;
+        } else if (if_block3) {
+          if_block3.d(1);
+          if_block3 = null;
         }
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
         65536)
           set_data(
-            t11,
+            t12,
             /*totalRemainingWordBinItem*/
             ctx[16]
           );
         if (!current || dirty[0] & /*totalCategoryItems*/
         1024)
           set_data(
-            t13,
+            t14,
             /*totalCategoryItems*/
             ctx[10]
           );
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
         65536 && 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[39](
+        (ctx[44](
           /*totalRemainingWordBinItem*/
           ctx[16]
         ) ? "hidden" : ""))) {
@@ -13841,7 +13952,7 @@
         if (dirty[0] & /*totalRemainingWordBinItem, currentSelectedItemId*/
         81920)
           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[39](
+          (ctx[44](
             /*totalRemainingWordBinItem*/
             ctx[16]
           ) && !/*currentSelectedItemId*/
@@ -13865,7 +13976,7 @@
         promptcategorisedndcontainer.$set(promptcategorisedndcontainer_changes);
         if (!current || dirty[0] & /*totalRemainingWordBinItem*/
         65536 && 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[39](
+        (ctx[44](
           /*totalRemainingWordBinItem*/
           ctx[16]
         ) ? "hidden" : ""))) {
@@ -13880,7 +13991,7 @@
         if (!current || dirty[0] & /*isModalOpen*/
         262144) {
           attr(
-            div4,
+            div5,
             "aria-hidden",
             /*isModalOpen*/
             ctx[18]
@@ -13889,57 +14000,58 @@
         if (!current || dirty[0] & /*categoryTabIndex*/
         2097152) {
           attr(
-            div4,
+            div5,
             "tabindex",
             /*categoryTabIndex*/
             ctx[21]
           );
         }
         if (!current || dirty[0] & /*dropContainerId*/
-        8192 && div4_aria_live_value !== (div4_aria_live_value = /*checkContainerDroppedItem*/
-        ctx[32](
+        8192 && div5_aria_live_value !== (div5_aria_live_value = /*checkContainerDroppedItem*/
+        ctx[37](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[13]
         ) ? "polite" : "off")) {
-          attr(div4, "aria-live", div4_aria_live_value);
+          attr(div5, "aria-live", div5_aria_live_value);
         }
         if (!current || dirty[0] & /*considerContainerId, isDraggingOver, dropContainerId, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId*/
-        194560 && 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[31](
+        194560 && div5_class_value !== (div5_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[36](
           CONTAINER_WORD_BIN_ID,
           /*considerContainerId*/
           ctx[11],
           /*isDraggingOver*/
           ctx[12]
         ) ? "raw-focus-ring bg-violet-100" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[13]
         ) ? "bg-violet-150" : "") + " " + /*checkContainerDroppedItem*/
-        (ctx[32](
+        (ctx[37](
           CONTAINER_WORD_BIN_ID,
           /*dropContainerId*/
           ctx[13]
         ) && /*hasAddItemAnimation*/
         ctx[17] ? "transition bg-white duration-300" : "") + " " + /*checkSelectedSourceContainer*/
-        (ctx[33](
+        (ctx[38](
           CONTAINER_WORD_BIN_ID,
           /*sourceSelectedContainerId*/
           ctx[15],
           /*currentSelectedItemId*/
           ctx[14]
         ) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""))) {
-          attr(div4, "class", div4_class_value);
+          attr(div5, "class", div5_class_value);
         }
       },
       i(local) {
         if (current)
           return;
-        transition_in(arrowdowncircle.$$.fragment, local);
         transition_in(if_block0);
+        transition_in(arrowdowncircle.$$.fragment, local);
         transition_in(if_block1);
+        transition_in(if_block2);
         for (let i = 0; i < each_value.length; i += 1) {
           transition_in(each_blocks[i]);
         }
@@ -13949,9 +14061,10 @@
         current = true;
       },
       o(local) {
-        transition_out(arrowdowncircle.$$.fragment, local);
         transition_out(if_block0);
+        transition_out(arrowdowncircle.$$.fragment, local);
         transition_out(if_block1);
+        transition_out(if_block2);
         each_blocks = each_blocks.filter(Boolean);
         for (let i = 0; i < each_blocks.length; i += 1) {
           transition_out(each_blocks[i]);
@@ -13963,27 +14076,31 @@
       },
       d(detaching) {
         if (detaching) {
+          detach(div0);
+          detach(t0);
           detach(button0);
-          detach(t2);
           detach(t3);
-          detach(div0);
-          detach(t6);
+          detach(t4);
           detach(div1);
           detach(t7);
-          detach(div4);
+          detach(div2);
+          detach(t8);
+          detach(div5);
         }
-        destroy_component(arrowdowncircle);
         if (if_block0)
-          if_block0.d(detaching);
+          if_block0.d();
+        destroy_component(arrowdowncircle);
         if (if_block1)
-          if_block1.d();
-        destroy_each(each_blocks, detaching);
+          if_block1.d(detaching);
         if (if_block2)
           if_block2.d();
+        destroy_each(each_blocks, detaching);
+        if (if_block3)
+          if_block3.d();
         destroy_component(smallchevronleft);
         destroy_component(promptcategorisedndcontainer);
         destroy_component(smallchevronright);
-        ctx[56](null);
+        ctx[61](null);
         mounted = false;
         run_all(dispose);
       }
@@ -13997,11 +14114,11 @@
       props: {
         rubric: (
           /*rubric*/
-          ctx[26].text
+          ctx[30].text
         ),
         prompt: (
           /*prompt*/
-          ctx[28]
+          ctx[32]
         ),
         interactionType: INTERACTION_TYPE_CATEGORISE,
         $$slots: { default: [create_default_slot4] },
@@ -14017,14 +14134,14 @@
       m(target, anchor) {
         insert(target, div, anchor);
         mount_component(promptbody, div, null);
-        ctx[57](div);
+        ctx[62](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, categoriseSettingsData, isDataSaving, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight, enableAriaLive, previewResultSr, totalCategoryWords, modalSettingsData*/
-        33554423 | dirty[2] & /*$$scope*/
-        512) {
+        if (dirty[0] & /*isModalOpen, categoryTabIndex, dropContainerId, considerContainerId, isDraggingOver, hasAddItemAnimation, sourceSelectedContainerId, currentSelectedItemId, tabCategory, totalRemainingWordBinItem, currentWordBinIndex, currentAnswer, isFinished, isPreviewModeInteractive, categoriseSettingsData, isDataSaving, totalCategoryItems, selectedItemName, openCategoryContainer, categoryTitleHeight, enableAriaLive, previewResultSr, totalCategoryWords, modalSettingsData, allAnswersCorrect, isItemSkipped, resultFeedback, isFeedbackShown*/
+        536870903 | dirty[2] & /*$$scope*/
+        131072) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -14044,7 +14161,7 @@
           detach(div);
         }
         destroy_component(promptbody);
-        ctx[57](null);
+        ctx[62](null);
       }
     };
   }
@@ -14104,7 +14221,7 @@
       isOpenLastStatus: false
     };
     const { rubric, interaction, metadata, scoringMetadata } = sessionData;
-    const { prompt, category_groups: interactionCategoryGroups, category_items: interactionCategoryItems } = interaction;
+    const { prompt, category_groups: interactionCategoryGroups, category_items: interactionCategoryItems, feedback } = interaction;
     const categoryItems = useFilterUniqueObject(interactionCategoryItems);
     const categoryGroups = useFilterUniqueObject(interactionCategoryGroups);
     const tabCategory = [];
@@ -14152,6 +14269,53 @@
     const updateModalSettings = (newSettings) => {
       $$invalidate(8, modalSettingsData = { ...modalSettingsData, ...newSettings });
     };
+    let isFeedbackShown = false;
+    let allItemsPlacedTrigger = false;
+    let allAnswersCorrect = false;
+    let isItemSkipped = false;
+    let resultFeedback = "";
+    const checkFeedbackStatus = () => {
+      if (isPreviewModeInteractive && !allItemsPlacedTrigger && totalRemainingWordBinItem === 0) {
+        allItemsPlacedTrigger = true;
+      }
+      if (isFinished && !isPreviewMode || isPreviewMode && isPreviewModeInteractive && allItemsPlacedTrigger) {
+        const { answerList } = scoringMetadata;
+        const { correct: correctFeedback, incorrect: incorrectFeedback } = feedback;
+        let hasIncorrect = false;
+        let hasCorrect = false;
+        let hasWordBinItems = totalRemainingWordBinItem > 0;
+        categoryGroups.forEach((category) => {
+          const { id: categoryId } = category;
+          const categoryAnswerList = answerList[categoryId] || [];
+          const categoryIndex = currentAnswer.findIndex((answer) => answer.categoryId === categoryId);
+          if (categoryIndex !== -1) {
+            const { itemId } = currentAnswer[categoryIndex];
+            itemId.forEach((item) => {
+              const itemIdNoStatus = item.includes(EAT_DASH) ? item.split(EAT_DASH)[0] : item;
+              if (categoryAnswerList.includes(itemIdNoStatus)) {
+                hasCorrect = true;
+              } else {
+                hasIncorrect = true;
+              }
+            });
+          }
+        });
+        $$invalidate(26, allAnswersCorrect = hasCorrect && !hasIncorrect && !hasWordBinItems);
+        $$invalidate(27, isItemSkipped = totalRemainingWordBinItem === totalCategoryItems || hasWordBinItems && hasCorrect && !hasIncorrect);
+        $$invalidate(28, resultFeedback = allAnswersCorrect ? correctFeedback : incorrectFeedback);
+        $$invalidate(25, isFeedbackShown = isPreviewModeInteractive ? allItemsPlacedTrigger : true);
+      }
+    };
+    const resetFeedbackStatus = () => {
+      $$invalidate(25, isFeedbackShown = false);
+      allItemsPlacedTrigger = false;
+      setTimeout(
+        () => {
+          checkFeedbackStatus();
+        },
+        50
+      );
+    };
     if (isFinished) {
       const showOpenContainerList = [];
       const { answerList } = scoringMetadata;
@@ -14168,12 +14332,18 @@
           const correctItems = itemId.filter((item) => categoryAnswerList.includes(item));
           const incorrectItems = itemId.filter((item) => !categoryAnswerList.includes(item));
           missedItems = categoryAnswerList.filter((item) => !itemId.includes(item));
-          correctItems?.map((item) => items.push(`${item}${EAT_DASH}${ANSWER_CORRECT}`));
-          incorrectItems?.map((item) => items.push(`${item}${EAT_DASH}${ANSWER_INCORRECT}`));
+          correctItems?.map((item) => {
+            items.push(`${item}${EAT_DASH}${ANSWER_CORRECT}`);
+          });
+          incorrectItems?.map((item) => {
+            items.push(`${item}${EAT_DASH}${ANSWER_INCORRECT}`);
+          });
         } else {
           missedItems = categoryAnswerList;
         }
-        missedItems?.map((item) => items.push(`${item}${EAT_DASH}${isPreviewMode ? ANSWER_CORRECT : ANSWER_MISSED}`));
+        missedItems?.map((item) => {
+          items.push(`${item}${EAT_DASH}${isPreviewMode ? ANSWER_CORRECT : ANSWER_MISSED}`);
+        });
         return { categoryId, itemId: items };
       });
       const wordBinIndex = initialCategoryAnswer.findIndex((answer) => answer.categoryId === CONTAINER_WORD_BIN_ID);
@@ -14186,6 +14356,8 @@
       updateCategoriseSettings({
         openCategoryContainer: showOpenContainerList
       });
+      if (!isPreviewModeInteractive)
+        checkFeedbackStatus();
     }
     updateCategoriseSettings({
       currentAnswer: initialCategoryAnswer,
@@ -14305,7 +14477,7 @@
     }
     const keydown_handler_1 = ({ key }) => getContainerTabSelected(key, CONTAINER_WORD_BIN_ID);
     const blur_handler_1 = () => handleItemAriaHidden(false);
-    function div4_binding($$value) {
+    function div5_binding($$value) {
       binding_callbacks[$$value ? "unshift" : "push"](() => {
         tabCategory[CONTAINER_WORD_BIN_ID] = $$value;
         $$invalidate(9, tabCategory);
@@ -14319,11 +14491,11 @@
     }
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(48, sessionData = $$props2.sessionData);
+        $$invalidate(53, sessionData = $$props2.sessionData);
       if ("isFinished" in $$props2)
         $$invalidate(0, isFinished = $$props2.isFinished);
       if ("isPreviewMode" in $$props2)
-        $$invalidate(49, isPreviewMode = $$props2.isPreviewMode);
+        $$invalidate(54, isPreviewMode = $$props2.isPreviewMode);
       if ("isPreviewModeInteractive" in $$props2)
         $$invalidate(1, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
       if ("isDataSaving" in $$props2)
@@ -14387,6 +14559,7 @@
                 150
               );
             }
+            checkFeedbackStatus();
             if (previewResultSr) {
               setTimeout(
                 () => {
@@ -14436,12 +14609,17 @@
       selectedItemName,
       enableAriaLive,
       categoryTitleHeight,
+      isFeedbackShown,
+      allAnswersCorrect,
+      isItemSkipped,
+      resultFeedback,
       categoryDndType,
       rubric,
       scoringMetadata,
       prompt,
       categoryItems,
       categoryGroups,
+      resetFeedbackStatus,
       checkContainerDragOver,
       checkContainerDroppedItem,
       checkSelectedSourceContainer,
@@ -14467,7 +14645,7 @@
       div1_binding,
       keydown_handler_1,
       blur_handler_1,
-      div4_binding,
+      div5_binding,
       div_binding
     ];
   }
@@ -14481,9 +14659,9 @@
         create_fragment26,
         safe_not_equal,
         {
-          sessionData: 48,
+          sessionData: 53,
           isFinished: 0,
-          isPreviewMode: 49,
+          isPreviewMode: 54,
           isPreviewModeInteractive: 1,
           isDataSaving: 2
         },
@@ -14492,7 +14670,7 @@
       );
     }
     get sessionData() {
-      return this.$$.ctx[48];
+      return this.$$.ctx[53];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -14506,7 +14684,7 @@
       flush();
     }
     get isPreviewMode() {
-      return this.$$.ctx[49];
+      return this.$$.ctx[54];
     }
     set isPreviewMode(isPreviewMode) {
       this.$$set({ isPreviewMode });