eat-js-sdk 2.0.43 → 2.0.44

package/dist/interaction-builder.mjs

@@ -5862,7 +5862,7 @@ function FeedbackAlert($$anchor, $$props) {
           }
         };
         if_block(node_1, ($$render) => {
-          if (showIcon() && type() !== "skipped") $$render(consequent);
+          if (showIcon()) $$render(consequent);
         });
       }
       var div_1 = sibling(node_1, 2);
@@ -5893,7 +5893,7 @@ function FeedbackAlert($$anchor, $$props) {
       append($$anchor2, div);
     };
     if_block(node, ($$render) => {
-      if (message()) $$render(consequent_2);
+      if (message() && type() !== "skipped") $$render(consequent_2);
     });
   }
   append($$anchor, fragment);
@@ -11717,6 +11717,138 @@ const useFilterUniqueObject = (data, identifier = "id") => {
   const uniqueMap = new Map(data.map((obj) => [obj[identifier], obj]));
   return Array.from(uniqueMap.values());
 };
+const stripStatus = (itemId) => {
+  return itemId.includes(CATEGORISE.DASH) ? itemId.split(CATEGORISE.DASH)[0] : itemId;
+};
+function useCategoriseFeedback(interactionState, config, api) {
+  const totalRemainingItems = interactionState.data.wordBinItems.filter((id) => {
+    const status = id.split(CATEGORISE.DASH)[1];
+    return status !== "missed";
+  }).length;
+  let isFeedbackShown = false;
+  let allAnswersCorrect = false;
+  let isItemSkipped = false;
+  let resultFeedback = "";
+  if (config.isFinished && config.mode !== "preview") {
+    const { answerList } = config.scoringMetadata || {};
+    if (!answerList) {
+      return {
+        isFeedbackShown,
+        allAnswersCorrect,
+        isItemSkipped,
+        resultFeedback
+      };
+    }
+    const { correct: correctFeedback, incorrect: incorrectFeedback } = config.feedback || {};
+    let hasIncorrect = false;
+    let hasCorrect = false;
+    const hasWordBinItems = totalRemainingItems > 0;
+    config.category_groups.forEach((category) => {
+      const categoryAnswerList = answerList[category.id] || [];
+      const categoryItems = api.getCategoryItems(interactionState, category.id);
+      categoryItems.forEach((item) => {
+        const itemIdNoStatus = stripStatus(item);
+        if (categoryAnswerList.includes(itemIdNoStatus)) {
+          hasCorrect = true;
+        } else {
+          hasIncorrect = true;
+        }
+      });
+    });
+    allAnswersCorrect = hasCorrect && !hasIncorrect && !hasWordBinItems;
+    isItemSkipped = totalRemainingItems === config.totalCategoryItems;
+    resultFeedback = allAnswersCorrect ? correctFeedback : incorrectFeedback;
+    isFeedbackShown = !allAnswersCorrect;
+  } else if (config.mode === "interactive") {
+    const allItemsPlaced = totalRemainingItems === 0;
+    if (allItemsPlaced) {
+      const { answerList } = config.scoringMetadata || {};
+      if (answerList) {
+        let hasIncorrect = false;
+        let hasCorrect = false;
+        config.category_groups.forEach((category) => {
+          const categoryAnswerList = answerList[category.id] || [];
+          const categoryItems = api.getCategoryItems(interactionState, category.id);
+          categoryItems.forEach((item) => {
+            const itemIdNoStatus = stripStatus(item);
+            if (categoryAnswerList.includes(itemIdNoStatus)) {
+              hasCorrect = true;
+            } else {
+              hasIncorrect = true;
+            }
+          });
+        });
+        allAnswersCorrect = hasCorrect && !hasIncorrect;
+        resultFeedback = allAnswersCorrect ? config.feedback?.correct : config.feedback?.incorrect;
+        isFeedbackShown = true;
+      }
+    } else {
+      isFeedbackShown = false;
+    }
+  } else {
+    isFeedbackShown = false;
+  }
+  return {
+    isFeedbackShown,
+    allAnswersCorrect,
+    isItemSkipped,
+    resultFeedback
+  };
+}
+function CategoriseFeedback($$anchor, $$props) {
+  push($$props, true);
+  let feedbackState = prop($$props, "feedbackState", 7), isInteractiveMode2 = prop($$props, "isInteractiveMode", 7, false);
+  const feedbackType = /* @__PURE__ */ user_derived(() => {
+    if (feedbackState().isItemSkipped) return "skipped";
+    if (feedbackState().allAnswersCorrect) return "correct";
+    return "incorrect";
+  });
+  var $$exports = {
+    get feedbackState() {
+      return feedbackState();
+    },
+    set feedbackState($$value) {
+      feedbackState($$value);
+      flushSync();
+    },
+    get isInteractiveMode() {
+      return isInteractiveMode2();
+    },
+    set isInteractiveMode($$value = false) {
+      isInteractiveMode2($$value);
+      flushSync();
+    }
+  };
+  var fragment = comment();
+  var node = first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      {
+        let $0 = /* @__PURE__ */ user_derived(() => !isInteractiveMode2());
+        FeedbackAlert($$anchor2, {
+          get type() {
+            return get$1(feedbackType);
+          },
+          get message() {
+            return feedbackState().resultFeedback;
+          },
+          showIcon: true,
+          get isAlert() {
+            return get$1($0);
+          },
+          iconProps: "h-6 w-6 flex items-center pt-0.5 mr-2",
+          iconType: "info"
+        });
+      }
+    };
+    if_block(node, ($$render) => {
+      if (feedbackState().isFeedbackShown) $$render(consequent);
+    });
+  }
+  append($$anchor, fragment);
+  return pop($$exports);
+}
+create_custom_element(CategoriseFeedback, { feedbackState: {}, isInteractiveMode: {} }, [], [], true);
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -15452,71 +15584,7 @@ function CategoriseComponent($$anchor, $$props) {
     return status !== "missed";
   }).length);
   const totalPlacedItems = /* @__PURE__ */ user_derived(() => config().totalCategoryItems - get$1(totalRemainingItems));
