catchup-library-web 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -1,3 +1,22 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -629,13 +648,4614 @@ var ApproveButton = ({
   );
 };
 var ApproveButton_default = ApproveButton;
+
+// src/language/i18n.ts
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+i18n.use(initReactI18next);
+var i18n_default = i18n;
+
+// src/utilization/CatchtivityUtilization.ts
+var retrieveColorByScore = (score) => {
+  if (score <= 25) {
+    return "#F96666";
+  } else if (score > 25 && score <= 50) {
+    return "#f98d66";
+  } else if (score > 50 && score <= 75) {
+    return "#cbd357";
+  } else {
+    return "#ABD357";
+  }
+};
+var retrieveContentTypeOptionList = (textOnly) => {
+  if (textOnly) {
+    return [
+      {
+        id: "TEXT",
+        value: "TEXT",
+        text: i18n_default.t("TEXT"),
+        icon: "/icons/text-gray.png"
+      }
+    ];
+  } else {
+    return [
+      {
+        id: "TEXT",
+        value: "TEXT",
+        text: i18n_default.t("TEXT"),
+        icon: "/icons/text-gray.png"
+      },
+      {
+        id: "IMAGE",
+        value: "IMAGE",
+        text: i18n_default.t("IMAGE"),
+        icon: "/icons/image-gray.png"
+      },
+      {
+        id: "VIDEO",
+        value: "VIDEO",
+        text: i18n_default.t("VIDEO"),
+        icon: "/icons/video-gray.png"
+      },
+      {
+        id: "AUDIO",
+        value: "AUDIO",
+        text: i18n_default.t("AUDIO"),
+        icon: "/icons/audio-gray.png"
+      }
+    ];
+  }
+};
+var retrieveStatusOptionList = () => {
+  return [
+    {
+      value: "ACTIVE",
+      text: i18n_default.t("ACTIVE")
+    },
+    {
+      value: "PASSIVE",
+      text: i18n_default.t("PASSIVE")
+    }
+  ];
+};
+var retrieveDurationTypeOptionList = () => {
+  return [
+    { value: "NONE", text: i18n_default.t("NONE") },
+    { value: "ALL", text: i18n_default.t("ALL") },
+    { value: "EACH", text: i18n_default.t("EACH") }
+  ];
+};
+var retrieveDurationInMinutesOptionList = (durationType) => {
+  if (durationType === "ALL") {
+    return [
+      { value: 15, text: 15 },
+      { value: 30, text: 30 },
+      { value: 45, text: 45 },
+      { value: 60, text: 60 },
+      { value: 75, text: 75 },
+      { value: 90, text: 90 },
+      { value: 105, text: 105 },
+      { value: 120, text: 120 }
+    ];
+  } else if (durationType === "EACH") {
+    return [
+      { value: 1, text: 1 },
+      { value: 2, text: 2 },
+      { value: 3, text: 3 },
+      { value: 5, text: 5 },
+      { value: 10, text: 10 }
+    ];
+  }
+  return [];
+};
+var retrieveDurationInSecondsOptionList = () => {
+  return [
+    { value: 15, text: `15 ${i18n_default.t("seconds")}` },
+    { value: 20, text: `20 ${i18n_default.t("seconds")}` },
+    { value: 25, text: `25 ${i18n_default.t("seconds")}` },
+    { value: 30, text: `30 ${i18n_default.t("seconds")}` },
+    { value: 35, text: `35 ${i18n_default.t("seconds")}` },
+    { value: 40, text: `40 ${i18n_default.t("seconds")}` },
+    { value: 45, text: `45 ${i18n_default.t("seconds")}` }
+  ];
+};
+var retrieveTaxonomyType = () => {
+  return [
+    {
+      value: "BLOOM",
+      text: i18n_default.t("BLOOM")
+    }
+  ];
+};
+var retrieveTaxonomyGroupName = () => {
+  return [
+    {
+      type: "BLOOM",
+      value: "BLOOM",
+      text: i18n_default.t("BLOOM")
+    }
+  ];
+};
+var retrieveTaxonomyName = () => {
+  return [
+    {
+      stage: 1,
+      groupName: "BLOOM",
+      value: "REMEMBER",
+      text: i18n_default.t("REMEMBER")
+    },
+    {
+      stage: 2,
+      groupName: "BLOOM",
+      value: "UNDERSTAND",
+      text: i18n_default.t("UNDERSTAND")
+    },
+    {
+      stage: 3,
+      groupName: "BLOOM",
+      value: "APPLY",
+      text: i18n_default.t("APPLY")
+    },
+    {
+      stage: 4,
+      groupName: "BLOOM",
+      value: "ANALYZE",
+      text: i18n_default.t("ANALYZE")
+    },
+    {
+      stage: 5,
+      groupName: "BLOOM",
+      value: "EVALUATE",
+      text: i18n_default.t("EVALUATE")
+    },
+    {
+      stage: 6,
+      groupName: "BLOOM",
+      value: "CREATE",
+      text: i18n_default.t("CREATE")
+    }
+  ];
+};
+var constructInputWithSpecialExpressionList = (inputText) => {
+  const inputPartList = [];
+  if (!inputText) return [];
+  const splittedBold = inputText.split("**");
+  let isBold = false;
+  for (let i = 0; i < splittedBold.length; i++) {
+    let isUnderline = false;
+    const splittedUnderline = splittedBold[i].split("__");
+    for (let j = 0; j < splittedUnderline.length; j++) {
+      let isEquation = false;
+      const splittedEquation = splittedUnderline[j].split("`");
+      for (let k = 0; k < splittedEquation.length; k++) {
+        inputPartList.push({
+          value: splittedEquation[k],
+          isEquation,
+          isUnderline,
+          isBold
+        });
+        isEquation = !isEquation;
+      }
+      isUnderline = !isUnderline;
+    }
+    isBold = !isBold;
+  }
+  return inputPartList;
+};
+var retrieveStandardExamTypeOptionList = () => {
+  return [
+    { value: "AYT", text: "AYT" },
+    { value: "TYT", text: "TYT" },
+    { value: "LGS", text: "LGS" }
+  ];
+};
+var retrieveStandardExamTypeIcon = (baseReportType) => {
+  if (baseReportType === "TYT") {
+    return "/icons/tyt.png";
+  } else if (baseReportType === "AYT") {
+    return "/icons/ayt.png";
+  } else if (baseReportType === "LGS") {
+    return "/icons/lgs.png";
+  }
+};
+var retrieveCoterieTypeFromStandardExamCoterieType = (standardExamType, standardExamCoterieType) => {
+  if (standardExamCoterieType === "TURKISH") {
+    return "TURKISH";
+  } else if (standardExamCoterieType === "SCIENCE") {
+    return "SCIENCE";
+  } else if ((standardExamType === "TYT" || standardExamType === "AYT") && standardExamCoterieType === "PHYSICS") {
+    return "PHYSICS";
+  } else if (standardExamType === "LGS" && standardExamCoterieType === "PHYSICS") {
+    return "SOCIAL_STUDIES";
+  } else if ((standardExamType === "TYT" || standardExamType === "AYT") && standardExamCoterieType === "CHEMISTRY") {
+    return "CHEMISTRY";
+  } else if (standardExamType === "LGS" && standardExamCoterieType === "CHEMISTRY") {
+    return "SOCIAL_STUDIES";
+  } else if ((standardExamType === "TYT" || standardExamType === "AYT") && standardExamCoterieType === "BIOLOGY") {
+    return "BIOLOGY";
+  } else if (standardExamType === "LGS" && standardExamCoterieType === "BIOLOGY") {
+    return "SOCIAL_STUDIES";
+  } else if ((standardExamType === "TYT" || standardExamType === "AYT") && standardExamCoterieType === "HISTORY") {
+    return "HISTORY";
+  } else if ((standardExamType === "TYT" || standardExamType === "AYT") && standardExamCoterieType === "GEOGRAPHY") {
+    return "GEOGRAPHY";
+  } else if (standardExamType === "LGS" && standardExamCoterieType === "HISTORY" || standardExamType === "LGS" && standardExamCoterieType === "GEOGRAPHY" || standardExamCoterieType === "REVOLUTION_HISTORY") {
+    return "SOCIAL_STUDIES";
+  } else if (standardExamCoterieType === "HISTORY_I" || standardExamCoterieType === "HISTORY_II") {
+    return "HISTORY";
+  } else if (standardExamCoterieType === "GEOGRAPHY_I" || standardExamCoterieType === "GEOGRAPHY_II") {
+    return "GEOGRAPHY";
+  } else if (standardExamCoterieType === "MATHEMATICS" || standardExamCoterieType === "GEOMETRY") {
+    return "MATHEMATICS";
+  } else if (standardExamCoterieType === "PHILOSOPHY" || standardExamCoterieType === "PHILOSOPHY_OR_CULTURE_AND_RELIGION_KNOWLEDGE") {
+    return "PHILOSOPHY";
+  } else if ((standardExamType === "TYT" || standardExamType === "AYT") && standardExamCoterieType === "CULTURE_AND_RELIGION_KNOWLEDGE") {
+    return "CULTURE_AND_RELIGION_KNOWLEDGE";
+  } else if (standardExamType === "LGS" && standardExamCoterieType === "CULTURE_AND_RELIGION_KNOWLEDGE") {
+    return "CULTURE_AND_RELIGION_KNOWLEDGE";
+  } else if (standardExamCoterieType === "ENGLISH") {
+    return "ENGLISH";
+  } else if (standardExamCoterieType === "LITERATURE") {
+    return "LITERATURE";
+  }
+};
+var retrieveStandardExamCoterieTypeOptionListByStandardExamType = (standardExamType) => {
+  if (standardExamType === "TYT") {
+    return retrieveStandardExamCoterieTypeOptionList().filter(
+      (item) => item.value === "TURKISH" || item.value === "HISTORY" || item.value === "GEOGRAPHY" || item.value === "PHILOSOPHY" || item.value === "CULTURE_AND_RELIGION_KNOWLEDGE" || item.value === "MATHEMATICS" || item.value === "GEOMETRY" || item.value === "PHYSICS" || item.value === "CHEMISTRY" || item.value === "BIOLOGY"
+    );
+  } else if (standardExamType === "AYT") {
+    return retrieveStandardExamCoterieTypeOptionList().filter(
+      (item) => item.value === "LITERATURE" || item.value === "HISTORY_I" || item.value === "HISTORY_II" || item.value === "GEOGRAPHY_I" || item.value === "GEOGRAPHY_II" || item.value === "PHILOSOPHY" || item.value === "PHILOSOPHY_OR_CULTURE_AND_RELIGION_KNOWLEDGE" || item.value === "MATHEMATICS" || item.value === "GEOMETRY" || item.value === "PHYSICS" || item.value === "CHEMISTRY" || item.value === "BIOLOGY" || item.value === "ENGLISH"
+    );
+  } else if (standardExamType === "LGS") {
+    return retrieveStandardExamCoterieTypeOptionList().filter(
+      (item) => item.value === "TURKISH" || item.value === "REVOLUTION_HISTORY" || item.value === "CULTURE_AND_RELIGION_KNOWLEDGE" || item.value === "MATHEMATICS" || item.value === "SCIENCE" || item.value === "ENGLISH"
+    );
+  } else return [];
+};
+var retrieveStandardExamCoterieTypeOptionList = () => {
+  return [
+    { value: "TURKISH", text: i18n_default.t("TURKISH") },
+    { value: "SCIENCE", text: i18n_default.t("SCIENCE") },
+    { value: "HISTORY", text: i18n_default.t("HISTORY") },
+    { value: "GEOGRAPHY", text: i18n_default.t("GEOGRAPHY") },
+    { value: "PHILOSOPHY", text: i18n_default.t("PHILOSOPHY") },
+    {
+      value: "CULTURE_AND_RELIGION_KNOWLEDGE",
+      text: i18n_default.t("CULTURE_AND_RELIGION_KNOWLEDGE")
+    },
+    { value: "MATHEMATICS", text: i18n_default.t("MATHEMATICS") },
+    { value: "GEOMETRY", text: i18n_default.t("GEOMETRY") },
+    { value: "PHYSICS", text: i18n_default.t("PHYSICS") },
+    { value: "CHEMISTRY", text: i18n_default.t("CHEMISTRY") },
+    { value: "BIOLOGY", text: i18n_default.t("BIOLOGY") },
+    { value: "LITERATURE", text: i18n_default.t("LITERATURE") },
+    { value: "HISTORY_I", text: i18n_default.t("HISTORY_I") },
+    { value: "HISTORY_II", text: i18n_default.t("HISTORY_II") },
+    { value: "GEOGRAPHY_I", text: i18n_default.t("GEOGRAPHY_I") },
+    { value: "GEOGRAPHY_II", text: i18n_default.t("GEOGRAPHY_II") },
+    {
+      value: "PHILOSOPHY_OR_CULTURE_AND_RELIGION_KNOWLEDGE",
+      text: i18n_default.t("PHILOSOPHY_OR_CULTURE_AND_RELIGION_KNOWLEDGE")
+    },
+    { value: "ENGLISH", text: i18n_default.t("ENGLISH") },
+    { value: "REVOLUTION_HISTORY", text: i18n_default.t("REVOLUTION_HISTORY") }
+  ];
+};
+var retrieveValidationRequirementList_AYT = () => {
+  return [
+    {
+      value: "LITERATURE",
+      count: 24
+    },
+    {
+      value: "HISTORY_I",
+      count: 10
+    },
+    {
+      value: "HISTORY_II",
+      count: 11
+    },
+    {
+      value: "GEOGRAPHY_I",
+      count: 6
+    },
+    {
+      value: "GEOGRAPHY_II",
+      count: 11
+    },
+    {
+      value: "PHILOSOPHY",
+      count: 12
+    },
+    {
+      value: "PHILOSOPHY_OR_CULTURE_AND_RELIGION_KNOWLEDGE",
+      count: 6
+    },
+    {
+      value: "MATHEMATICS",
+      count: 30
+    },
+    {
+      value: "GEOMETRY",
+      count: 10
+    },
+    {
+      value: "PHYSICS",
+      count: 14
+    },
+    {
+      value: "CHEMISTRY",
+      count: 13
+    },
+    {
+      value: "BIOLOGY",
+      count: 13
+    },
+    {
+      value: "ENGLISH",
+      count: 80
+    }
+  ];
+};
+var retrieveValidationRequirementList_TYT = () => {
+  return [
+    {
+      value: "TURKISH",
+      count: 40
+    },
+    {
+      value: "HISTORY",
+      count: 5
+    },
+    {
+      value: "GEOGRAPHY",
+      count: 5
+    },
+    {
+      value: "PHILOSOPHY",
+      count: 5
+    },
+    {
+      value: "CULTURE_AND_RELIGION_KNOWLEDGE",
+      count: 5
+    },
+    {
+      value: "MATHEMATICS",
+      count: 30
+    },
+    {
+      value: "GEOMETRY",
+      count: 10
+    },
+    {
+      value: "PHYSICS",
+      count: 7
+    },
+    {
+      value: "CHEMISTRY",
+      count: 7
+    },
+    {
+      value: "BIOLOGY",
+      count: 6
+    }
+  ];
+};
+var retrieveValidationRequirementList_LGS = () => {
+  return [
+    {
+      value: "TURKISH",
+      count: 20
+    },
+    {
+      value: "REVOLUTION_HISTORY",
+      count: 10
+    },
+    {
+      value: "CULTURE_AND_RELIGION_KNOWLEDGE",
+      count: 10
+    },
+    {
+      value: "MATHEMATICS",
+      count: 20
+    },
+    {
+      value: "SCIENCE",
+      count: 20
+    },
+    {
+      value: "ENGLISH",
+      count: 10
+    }
+  ];
+};
+var retrieveValidationRequirementList = (selectedStandardExamType) => {
+  if (selectedStandardExamType === "TYT") {
+    return retrieveValidationRequirementList_TYT();
+  } else if (selectedStandardExamType === "AYT") {
+    return retrieveValidationRequirementList_AYT();
+  } else if (selectedStandardExamType === "LGS") {
+    return retrieveValidationRequirementList_LGS();
+  }
+  return [];
+};
+var constructActivityItemListWithSolutionForAI = (bodyMap, materialMap, type, imageContentList) => {
+  const itemList = [];
+  Object.keys(bodyMap).forEach((key) => {
+    const bodyItem = bodyMap[key];
+    if (bodyItem.type === "IMAGE") {
+      if (imageContentList && imageContentList.length > 0) {
+        const foundImageContent = imageContentList.find(
+          (imageContent) => imageContent.url === bodyItem.value
+        );
+        itemList.push({
+          type: "text",
+          text: foundImageContent.content
+        });
+      } else {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      }
+    } else {
+      itemList.push({
+        type: "text",
+        text: bodyItem.value.replaceAll("@@", "___________")
+      });
+    }
+  });
+  if (type === "ORDERING") {
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_order")}: `
+      });
+      Object.keys(materialMap).forEach((key) => {
+        itemList.push({
+          type: "text",
+          text: materialMap[key]
+        });
+      });
+    }
+  } else if (type === "DROPDOWN") {
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_blanks")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        itemList.push({
+          type: "text",
+          text: `${i18n_default.t("blank")} ${index + 1}: ${Object.keys(materialMap[key])[0]}`
+        });
+      });
+    }
+  } else if (type === "MCSA") {
+    if (Object.keys(materialMap).length > 0) {
+      const answer = Object.keys(materialMap)[0];
+      materialMap[answer].forEach((option) => {
+        itemList.push({
+          type: "text",
+          text: option
+        });
+      });
+      materialMap[answer].forEach((option) => {
+        if (option === answer) {
+          itemList.push({
+            type: "text",
+            text: `[${i18n_default.t("answer").toUpperCase()}]${option}`
+          });
+        }
+      });
+    }
+  } else if (type === "MCMA") {
+    if (Object.keys(materialMap).length > 0) {
+      const answer = Object.keys(materialMap)[0];
+      materialMap[answer].forEach((option) => {
+        itemList.push({
+          type: "text",
+          text: option
+        });
+      });
+      const splittedTextList = answer.split("\xA7");
+      materialMap[answer].forEach((option) => {
+        if (splittedTextList.includes(option)) {
+          itemList.push({
+            type: "text",
+            text: `[${i18n_default.t("answer").toUpperCase()}]${option}`
+          });
+        }
+      });
+    }
+  } else if (type === "MATCHING") {
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_matching")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        const matchingKey = Object.keys(materialMap[key])[0];
+        const matchingValue = materialMap[key][matchingKey];
+        itemList.push({
+          type: "text",
+          text: `${matchingKey}: ${matchingValue}`
+        });
+      });
+    }
+  } else if (type === "GROUPING") {
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_grouping")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        let text = `${i18n_default.t("group")} ${index + 1}: `;
+        itemList.push({
+          type: "text",
+          text
+        });
+        const groupName = Object.keys(materialMap[key])[0];
+        let currentText = "";
+        materialMap[key][groupName].forEach((item) => {
+          currentText += `${item}, `;
+        });
+        currentText = currentText.substring(0, currentText.length - 2);
+        itemList.push({
+          type: "text",
+          text: `${groupName}: ${currentText}`
+        });
+      });
+    }
+  } else if (type === "FILL_IN_THE_BLANKS") {
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_blanks")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        materialMap[key].forEach((item) => {
+          itemList.push({
+            type: "text",
+            text: `${i18n_default.t("blank")} ${index + 1}: ${item}`
+          });
+        });
+      });
+    }
+  } else if (type === "OPEN_ENDED") {
+  } else if (type === "TRUE_FALSE") {
+    if (materialMap.trueList && Object.keys(materialMap.trueList).length > 0) {
+      materialMap.trueList.forEach((item) => {
+        itemList.push({
+          type: "text",
+          text: `[${i18n_default.t("correct").toUpperCase()}]${item}`
+        });
+      });
+    }
+    if (materialMap.falseList && Object.keys(materialMap.falseList).length > 0) {
+      materialMap.falseList.forEach((item) => {
+        itemList.push({
+          type: "text",
+          text: `[${i18n_default.t("incorrect").toUpperCase()}]${item}`
+        });
+      });
+    }
+  }
+  return itemList;
+};
+var constructActivityItemListWithAnswersForAI = (bodyMap, materialMap, type) => {
+  const itemList = [];
+  if (type === "ORDERING") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value
+        });
+      }
+    });
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_order")}: `
+      });
+      Object.keys(materialMap).forEach((key) => {
+        itemList.push({
+          type: "text",
+          text: materialMap[key]
+        });
+      });
+    }
+  } else if (type === "DROPDOWN") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value.replaceAll("@@", "___________")
+        });
+      }
+    });
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_blanks")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        itemList.push({
+          type: "text",
+          text: `${index + 1}. ${Object.keys(materialMap[key])[0]}`
+        });
+      });
+    }
+  } else if (type === "MCSA") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value
+        });
+      }
+    });
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_answer")}: `
+      });
+      Object.keys(materialMap).forEach((key) => {
+        itemList.push({
+          type: "text",
+          text: key
+        });
+      });
+    }
+  } else if (type === "MCMA") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value
+        });
+      }
+    });
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_answers")}: `
+      });
+      const splittedTextList = Object.keys(materialMap)[0].split("\xA7");
+      splittedTextList.forEach((item) => {
+        const parsedItemList = JSON.parse(item);
+        for (const parsedItem of parsedItemList) {
+          itemList.push({
+            type: "text",
+            text: parsedItem
+          });
+        }
+      });
+    }
+  } else if (type === "MATCHING") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value
+        });
+      }
+    });
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_answers")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        itemList.push({
+          type: "text",
+          text: `${i18n_default.t("match")} ${index + 1}:`
+        });
+        itemList.push({
+          type: "text",
+          text: `${key}: ${materialMap[key]}`
+        });
+      });
+    }
+  } else if (type === "GROUPING") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value
+        });
+      }
+    });
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_answers")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        let text = `${i18n_default.t("group")} ${index + 1}: `;
+        itemList.push({
+          type: "text",
+          text
+        });
+        const groupName = key;
+        let currentText = "";
+        materialMap[groupName].forEach((item) => {
+          currentText += `${item}, `;
+        });
+        currentText = currentText.substring(0, currentText.length - 2);
+        itemList.push({
+          type: "text",
+          text: `${groupName}: [${currentText}]`
+        });
+      });
+    }
+  } else if (type === "FILL_IN_THE_BLANKS") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value.replaceAll("@@", "___________")
+        });
+      }
+    });
+    if (Object.keys(materialMap).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_blanks")}: `
+      });
+      Object.keys(materialMap).forEach((key, index) => {
+        JSON.parse(materialMap[key]).forEach((item) => {
+          itemList.push({
+            type: "text",
+            text: `${index + 1}. ${item}`
+          });
+        });
+      });
+    }
+  } else if (type === "OPEN_ENDED") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value
+        });
+      }
+    });
+  } else if (type === "TRUE_FALSE") {
+    Object.keys(bodyMap).forEach((key) => {
+      const bodyItem = JSON.parse(bodyMap[key]);
+      if (bodyItem.type === "IMAGE") {
+        itemList.push({
+          type: "image_url",
+          imageUrl: bodyItem.value
+        });
+      } else {
+        itemList.push({
+          type: "text",
+          text: bodyItem.value
+        });
+      }
+    });
+    if (materialMap.trueList && Object.keys(materialMap.trueList).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("correct_answers")}: `
+      });
+      materialMap.trueList.forEach((item) => {
+        itemList.push({
+          type: "text",
+          text: item
+        });
+      });
+    }
+    if (materialMap.falseList && Object.keys(materialMap.falseList).length > 0) {
+      itemList.push({
+        type: "text",
+        text: `${i18n_default.t("incorrect_answers")}: `
+      });
+      materialMap.falseList.forEach((item) => {
+        itemList.push({
+          type: "text",
+          text: item
+        });
+      });
+    }
+  }
+  return itemList;
+};
+var retrieveActivityTemplateDTOOptionList = (activityTemplateSet) => {
+  return activityTemplateSet.map((activityTemplateDTO) => ({
+    id: activityTemplateDTO.id,
+    value: activityTemplateDTO.id,
+    text: i18n_default.t(activityTemplateDTO.type)
+  }));
+};
+var retrieveDefaultOrderingDataMap = (orderingMaterialMap) => {
+  const dataMap = {};
+  Object.keys(orderingMaterialMap).sort(() => 0.5 - Math.random()).forEach((key, index) => {
+    dataMap[index] = key;
+  });
+  return dataMap;
+};
+var retrieveDefaultDropdownMap = (dropdownMaterialMap) => {
+  const dataMap = {};
+  Object.keys(dropdownMaterialMap).forEach((key) => {
+    dataMap[key] = "DEFAULT_OPTION";
+  });
+  return dataMap;
+};
+var retrieveDefaultMCSAMap = (MCSAMaterialMap) => {
+  const dataMap = {};
+  Object.keys(MCSAMaterialMap).forEach((key, index) => {
+    dataMap[key] = "ANSWER_KEY";
+  });
+  return dataMap;
+};
+var retrieveDefaultMCMAMap = (MCMAMaterialMap) => {
+  const dataMap = {};
+  Object.keys(MCMAMaterialMap).forEach((key, index) => {
+    dataMap[key] = [];
+  });
+  return dataMap;
+};
+var retrieveDefaultMatchingMap = (matchingMaterialMap) => {
+  const dataMap = {};
+  Object.keys(matchingMaterialMap).forEach((key, index) => {
+    dataMap[key] = "";
+  });
+  return dataMap;
+};
+var retrieveDefaultGroupingMap = (groupingMaterialMap) => {
+  const dataMap = {};
+  Object.keys(groupingMaterialMap).forEach((key, index) => {
+    dataMap[key] = [];
+  });
+  return dataMap;
+};
+var retrieveDefaultFillInTheBlanksMap = (fillInTheBlanksMaterialMap) => {
+  const dataMap = {};
+  Object.keys(fillInTheBlanksMaterialMap).forEach((key) => {
+    dataMap[key] = "";
+  });
+  return dataMap;
+};
+var retrieveDefaultOpenEndedMap = () => {
+  return { ANSWER: "" };
+};
+var retrieveDefaultTrueFalseMap = () => {
+  return { trueList: [], falseList: [] };
+};
+var retrieveCurrentDefaultDataMap = (activityTemplate, activityData) => {
+  const defaultDataMap = {
+    activityTemplateId: activityTemplate.id,
+    type: activityTemplate.type
+  };
+  if (activityTemplate.type === "ORDERING") {
+    defaultDataMap.answerMap = retrieveDefaultOrderingDataMap(
+      activityData.orderingMaterialMap
+    );
+  } else if (activityTemplate.type === "DROPDOWN") {
+    defaultDataMap.answerMap = retrieveDefaultDropdownMap(
+      activityData.dropdownMaterialMap
+    );
+  } else if (activityTemplate.type === "MCSA") {
+    defaultDataMap.answerMap = retrieveDefaultMCSAMap(
+      activityData.MCSAMaterialMap
+    );
+  } else if (activityTemplate.type === "MCMA") {
+    defaultDataMap.answerMap = retrieveDefaultMCMAMap(
+      activityData.MCMAMaterialMap
+    );
+  } else if (activityTemplate.type === "MATCHING") {
+    defaultDataMap.answerMap = retrieveDefaultMatchingMap(
+      activityData.matchingMaterialMap
+    );
+  } else if (activityTemplate.type === "GROUPING") {
+    defaultDataMap.answerMap = retrieveDefaultGroupingMap(
+      activityData.groupingMaterialMap
+    );
+  } else if (activityTemplate.type === "FILL_IN_THE_BLANKS") {
+    defaultDataMap.answerMap = retrieveDefaultFillInTheBlanksMap(
+      activityData.fillInTheBlanksMaterialMap
+    );
+  } else if (activityTemplate.type === "OPEN_ENDED") {
+    defaultDataMap.answerMap = retrieveDefaultOpenEndedMap();
+  } else if (activityTemplate.type === "TRUE_FALSE") {
+    defaultDataMap.answerMap = retrieveDefaultTrueFalseMap();
+  }
+  return defaultDataMap;
+};
+var constructActivityAnswerMap = (activityTemplate, activityData) => {
+  if (activityTemplate.type === "ORDERING") {
+    activityData.orderingMaterialMap = JSON.parse(
+      activityData.orderingMaterialMap
+    );
+  } else if (activityTemplate.type === "DROPDOWN") {
+    activityData.dropdownMaterialMap = JSON.parse(
+      activityData.dropdownMaterialMap
+    );
+  } else if (activityTemplate.type === "MCSA") {
+    activityData.MCSAMaterialMap = JSON.parse(activityData.MCSAMaterialMap);
+  } else if (activityTemplate.type === "MCMA") {
+    activityData.MCMAMaterialMap = JSON.parse(activityData.MCMAMaterialMap);
+  } else if (activityTemplate.type === "MATCHING") {
+    activityData.matchingMaterialMap = JSON.parse(
+      activityData.matchingMaterialMap
+    );
+  } else if (activityTemplate.type === "GROUPING") {
+    activityData.groupingMaterialMap = JSON.parse(
+      activityData.groupingMaterialMap
+    );
+  } else if (activityTemplate.type === "FILL_IN_THE_BLANKS") {
+    activityData.fillInTheBlanksMaterialMap = JSON.parse(
+      activityData.fillInTheBlanksMaterialMap
+    );
+  } else if (activityTemplate.type === "OPEN_ENDED") {
+    activityData.openEndedMaterialMap = {};
+  } else if (activityTemplate.type === "TRUE_FALSE") {
+    activityData.trueFalseMaterialMap = { trueList: [], falseList: [] };
+  }
+  return retrieveCurrentDefaultDataMap(activityTemplate, activityData);
+};
+var ignoreMathematicalExpression = (inputText) => {
+  return inputText.replaceAll("{", "").replaceAll("}", "").replaceAll("_", "").replaceAll("^", "").replaceAll("\\frac", "").replaceAll("\\text", "").replaceAll("\\sqrt", "");
+};
+var checkIfAnswerIsEmpty = (answer) => {
+  const { data } = answer;
+  if (data && data.length > 0) {
+    const foundAnswer = data[0];
+    const { type, answerMap } = foundAnswer;
+    if (type === "ORDERING") {
+      return false;
+    } else if (type === "DROPDOWN") {
+      for (const key of Object.keys(answerMap)) {
+        if (answerMap[key] !== "DEFAULT_OPTION") {
+          return false;
+        }
+      }
+    } else if (type === "MCSA") {
+      const key = Object.keys(answerMap)[0];
+      if (answerMap[key] !== "ANSWER_KEY") {
+        return false;
+      }
+    } else if (type === "MCMA") {
+      const key = Object.keys(answerMap)[0];
+      if (answerMap[key].length !== 0) {
+        return false;
+      }
+    } else if (type === "MATCHING") {
+      for (const key of Object.keys(answerMap)) {
+        if (answerMap[key]) {
+          return false;
+        }
+      }
+    } else if (type === "GROUPING") {
+      for (const key of Object.keys(answerMap)) {
+        if (answerMap[key].length !== 0) {
+          return false;
+        }
+      }
+    } else if (type === "FILL_IN_THE_BLANKS") {
+      for (const key of Object.keys(answerMap)) {
+        if (answerMap[key]) {
+          return false;
+        }
+      }
+    } else if (type === "OPEN_ENDED") {
+      const key = Object.keys(answerMap)[0];
+      if (answerMap[key]) {
+        return false;
+      }
+    } else if (type === "TRUE_FALSE") {
+      return answerMap.trueList.length === 0 && answerMap.falseList.length === 0;
+    }
+  }
+  return true;
+};
+var constructActivityAnswerStateList = (answerList, activityList) => {
+  const stateList = [];
+  activityList.forEach((activity, index) => {
+    stateList.push({
+      index,
+      id: activity.id,
+      state: checkActivityAnswerState(answerList, activity)
+    });
+  });
+  return stateList;
+};
+var retrieveActivityAnswerFromAnswerList = (answerList, activity) => {
+  return answerList.find(
+    (answer) => parseFloat(answer.activityDTO.id) === parseFloat(activity.id)
+  );
+};
+var checkActivityAnswerState = (answerList, activity) => {
+  const activityAnswer = retrieveActivityAnswerFromAnswerList(
+    answerList,
+    activity
+  );
+  if (!activityAnswer) {
+    return "NOT_EXISTS";
+  }
+  const { data } = activityAnswer;
+  if (!data) return "NOT_EXISTS";
+  const parsedData = JSON.parse(data);
+  if (parsedData.filter((item) => !item.isEmpty).length === parsedData.length) {
+    return "ANSWERED";
+  } else {
+    return "EMPTY";
+  }
+};
+var findBestFitActivity = (activity, individualModelList, outcomeModelList) => {
+  const { activityTemplateDTOList, data, coterieType, categoryIdList } = activity;
+  const parsedData = JSON.parse(data);
+  const {
+    orderingTaxonomyMap,
+    dropdownTaxonomyMap,
+    MCSATaxonomyMap,
+    MCMATaxonomyMap,
+    matchingTaxonomyMap,
+    groupingTaxonomyMap,
+    fillInTheBlanksTaxonomyMap,
+    openEndedTaxonomyMap,
+    trueFalseTaxonomyMap
+  } = parsedData;
+  const taxonomyMap = {};
+  if (orderingTaxonomyMap) {
+    taxonomyMap["orderingTaxonomyMap"] = JSON.parse(orderingTaxonomyMap);
+  }
+  if (dropdownTaxonomyMap) {
+    taxonomyMap["dropdownTaxonomyMap"] = JSON.parse(dropdownTaxonomyMap);
+  }
+  if (MCSATaxonomyMap) {
+    taxonomyMap["MCSATaxonomyMap"] = JSON.parse(MCSATaxonomyMap);
+  }
+  if (MCMATaxonomyMap) {
+    taxonomyMap["MCMATaxonomyMap"] = JSON.parse(MCMATaxonomyMap);
+  }
+  if (matchingTaxonomyMap) {
+    taxonomyMap["matchingTaxonomyMap"] = JSON.parse(matchingTaxonomyMap);
+  }
+  if (groupingTaxonomyMap) {
+    taxonomyMap["groupingTaxonomyMap"] = JSON.parse(groupingTaxonomyMap);
+  }
+  if (fillInTheBlanksTaxonomyMap) {
+    taxonomyMap["fillInTheBlanksTaxonomyMap"] = JSON.parse(
+      fillInTheBlanksTaxonomyMap
+    );
+  }
+  if (trueFalseTaxonomyMap) {
+    taxonomyMap["trueFalseTaxonomyMap"] = JSON.parse(trueFalseTaxonomyMap);
+  }
+  if (openEndedTaxonomyMap) {
+    taxonomyMap["openEndedTaxonomyMap"] = JSON.parse(openEndedTaxonomyMap);
+  }
+  let coterieField = "VERBAL";
+  if (coterieType === "MATHEMATICS" || coterieType === "BIOLOGY" || coterieType === "PHYSICS" || coterieType === "CHEMISTRY" || coterieType === "SCIENCE") {
+    coterieField = "NUMERIC";
+  }
+  let foundModel;
+  let isOutcomeFound = true;
+  if (categoryIdList.length > 0) {
+    const categoryId = categoryIdList[0];
+    foundModel = outcomeModelList.find(
+      (outcomeModel) => outcomeModel.outcomeId === categoryId
+    );
+    if (!foundModel) isOutcomeFound = false;
+  } else {
+    isOutcomeFound = false;
+  }
+  if (!isOutcomeFound) {
+    foundModel = individualModelList.find(
+      (individualModel) => individualModel.coterieField === coterieField
+    );
+  }
+  let bestScore = Number.MAX_SAFE_INTEGER;
+  let bestActivityTemplate;
+  let bestActivityTemplateList = [];
+  const activityTemplateValueMap = {};
+  for (const activityTemplateDTO of activityTemplateDTOList) {
+    const { type } = activityTemplateDTO;
+    let currentTaxonomyMap;
+    if (type === "ORDERING") {
+      currentTaxonomyMap = taxonomyMap["orderingTaxonomyMap"];
+    } else if (type === "DROPDOWN") {
+      currentTaxonomyMap = taxonomyMap["dropdownTaxonomyMap"];
+    } else if (type === "MCSA") {
+      currentTaxonomyMap = taxonomyMap["MCSATaxonomyMap"];
+    } else if (type === "MCMA") {
+      currentTaxonomyMap = taxonomyMap["MCMATaxonomyMap"];
+    } else if (type === "MATCHING") {
+      currentTaxonomyMap = taxonomyMap["matchingTaxonomyMap"];
+    } else if (type === "GROUPING") {
+      currentTaxonomyMap = taxonomyMap["groupingTaxonomyMap"];
+    } else if (type === "FILL_IN_THE_BLANKS") {
+      currentTaxonomyMap = taxonomyMap["fillInTheBlanksTaxonomyMap"];
+    } else if (type === "OPEN_ENDED") {
+      currentTaxonomyMap = taxonomyMap["openEndedTaxonomyMap"];
+    } else if (type === "TRUE_FALSE") {
+      currentTaxonomyMap = taxonomyMap["trueFalseTaxonomyMap"];
+    }
+    const {
+      type: taxonomyType,
+      groupName: taxonomyGroupName,
+      name: taxonomyName
+    } = currentTaxonomyMap;
+    const taxonomyString = taxonomyType.toLowerCase() + taxonomyGroupName.toLowerCase().charAt(0).toUpperCase() + taxonomyGroupName.toLowerCase().substring(1) + taxonomyName.toLowerCase().charAt(0).toUpperCase() + taxonomyName.toLowerCase().substring(1);
+    const currentTaxonomyScore = foundModel[taxonomyString];
+    const splittedTypeList = type.split("_");
+    let activityTemplateString = "";
+    for (let i = 0; i < splittedTypeList.length; i++) {
+      const currentType = splittedTypeList[i].toLowerCase();
+      if (i === 0) {
+        activityTemplateString += currentType;
+      } else {
+        activityTemplateString += currentType.charAt(0).toUpperCase() + currentType.substring(1);
+      }
+    }
+    const currentActivityTemplateScore = foundModel[activityTemplateString];
+    const currentScore = currentTaxonomyScore * currentActivityTemplateScore;
+    activityTemplateValueMap[type] = currentScore;
+    if (currentScore < bestScore) {
+      bestScore = currentScore;
+      bestActivityTemplate = type;
+      bestActivityTemplateList = [type];
+    } else if (currentScore === bestScore) {
+      bestActivityTemplateList.push(type);
+    }
+  }
+  return {
+    bestScore,
+    bestActivityTemplate,
+    bestActivityTemplateList,
+    activityTemplateValueMap
+  };
+};
+var retrieveContestTypeOptionList = () => {
+  return [
+    {
+      value: "QUIZ",
+      text: i18n_default.t("QUIZ")
+    }
+  ];
+};
+var retrieveFrequencyTypeOptionList = () => {
+  return [
+    {
+      value: "WEEKLY",
+      text: i18n_default.t("WEEKLY")
+    }
+  ];
+};
+var retrieveDistintCoterieTypeFromCatchtivityApplicationDTO = (catchtivityApplicationDTOList) => {
+  const coterieTypeList = [];
+  for (const catchtivityApplicationDTO of catchtivityApplicationDTOList) {
+    const { catchtivityDTO } = catchtivityApplicationDTO;
+    const { coterieType } = catchtivityDTO;
+    if (coterieTypeList.findIndex(
+      (foundCoterieType) => foundCoterieType === coterieType
+    ) === -1) {
+      coterieTypeList.push(coterieType);
+    }
+  }
+  return coterieTypeList;
+};
+var retrieveClockTimeLeft = (type, value, durationType, durationInMinutes, activityProgressDTOSet, activity) => {
+  if (type === "CATCHTIVITY" || type === "CATCHXAM" || type === "CONTEST") {
+    if (durationType === "ALL") {
+      return durationInMinutes ? durationInMinutes * 60 - retrieveTotalTimeSpentInSeconds(activityProgressDTOSet) : 0;
+    } else if (durationType === "EACH") {
+      return durationInMinutes ? durationInMinutes * 60 - retrieveEachTimeSpentInSeconds(activityProgressDTOSet, activity) : 0;
+    } else return 0;
+  } else if (type === "ACTIVITY") {
+    return value - retrieveEachTimeSpentInSeconds(activityProgressDTOSet, activity);
+  }
+  return 0;
+};
+var retrieveEachTimeSpentInSeconds = (activityProgressList, activity) => {
+  if (!activityProgressList || !activity) return 0;
+  const foundActivityProgress = activityProgressList.find(
+    (activityProgress) => parseFloat(activityProgress.activityDTO.id) === parseFloat(activity.id)
+  );
+  if (foundActivityProgress) {
+    return foundActivityProgress.timeSpent / 1e3;
+  }
+  return 0;
+};
+var retrieveTotalTimeSpentInSeconds = (activityProgressList) => {
+  let timeSpent = 0;
+  if (!activityProgressList) return 0;
+  activityProgressList.forEach((activityProgress) => {
+    timeSpent += activityProgress.timeSpent;
+  });
+  return timeSpent / 1e3;
+};
+var retrieveTotalTimeSpentInMinutes = (activityProgressList) => {
+  return retrieveTotalTimeSpentInSeconds(activityProgressList) / 60;
+};
+var parseContentMapFromData = (data) => {
+  return JSON.parse(data.contentMap);
+};
+var parseBodyMapFromData = (data, type) => {
+  if (type === "ORDERING") {
+    return JSON.parse(data.orderingBodyMap);
+  } else if (type === "DROPDOWN") {
+    return JSON.parse(data.dropdownBodyMap);
+  } else if (type === "MCSA") {
+    return JSON.parse(data.MCSABodyMap);
+  } else if (type === "MCMA") {
+    return JSON.parse(data.MCMABodyMap);
+  } else if (type === "MATCHING") {
+    return JSON.parse(data.matchingBodyMap);
+  } else if (type === "GROUPING") {
+    return JSON.parse(data.groupingBodyMap);
+  } else if (type === "FILL_IN_THE_BLANKS") {
+    return JSON.parse(data.fillInTheBlanksBodyMap);
+  } else if (type === "OPEN_ENDED") {
+    return JSON.parse(data.openEndedBodyMap);
+  } else if (type === "TRUE_FALSE") {
+    return JSON.parse(data.trueFalseBodyMap);
+  }
+};
+var parseMaterialMapFromData = (data, type) => {
+  if (type === "ORDERING") {
+    return JSON.parse(data.orderingMaterialMap);
+  } else if (type === "DROPDOWN") {
+    const dropdownMaterialMap = JSON.parse(data.dropdownMaterialMap);
+    Object.keys(dropdownMaterialMap).forEach((materialKey) => {
+      dropdownMaterialMap[materialKey] = JSON.parse(
+        dropdownMaterialMap[materialKey]
+      );
+      const answerKey = Object.keys(dropdownMaterialMap[materialKey])[0];
+      dropdownMaterialMap[materialKey][answerKey] = JSON.parse(
+        dropdownMaterialMap[materialKey][answerKey]
+      );
+    });
+    return dropdownMaterialMap;
+  } else if (type === "MCSA") {
+    const MCSAMaterialMap = JSON.parse(data.MCSAMaterialMap);
+    Object.keys(MCSAMaterialMap).forEach((key) => {
+      MCSAMaterialMap[key] = JSON.parse(MCSAMaterialMap[key]);
+    });
+    return MCSAMaterialMap;
+  } else if (type === "MCMA") {
+    const MCMAMaterialMap = JSON.parse(data.MCMAMaterialMap);
+    Object.keys(MCMAMaterialMap).forEach((key) => {
+      MCMAMaterialMap[key] = JSON.parse(MCMAMaterialMap[key]);
+    });
+    return MCMAMaterialMap;
+  } else if (type === "MATCHING") {
+    return JSON.parse(data.matchingMaterialMap);
+  } else if (type === "GROUPING") {
+    const groupingMaterialMap = JSON.parse(data.groupingMaterialMap);
+    Object.keys(groupingMaterialMap).forEach((key) => {
+      groupingMaterialMap[key] = JSON.parse(groupingMaterialMap[key]);
+    });
+    return groupingMaterialMap;
+  } else if (type === "FILL_IN_THE_BLANKS") {
+    return JSON.parse(data.fillInTheBlanksMaterialMap);
+  } else if (type === "OPEN_ENDED") {
+    return {};
+  } else if (type === "TRUE_FALSE") {
+    const trueFalseMaterialMap = JSON.parse(data.trueFalseMaterialMap);
+    Object.keys(trueFalseMaterialMap).forEach((key) => {
+      trueFalseMaterialMap[key] = JSON.parse(trueFalseMaterialMap[key]);
+    });
+    return trueFalseMaterialMap;
+  }
+};
+
+// src/components/dividers/DividerLine.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var DividerLine = () => {
+  return /* @__PURE__ */ jsx9("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+};
+var DividerLine_default = DividerLine;
+
+// src/components/dividers/VerticalDividerLine.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var VerticalDividerLine = () => {
+  return /* @__PURE__ */ jsx10("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+};
+var VerticalDividerLine_default = VerticalDividerLine;
+
+// src/components/activities/body-content/ShowBodyMediaByContentType.tsx
+import { useState as useState8 } from "react";
+import Modal from "react-modal";
+import { InlineMath } from "react-katex";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var ShowBodyMediaByContentType = ({
+  index,
+  type,
+  value,
+  size
+}) => {
+  const [showFullScreen, setShowFullScreen] = useState8(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState8("");
+  const convertToPercentage = (size2) => {
+    if (size2 === "1/3") {
+      return "w-small-media";
+    } else if (size2 === "1/2") {
+      return "w-medium-media";
+    } else if (size2 === "1") {
+      return "w-large-media";
+    }
+  };
+  const retrieveValueParts = (value2) => {
+    let currentIndex = 0;
+    const valuePartList = [];
+    let copyValue = JSON.parse(JSON.stringify(value2));
+    currentIndex = 0;
+    let checkText = "--TEXT--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      let textValue = copyValue.substring(0, firstIndex);
+      let addition = 0;
+      if (textValue.trim() !== "") {
+        if ((textValue.split("__").length - 1) % 2 === 1) {
+          textValue = textValue + "__";
+          addition += 2;
+        }
+        if ((textValue.split("**").length - 1) % 2 === 1) {
+          textValue = textValue + "**";
+          addition += 2;
+        }
+        if ((textValue.split("`").length - 1) % 2 === 1) {
+          textValue = textValue + "`";
+          addition += 1;
+        }
+        valuePartList.push(
+          /* @__PURE__ */ jsx11(
+            "span",
+            {
+              className: "text-xl whitespace-pre-wrap",
+              children: constructInputWithSpecialExpressionList(textValue).map(
+                (inputPart, index2) => /* @__PURE__ */ jsx11(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx11("span", { className: "text-2xl", children: /* @__PURE__ */ jsx11(InlineMath, { math: inputPart.value }) }) : inputPart.value
+                  },
+                  index2
+                )
+              )
+            },
+            `${index}-${currentIndex}`
+          )
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length - addition;
+      currentIndex++;
+      valuePartList.push(
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: `text-xl font-bold whitespace-pre-wrap`,
+            children: constructInputWithSpecialExpressionList(
+              copyValue.substring(firstIndex + checkText.length, secondIndex)
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx11(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx11("span", { className: "text-2xl", children: /* @__PURE__ */ jsx11(InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            ))
+          },
+          `${index}-${currentIndex}`
+        )
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+      if ((copyValue.split("`").length - 1) % 2 === 1) {
+        copyValue = "`" + copyValue;
+      }
+    }
+    checkText = "--IMAGE--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      const textValue = copyValue.substring(0, firstIndex);
+      if (textValue.trim() !== "") {
+        currentIndex++;
+        valuePartList.push(
+          /* @__PURE__ */ jsx11("p", { className: "text-xl", children: textValue }, `${index}_${currentIndex}`)
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length;
+      const imageSource = copyValue.substring(
+        firstIndex + checkText.length,
+        secondIndex
+      );
+      currentIndex++;
+      valuePartList.push(
+        /* @__PURE__ */ jsxs7("div", { className: "relative w-[200px]", children: [
+          /* @__PURE__ */ jsx11(
+            BaseImage_default,
+            {
+              src: imageSource,
+              alt: "media",
+              size: "custom",
+              className: "rounded-catchup-xlarge"
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              className: "absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
+              onClick: (event) => {
+                setShowFullScreen(true);
+                setSelectedFullScreenItem(imageSource);
+              },
+              children: /* @__PURE__ */ jsx11(
+                BaseImage_default,
+                {
+                  src: "/icons/arrow-up.png",
+                  alt: "arrow-up",
+                  size: "custom",
+                  className: "w-full"
+                }
+              )
+            }
+          )
+        ] }, `${index}-${currentIndex}`)
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+    }
+    checkText = "--VIDEO--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      const textValue = copyValue.substring(0, firstIndex);
+      if (textValue.trim() !== "") {
+        currentIndex++;
+        valuePartList.push(
+          /* @__PURE__ */ jsx11("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length;
+      const videoSource = copyValue.substring(
+        firstIndex + checkText.length,
+        secondIndex
+      );
+      currentIndex++;
+      valuePartList.push(
+        /* @__PURE__ */ jsx11(
+          "video",
+          {
+            src: videoSource,
+            className: `w-[200px] rounded-catchup-xlarge`
+          },
+          `${index}-${currentIndex}`
+        )
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+    }
+    checkText = "--AUDIO--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      const textValue = copyValue.substring(0, firstIndex);
+      if (textValue.trim() !== "") {
+        currentIndex++;
+        valuePartList.push(
+          /* @__PURE__ */ jsx11("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length;
+      const audioSource = copyValue.substring(
+        firstIndex + checkText.length,
+        secondIndex
+      );
+      currentIndex++;
+      valuePartList.push(
+        /* @__PURE__ */ jsx11(
+          "audio",
+          {
+            src: audioSource,
+            className: `w-[200px] rounded-catchup-xlarge`
+          },
+          `${index}-${currentIndex}`
+        )
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+    }
+    if (copyValue.trim() !== "") {
+      currentIndex++;
+      if ((copyValue.split("__").length - 1) % 2 === 1) {
+        copyValue = "__" + copyValue;
+      }
+      if ((copyValue.split("**").length - 1) % 2 === 1) {
+        copyValue = "**" + copyValue;
+      }
+      if ((copyValue.split("`").length - 1) % 2 === 1) {
+        copyValue = "`" + copyValue;
+      }
+      const regexMatchImageText = copyValue.match(/<image>([\s\S]*?)<\/image>/);
+      if (regexMatchImageText) {
+        const imageText = regexMatchImageText[1];
+        valuePartList.push(
+          /* @__PURE__ */ jsxs7("div", { className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2", children: [
+            /* @__PURE__ */ jsx11("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx11("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+            /* @__PURE__ */ jsx11(
+              "span",
+              {
+                className: "text-xl whitespace-pre-wrap ",
+                children: imageText
+              },
+              `${index}-${currentIndex}`
+            )
+          ] })
+        );
+      } else {
+        valuePartList.push(
+          /* @__PURE__ */ jsx11(
+            "span",
+            {
+              className: "text-xl whitespace-pre-wrap",
+              children: constructInputWithSpecialExpressionList(copyValue).map(
+                (inputPart, index2) => /* @__PURE__ */ jsx11(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx11("span", { className: "text-2xl", children: /* @__PURE__ */ jsx11(InlineMath, { math: inputPart.value }) }) : inputPart.value
+                  },
+                  index2
+                )
+              )
+            },
+            `${index}-${currentIndex}`
+          )
+        );
+      }
+    }
+    return valuePartList;
+  };
+  const RenderShowFullScreenItem = () => {
+    return /* @__PURE__ */ jsx11(
+      Modal,
+      {
+        isOpen: showFullScreen,
+        onAfterOpen: () => {
+        },
+        onRequestClose: () => {
+          setShowFullScreen(false);
+          setSelectedFullScreenItem("");
+        },
+        style: {
+          content: {
+            top: "50%",
+            left: "50%",
+            right: "auto",
+            bottom: "auto",
+            marginRight: "-50%",
+            transform: "translate(-50%, -50%)",
+            padding: 0,
+            borderRadius: 20,
+            background: "",
+            border: "",
+            width: "900px",
+            maxHeight: "70%",
+            overflow: "auto"
+          },
+          overlay: {
+            background: "rgba(0, 0, 0, 0.6)"
+          }
+        },
+        contentLabel: "",
+        children: /* @__PURE__ */ jsxs7("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ jsx11("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx11(
+            BaseImage_default,
+            {
+              src: "/icons/cross-red.png",
+              alt: "cross-red",
+              size: "medium",
+              onClick: () => {
+                setShowFullScreen(false);
+                setSelectedFullScreenItem("");
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx11("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx11(
+            BaseImage_default,
+            {
+              src: selectedFullScreenItem,
+              alt: "selected-fullscreen-item",
+              size: "custom",
+              className: "w-full"
+            }
+          ) })
+        ] })
+      }
+    );
+  };
+  const RenderMainContent = () => {
+    if (type === "TEXT") {
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx11("span", { children: retrieveValueParts(value) }) });
+    } else if (type === "IMAGE") {
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: `${size ? `${convertToPercentage(size)}` : ""} rounded-catchup-xlarge relative`,
+          children: [
+            /* @__PURE__ */ jsx11(
+              BaseImage_default,
+              {
+                src: value,
+                alt: "body-image",
+                size: "custom",
+                className: "w-full rounded-catchup-xlarge"
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              "div",
+              {
+                className: "absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
+                onClick: () => {
+                  setShowFullScreen(true);
+                  setSelectedFullScreenItem(value);
+                },
+                children: /* @__PURE__ */ jsx11(
+                  BaseImage_default,
+                  {
+                    src: "/icons/arrow-up.png",
+                    alt: "arrow-up",
+                    size: "custom",
+                    className: "w-full"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ) });
+    } else if (type === "VIDEO") {
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx11(
+        "video",
+        {
+          src: value,
+          className: `${size ? `${convertToPercentage(size)}` : ""} rounded-catchup-xlarge`,
+          controls: true
+        }
+      ) });
+    } else if (type === "AUDIO") {
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx11("audio", { src: value, controls: true, className: `rounded-catchup-xlarge` }) });
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
+    RenderShowFullScreenItem(),
+    RenderMainContent()
+  ] }, index);
+};
+var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
+
+// src/components/activities/body-content/ActivityBodyContent.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ActivityBodyContent = ({
+  templateType,
+  bodyMap,
+  contentMap,
+  answerMap
+}) => {
+  let currentQQIndex = 0;
+  return /* @__PURE__ */ jsx12("div", { className: "flex flex-col justify-center items-center", children: Object.keys(bodyMap).map((key, index) => {
+    const body = JSON.parse(bodyMap[key]);
+    if (templateType === "DROPDOWN") {
+      while (body.value.includes("@@")) {
+        if (answerMap[currentQQIndex].trim() === "" || answerMap[currentQQIndex].trim() === "DEFAULT_OPTION") {
+          body.value = body.value.replace(
+            "@@",
+            `----(${currentQQIndex + 1})----`
+          );
+        } else {
+          if (contentMap["type"] === "TEXT") {
+            body.value = body.value.replace(
+              "@@",
+              `--TEXT--${answerMap[currentQQIndex]}--TEXT--`
+            );
+          } else if (contentMap["type"] === "IMAGE") {
+            body.value = body.value.replace(
+              "@@",
+              `--IMAGE--${answerMap[currentQQIndex]}--IMAGE--`
+            );
+          } else if (contentMap["type"] === "VIDEO") {
+            body.value = body.value.replace(
+              "@@",
+              `--VIDEO--${answerMap[currentQQIndex]}--VIDEO--`
+            );
+          } else if (contentMap["type"] === "AUDIO") {
+            body.value = body.value.replace(
+              "@@",
+              `--AUDIO--${answerMap[currentQQIndex]}--AUDIO--`
+            );
+          } else {
+            body.value = body.value.replace(
+              "@@",
+              answerMap[currentQQIndex]
+            );
+          }
+        }
+        currentQQIndex++;
+      }
+    } else if (templateType === "FILL_IN_THE_BLANKS") {
+      while (body.value.includes("@@")) {
+        if (answerMap[currentQQIndex].trim() === "") {
+          body.value = body.value.replace(
+            "@@",
+            `----(${currentQQIndex + 1})----`
+          );
+        } else {
+          if (contentMap["type"] === "TEXT") {
+            body.value = body.value.replace(
+              "@@",
+              `--TEXT--${answerMap[currentQQIndex]}--TEXT--`
+            );
+          } else if (contentMap["type"] === "IMAGE") {
+            body.value = body.value.replace(
+              "@@",
+              `--IMAGE--${answerMap[currentQQIndex]}--IMAGE--`
+            );
+          } else if (contentMap["type"] === "VIDEO") {
+            body.value = body.value.replace(
+              "@@",
+              `--VIDEO--${answerMap[currentQQIndex]}--VIDEO--`
+            );
+          } else if (contentMap["type"] === "AUDIO") {
+            body.value = body.value.replace(
+              "@@",
+              `--AUDIO--${answerMap[currentQQIndex]}--AUDIO--`
+            );
+          } else {
+            body.value = body.value.replace(
+              "@@",
+              answerMap[currentQQIndex]
+            );
+          }
+        }
+        currentQQIndex++;
+      }
+    }
+    return /* @__PURE__ */ jsx12(
+      ShowBodyMediaByContentType_default,
+      {
+        index,
+        type: body.type,
+        value: body.value,
+        size: body.size
+      }
+    );
+  }) });
+};
+var ActivityBodyContent_default = ActivityBodyContent;
+
+// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+import { InlineMath as InlineMath2 } from "react-katex";
+
+// src/components/groups/InputGroup.tsx
+import Select from "react-select";
+import { useEffect, useRef } from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var InputGroup = ({
+  type,
+  title,
+  defaultValue,
+  placeholder,
+  value,
+  onFocus,
+  onChange,
+  onClick,
+  onKeyDown,
+  optionList,
+  errorText,
+  multiple,
+  accept,
+  theme,
+  useMinHeight,
+  disabled,
+  limit
+}) => {
+  const textAreaRef = useRef(null);
+  useEffect(() => {
+    if (!textAreaRef) return;
+    if (!textAreaRef.current) return;
+    if (value) {
+      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+    } else {
+      textAreaRef.current.style.height = `44px`;
+    }
+  }, [textAreaRef, value]);
+  const retrieveNullableOptionList = () => {
+    if (!optionList) return [];
+    const currentOptionList = {
+      text: i18n_default.t("option_please_select"),
+      value: "DEFAULT_OPTION"
+    };
+    return [currentOptionList, ...optionList];
+  };
+  const convertOptionListToSelectComponent = (optionList2) => {
+    return optionList2.map((option) => ({
+      value: option.value,
+      label: option.text
+    }));
+  };
+  const handleTextAreaOnChange = (e) => {
+    if (!textAreaRef) return;
+    if (!textAreaRef.current) return;
+    textAreaRef.current.style.height = `30px`;
+    textAreaRef.current.style.height = `${e.target.scrollHeight + 6}px`;
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
+  const CheckboxInputGroup = () => {
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: "flex flex-row items-center gap-x-1 cursor-pointer",
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx13(
+            BaseImage_default,
+            {
+              src: value ? "/icons/checkbox.png" : "/icons/checkbox-empty.png",
+              alt: "checkbox",
+              size: "xsmall",
+              onClick: () => {
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx13("p", { className: "", children: title })
+        ]
+      }
+    );
+  };
+  const FileInputGroup = () => {
+    return /* @__PURE__ */ jsxs8("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx13("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          className: "w-full py-2 px-4 border border-catchup-gray-100 placeholder-catchup-gray-200 rounded-catchup-large text-black focus:outline-none focus:border-catchup-blue-400 focus:shadow-input",
+          type,
+          defaultValue,
+          placeholder,
+          value,
+          onChange,
+          onClick,
+          multiple,
+          accept
+        }
+      )
+    ] });
+  };
+  const DateInputGroup = () => {
+    return /* @__PURE__ */ jsxs8("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx13("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error" : theme === "red" ? "border-catchup-red bg-catchup-red text-catchup-white focus:border-catchup-red" : "border-catchup-gray-100 placeholder-catchup-gray-200 focus:border-catchup-blue-400"} rounded-catchup-large text-black focus:outline-none focus:shadow-input`,
+          type,
+          defaultValue,
+          placeholder,
+          value,
+          onChange,
+          disabled
+        }
+      )
+    ] });
+  };
+  const SearchableSelectInputGroup = () => {
+    return /* @__PURE__ */ jsxs8("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx13("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
+      /* @__PURE__ */ jsx13(
+        Select,
+        {
+          options: convertOptionListToSelectComponent(
+            retrieveNullableOptionList()
+          ),
+          className: `w-full`,
+          styles: {
+            control: (baseStyles, state) => __spreadProps(__spreadValues({}, baseStyles), {
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: 16,
+              borderColor: errorText ? "#ff6b6b" : theme === "red" ? "#ff6b6b" : state.isFocused ? "#73d7e6" : state.isActive ? "#d2dde1" : "#d2dde1",
+              backgroundColor: theme !== "red" ? "#ffffff" : "#ff6b6b",
+              paddingRight: 6,
+              paddingLeft: 6,
+              paddingTop: 2,
+              paddingBottom: 2,
+              outline: "none",
+              margin: 0,
+              text: theme === "red" ? "#ffffff" : "#55777f",
+              boxShadow: errorText ? "0px 0px 7px 0px rgba(255, 107, 107, 1)" : state.isFocused ? "0px 0px 7px 0px rgba(115, 215, 230, 100)" : "none",
+              "&:hover": {
+                outline: "none"
+              }
+            }),
+            menu: (baseStyles, state) => __spreadProps(__spreadValues({}, baseStyles), {
+              borderRadius: 16,
+              paddingTop: 10,
+              paddingBottom: 10,
+              boxShadow: "0px 0px 6px 0px rgba(0, 0, 0, 0.25)"
+            }),
+            option: (baseStyles, state) => __spreadProps(__spreadValues({}, baseStyles), {
+              color: state.isSelected ? "#2b3a41" : "#2b3a41",
+              backgroundColor: state.isSelected ? "#eaecf1" : "",
+              "&:hover": {
+                backgroundColor: "#eaecf1"
+              },
+              paddingLeft: 20,
+              paddingRight: 20
+            }),
+            dropdownIndicator: (baseStyles, state) => __spreadProps(__spreadValues({}, baseStyles), {
+              color: state.isFocused ? "#57c2d3" : "#55777f",
+              "&:hover": {
+                color: state.isFocused ? "#57c2d3" : "#55777f"
+              }
+            })
+          },
+          components: {
+            IndicatorSeparator: () => null
+          },
+          value: convertOptionListToSelectComponent(
+            retrieveNullableOptionList()
+          ).find((option) => option.value === value),
+          onChange: (target) => {
+            const event = { target };
+            onChange && onChange(event);
+          }
+        }
+      )
+    ] });
+  };
+  const TextAreaInputGroup = () => {
+    return /* @__PURE__ */ jsxs8("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx13("div", { children: title ? /* @__PURE__ */ jsx13("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ jsx13("div", { children: limit ? /* @__PURE__ */ jsxs8("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+          value.length,
+          " / ",
+          limit
+        ] }) : null })
+      ] }),
+      /* @__PURE__ */ jsx13(
+        "textarea",
+        {
+          ref: textAreaRef,
+          disabled,
+          className: `w-full ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
+          placeholder: errorText ? errorText : placeholder,
+          value,
+          onLoad: (e) => {
+            console.log(e);
+          },
+          onChange: handleTextAreaOnChange,
+          onFocus,
+          onKeyDown
+        }
+      )
+    ] });
+  };
+  const TextInputGroup = () => {
+    return /* @__PURE__ */ jsxs8("div", { className: "my-1 relative", children: [
+      title ? /* @__PURE__ */ jsx13("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          disabled,
+          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
+          type,
+          defaultValue,
+          placeholder: errorText ? errorText : placeholder,
+          value,
+          onChange,
+          onFocus,
+          onKeyDown
+        }
+      )
+    ] });
+  };
+  const RenderMainContent = () => {
+    if (type === "text" || type === "number") {
+      return TextInputGroup();
+    } else if (type === "textarea") {
+      return TextAreaInputGroup();
+    } else if (type === "password") {
+      return TextInputGroup();
+    } else if (type === "select") {
+      return SearchableSelectInputGroup();
+    } else if (type === "date" || type === "datetime-local") {
+      return DateInputGroup();
+    } else if (type === "file") {
+      return FileInputGroup();
+    } else if (type === "checkbox") {
+      return CheckboxInputGroup();
+    }
+  };
+  return RenderMainContent();
+};
+var InputGroup_default = InputGroup;
+
+// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+import { useEffect as useEffect3 } from "react";
+import { useState as useState11 } from "react";
+
+// src/utilization/AppUtilization.ts
+var colors = [
+  "#FF5733",
+  // Fiery Red
+  "#3357FF",
+  // Royal Blue
+  "#FF33A1",
+  // Fuchsia Pink
+  "#33FFF0",
+  // Aqua Blue
+  "#FF9633",
+  // Tangerine
+  "#8D33FF",
+  // Violet
+  "#FFD733",
+  // Sunny Yellow
+  "#33FF6D",
+  // Mint Green
+  "#FFB833",
+  // Amber
+  "#33C7FF",
+  // Sky Blue
+  "#FF33E4",
+  // Magenta
+  "#5EFF33",
+  // Neon Green
+  "#FF3380",
+  // Hot Pink
+  "#33FFAF",
+  // Seafoam Green
+  "#3383FF",
+  // Dodger Blue
+  "#FF9533",
+  // Pumpkin Orange
+  "#BF33FF",
+  // Electric Purple
+  "#FFDA33",
+  // Golden Yellow
+  "#33FF89",
+  // Turquoise
+  "#FF3333",
+  // Red
+  "#33BFFF",
+  // Light Blue
+  "#FF33B3",
+  // Pink
+  "#5BFF33",
+  // Light Green
+  "#FF3385",
+  // Rose
+  "#33FFC9",
+  // Aquamarine
+  "#33A1FF",
+  // Azure
+  "#FF7A33",
+  // Cantaloupe
+  "#A533FF",
+  // Lavender
+  "#FFE033",
+  // Mustard Yellow
+  "#33FF7A",
+  // Apple Green
+  "#FF4D33",
+  // Bright Red
+  "#33FF95",
+  // Light Turquoise
+  "#FFC433",
+  // Peach
+  "#33FF7D",
+  // Green Apple
+  "#FF338A",
+  // Raspberry Pink
+  "#33FFE4",
+  // Light Aqua
+  "#336AFF",
+  // Cobalt Blue
+  "#FF3370",
+  // Raspberry
+  "#33FF95",
+  // Light Green
+  "#FFA633",
+  // Orange
+  "#33FF57"
+  // Lime Green
+];
+var shuffleArray = (array) => {
+  const copyArray = JSON.parse(JSON.stringify(array));
+  for (let i = copyArray.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
+  }
+  return copyArray;
+};
+var getColorByIndex = (index) => {
+  return colors[index];
+};
+
+// src/components/dropdowns/MediaDropdown.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var MediaDropdown = ({ id, answer, optionList }) => {
+  const [showDropdown, setShowDropdown] = useState9(false);
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: "w-full relative",
+      onMouseEnter: () => {
+        setShowDropdown(true);
+      },
+      onMouseLeave: () => {
+        setShowDropdown(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx14("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
+        /* @__PURE__ */ jsx14(
+          "ul",
+          {
+            className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
+            children: optionList.map((option, index) => /* @__PURE__ */ jsxs9(
+              "li",
+              {
+                className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx14(
+                    "div",
+                    {
+                      className: `w-full flex flex-col my-2 ${option.divClassNames ? option.divClassNames : ""}`,
+                      onClick: option.onClick,
+                      children: option.media
+                    }
+                  ),
+                  index !== optionList.length - 1 ? /* @__PURE__ */ jsx14("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+                ]
+              },
+              option.id
+            ))
+          }
+        )
+      ]
+    },
+    id
+  );
+};
+var MediaDropdown_default = MediaDropdown;
+
+// src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState10 } from "react";
+import Modal2 from "react-modal";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var ShowMaterialMediaByContentType = ({
+  key,
+  contentType,
+  src,
+  canFullScreen
+}) => {
+  const [showFullScreen, setShowFullScreen] = useState10(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState10(null);
+  const [isLoaded, setIsLoaded] = useState10(false);
+  const [isFullHeight, setIsFullHeight] = useState10(false);
+  const imageRef = useRef2(null);
+  useEffect2(() => {
+    setIsLoaded(false);
+  }, []);
+  useEffect2(() => {
+    if (!isLoaded) return;
+    if (!imageRef) return;
+    if (!imageRef.current) return;
+    const w = imageRef.current.naturalWidth;
+    const h = imageRef.current.naturalHeight;
+    if (w >= h) {
+      setIsFullHeight(false);
+    } else {
+      setIsFullHeight(true);
+    }
+  }, [isLoaded, key]);
+  const RenderShowFullScreenItem = () => {
+    return /* @__PURE__ */ jsx15(
+      Modal2,
+      {
+        isOpen: showFullScreen,
+        onAfterOpen: () => {
+        },
+        onRequestClose: () => {
+          setShowFullScreen(false);
+          setSelectedFullScreenItem(null);
+        },
+        style: {
+          content: {
+            top: "50%",
+            left: "50%",
+            right: "auto",
+            bottom: "auto",
+            marginRight: "-50%",
+            transform: "translate(-50%, -50%)",
+            padding: 0,
+            borderRadius: 20,
+            background: "",
+            border: "",
+            width: "900px",
+            maxHeight: "70%",
+            overflow: "auto"
+          },
+          overlay: {
+            background: "rgba(0, 0, 0, 0.6)"
+          }
+        },
+        contentLabel: "",
+        children: /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ jsx15("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx15(
+            BaseImage_default,
+            {
+              src: "/icons/cross-red.png",
+              alt: "cross-red",
+              size: "medium",
+              onClick: () => {
+                setShowFullScreen(false);
+                setSelectedFullScreenItem(null);
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx15(
+            BaseImage_default,
+            {
+              src: selectedFullScreenItem,
+              alt: "selected-fullscreen-item",
+              size: "custom",
+              className: "w-full"
+            }
+          ) })
+        ] })
+      }
+    );
+  };
+  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs10("div", { children: [
+    RenderShowFullScreenItem(),
+    /* @__PURE__ */ jsx15("div", { className: "my-2", children: /* @__PURE__ */ jsx15("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: `${isFullHeight ? "h-catchup-activity-box-item" : "max-w-catchup-activity-box-item"}  flex flex-col justify-center items-center relative`,
+        children: [
+          /* @__PURE__ */ jsx15(
+            BaseImage_default,
+            {
+              src,
+              alt: "image",
+              ref: imageRef,
+              size: "custom",
+              className: "h-full rounded-catchup-xlarge",
+              onLoad: () => {
+                setIsLoaded(true);
+              }
+            }
+          ),
+          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx15(
+            "div",
+            {
+              className: "absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
+              onMouseEnter: (e) => {
+                e.preventDefault();
+              },
+              onClick: (e) => {
+                e.preventDefault();
+                setShowFullScreen(true);
+                setSelectedFullScreenItem(src);
+              },
+              children: /* @__PURE__ */ jsx15(
+                BaseImage_default,
+                {
+                  src: "/icons/arrow-up.png",
+                  alt: "arrow-up",
+                  size: "custom",
+                  className: "w-full"
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    ) }) })
+  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ jsx15("div", { className: "my-2", children: /* @__PURE__ */ jsx15("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx15("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx15(
+    "video",
+    {
+      className: "h-catchup-activity-box-item rounded-catchup-xlarge",
+      src,
+      controls: true,
+      onClick: () => {
+      }
+    }
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx15("div", { className: "my-2", children: /* @__PURE__ */ jsx15("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx15("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx15(
+    "audio",
+    {
+      className: "h-catchup-activity-box-item rounded-catchup-xlarge",
+      src,
+      controls: true,
+      onClick: () => {
+      }
+    }
+  ) }) }) }) : null;
+};
+var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
+
+// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var DropdownActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const [updated, setUpdated] = useState11(false);
+  useEffect3(() => {
+    if (!showCorrectAnswer) return;
+    const foundAnswer = answer.data.find(
+      (answerData) => answerData.type === "DROPDOWN"
+    );
+    if (foundAnswer.answerMap.length === 0) return;
+    foundAnswer.answerMap = Object.keys(materialMap).map(
+      (materialMapKey, index) => Object.keys(materialMap[materialMapKey])[0]
+    );
+    onChange(answer, 0, Object.keys(materialMap[0])[0]);
+    setUpdated(true);
+  }, [showCorrectAnswer]);
+  useEffect3(() => {
+    if (!updated) return;
+    setUpdated(false);
+  }, [updated]);
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "DROPDOWN"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const checkAnswerState = (correctAnswer, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const answerMap = retrieveAnswerMap();
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-row flex-wrap items-center", children: [
+    /* @__PURE__ */ jsx16("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx16("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
+    /* @__PURE__ */ jsx16("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx16(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx16("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+      const answerKey = Object.keys(materialMap[materialKey])[0];
+      const learnerAnswerState = checkAnswerState(
+        answerKey,
+        answerMap[materialKey]
+      );
+      return /* @__PURE__ */ jsx16("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx16("div", { className: "mx-2", children: /* @__PURE__ */ jsxs11("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+        /* @__PURE__ */ jsx16("div", { className: "my-auto", children: /* @__PURE__ */ jsxs11("p", { className: "text-xl", children: [
+          parseFloat(materialKey) + 1,
+          "."
+        ] }) }),
+        /* @__PURE__ */ jsxs11("div", { className: "w-full relative", children: [
+          /* @__PURE__ */ jsx16("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx16("div", { className: "flex-1", children: /* @__PURE__ */ jsx16(
+            InputGroup_default,
+            {
+              type: "select",
+              value: answerMap[materialKey],
+              optionList: shuffleArray(
+                materialMap[materialKey][answerKey]
+              ).map((materialOption) => ({
+                text: /* @__PURE__ */ jsx16("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  materialOption
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx16(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx16("span", { className: "text-2xl", children: /* @__PURE__ */ jsx16(
+                      InlineMath2,
+                      {
+                        math: inputPart.value
+                      }
+                    ) }) : inputPart.value
+                  },
+                  index2
+                )) }),
+                value: materialOption
+              })),
+              onChange: (e) => {
+                onChange(answer, materialKey, e.target.value);
+              }
+            }
+          ) }) : /* @__PURE__ */ jsx16(
+            MediaDropdown_default,
+            {
+              id: materialKey,
+              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx16("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx16("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx16("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx16(
+                ShowMaterialMediaByContentType_default,
+                {
+                  contentType: contentMap.type,
+                  src: answerMap[materialKey],
+                  canFullScreen: false
+                },
+                `${uniqueValue}-${index}`
+              ),
+              optionList: materialMap[materialKey][answerKey].map(
+                (materialOption, index2) => ({
+                  id: index2,
+                  media: /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
+                    ShowMaterialMediaByContentType_default,
+                    {
+                      contentType: contentMap.type,
+                      src: materialOption,
+                      canFullScreen: false
+                    },
+                    `${uniqueValue}-${index2}`
+                  ) }, index2),
+                  onClick: (e) => {
+                    onChange(
+                      answer,
+                      materialKey,
+                      e.target.currentSrc
+                    );
+                  }
+                })
+              )
+            }
+          ) : /* @__PURE__ */ jsx16("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            answerMap[materialKey]
+          ).map((inputPart, index2) => /* @__PURE__ */ jsx16(
+            "span",
+            {
+              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx16("span", { className: "text-2xl", children: /* @__PURE__ */ jsx16(InlineMath2, { math: inputPart.value }) }) : inputPart.value
+            },
+            index2
+          )) }) }),
+          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx16("div", { className: "absolute top-[0px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx16(
+            BaseImage_default,
+            {
+              src: "/icons/checkbox.png",
+              alt: "chekbbox",
+              size: "small"
+            }
+          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx16("div", { className: "absolute top-[0px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx16(
+            BaseImage_default,
+            {
+              src: "/icons/cross-red.png",
+              alt: "cross-red",
+              size: "small"
+            }
+          ) }) : null
+        ] })
+      ] }) }) }, index);
+    }) })
+  ] });
+};
+var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
+
+// src/components/activities/DropdownActivityContent.tsx
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var DropdownActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
+  const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
+  const retrieveCurrentAnswerMap = () => {
+    let foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "DROPDOWN"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const handleDropdownAnswerOnChange = (answer2, key, value) => {
+    const answerMap = retrieveCurrentAnswerMap();
+    answerMap[key] = value;
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx17("div", { className: "w-full md:w-[60%]", children: /* @__PURE__ */ jsx17(
+      ActivityBodyContent_default,
+      {
+        bodyMap: dropdownBodyMap,
+        answerMap: retrieveCurrentAnswerMap(),
+        contentMap,
+        templateType: "DROPDOWN"
+      }
+    ) }),
+    /* @__PURE__ */ jsx17("div", { className: "contents md:hidden", children: /* @__PURE__ */ jsx17(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx17("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx17(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx17("div", { className: "w-full md:flex-1", children: /* @__PURE__ */ jsx17(
+      DropdownActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        materialMap: dropdownMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleDropdownAnswerOnChange,
+        isPreview,
+        showCorrectAnswer
+      }
+    ) })
+  ] });
+};
+var DropdownActivityContent_default = DropdownActivityContent;
+
+// src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
+import { InlineMath as InlineMath3 } from "react-katex";
+import { useState as useState12 } from "react";
+import { useEffect as useEffect4 } from "react";
+import { useDrop as useDrop2 } from "react-dnd";
+
+// src/components/dnds/DraggableItem.tsx
+import { useDrag } from "react-dnd";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var DraggableItem = ({
+  key,
+  item,
+  type,
+  component,
+  moveCardHandler
+}) => {
+  const [{ isDragging }, drag] = useDrag({
+    type,
+    item,
+    end: (item2, monitor) => {
+      const dropResult = monitor.getDropResult();
+      if (dropResult) {
+        moveCardHandler();
+      }
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  });
+  const opacity = isDragging ? 0.4 : 1;
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
+      children: /* @__PURE__ */ jsx18("div", { ref: drag, className: "", style: { opacity }, children: component })
+    },
+    key
+  );
+};
+var DraggableItem_default = DraggableItem;
+
+// src/components/dnds/DroppableItem.tsx
+import { useRef as useRef3 } from "react";
+import { useDrop } from "react-dnd";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var DroppableItem = ({
+  key,
+  item,
+  type,
+  component,
+  dropRef,
+  target,
+  setTarget
+}) => {
+  const ref = useRef3(null);
+  const [, drop] = useDrop({
+    accept: type,
+    hover() {
+      if (item.index !== null && target !== item.index) {
+        setTarget(item.index);
+      }
+    }
+  });
+  dropRef(drop(ref));
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: `w-full transition-all duration-500 h-full`,
+      ref,
+      children: component
+    },
+    key
+  );
+};
+var DroppableItem_default = DroppableItem;
+
+// src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var FillInTheBlanksActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  optionList,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const [shuffleOptionList, setShuffleOptionList] = useState12([]);
+  const [selectedOption, setSelectedOption] = useState12(null);
+  const [pasteOptionIndex, setPasteOptionIndex] = useState12(null);
+  const [{ isOver, canDrop }, drop] = useDrop2({
+    accept: "FILL_IN_THE_BLANKS",
+    drop: () => {
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+  useEffect4(() => {
+    setShuffleOptionList(shuffleArray(optionList));
+  }, []);
+  useEffect4(() => {
+    if (!showCorrectAnswer) return;
+    const foundAnswer = answer.data.find(
+      (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
+    );
+    if (foundAnswer.answerMap.length === 0) return;
+    foundAnswer.answerMap = Object.keys(materialMap).map(
+      (materialMapKey, index) => JSON.parse(materialMap[materialMapKey])[0]
+    );
+    onChange(answer, 0, JSON.parse(materialMap[0])[0]);
+  }, [showCorrectAnswer]);
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const checkAnswerState = (correctAnswerList, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    const foundIndex = correctAnswerList.findIndex(
+      (correctAnswer) => correctAnswer === learnerAnswer
+    );
+    if (foundIndex !== -1) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const checkAnswerProvided = (answerMap2, option) => {
+    return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
+  };
+  const answerMap = retrieveAnswerMap();
+  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
+  }, children: [
+    /* @__PURE__ */ jsx20("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx20("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+    /* @__PURE__ */ jsx20("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx20(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx20("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
+      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx20("div", { className: "opacity-30", children: /* @__PURE__ */ jsx20(
+        ShowMaterialMediaByContentType_default,
+        {
+          contentType: contentMap.type,
+          src: option,
+          canFullScreen: true
+        },
+        `${uniqueValue}-${index}`
+      ) }) : /* @__PURE__ */ jsx20(
+        DraggableItem_default,
+        {
+          item: { index: option },
+          type: "FILL_IN_THE_BLANKS",
+          component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx20(
+            "div",
+            {
+              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
+              onMouseDown: () => {
+                setSelectedOption(option);
+                setPasteOptionIndex(null);
+              },
+              children: /* @__PURE__ */ jsx20("p", { className: "italic whitespace-pre-wrap", children: option })
+            }
+          ) : /* @__PURE__ */ jsx20(
+            "div",
+            {
+              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
+              onMouseDown: () => {
+                setSelectedOption(option);
+                setPasteOptionIndex(null);
+              },
+              children: /* @__PURE__ */ jsx20(
+                ShowMaterialMediaByContentType_default,
+                {
+                  contentType: contentMap.type,
+                  src: option,
+                  canFullScreen: true
+                },
+                `${uniqueValue}-${index}`
+              )
+            }
+          ),
+          moveCardHandler: () => {
+            onChange(answer, pasteOptionIndex, selectedOption);
+          }
+        },
+        index
+      )
+    ) }),
+    /* @__PURE__ */ jsx20("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+      const learnerAnswerState = checkAnswerState(
+        JSON.parse(materialMap[materialKey]),
+        answerMap[materialKey]
+      );
+      return /* @__PURE__ */ jsx20("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx20("div", { className: "mx-2", children: /* @__PURE__ */ jsx20(
+        DroppableItem_default,
+        {
+          item: { index },
+          type: "FILL_IN_THE_BLANKS",
+          target: pasteOptionIndex,
+          setTarget: setPasteOptionIndex,
+          dropRef: drop,
+          component: /* @__PURE__ */ jsxs13("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+            /* @__PURE__ */ jsx20("div", { className: "my-auto", children: /* @__PURE__ */ jsxs13("p", { className: "text-xl", children: [
+              parseFloat(materialKey) + 1,
+              "."
+            ] }) }),
+            /* @__PURE__ */ jsx20("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx20("div", { className: "flex-1", children: /* @__PURE__ */ jsx20(
+                InputGroup_default,
+                {
+                  type: "textarea",
+                  value: answerMap[materialKey],
+                  useMinHeight: false,
+                  onChange: (e) => {
+                    onChange(
+                      answer,
+                      materialKey,
+                      e.target.value
+                    );
+                  }
+                }
+              ) }),
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx20("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx20(
+                BaseImage_default,
+                {
+                  src: "/icons/checkbox.png",
+                  alt: "checkbox",
+                  size: "small"
+                }
+              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx20("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx20(
+                BaseImage_default,
+                {
+                  src: "/icons/cross-red.png",
+                  alt: "cross-red",
+                  size: "small"
+                }
+              ) }) : null
+            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx20(
+              "div",
+              {
+                className: `w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+                children: /* @__PURE__ */ jsx20("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx20("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+              }
+            ) : /* @__PURE__ */ jsx20(
+              "div",
+              {
+                className: "flex-1 cursor-pointer",
+                onClick: () => {
+                  onChange(answer, materialKey, "");
+                },
+                children: /* @__PURE__ */ jsx20(
+                  ShowMaterialMediaByContentType_default,
+                  {
+                    contentType: contentMap.type,
+                    src: answerMap[materialKey],
+                    canFullScreen: true
+                  },
+                  `${uniqueValue}-${index}`
+                )
+              }
+            ) : /* @__PURE__ */ jsx20("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+              answerMap[materialKey]
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx20(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx20("span", { className: "text-2xl", children: /* @__PURE__ */ jsx20(InlineMath3, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )) }, materialKey) })
+          ] })
+        },
+        index
+      ) }) }, index);
+    }) })
+  ] });
+};
+var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
+
+// src/components/activities/FillInTheBlanksActivityContent.tsx
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var FillInTheBlanksActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const fillInTheBlanksBodyMap = parseBodyMapFromData(
+    data,
+    "FILL_IN_THE_BLANKS"
+  );
+  const fillInTheBlanksMaterialMap = parseMaterialMapFromData(
+    data,
+    "FILL_IN_THE_BLANKS"
+  );
+  const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
+  const retrieveCurrentAnswerMap = () => {
+    let foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const constructAnswerOptionList = () => {
+    const optionList = [];
+    Object.keys(fillInTheBlanksMaterialMap).forEach((key) => {
+      const array = JSON.parse(fillInTheBlanksMaterialMap[key]);
+      for (const item of array) {
+        const foundIndex = optionList.findIndex(
+          (option) => option === item
+        );
+        if (foundIndex === -1) {
+          optionList.push(item);
+        }
+      }
+    });
+    fillInTheBlanksIncorrectList.forEach((value) => {
+      optionList.push(value);
+    });
+    return optionList;
+  };
+  const handleFillInTheBlanksAnswerOnChange = (answer2, key, value) => {
+    const answerMap = retrieveCurrentAnswerMap();
+    answerMap[key] = value;
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx21("div", { className: "w-full md:w-[60%]", children: /* @__PURE__ */ jsx21(
+      ActivityBodyContent_default,
+      {
+        bodyMap: fillInTheBlanksBodyMap,
+        answerMap: retrieveCurrentAnswerMap(),
+        contentMap,
+        templateType: "FILL_IN_THE_BLANKS"
+      }
+    ) }),
+    /* @__PURE__ */ jsx21("div", { className: "contents md:hidden", children: /* @__PURE__ */ jsx21(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx21("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx21(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx21("div", { className: "w-full md:flex-1", children: /* @__PURE__ */ jsx21(
+      FillInTheBlanksActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        optionList: constructAnswerOptionList(),
+        materialMap: fillInTheBlanksMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleFillInTheBlanksAnswerOnChange,
+        isPreview,
+        showCorrectAnswer
+      }
+    ) })
+  ] });
+};
+var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
+
+// src/components/activities/material-content/GroupingActivityMaterialContent.tsx
+import { useEffect as useEffect6, useRef as useRef4, useState as useState14 } from "react";
+import { useDrop as useDrop3 } from "react-dnd";
+import { InlineMath as InlineMath4 } from "react-katex";
+
+// src/hooks/useScreenSize.ts
+import { useState as useState13, useEffect as useEffect5 } from "react";
+var useScreenSize = () => {
+  const [containerSize, setContainerSize] = useState13({
+    width: 0,
+    height: 0
+  });
+  const [screenSize, setScreenSize] = useState13({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  useEffect5(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+      const container = document.getElementById("container");
+      if (!container) return;
+      const boundingClientRect = container.getBoundingClientRect();
+      setContainerSize({
+        width: boundingClientRect.width,
+        height: boundingClientRect.height
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return { screenSize, containerSize };
+};
+var useScreenSize_default = useScreenSize;
+
+// src/components/activities/material-content/GroupingActivityMaterialContent.tsx
+import { Fragment, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var GroupingActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const [selectedValue, setSelectedValue] = useState14(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState14(null);
+  const [isShuffled, setIsShuffled] = useState14(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState14([]);
+  const { screenSize, containerSize } = useScreenSize_default();
+  const [{ isOver, canDrop }, drop] = useDrop3({
+    accept: "GROUPING",
+    drop: () => {
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+  const ref = useRef4(null);
+  const itemsRef = useRef4(null);
+  const [maxWidth, setMaxWidth] = useState14(0);
+  useEffect6(() => {
+    if (!ref) return;
+    if (!ref.current) return;
+    if (!screenSize) return;
+    setMaxWidth(ref.current.offsetWidth - 12);
+  }, [ref, screenSize]);
+  useEffect6(() => {
+    if (!itemsRef) return;
+    if (!itemsRef.current) return;
+    if (!containerSize) return;
+    itemsRef.current.style.width = `${containerSize.width - 200}px`;
+  }, [itemsRef, containerSize]);
+  useEffect6(() => {
+    const shuffleArray2 = (array) => {
+      if (!isShuffled) {
+        const copyArray = JSON.parse(JSON.stringify(array));
+        for (let i = copyArray.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
+        }
+        setIsShuffled(true);
+        return copyArray;
+      }
+      return array;
+    };
+    const materialList = [];
+    Object.keys(materialMap).forEach((materialKey) => {
+      for (const materialValue of materialMap[materialKey]) {
+        materialList.push(materialValue);
+      }
+    });
+    setShuffledMaterialList(shuffleArray2(materialList));
+  }, []);
+  useEffect6(() => {
+    if (!showCorrectAnswer) return;
+    answer.data.find(
+      (answerData) => answerData.type === "GROUPING"
+    ).answerMap = materialMap;
+  }, [showCorrectAnswer]);
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "GROUPING"
+    );
+    const answerMap2 = answer.data[foundIndex].answerMap;
+    return answerMap2;
+  };
+  const retrieveFilteredMaterialList = (answerMap2) => {
+    const selectedValueList = [];
+    Object.keys(answerMap2).forEach((key) => {
+      answerMap2[key].forEach((value) => {
+        selectedValueList.push(value);
+      });
+    });
+    return shuffledMaterialList.filter(
+      (material) => selectedValueList.findIndex((value) => material === value) === -1
+    );
+  };
+  const checkAnswerState = (correctAnswerList, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    if (!learnerAnswer) return "EMPTY";
+    if (!correctAnswerList) return "EMPTY";
+    const foundIndex = correctAnswerList.findIndex(
+      (correctAnswer) => correctAnswer === learnerAnswer
+    );
+    if (foundIndex !== -1) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const handleGroupingActivityItemOnChange = (selectedTargetKey2, selectedValue2) => {
+    if (checkCanAnswerQuestion()) {
+      onChange(answer, selectedTargetKey2, selectedValue2, null);
+      setSelectedValue(null);
+    }
+  };
+  const answerMap = retrieveAnswerMap();
+  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+  return /* @__PURE__ */ jsxs15(Fragment, { children: [
+    /* @__PURE__ */ jsx22(
+      "div",
+      {
+        ref: itemsRef,
+        className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
+        children: filteredMaterialList.map((materialValue, index) => {
+          return /* @__PURE__ */ jsx22(
+            DraggableItem_default,
+            {
+              item: { index: materialValue },
+              type: "GROUPING",
+              component: /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} h-catchup-activity-covering-box-item flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
+                  onMouseDown: () => {
+                    if (checkCanAnswerQuestion()) {
+                      setSelectedValue(materialValue);
+                    }
+                  },
+                  onMouseUp: () => {
+                    if (checkCanAnswerQuestion()) {
+                      setSelectedValue(null);
+                    }
+                  },
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx22(
+                    "div",
+                    {
+                      className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
+                      children: /* @__PURE__ */ jsx22("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                        materialValue
+                      ).map((inputPart, index2) => /* @__PURE__ */ jsx22(
+                        "span",
+                        {
+                          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                          children: inputPart.isEquation ? /* @__PURE__ */ jsx22("span", { className: "text-2xl", children: /* @__PURE__ */ jsx22(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                        },
+                        index2
+                      )) })
+                    }
+                  ) : /* @__PURE__ */ jsx22(
+                    ShowMaterialMediaByContentType_default,
+                    {
+                      contentType: contentMap.type,
+                      src: materialValue,
+                      canFullScreen: true
+                    },
+                    `${uniqueValue}-${index}`
+                  )
+                }
+              ),
+              moveCardHandler: () => {
+                if (!selectedTargetKey) return;
+                if (!selectedValue) return;
+                handleGroupingActivityItemOnChange(
+                  selectedTargetKey,
+                  selectedValue
+                );
+              }
+            },
+            index
+          );
+        })
+      }
+    ),
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx22(DividerLine_default, {}) : null,
+    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-row w-full", children: [
+      /* @__PURE__ */ jsx22("div", { className: "w-1/3", children: /* @__PURE__ */ jsx22(
+        "div",
+        {
+          className: `border-catchup-blue h-catchup-activity-outer-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
+          children: /* @__PURE__ */ jsx22(
+            "div",
+            {
+              className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
+              children: /* @__PURE__ */ jsx22("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                (inputPart, index2) => /* @__PURE__ */ jsx22(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx22("span", { className: "text-2xl", children: /* @__PURE__ */ jsx22(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                  },
+                  index2
+                )
+              ) })
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx22("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ jsx22("div", { className: "flex-1", ref, children: /* @__PURE__ */ jsx22("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx22(
+        "div",
+        {
+          className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1`,
+          children: /* @__PURE__ */ jsx22(
+            DroppableItem_default,
+            {
+              item: { index: answerMapKey },
+              type: "GROUPING",
+              target: selectedTargetKey,
+              setTarget: setSelectedTargetKey,
+              dropRef: drop,
+              component: /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  className: "h-full flex-1 flex flex-row items-center overflow-x-auto",
+                  style: {
+                    maxWidth
+                  },
+                  children: answerMap[answerMapKey].map(
+                    (answerMapValue, answerMapIndex) => {
+                      const learnerAnswerState = checkAnswerState(
+                        materialMap[answerMapKey],
+                        answerMapValue
+                      );
+                      return /* @__PURE__ */ jsx22("div", { className: "p-1", children: /* @__PURE__ */ jsx22("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ jsx22(
+                        "div",
+                        {
+                          className: `${learnerAnswerState === "EMPTY" ? "border-catchup-lighter-gray" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"} border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`,
+                          onClick: (e) => {
+                            e.preventDefault();
+                            if (checkCanAnswerQuestion()) {
+                              onChange(
+                                answer,
+                                answerMapKey,
+                                null,
+                                answerMapIndex
+                              );
+                              setSelectedValue(null);
+                            }
+                          },
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx22(
+                            "div",
+                            {
+                              className: `flex flex-col items-center justify-center transition-all duration-300 min-h-[64px] min-w-[200px]`,
+                              children: /* @__PURE__ */ jsx22("div", { className: "m-2", children: /* @__PURE__ */ jsx22("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                                answerMapValue
+                              ).map((inputPart, index2) => /* @__PURE__ */ jsx22(
+                                "span",
+                                {
+                                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                                  children: inputPart.isEquation ? /* @__PURE__ */ jsx22("span", { className: "text-2xl", children: /* @__PURE__ */ jsx22(
+                                    InlineMath4,
+                                    {
+                                      math: inputPart.value
+                                    }
+                                  ) }) : inputPart.value
+                                },
+                                index2
+                              )) }) })
+                            }
+                          ) : /* @__PURE__ */ jsx22(
+                            ShowMaterialMediaByContentType_default,
+                            {
+                              contentType: contentMap.type,
+                              src: answerMapValue,
+                              canFullScreen: false
+                            },
+                            `${uniqueValue}-${index}`
+                          )
+                        }
+                      ) }) });
+                    }
+                  )
+                }
+              )
+            },
+            index
+          )
+        }
+      ) }) })
+    ] }, index))
+  ] });
+};
+var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
+
+// src/components/activities/GroupingActivityContent.tsx
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var GroupingActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const groupingBodyMap = parseBodyMapFromData(data, "GROUPING");
+  const groupingMaterialMap = parseMaterialMapFromData(data, "GROUPING");
+  const handleGroupingAnswerOnChange = (answer2, key, value, index) => {
+    let foundIndex = answer2.data.findIndex(
+      (answerData) => answerData.type === "GROUPING"
+    );
+    const answerMap = answer2.data[foundIndex].answerMap;
+    if (value) {
+      answerMap[key].push(value);
+    } else {
+      answerMap[key].splice(index, 1);
+    }
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+    /* @__PURE__ */ jsx23(
+      ActivityBodyContent_default,
+      {
+        bodyMap: groupingBodyMap,
+        templateType: "GROUPING"
+      }
+    ),
+    /* @__PURE__ */ jsx23(DividerLine_default, {}),
+    /* @__PURE__ */ jsx23(
+      GroupingActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        materialMap: groupingMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleGroupingAnswerOnChange,
+        isPreview,
+        showCorrectAnswer
+      }
+    )
+  ] });
+};
+var GroupingActivityContent_default = GroupingActivityContent;
+
+// src/components/activities/material-content/MatchingActivityMaterialContent.tsx
+import { useEffect as useEffect7, useRef as useRef5, useState as useState15 } from "react";
+import { useDrop as useDrop4 } from "react-dnd";
+import { InlineMath as InlineMath5 } from "react-katex";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var MatchingActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const [selectedValue, setSelectedValue] = useState15(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState15(null);
+  const [isShuffled, setIsShuffled] = useState15(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState15([]);
+  const [{ isOver, canDrop }, drop] = useDrop4({
+    accept: "MATCHING",
+    drop: () => {
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+  const { containerSize } = useScreenSize_default();
+  const itemsRef = useRef5(null);
+  useEffect7(() => {
+    const shuffleArray2 = (array) => {
+      if (!isShuffled) {
+        const copyArray = JSON.parse(JSON.stringify(array));
+        for (let i = copyArray.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
+        }
+        setIsShuffled(true);
+        return copyArray;
+      }
+      return array;
+    };
+    const materialList = [];
+    Object.keys(materialMap).forEach((materialKey) => {
+      materialList.push(materialMap[materialKey]);
+    });
+    setShuffledMaterialList(shuffleArray2(materialList));
+  }, []);
+  useEffect7(() => {
+    if (!showCorrectAnswer) return;
+    answer.data.find(
+      (answerData) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
+  }, [showCorrectAnswer]);
+  useEffect7(() => {
+    if (!itemsRef) return;
+    if (!itemsRef.current) return;
+    if (!containerSize) return;
+    itemsRef.current.style.width = `${containerSize.width - 220}px`;
+  }, [itemsRef, containerSize]);
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "MATCHING"
+    );
+    const answerMap2 = answer.data[foundIndex].answerMap;
+    const sortedAnswerMapKeys = Object.keys(answerMap2).sort(
+      (a, b) => answerMap2[a] ? answerMap2[b] ? answerMap2[a].localeCompare(answerMap2[b]) : 1 : -1
+    );
+    const sortedAnswerMap = {};
+    for (const answerMapKey of sortedAnswerMapKeys) {
+      sortedAnswerMap[answerMapKey] = answerMap2[answerMapKey];
+    }
+    return sortedAnswerMap;
+  };
+  const retrieveFilteredMaterialList = (answerMap2) => {
+    const selectedValueList = [];
+    Object.keys(answerMap2).forEach((key) => {
+      selectedValueList.push(answerMap2[key]);
+    });
+    return shuffledMaterialList.filter(
+      (material) => selectedValueList.findIndex((value) => material === value) === -1
+    );
+  };
+  const checkAnswerState = (correctAnswer, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    if (!learnerAnswer) return "EMPTY";
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const handleMatchingActivityItemOnChange = (selectedTargetKey2, selectedValue2) => {
+    if (checkCanAnswerQuestion()) {
+      onChange(answer, selectedTargetKey2, selectedValue2);
+      setSelectedValue(null);
+    }
+  };
+  const answerMap = retrieveAnswerMap();
+  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
+    /* @__PURE__ */ jsx24(
+      "div",
+      {
+        ref: itemsRef,
+        className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
+        children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx24(
+          DraggableItem_default,
+          {
+            item: { index: materialValue },
+            type: "MATCHING",
+            component: /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} h-catchup-activity-covering-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
+                onMouseDown: () => {
+                  if (checkCanAnswerQuestion()) {
+                    setSelectedValue(materialValue);
+                  }
+                },
+                onMouseUp: () => {
+                  if (checkCanAnswerQuestion()) {
+                    setSelectedValue(null);
+                  }
+                },
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx24(
+                  "div",
+                  {
+                    className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
+                    children: /* @__PURE__ */ jsx24("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      materialValue
+                    ).map((inputPart, index2) => /* @__PURE__ */ jsx24(
+                      "span",
+                      {
+                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx24("span", { className: "text-2xl", children: /* @__PURE__ */ jsx24(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                      },
+                      index2
+                    )) })
+                  }
+                ) : /* @__PURE__ */ jsx24(
+                  ShowMaterialMediaByContentType_default,
+                  {
+                    contentType: contentMap.type,
+                    src: materialValue,
+                    canFullScreen: true
+                  },
+                  `${uniqueValue}-${index}`
+                )
+              }
+            ),
+            moveCardHandler: () => {
+              if (!selectedTargetKey) return;
+              if (!selectedValue) return;
+              handleMatchingActivityItemOnChange(
+                selectedTargetKey,
+                selectedValue
+              );
+            }
+          },
+          index
+        ))
+      }
+    ),
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx24(DividerLine_default, {}) : null,
+    Object.keys(answerMap).map((answerMapKey, index) => {
+      const learnerAnswerState = checkAnswerState(
+        materialMap[answerMapKey],
+        answerMap[answerMapKey]
+      );
+      return /* @__PURE__ */ jsxs17("div", { className: "flex flex-row w-full", children: [
+        /* @__PURE__ */ jsx24("div", { className: "w-1/3", children: /* @__PURE__ */ jsx24(
+          "div",
+          {
+            className: `h-catchup-activity-outer-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+            children: /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
+                children: /* @__PURE__ */ jsx24("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                  (inputPart, index2) => /* @__PURE__ */ jsx24(
+                    "span",
+                    {
+                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx24("span", { className: "text-2xl", children: /* @__PURE__ */ jsx24(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                    },
+                    index2
+                  )
+                ) })
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx24("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ jsx24("div", { className: "flex-1", children: /* @__PURE__ */ jsx24(
+          "div",
+          {
+            className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} h-catchup-activity-outer-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+            onClick: () => {
+              if (checkCanAnswerQuestion()) {
+                setSelectedValue(null);
+              }
+            },
+            children: /* @__PURE__ */ jsx24(
+              DroppableItem_default,
+              {
+                item: { index: answerMapKey },
+                type: "MATCHING",
+                target: selectedTargetKey,
+                setTarget: setSelectedTargetKey,
+                dropRef: drop,
+                component: /* @__PURE__ */ jsx24(
+                  "div",
+                  {
+                    className: `h-full flex-1 flex flex-row items-center justify-center `,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      if (checkCanAnswerQuestion()) {
+                        handleMatchingActivityItemOnChange(
+                          answerMapKey,
+                          null
+                        );
+                      }
+                    },
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx24("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      answerMap[answerMapKey]
+                    ).map((inputPart, index2) => /* @__PURE__ */ jsx24(
+                      "span",
+                      {
+                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx24("span", { className: "text-2xl", children: /* @__PURE__ */ jsx24(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                      },
+                      index2
+                    )) }) : /* @__PURE__ */ jsx24(
+                      ShowMaterialMediaByContentType_default,
+                      {
+                        contentType: contentMap.type,
+                        src: answerMap[answerMapKey],
+                        canFullScreen: false
+                      },
+                      `${uniqueValue}-${index}`
+                    )
+                  }
+                )
+              },
+              index
+            )
+          }
+        ) })
+      ] }, index);
+    })
+  ] });
+};
+var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
+
+// src/components/activities/MatchingActivityContent.tsx
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var MatchingActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const matchingBodyMap = parseBodyMapFromData(data, "MATCHING");
+  const matchingMaterialMap = parseMaterialMapFromData(data, "MATCHING");
+  const handleMatchingAnswerOnChange = (answer2, key, value) => {
+    let foundIndex = answer2.data.findIndex(
+      (answerData) => answerData.type === "MATCHING"
+    );
+    const answerMap = answer2.data[foundIndex].answerMap;
+    answerMap[key] = value;
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
+    /* @__PURE__ */ jsx25(
+      ActivityBodyContent_default,
+      {
+        bodyMap: matchingBodyMap,
+        templateType: "MATCHING"
+      }
+    ),
+    /* @__PURE__ */ jsx25(DividerLine_default, {}),
+    /* @__PURE__ */ jsx25(
+      MatchingActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        materialMap: matchingMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleMatchingAnswerOnChange,
+        isPreview,
+        showCorrectAnswer
+      }
+    )
+  ] });
+};
+var MatchingActivityContent_default = MatchingActivityContent;
+
+// src/components/activities/material-content/MCMAActivityMaterialContent.tsx
+import { InlineMath as InlineMath6 } from "react-katex";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+var MCMAActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview
+}) => {
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "MCMA"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const retrieveCorrectAnswerList = () => {
+    return JSON.parse(Object.keys(materialMap)[0]);
+  };
+  const checkAnswerState = (correctAnswerList2, currentAnswer, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    if (currentAnswer !== learnerAnswer) return "EMPTY";
+    const foundIndex = correctAnswerList2.findIndex(
+      (correctAnswer) => correctAnswer === learnerAnswer
+    );
+    if (foundIndex !== -1) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const answerMap = retrieveAnswerMap();
+  const correctAnswerList = retrieveCorrectAnswerList();
+  return Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ jsx26("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs19("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
+      /* @__PURE__ */ jsx26("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx26("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ jsx26("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx26(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx26("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+        (materialSubKey, index2) => {
+          const foundAnswer = answerMap[materialKey].find(
+            (learnerAnswer) => learnerAnswer === materialSubKey
+          );
+          const learnerAnswerState = checkAnswerState(
+            correctAnswerList,
+            materialSubKey,
+            foundAnswer
+          );
+          const foundIndex = correctAnswerList.findIndex(
+            (correctAnswer) => correctAnswer === materialSubKey
+          );
+          return /* @__PURE__ */ jsxs19(
+            "div",
+            {
+              className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && foundIndex !== -1 || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge" : ""}`,
+              onClick: () => {
+                onChange(answer, materialKey, materialSubKey);
+              },
+              children: [
+                /* @__PURE__ */ jsx26("div", { className: "", children: /* @__PURE__ */ jsx26(
+                  BaseImage_default,
+                  {
+                    src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.png" : "/icons/empty-checkbox.png",
+                    alt: "checkbox-empty-checkbox",
+                    size: "small",
+                    onClick: () => {
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx26("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx26("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  materialSubKey
+                ).map((inputPart, index3) => /* @__PURE__ */ jsx26(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                  },
+                  index3
+                )) }) : /* @__PURE__ */ jsx26(
+                  ShowMaterialMediaByContentType_default,
+                  {
+                    contentType: contentMap.type,
+                    src: materialSubKey,
+                    canFullScreen: true
+                  },
+                  `${uniqueValue}-${index2}`
+                ) })
+              ]
+            },
+            index2
+          );
+        }
+      ) }) : /* @__PURE__ */ jsx26("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+        answerMap[materialKey]
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx26(
+        "span",
+        {
+          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+        },
+        index2
+      )) }, materialKey)
+    ] }) }, index);
+  });
+};
+var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
+
+// src/components/activities/MCMAActivityContent.tsx
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var MCMAActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const MCMABodyMap = parseBodyMapFromData(data, "MCMA");
+  const MCMAMaterialMap = parseMaterialMapFromData(data, "MCMA");
+  const handleMCMAAnswerOnChange = (answer2, key, value) => {
+    let foundIndex = answer2.data.findIndex(
+      (answerData) => answerData.type === "MCMA"
+    );
+    const answerMap = answer2.data[foundIndex].answerMap;
+    const foundSubIndex = answerMap[key].findIndex(
+      (answerMaterialKey) => answerMaterialKey === value
+    );
+    if (foundSubIndex === -1) {
+      answerMap[key].push(value);
+    } else {
+      answerMap[key].splice(foundSubIndex, 1);
+    }
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx27("div", { className: "w-full md:w-[60%]", children: /* @__PURE__ */ jsx27(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__PURE__ */ jsx27("div", { className: "contents md:hidden", children: /* @__PURE__ */ jsx27(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx27("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx27(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx27("div", { className: "w-full md:flex-1", children: /* @__PURE__ */ jsx27(
+      MCMAActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        materialMap: MCMAMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleMCMAAnswerOnChange,
+        isPreview
+      }
+    ) })
+  ] });
+};
+var MCMAActivityContent_default = MCMAActivityContent;
+
+// src/components/activities/material-content/MCSAActivityMaterialContent.tsx
+import { InlineMath as InlineMath7 } from "react-katex";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var MCSAActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview
+}) => {
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "MCSA"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const retrieveCorrectAnswer = () => {
+    return Object.keys(materialMap)[0];
+  };
+  const checkAnswerState = (correctAnswer2, currentAnswer, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    if (currentAnswer !== learnerAnswer) return "EMPTY";
+    if (correctAnswer2 === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const answerMap = retrieveAnswerMap();
+  const correctAnswer = retrieveCorrectAnswer();
+  return Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ jsx28("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs21("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
+      /* @__PURE__ */ jsx28("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx28("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ jsx28("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx28(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx28(
+        "div",
+        {
+          className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
+          children: materialMap[materialKey].map(
+            (materialSubKey, index2) => {
+              const learnerAnswerState = checkAnswerState(
+                correctAnswer,
+                materialSubKey,
+                answerMap[materialKey]
+              );
+              return /* @__PURE__ */ jsxs21(
+                "div",
+                {
+                  className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && materialSubKey === correctAnswer || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge" : ""}`,
+                  onClick: () => {
+                    onChange(answer, materialKey, materialSubKey);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx28("div", { className: "", children: /* @__PURE__ */ jsx28(
+                      BaseImage_default,
+                      {
+                        src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.png" : "/icons/not-selected-item-element.png",
+                        alt: "circle",
+                        size: "small",
+                        onClick: () => {
+                        }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx28("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      materialSubKey
+                    ).map((inputPart, index3) => /* @__PURE__ */ jsx28(
+                      "span",
+                      {
+                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+                      },
+                      index3
+                    )) }) : /* @__PURE__ */ jsx28(
+                      ShowMaterialMediaByContentType_default,
+                      {
+                        contentType: contentMap.type,
+                        src: materialSubKey,
+                        canFullScreen: true
+                      },
+                      `${uniqueValue}-${index2}`
+                    ) })
+                  ]
+                },
+                index2
+              );
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx28("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+        answerMap[materialKey]
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
+        "span",
+        {
+          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+        },
+        index2
+      )) })
+    ] }) }, index);
+  });
+};
+var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
+
+// src/components/activities/MCSAActivityContent.tsx
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var MCSAActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const MCSABodyMap = parseBodyMapFromData(data, "MCSA");
+  const MCSAMaterialMap = parseMaterialMapFromData(data, "MCSA");
+  const handleMCSAAnswerOnChange = (answer2, key, value) => {
+    let foundIndex = answer2.data.findIndex(
+      (answerData) => answerData.type === "MCSA"
+    );
+    const answerMap = answer2.data[foundIndex].answerMap;
+    answerMap[key] = value;
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx29("div", { className: "w-full md:w-[60%]", children: /* @__PURE__ */ jsx29(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__PURE__ */ jsx29("div", { className: "contents md:hidden", children: /* @__PURE__ */ jsx29(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx29("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx29(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx29("div", { className: "w-full md:flex-1", children: /* @__PURE__ */ jsx29(
+      MCSAActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        materialMap: MCSAMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleMCSAAnswerOnChange,
+        isPreview
+      }
+    ) })
+  ] });
+};
+var MCSAActivityContent_default = MCSAActivityContent;
+
+// src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+var OpenEndedActivityMaterialContent = ({
+  answer,
+  contentMap,
+  onChange
+}) => {
+  const retrieveAnswer = () => {
+    if (!answer)
+      return {
+        answerMap: {
+          ANSWER: ""
+        }
+      };
+    return answer.data.find(
+      (answerData) => answerData.type === "OPEN_ENDED"
+    );
+  };
+  const retrieveAnswerMap = () => {
+    const { answerMap: answerMap2 } = retrieveAnswer();
+    return answerMap2;
+  };
+  const checkShowContent = () => {
+    return false;
+  };
+  const RenderTextContent = (answerMap2) => {
+    const answerMapAnswer = answerMap2["ANSWER"];
+    return /* @__PURE__ */ jsx30(
+      InputGroup_default,
+      {
+        type: "textarea",
+        value: answerMapAnswer,
+        useMinHeight: true,
+        onChange: (e) => {
+          onChange(answer, e.target.value);
+        }
+      }
+    );
+  };
+  const answerMap = retrieveAnswerMap();
+  return /* @__PURE__ */ jsx30(Fragment5, { children: /* @__PURE__ */ jsxs23("div", { className: "", children: [
+    /* @__PURE__ */ jsx30("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx30("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ jsx30("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
+    contentMap.type === "TEXT" ? RenderTextContent(answerMap) : null
+  ] }) });
+};
+var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
+
+// src/components/activities/OpenEndedActivityContent.tsx
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var OpenEndedActivityContent = ({
+  answer,
+  data,
+  changeAnswer,
+  showMaterialContent
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const openEndedBodyMap = parseBodyMapFromData(data, "OPEN_ENDED");
+  const handleOpenEndedAnswerOnChange = (answer2, value) => {
+    let foundIndex = answer2.data.findIndex(
+      (answerData) => answerData.type === "OPEN_ENDED"
+    );
+    const answerMap = answer2.data[foundIndex].answerMap;
+    answerMap["ANSWER"] = value;
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx31(
+      "div",
+      {
+        className: `${showMaterialContent ? "w-full md:w-[40%]" : "w-full"}`,
+        children: /* @__PURE__ */ jsx31(
+          ActivityBodyContent_default,
+          {
+            bodyMap: openEndedBodyMap,
+            templateType: "OPEN_ENDED"
+          }
+        )
+      }
+    ),
+    showMaterialContent ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
+      /* @__PURE__ */ jsx31("div", { className: "contents md:hidden", children: /* @__PURE__ */ jsx31(DividerLine_default, {}) }),
+      /* @__PURE__ */ jsx31("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx31(VerticalDividerLine_default, {}) }),
+      /* @__PURE__ */ jsx31("div", { className: "w-full md:flex-1", children: /* @__PURE__ */ jsx31(
+        OpenEndedActivityMaterialContent_default,
+        {
+          answer,
+          contentMap,
+          onChange: handleOpenEndedAnswerOnChange
+        }
+      ) })
+    ] }) : null
+  ] });
+};
+var OpenEndedActivityContent_default = OpenEndedActivityContent;
+
+// src/components/activities/material-content/OrderingActivityMaterialContent.tsx
+import { useEffect as useEffect8, useState as useState16 } from "react";
+import { useDrop as useDrop6 } from "react-dnd";
+import { InlineMath as InlineMath8 } from "react-katex";
+
+// src/components/dnds/DraggableDroppableItem.tsx
+import { useRef as useRef6 } from "react";
+import { useDrag as useDrag2, useDrop as useDrop5 } from "react-dnd";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var DraggableDroppableItem = ({
+  key,
+  item,
+  type,
+  component,
+  moveCardHandler,
+  dropRef,
+  target,
+  setTarget
+}) => {
+  const ref = useRef6(null);
+  const [, drop] = useDrop5({
+    accept: type,
+    hover() {
+      if (!ref.current) {
+        return;
+      }
+      if (item.index && target !== item.index) {
+        setTarget(item.index);
+      }
+    }
+  });
+  const [{ isDragging }, drag] = useDrag2({
+    type,
+    item,
+    end: (item2, monitor) => {
+      const dropResult = monitor.getDropResult();
+      if (dropResult) {
+        moveCardHandler();
+      }
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  });
+  const opacity = isDragging ? 0.4 : 1;
+  drag(drop(ref));
+  return /* @__PURE__ */ jsx32(
+    "div",
+    {
+      className: `${isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"} transition-all duration-500`,
+      ref: dropRef,
+      children: /* @__PURE__ */ jsx32("div", { ref, className: "w-full", style: { opacity }, children: component })
+    },
+    key
+  );
+};
+var DraggableDroppableItem_default = DraggableDroppableItem;
+
+// src/components/activities/material-content/OrderingActivityMaterialContent.tsx
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+var OrderingActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const [selectedTargetKey, setSelectedTargetKey] = useState16(null);
+  const [selectedKey, setSelectedKey] = useState16(null);
+  const { screenSize } = useScreenSize_default();
+  const [view, setView] = useState16("PC");
+  const [{ isOver, canDrop }, drop] = useDrop6({
+    accept: "ORDERING",
+    drop: () => {
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+  useEffect8(() => {
+    if (!screenSize) return;
+    if (screenSize.width <= 768) {
+      setView("TABLET");
+    } else {
+      setView("PC");
+    }
+  }, [screenSize]);
+  useEffect8(() => {
+    if (!showCorrectAnswer) return;
+    const answerMap2 = answer.data.find(
+      (answerData) => answerData.type === "ORDERING"
+    ).answerMap;
+    Object.keys(answerMap2).forEach((answerKey, index) => {
+      answerMap2[answerKey] = index;
+    });
+  }, [showCorrectAnswer]);
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "ORDERING"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const checkAnswerState = (correctAnswer, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const handleOrderingActivityItemChange = (selectedKey2, materialKey) => {
+    if (checkCanAnswerQuestion()) {
+      if (selectedKey2) {
+        onChange(answer, selectedKey2, materialKey);
+        setSelectedKey(null);
+      } else {
+        setSelectedKey(materialKey);
+      }
+    }
+  };
+  const calculateMarginTop = (index) => {
+    if (index === 0) {
+      return 0;
+    } else if (index === 1) {
+      return 150;
+    } else if (index % 2 === 0) {
+      return -150;
+    } else if (index % 2 === 1) {
+      return 0;
+    }
+    return 0;
+  };
+  const answerMap = retrieveAnswerMap();
+  return /* @__PURE__ */ jsx33("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    const learnerAnswerState = checkAnswerState(
+      answerMap[materialKey] + "",
+      index + ""
+    );
+    return /* @__PURE__ */ jsx33("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        className: `flex flex-row items-center my-4 mx-2`,
+        style: {
+          marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
+        },
+        children: [
+          /* @__PURE__ */ jsx33("div", { className: "mr-3", children: /* @__PURE__ */ jsx33(
+            "div",
+            {
+              className: `${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : selectedKey === materialKey ? "border-catchup-blue" : "border-catchup-lighter-gray"} min-h-catchup-activity-outer-box-item w-catchup-activity-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
+              children: /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  className: `${selectedKey === materialKey ? "border-2 border-catchup-light-gray" : "border-2 border-catchup-blue"} flex flex-col items-center justify-center transition-all duration-300 rounded-catchup-full w-[50px] h-[50px]`,
+                  children: /* @__PURE__ */ jsx33("p", { className: "", children: parseFloat(materialKey) + 1 })
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx33(
+            DraggableDroppableItem_default,
+            {
+              item: { index: materialKey },
+              type: "ORDERING",
+              dropRef: drop,
+              component: /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  className: `${canDrop ? selectedKey !== materialKey ? selectedTargetKey === materialKey ? "bg-catchup-light-blue rounded-catchup-xlarge" : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40" : "" : ""} flex-1 min-h-catchup-activity-outer-box-item flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+                  onMouseDown: () => {
+                    if (checkCanAnswerQuestion()) {
+                      setSelectedKey(materialKey);
+                    }
+                  },
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    materialMap[answerMap[materialKey]]
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
+                    "span",
+                    {
+                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: /* @__PURE__ */ jsx33(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+                    },
+                    index2
+                  )) }) : /* @__PURE__ */ jsx33(
+                    ShowMaterialMediaByContentType_default,
+                    {
+                      contentType: contentMap.type,
+                      src: materialMap[answerMap[materialKey]],
+                      canFullScreen: true
+                    },
+                    `${uniqueValue}-${index}`
+                  )
+                }
+              ),
+              target: selectedTargetKey,
+              setTarget: setSelectedTargetKey,
+              moveCardHandler: () => {
+                if (!selectedKey) return;
+                if (!selectedTargetKey) return;
+                handleOrderingActivityItemChange(
+                  selectedKey,
+                  selectedTargetKey
+                );
+              }
+            },
+            index
+          )
+        ]
+      }
+    ) }, index);
+  }) });
+};
+var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
+
+// src/components/activities/OrderingActivityContent.tsx
+import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+var OrderingActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");
+  const orderingMaterialMap = parseMaterialMapFromData(data, "ORDERING");
+  const handleOrderingAnswerOnChange = (answer2, primaryKey, secondaryKey) => {
+    let foundIndex = answer2.data.findIndex(
+      (answerData) => answerData.type === "ORDERING"
+    );
+    const answerMap = answer2.data[foundIndex].answerMap;
+    const prevValue = answerMap[primaryKey];
+    answerMap[primaryKey] = answerMap[secondaryKey];
+    answerMap[secondaryKey] = prevValue;
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    /* @__PURE__ */ jsx34(
+      ActivityBodyContent_default,
+      {
+        bodyMap: orderingBodyMap,
+        templateType: "ORDERING"
+      }
+    ),
+    /* @__PURE__ */ jsx34(DividerLine_default, {}),
+    /* @__PURE__ */ jsx34(
+      OrderingActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        materialMap: orderingMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleOrderingAnswerOnChange,
+        isPreview,
+        showCorrectAnswer
+      }
+    )
+  ] });
+};
+var OrderingActivityContent_default = OrderingActivityContent;
+
+// src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
+import { useEffect as useEffect9, useState as useState17 } from "react";
+import { InlineMath as InlineMath9 } from "react-katex";
+import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+var TrueFalseActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const { screenSize } = useScreenSize_default();
+  const [shuffleOptionList, setShuffleOptionList] = useState17([]);
+  useEffect9(() => {
+    const optionList = [];
+    optionList.push(...materialMap.trueList);
+    optionList.push(...materialMap.falseList);
+    if (isPreview) {
+      setShuffleOptionList(optionList);
+    } else {
+      setShuffleOptionList(shuffleArray(optionList));
+    }
+  }, []);
+  useEffect9(() => {
+    if (!showCorrectAnswer) return;
+    answer.data.find(
+      (answerData) => answerData.type === "TRUE_FALSE"
+    ).answerMap = materialMap;
+  }, [showCorrectAnswer]);
+  const retrieveAnswer = () => {
+    if (!answer)
+      return {
+        answerMap: {
+          trueList: [],
+          falseList: []
+        }
+      };
+    return answer.data.find(
+      (answerData) => answerData.type === "TRUE_FALSE"
+    );
+  };
+  const retrieveAnswerMap = () => {
+    const { answerMap: answerMap2 } = retrieveAnswer();
+    return answerMap2;
+  };
+  const checkAnswerState = (correctAnswer, learnerAnswer) => {
+    if (!isPreview) return "HIDDEN";
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+  const answerMap = retrieveAnswerMap();
+  return /* @__PURE__ */ jsxs27("div", { className: "", children: [
+    /* @__PURE__ */ jsx35("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx35("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ jsx35("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx35(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsxs27("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx35("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx35("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ jsx35("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx35("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+    ] }),
+    checkCanAnswerQuestion() ? /* @__PURE__ */ jsx35("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+      const correctAnswer = materialMap.trueList.find(
+        (trueItem) => trueItem === shuffleOption
+      ) !== void 0 ? "TRUE" : "FALSE";
+      const learnerAnswer = answerMap.trueList.find(
+        (trueItem) => trueItem === shuffleOption
+      ) !== void 0 ? "TRUE" : "FALSE";
+      const learnerAnswerState = checkAnswerState(
+        correctAnswer,
+        learnerAnswer
+      );
+      return /* @__PURE__ */ jsxs27(
+        "div",
+        {
+          className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 ${learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx35("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx35("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              shuffleOption
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx35(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-2xl", children: /* @__PURE__ */ jsx35(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )) }) : /* @__PURE__ */ jsx35(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: shuffleOption,
+                canFullScreen: true
+              },
+              `${uniqueValue}-${index}`
+            ) }),
+            /* @__PURE__ */ jsxs27("div", { className: "flex flex-row items-center gap-x-2", children: [
+              /* @__PURE__ */ jsx35("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx35("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx35(
+                BaseImage_default,
+                {
+                  src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.png" : "/icons/empty-checkbox.png",
+                  alt: "checkbox-empty-checkbox",
+                  size: "small",
+                  onClick: () => {
+                    onChange(answer, "TRUE", shuffleOption);
+                  }
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx35("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx35("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx35(
+                BaseImage_default,
+                {
+                  src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.png" : "/icons/empty-checkbox.png",
+                  alt: "checkbox-empty-checkbox",
+                  size: "small",
+                  onClick: () => {
+                    onChange(answer, "FALSE", shuffleOption);
+                  }
+                }
+              ) }) })
+            ] })
+          ]
+        },
+        index
+      );
+    }) }) : /* @__PURE__ */ jsxs27(Fragment8, { children: [
+      answerMap.trueList.map((item) => /* @__PURE__ */ jsxs27("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx35("div", { className: "flex-1", children: /* @__PURE__ */ jsx35("p", { children: item }) }),
+        /* @__PURE__ */ jsx35("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx35("p", { className: "underline", children: i18n_default.t("true") }) })
+      ] })),
+      answerMap.falseList.map((item) => /* @__PURE__ */ jsxs27("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx35("div", { className: "flex-1", children: /* @__PURE__ */ jsx35("p", { children: item }) }),
+        /* @__PURE__ */ jsx35("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx35("p", { className: "underline", children: i18n_default.t("false") }) })
+      ] }))
+    ] })
+  ] });
+};
+var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
+
+// src/components/activities/TrueFalseActivityContent.tsx
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+var TrueFalseActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer
+}) => {
+  const contentMap = parseContentMapFromData(data);
+  const trueFalseBodyMap = parseBodyMapFromData(data, "TRUE_FALSE");
+  const trueFalseMaterialMap = parseMaterialMapFromData(data, "TRUE_FALSE");
+  const retrieveCurrentAnswerMap = () => {
+    let foundIndex = answer.data.findIndex(
+      (answerData) => answerData.type === "TRUE_FALSE"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+  const handleTrueFalseAnswerOnChange = (answer2, key, value) => {
+    const answerMap = retrieveCurrentAnswerMap();
+    if (key === "TRUE") {
+      const foundFalseIndex = answerMap.falseList.findIndex(
+        (item) => item === value
+      );
+      if (foundFalseIndex !== -1) {
+        answerMap.falseList.splice(foundFalseIndex, 1);
+      }
+      const foundTrueIndex = answerMap.falseList.findIndex(
+        (item) => item === value
+      );
+      if (foundTrueIndex === -1) {
+        answerMap.trueList.push(value);
+      }
+    } else if (key === "FALSE") {
+      const foundTrueIndex = answerMap.trueList.findIndex(
+        (item) => item === value
+      );
+      if (foundTrueIndex !== -1) {
+        answerMap.trueList.splice(foundTrueIndex, 1);
+      }
+      const foundFalseIndex = answerMap.falseList.findIndex(
+        (item) => item === value
+      );
+      if (foundFalseIndex === -1) {
+        answerMap.falseList.push(value);
+      }
+    }
+    changeAnswer(answer2);
+  };
+  return /* @__PURE__ */ jsxs28("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx36("div", { className: "w-full md:w-[40%]", children: /* @__PURE__ */ jsx36(
+      ActivityBodyContent_default,
+      {
+        bodyMap: trueFalseBodyMap,
+        templateType: "GROUPING"
+      }
+    ) }),
+    /* @__PURE__ */ jsx36("div", { className: "contents md:hidden", children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx36("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx36(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx36("div", { className: "w-full md:flex-1", children: /* @__PURE__ */ jsx36(
+      TrueFalseActivityMaterialContent_default,
+      {
+        uniqueValue: JSON.stringify(data.contentMap),
+        answer,
+        materialMap: trueFalseMaterialMap,
+        contentMap,
+        checkCanAnswerQuestion: canAnswerQuestion,
+        onChange: handleTrueFalseAnswerOnChange,
+        isPreview,
+        showCorrectAnswer
+      }
+    ) })
+  ] });
+};
+var TrueFalseActivityContent_default = TrueFalseActivityContent;
+
+// src/components/dividers/BlueVerticalDividerLine.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+var BlueVerticalDividerLine = ({ opacity }) => {
+  return /* @__PURE__ */ jsx37(
+    "div",
+    {
+      className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
+    }
+  );
+};
+var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
+
+// src/utilization/StorageUtilization.ts
+var convertDataURLtoFile = (dataurl, filename) => {
+  var arr = dataurl.split(","), mime = (arr[0].match(/:(.*?);/) || [])[1], bstr = atob(arr[arr.length - 1]), n = bstr.length, u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mime });
+};
+var retrieveDocumentTypeFromAcceptedFormat = (format) => {
+  if (format === "application/pdf") {
+    return "PDF";
+  } else if (format === "image/jpeg" || format === "image/png" || format === "image/jpg") {
+    return "IMAGE";
+  } else if (format === "audio/mp3") {
+    return "AUDIO";
+  }
+};
+var retrieveDocumentTypeFromExtension = (format) => {
+  if (format === "pdf") {
+    return "PDF";
+  } else if (format === "jpeg" || format === "png" || format === "jpg") {
+    return "IMAGE";
+  } else if (format === "mp3") {
+    return "AUDIO";
+  }
+};
 export {
   ApproveButton_default as ApproveButton,
   BaseImage_default as BaseImage,
   BaseLoading_default as BaseLoading,
+  BlueVerticalDividerLine_default as BlueVerticalDividerLine,
   CancelButton_default as CancelButton,
   CreateButton_default as CreateButton,
   DeleteButton_default as DeleteButton,
+  DividerLine_default as DividerLine,
+  DropdownActivityContent_default as DropdownActivityContent,
+  FillInTheBlanksActivityContent_default as FillInTheBlanksActivityContent,
+  GroupingActivityContent_default as GroupingActivityContent,
+  InputGroup_default as InputGroup,
+  MCMAActivityContent_default as MCMAActivityContent,
+  MCSAActivityContent_default as MCSAActivityContent,
+  MatchingActivityContent_default as MatchingActivityContent,
+  OpenEndedActivityContent_default as OpenEndedActivityContent,
+  OrderingActivityContent_default as OrderingActivityContent,
   PrimaryButton_default as PrimaryButton,
-  SecondaryButton_default as SecondaryButton
+  SecondaryButton_default as SecondaryButton,
+  TrueFalseActivityContent_default as TrueFalseActivityContent,
+  VerticalDividerLine_default as VerticalDividerLine,
+  checkActivityAnswerState,
+  checkIfAnswerIsEmpty,
+  constructActivityAnswerMap,
+  constructActivityAnswerStateList,
+  constructActivityItemListWithAnswersForAI,
+  constructActivityItemListWithSolutionForAI,
+  constructInputWithSpecialExpressionList,
+  convertDataURLtoFile,
+  findBestFitActivity,
+  getColorByIndex,
+  i18n_default as i18n,
+  ignoreMathematicalExpression,
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+  retrieveActivityAnswerFromAnswerList,
+  retrieveActivityTemplateDTOOptionList,
+  retrieveClockTimeLeft,
+  retrieveColorByScore,
+  retrieveContentTypeOptionList,
+  retrieveContestTypeOptionList,
+  retrieveCoterieTypeFromStandardExamCoterieType,
+  retrieveCurrentDefaultDataMap,
+  retrieveDistintCoterieTypeFromCatchtivityApplicationDTO,
+  retrieveDocumentTypeFromAcceptedFormat,
+  retrieveDocumentTypeFromExtension,
+  retrieveDurationInMinutesOptionList,
+  retrieveDurationInSecondsOptionList,
+  retrieveDurationTypeOptionList,
+  retrieveEachTimeSpentInSeconds,
+  retrieveFrequencyTypeOptionList,
+  retrieveStandardExamCoterieTypeOptionListByStandardExamType,
+  retrieveStandardExamTypeIcon,
+  retrieveStandardExamTypeOptionList,
+  retrieveStatusOptionList,
+  retrieveTaxonomyGroupName,
+  retrieveTaxonomyName,
+  retrieveTaxonomyType,
+  retrieveTotalTimeSpentInMinutes,
+  retrieveTotalTimeSpentInSeconds,
+  retrieveValidationRequirementList,
+  shuffleArray,
+  useScreenSize_default as useScreenSize
 };