catchup-library-web 1.11.1 → 1.11.3

package/dist/index.js

@@ -71,6 +71,7 @@ __export(index_exports, {
   ActivityEmptyContent: () => ActivityEmptyContent_default,
   ActivityEvaluationRubricContent: () => ActivityEvaluationRubricContent_default,
   ActivityLabel: () => ActivityLabel_default,
+  ActivityPreviewByAnswerData: () => ActivityPreviewByAnswerData_default,
   ActivityPreviewByData: () => ActivityPreviewByData_default,
   ActivitySolutionContent: () => ActivitySolutionContent_default,
   ActivityTemplateLabel: () => ActivityTemplateLabel_default,
@@ -3617,9 +3618,11 @@ var InputGroup = ({
   theme,
   useMinHeight,
   disabled,
-  limit
+  limit,
+  useMath
 }) => {
   const textAreaRef = (0, import_react10.useRef)(null);
+  const mathFieldRef = (0, import_react10.useRef)(null);
   (0, import_react10.useEffect)(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3629,6 +3632,14 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
+  (0, import_react10.useEffect)(() => {
+    if (!useMath) return;
+    import("mathlive").then(({ MathfieldElement }) => {
+      if (!customElements.get("math-field")) {
+        customElements.define("math-field", MathfieldElement);
+      }
+    });
+  }, [useMath, type, placeholder, title]);
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -3656,6 +3667,22 @@ var InputGroup = ({
       onChange && onChange(e);
     }
   };
+  const handleMathFieldChange = (event) => {
+    const mathField = event.currentTarget;
+    const syntheticEvent = {
+      target: {
+        value: mathField.value,
+        type: "text"
+      }
+    };
+    onChange && onChange(syntheticEvent);
+  };
+  const handleMathFieldFocus = (event) => {
+    const syntheticEvent = {
+      target: event.currentTarget
+    };
+    onFocus && onFocus(syntheticEvent);
+  };
   const CheckboxInputGroup = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
@@ -3808,6 +3835,44 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
+    if (useMath) {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "my-1 relative", children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "math-field",
+              {
+                ref: mathFieldRef,
+                value: value || "",
+                onInput: handleMathFieldChange,
+                onFocus: handleMathFieldFocus,
+                placeholder: errorText ? errorText : placeholder,
+                disabled,
+                "virtual-keyboard-mode": "onfocus",
+                "smart-fence": true,
+                "smart-mode": true,
+                "smart-superscript": true,
+                style: {
+                  fontSize: "16px",
+                  padding: "8px 16px",
+                  border: "none",
+                  outline: "none",
+                  width: "100%",
+                  minHeight: "44px",
+                  backgroundColor: disabled ? "#f5f5f5" : "transparent",
+                  borderRadius: "16px",
+                  fontFamily: "inherit",
+                  color: disabled ? "#9ca3af" : "#000000"
+                }
+              }
+            )
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "my-1 relative", children: [
       title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -6711,10 +6776,203 @@ var ActivityPreviewByData = ({
 };
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
-// src/components/dividers/BlueVerticalDividerLine.tsx
+// src/components/activities/ActivityPreviewByAnswerData.tsx
+var import_react27 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
+var ActivityPreviewByAnswerData = ({
+  data,
+  showType = true,
+  showDescription = true,
+  lockedType = null,
+  typeOptionList = [],
+  showSolution = false,
+  showEvaluationRubric = false,
+  showTaxonomy = true,
+  isFullScreen = false,
+  showCorrectAnswer = false
+}) => {
+  var _a;
+  const [key, setKey] = (0, import_react27.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
+  const [optionList, setOptionList] = (0, import_react27.useState)([]);
+  const [answer, setAnswer] = (0, import_react27.useState)({ data: [] });
+  (0, import_react27.useEffect)(() => {
+    if (!data) return;
+    setKey((/* @__PURE__ */ new Date()).getTime());
+  }, [data]);
+  const checkAnswerMapExists = (type) => {
+    if (data && data.answerMap && Array.isArray(data.answerMap)) {
+      const foundAnswer = data.answerMap.find(
+        (answer2) => answer2.type === type
+      );
+      return foundAnswer || null;
+    }
+    return null;
+  };
+  const retrieveTaxonomyNameFromActivityType = (type) => {
+    if (!data) return "";
+    let taxonomyMap = { name: "" };
+    const taxonomyMapNames = {
+      ORDERING: "orderingTaxonomyMap",
+      DROPDOWN: "dropdownTaxonomyMap",
+      MCSA: "MCSATaxonomyMap",
+      MCMA: "MCMATaxonomyMap",
+      MATCHING: "matchingTaxonomyMap",
+      GROUPING: "groupingTaxonomyMap",
+      FILL_IN_THE_BLANKS: "fillInTheBlanksTaxonomyMap",
+      OPEN_ENDED: "openEndedTaxonomyMap",
+      TRUE_FALSE: "trueFalseTaxonomyMap"
+    };
+    const mapName = taxonomyMapNames[type];
+    if (mapName && data[mapName]) {
+      try {
+        taxonomyMap = JSON.parse(data[mapName]);
+      } catch (error) {
+        console.error(`Error parsing taxonomy map for ${type}:`, error);
+      }
+    }
+    return taxonomyMap.name || "";
+  };
+  (0, import_react27.useEffect)(() => {
+    if (!data) return;
+    const constructAnswerBasedOnData2 = () => {
+      const newAnswer = { data: [] };
+      const activityTypes = [
+        { type: "ORDERING", materialMap: "orderingMaterialMap" },
+        { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
+        { type: "MCSA", materialMap: "MCSAMaterialMap" },
+        { type: "MCMA", materialMap: "MCMAMaterialMap" },
+        { type: "MATCHING", materialMap: "matchingMaterialMap" },
+        { type: "GROUPING", materialMap: "groupingMaterialMap" },
+        {
+          type: "FILL_IN_THE_BLANKS",
+          materialMap: "fillInTheBlanksMaterialMap"
+        },
+        { type: "OPEN_ENDED", materialMap: "openEndedMaterialMap" },
+        { type: "TRUE_FALSE", materialMap: "trueFalseMaterialMap" }
+      ];
+      activityTypes.forEach(({ type, materialMap }) => {
+        if (data[materialMap]) {
+          const foundAnswer = checkAnswerMapExists(type);
+          const answerItem = foundAnswer || constructActivityAnswerMap(
+            { type },
+            JSON.parse(JSON.stringify(data))
+          );
+          newAnswer.data.push(answerItem);
+        }
+      });
+      setAnswer(newAnswer);
+      if (newAnswer.data.length > 0) {
+        if (lockedType && newAnswer.data.find((item) => item.type === lockedType)) {
+          setSelectedType(lockedType);
+        } else {
+          setSelectedType(newAnswer.data[0].type);
+        }
+      }
+    };
+    constructAnswerBasedOnData2();
+  }, [data, lockedType]);
+  (0, import_react27.useEffect)(() => {
+    if (!data || !answer.data.length) return;
+    let currentTypeOptionList = typeOptionList || answer.data.map((item) => ({
+      id: item.type,
+      text: i18n_default.t(item.type)
+    }));
+    if (lockedType) {
+      currentTypeOptionList = currentTypeOptionList.filter(
+        (typeOption) => typeOption.id === lockedType
+      );
+    }
+    if (showTaxonomy) {
+      setOptionList(
+        currentTypeOptionList.map((typeOption) => __spreadProps(__spreadValues({}, typeOption), {
+          subText: i18n_default.t(retrieveTaxonomyNameFromActivityType(typeOption.id))
+        }))
+      );
+    } else {
+      setOptionList(currentTypeOptionList);
+    }
+  }, [data, answer.data, lockedType, typeOptionList, showTaxonomy]);
+  const RenderSelectedActivityContent = () => {
+    const commonProps = {
+      answer,
+      data,
+      canAnswerQuestion: () => true,
+      changeAnswer: (newAnswer) => setAnswer(JSON.parse(JSON.stringify(newAnswer))),
+      isPreview: true,
+      showCorrectAnswer,
+      isFullScreen
+    };
+    switch (selectedType) {
+      case "ORDERING":
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "DROPDOWN":
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "MCSA":
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "MCMA":
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "MATCHING":
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "GROUPING":
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "FILL_IN_THE_BLANKS":
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "OPEN_ENDED":
+        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          OpenEndedActivityContent_default,
+          __spreadProps(__spreadValues({}, commonProps), {
+            showMaterialContent: true
+          })
+        ) : null;
+      case "TRUE_FALSE":
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+      default:
+        return null;
+    }
+  };
+  if (!data) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        SelectionBox_default,
+        {
+          optionList,
+          selectedId: selectedType,
+          handleSelectOnClick: (itemId) => {
+            setSelectedType(itemId);
+          }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col my-2 w-full p-5", children: [
+      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+    ] }),
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      ActivitySolutionContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) }) : null,
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      ActivityEvaluationRubricContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) }) : null
+  ] }, key);
+};
+var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
+
+// src/components/dividers/BlueVerticalDividerLine.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -6724,7 +6982,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -6734,9 +6992,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       InputGroup_default,
       {
         type,
@@ -6752,14 +7010,14 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -6774,14 +7032,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -6791,7 +7049,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -6802,7 +7060,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -6812,7 +7070,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -6820,8 +7078,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -6830,20 +7088,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "p",
         {
           className: `${selectedId === option.id ? "text-catchup-white bg-catchup-blue-500" : "text-catchup-gray-300"} transition-all duration-300 rounded-catchup-medium px-2 py-1`,
@@ -6857,57 +7115,57 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -6915,16 +7173,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -6932,79 +7190,79 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 var import_react_katex12 = require("react-katex");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/titles/BaseTitle.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
         totalItemCount,
         " ",
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -9455,6 +9713,7 @@ var retrieveActivityMethodologyOptionList = () => {
   ActivityEmptyContent,
   ActivityEvaluationRubricContent,
   ActivityLabel,
+  ActivityPreviewByAnswerData,
   ActivityPreviewByData,
   ActivitySolutionContent,
   ActivityTemplateLabel,