-  let isFeedbackShown = /* @__PURE__ */ state(false);
-  let allAnswersCorrect = /* @__PURE__ */ state(false);
-  let isItemSkipped = /* @__PURE__ */ state(false);
-  let resultFeedback = /* @__PURE__ */ state("");
-  const stripStatus = (itemId) => {
-    return itemId.includes(CATEGORISE.DASH) ? itemId.split(CATEGORISE.DASH)[0] : itemId;
-  };
-  user_effect(() => {
-    if (config().isFinished && config().mode !== "preview") {
-      const { answerList } = config().scoringMetadata || {};
-      if (!answerList) return;
-      const { correct: correctFeedback, incorrect: incorrectFeedback } = config().feedback || {};
-      let hasIncorrect = false;
-      let hasCorrect = false;
-      const hasWordBinItems = get$1(totalRemainingItems) > 0;
-      config().category_groups.forEach((category) => {
-        const categoryAnswerList = answerList[category.id] || [];
-        const categoryItems = api().getCategoryItems(get$1(interactionState), category.id);
-        categoryItems.forEach((item) => {
-          const itemIdNoStatus = stripStatus(item);
-          if (categoryAnswerList.includes(itemIdNoStatus)) {
-            hasCorrect = true;
-          } else {
-            hasIncorrect = true;
-          }
-        });
-      });
-      set(allAnswersCorrect, hasCorrect && !hasIncorrect && !hasWordBinItems, true);
-      set(isItemSkipped, get$1(totalRemainingItems) === config().totalCategoryItems);
-      set(resultFeedback, get$1(allAnswersCorrect) ? correctFeedback : incorrectFeedback, true);
-      set(isFeedbackShown, !get$1(allAnswersCorrect));
-    } else if (config().mode === "interactive") {
-      const allItemsPlaced = get$1(totalRemainingItems) === 0;
-      if (allItemsPlaced) {
-        const { answerList } = config().scoringMetadata || {};
-        if (answerList) {
-          let hasIncorrect = false;
-          let hasCorrect = false;
-          config().category_groups.forEach((category) => {
-            const categoryAnswerList = answerList[category.id] || [];
-            const categoryItems = api().getCategoryItems(get$1(interactionState), category.id);
-            categoryItems.forEach((item) => {
-              const itemIdNoStatus = stripStatus(item);
-              if (categoryAnswerList.includes(itemIdNoStatus)) {
-                hasCorrect = true;
-              } else {
-                hasIncorrect = true;
-              }
-            });
-          });
-          set(allAnswersCorrect, hasCorrect && !hasIncorrect, true);
-          set(
-            resultFeedback,
-            get$1(allAnswersCorrect) ? config().feedback?.correct : config().feedback?.incorrect,
-            true
-          );
-          set(isFeedbackShown, true);
-        }
-      } else {
-        set(isFeedbackShown, false);
-      }
-    } else {
-      set(isFeedbackShown, false);
-    }
-  });
+  const feedbackState = /* @__PURE__ */ user_derived(() => useCategoriseFeedback(get$1(interactionState), config(), api()));
   const dropContainerId = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.dropContainerId);
   const hasAddItemAnimation = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.hasAddItemAnimation);
   const wordBinItems = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.wordBinItems.map((id) => ({
@@ -15673,6 +15741,8 @@ function CategoriseComponent($$anchor, $$props) {
           }
         }
       }
+    } else {
+      set(dragSourceContainerId, null);
     }
   });
   user_effect(() => {
@@ -15889,6 +15959,7 @@ function CategoriseComponent($$anchor, $$props) {
     set(interactionState, api().reset(get$1(interactionState)), true);
     dispatchStateChange();
     set(currentMobileIndex, 0);
+    set(dragSourceContainerId, null);
     set(isModalOpen, false);
   };
   var $$exports = {
@@ -16128,34 +16199,17 @@ function CategoriseComponent($$anchor, $$props) {
       append($$anchor2, fragment_1);
     };
     const feedback = ($$anchor2) => {
-      var fragment_4 = comment();
-      var node_7 = first_child(fragment_4);
       {
-        var consequent_1 = ($$anchor3) => {
-          {
-            let $02 = /* @__PURE__ */ user_derived(() => get$1(allAnswersCorrect) ? "correct" : get$1(isItemSkipped) ? "skipped" : "incorrect");
-            let $12 = /* @__PURE__ */ user_derived(() => config().mode !== "interactive");
-            FeedbackAlert($$anchor3, {
-              get type() {
-                return get$1($02);
-              },
-              get message() {
-                return get$1(resultFeedback);
-              },
-              showIcon: true,
-              get isAlert() {
-                return get$1($12);
-              },
-              iconProps: "h-6 w-6 flex items-center pt-0.5 mr-2",
-              iconType: "info"
-            });
+        let $02 = /* @__PURE__ */ user_derived(() => config().mode === "interactive");
+        CategoriseFeedback($$anchor2, {
+          get feedbackState() {
+            return get$1(feedbackState);
+          },
+          get isInteractiveMode() {
+            return get$1($02);
           }
-        };
-        if_block(node_7, ($$render) => {
-          if (get$1(isFeedbackShown)) $$render(consequent_1);
         });
       }
-      append($$anchor2, fragment_4);
     };
     let $0 = /* @__PURE__ */ user_derived(() => config().rubric?.text || "");
     let $1 = /* @__PURE__ */ user_derived(() => config().prompt || "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.0.43",
+  "version": "2.0.44",
   "change version": "2.0.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [