catchup-library-web 1.10.1 → 1.10.3

package/dist/index.js

@@ -4302,6 +4302,7 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
+var import_react15 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DropdownActivityContent = ({
   answer,
@@ -4315,23 +4316,41 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const retrieveCurrentAnswerMap = () => {
+  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react15.useState)(() => {
+    return retrieveCurrentAnswerMap();
+  });
+  function 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);
+  }
+  (0, import_react15.useEffect)(() => {
+    setCurrentAnswerMap(retrieveCurrentAnswerMap());
+  }, [answer]);
+  const handleDropdownAnswerOnChange = (answerObj, key, value) => {
+    const newAnswer = __spreadProps(__spreadValues({}, answerObj), {
+      data: answerObj.data.map((item) => {
+        if (item.type === "DROPDOWN") {
+          return __spreadProps(__spreadValues({}, item), {
+            answerMap: __spreadProps(__spreadValues({}, item.answerMap), {
+              [key]: value
+            })
+          });
+        }
+        return item;
+      })
+    });
+    const newAnswerMap = __spreadProps(__spreadValues({}, currentAnswerMap), { [key]: value });
+    setCurrentAnswerMap(newAnswerMap);
+    changeAnswer(newAnswer);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
-        answerMap: retrieveCurrentAnswerMap(),
+        answerMap: currentAnswerMap,
         contentMap,
         templateType: "DROPDOWN"
       }
@@ -4357,8 +4376,8 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
 var import_react_katex3 = require("react-katex");
-var import_react16 = require("react");
 var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_dnd3 = require("react-dnd");
 
 // src/components/dnds/DraggableItem.tsx
@@ -4397,7 +4416,7 @@ var DraggableItem = ({
 var DraggableItem_default = DraggableItem;
 
 // src/components/dnds/DroppableItem.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_dnd2 = require("react-dnd");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var DroppableItem = ({
@@ -4409,7 +4428,7 @@ var DroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = (0, import_react15.useRef)(null);
+  const ref = (0, import_react16.useRef)(null);
   const [, drop] = (0, import_react_dnd2.useDrop)({
     accept: type,
     hover() {
@@ -4444,9 +4463,9 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react16.useState)([]);
-  const [selectedOption, setSelectedOption] = (0, import_react16.useState)(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = (0, import_react16.useState)(null);
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react17.useState)([]);
+  const [selectedOption, setSelectedOption] = (0, import_react17.useState)(null);
+  const [pasteOptionIndex, setPasteOptionIndex] = (0, import_react17.useState)(null);
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd3.useDrop)({
     accept: "FILL_IN_THE_BLANKS",
     drop: () => {
@@ -4456,10 +4475,10 @@ var FillInTheBlanksActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4467,7 +4486,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     if (foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
     foundAnswer.answerMap = Object.keys(materialMap).map(
-      (materialMapKey, index) => JSON.parse(materialMap[materialMapKey])[0]
+      (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
     );
     onChange(answer, 0, JSON.parse(materialMap[0])[0]);
   }, [showCorrectAnswer]);
@@ -4637,6 +4656,7 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
+var import_react19 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var FillInTheBlanksActivityContent = ({
   answer,
@@ -4657,12 +4677,18 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const retrieveCurrentAnswerMap = () => {
+  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react19.useState)(() => {
+    return retrieveCurrentAnswerMap();
+  });
+  function retrieveCurrentAnswerMap() {
     let foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
     );
     return answer.data[foundIndex].answerMap;
-  };
+  }
+  (0, import_react19.useEffect)(() => {
+    setCurrentAnswerMap(retrieveCurrentAnswerMap());
+  }, [answer]);
   const constructAnswerOptionList = () => {
     const optionList = [];
     Object.keys(fillInTheBlanksMaterialMap).forEach((key) => {
@@ -4681,17 +4707,29 @@ var FillInTheBlanksActivityContent = ({
     });
     return optionList;
   };
-  const handleFillInTheBlanksAnswerOnChange = (answer2, key, value) => {
-    const answerMap = retrieveCurrentAnswerMap();
-    answerMap[key] = value;
-    changeAnswer(answer2);
+  const handleFillInTheBlanksAnswerOnChange = (answerObj, key, value) => {
+    const newAnswer = __spreadProps(__spreadValues({}, answerObj), {
+      data: answerObj.data.map((item) => {
+        if (item.type === "FILL_IN_THE_BLANKS") {
+          return __spreadProps(__spreadValues({}, item), {
+            answerMap: __spreadProps(__spreadValues({}, item.answerMap), {
+              [key]: value
+            })
+          });
+        }
+        return item;
+      })
+    });
+    const newAnswerMap = __spreadProps(__spreadValues({}, currentAnswerMap), { [key]: value });
+    setCurrentAnswerMap(newAnswerMap);
+    changeAnswer(newAnswer);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
-        answerMap: retrieveCurrentAnswerMap(),
+        answerMap: currentAnswerMap,
         contentMap,
         templateType: "FILL_IN_THE_BLANKS"
       }
@@ -4717,22 +4755,22 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_react_dnd4 = require("react-dnd");
 var import_react_katex4 = require("react-katex");
 
 // src/hooks/useScreenSize.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = (0, import_react18.useState)({
+  const [containerSize, setContainerSize] = (0, import_react20.useState)({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = (0, import_react18.useState)({
+  const [screenSize, setScreenSize] = (0, import_react20.useState)({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -4768,10 +4806,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react19.useState)(null);
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react19.useState)(null);
-  const [isShuffled, setIsShuffled] = (0, import_react19.useState)(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react19.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react21.useState)(null);
+  const [isShuffled, setIsShuffled] = (0, import_react21.useState)(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
   const { screenSize, containerSize } = useScreenSize_default();
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd4.useDrop)({
     accept: "GROUPING",
@@ -4782,22 +4820,22 @@ var GroupingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const ref = (0, import_react19.useRef)(null);
-  const itemsRef = (0, import_react19.useRef)(null);
-  const [maxWidth, setMaxWidth] = (0, import_react19.useState)(0);
-  (0, import_react19.useEffect)(() => {
+  const ref = (0, import_react21.useRef)(null);
+  const itemsRef = (0, import_react21.useRef)(null);
+  const [maxWidth, setMaxWidth] = (0, import_react21.useState)(0);
+  (0, import_react21.useEffect)(() => {
     if (!ref) return;
     if (!ref.current) return;
     if (!screenSize) return;
     setMaxWidth(ref.current.offsetWidth - 12);
   }, [ref, screenSize]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!itemsRef) return;
     if (!itemsRef.current) return;
     if (!containerSize) return;
     itemsRef.current.style.width = `${containerSize.width - 200}px`;
   }, [itemsRef, containerSize]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -4818,7 +4856,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -5092,7 +5130,7 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_react_dnd5 = require("react-dnd");
 var import_react_katex5 = require("react-katex");
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -5106,10 +5144,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react20.useState)(null);
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react20.useState)(null);
-  const [isShuffled, setIsShuffled] = (0, import_react20.useState)(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react20.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, import_react22.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react22.useState)(null);
+  const [isShuffled, setIsShuffled] = (0, import_react22.useState)(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react22.useState)([]);
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd5.useDrop)({
     accept: "MATCHING",
     drop: () => {
@@ -5120,8 +5158,8 @@ var MatchingActivityMaterialContent = ({
     })
   });
   const { containerSize } = useScreenSize_default();
-  const itemsRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const itemsRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5140,13 +5178,13 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!itemsRef) return;
     if (!itemsRef.current) return;
     if (!containerSize) return;
@@ -5795,12 +5833,12 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_react_dnd7 = require("react-dnd");
 var import_react_katex8 = require("react-katex");
 
 // src/components/dnds/DraggableDroppableItem.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_react_dnd6 = require("react-dnd");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var DraggableDroppableItem = ({
@@ -5813,7 +5851,7 @@ var DraggableDroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = (0, import_react21.useRef)(null);
+  const ref = (0, import_react23.useRef)(null);
   const [, drop] = (0, import_react_dnd6.useDrop)({
     accept: type,
     hover() {
@@ -5864,10 +5902,10 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react22.useState)(null);
-  const [selectedKey, setSelectedKey] = (0, import_react22.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react24.useState)(null);
+  const [selectedKey, setSelectedKey] = (0, import_react24.useState)(null);
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = (0, import_react22.useState)("PC");
+  const [view, setView] = (0, import_react24.useState)("PC");
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd7.useDrop)({
     accept: "ORDERING",
     drop: () => {
@@ -5877,7 +5915,7 @@ var OrderingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!screenSize) return;
     if (screenSize.width <= 768) {
       setView("TABLET");
@@ -5885,7 +5923,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -6062,7 +6100,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_react_katex9 = require("react-katex");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
@@ -6076,8 +6114,8 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react23.useState)([]);
-  (0, import_react23.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react25.useState)([]);
+  (0, import_react25.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6087,7 +6125,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -6395,7 +6433,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -6447,14 +6485,14 @@ var ActivityPreviewByData = ({
   showTaxonomy,
   isFullScreen
 }) => {
-  const [key, setKey] = (0, import_react24.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react24.useState)(null);
-  const [optionList, setOptionList] = (0, import_react24.useState)([]);
-  (0, import_react24.useEffect)(() => {
+  const [key, setKey] = (0, import_react26.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react26.useState)(null);
+  const [optionList, setOptionList] = (0, import_react26.useState)([]);
+  (0, import_react26.useEffect)(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
     let foundTypeOption;
@@ -6469,7 +6507,7 @@ var ActivityPreviewByData = ({
       setSelectedType(typeOptionList[0].id);
     }
   }, [typeOptionList, lockedType]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const retrieveTaxonomyNameByActivityTypeFromData = (type) => {
       let taxonomyMap = {
         name: ""

package/dist/index.mjs

@@ -4103,6 +4103,7 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
+import { useState as useState13, useEffect as useEffect5 } from "react";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answer,
@@ -4116,23 +4117,41 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const retrieveCurrentAnswerMap = () => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState13(() => {
+    return retrieveCurrentAnswerMap();
+  });
+  function 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);
+  }
+  useEffect5(() => {
+    setCurrentAnswerMap(retrieveCurrentAnswerMap());
+  }, [answer]);
+  const handleDropdownAnswerOnChange = (answerObj, key, value) => {
+    const newAnswer = __spreadProps(__spreadValues({}, answerObj), {
+      data: answerObj.data.map((item) => {
+        if (item.type === "DROPDOWN") {
+          return __spreadProps(__spreadValues({}, item), {
+            answerMap: __spreadProps(__spreadValues({}, item.answerMap), {
+              [key]: value
+            })
+          });
+        }
+        return item;
+      })
+    });
+    const newAnswerMap = __spreadProps(__spreadValues({}, currentAnswerMap), { [key]: value });
+    setCurrentAnswerMap(newAnswerMap);
+    changeAnswer(newAnswer);
   };
   return /* @__PURE__ */ jsxs13("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx20("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx20(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
-        answerMap: retrieveCurrentAnswerMap(),
+        answerMap: currentAnswerMap,
         contentMap,
         templateType: "DROPDOWN"
       }
@@ -4158,8 +4177,8 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
-import { useState as useState13 } from "react";
-import { useEffect as useEffect5 } from "react";
+import { useState as useState14 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { useDrop as useDrop2 } from "react-dnd";
 
 // src/components/dnds/DraggableItem.tsx
@@ -4245,9 +4264,9 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState13([]);
-  const [selectedOption, setSelectedOption] = useState13(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = useState13(null);
+  const [shuffleOptionList, setShuffleOptionList] = useState14([]);
+  const [selectedOption, setSelectedOption] = useState14(null);
+  const [pasteOptionIndex, setPasteOptionIndex] = useState14(null);
   const [{ isOver, canDrop }, drop] = useDrop2({
     accept: "FILL_IN_THE_BLANKS",
     drop: () => {
@@ -4257,10 +4276,10 @@ var FillInTheBlanksActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  useEffect5(() => {
+  useEffect6(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4268,7 +4287,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     if (foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
     foundAnswer.answerMap = Object.keys(materialMap).map(
-      (materialMapKey, index) => JSON.parse(materialMap[materialMapKey])[0]
+      (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
     );
     onChange(answer, 0, JSON.parse(materialMap[0])[0]);
   }, [showCorrectAnswer]);
@@ -4438,6 +4457,7 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
+import { useState as useState15, useEffect as useEffect7 } from "react";
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answer,
@@ -4458,12 +4478,18 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const retrieveCurrentAnswerMap = () => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState15(() => {
+    return retrieveCurrentAnswerMap();
+  });
+  function retrieveCurrentAnswerMap() {
     let foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
     );
     return answer.data[foundIndex].answerMap;
-  };
+  }
+  useEffect7(() => {
+    setCurrentAnswerMap(retrieveCurrentAnswerMap());
+  }, [answer]);
   const constructAnswerOptionList = () => {
     const optionList = [];
     Object.keys(fillInTheBlanksMaterialMap).forEach((key) => {
@@ -4482,17 +4508,29 @@ var FillInTheBlanksActivityContent = ({
     });
     return optionList;
   };
-  const handleFillInTheBlanksAnswerOnChange = (answer2, key, value) => {
-    const answerMap = retrieveCurrentAnswerMap();
-    answerMap[key] = value;
-    changeAnswer(answer2);
+  const handleFillInTheBlanksAnswerOnChange = (answerObj, key, value) => {
+    const newAnswer = __spreadProps(__spreadValues({}, answerObj), {
+      data: answerObj.data.map((item) => {
+        if (item.type === "FILL_IN_THE_BLANKS") {
+          return __spreadProps(__spreadValues({}, item), {
+            answerMap: __spreadProps(__spreadValues({}, item.answerMap), {
+              [key]: value
+            })
+          });
+        }
+        return item;
+      })
+    });
+    const newAnswerMap = __spreadProps(__spreadValues({}, currentAnswerMap), { [key]: value });
+    setCurrentAnswerMap(newAnswerMap);
+    changeAnswer(newAnswer);
   };
   return /* @__PURE__ */ jsxs15("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx24("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx24(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
-        answerMap: retrieveCurrentAnswerMap(),
+        answerMap: currentAnswerMap,
         contentMap,
         templateType: "FILL_IN_THE_BLANKS"
       }
@@ -4518,22 +4556,22 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect7, useRef as useRef4, useState as useState15 } from "react";
+import { useEffect as useEffect9, useRef as useRef4, useState as useState17 } from "react";
 import { useDrop as useDrop3 } from "react-dnd";
 import { InlineMath as InlineMath4 } from "react-katex";
 
 // src/hooks/useScreenSize.ts
-import { useState as useState14, useEffect as useEffect6 } from "react";
+import { useState as useState16, useEffect as useEffect8 } from "react";
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState14({
+  const [containerSize, setContainerSize] = useState16({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = useState14({
+  const [screenSize, setScreenSize] = useState16({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  useEffect6(() => {
+  useEffect8(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -4569,10 +4607,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState15(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState15(null);
-  const [isShuffled, setIsShuffled] = useState15(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState15([]);
+  const [selectedValue, setSelectedValue] = useState17(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState17(null);
+  const [isShuffled, setIsShuffled] = useState17(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState17([]);
   const { screenSize, containerSize } = useScreenSize_default();
   const [{ isOver, canDrop }, drop] = useDrop3({
     accept: "GROUPING",
@@ -4585,20 +4623,20 @@ var GroupingActivityMaterialContent = ({
   });
   const ref = useRef4(null);
   const itemsRef = useRef4(null);
-  const [maxWidth, setMaxWidth] = useState15(0);
-  useEffect7(() => {
+  const [maxWidth, setMaxWidth] = useState17(0);
+  useEffect9(() => {
     if (!ref) return;
     if (!ref.current) return;
     if (!screenSize) return;
     setMaxWidth(ref.current.offsetWidth - 12);
   }, [ref, screenSize]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!itemsRef) return;
     if (!itemsRef.current) return;
     if (!containerSize) return;
     itemsRef.current.style.width = `${containerSize.width - 200}px`;
   }, [itemsRef, containerSize]);
-  useEffect7(() => {
+  useEffect9(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -4619,7 +4657,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -4893,7 +4931,7 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect8, useRef as useRef5, useState as useState16 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState18 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
 import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -4907,10 +4945,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState16(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState16(null);
-  const [isShuffled, setIsShuffled] = useState16(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState16([]);
+  const [selectedValue, setSelectedValue] = useState18(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState18(null);
+  const [isShuffled, setIsShuffled] = useState18(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState18([]);
   const [{ isOver, canDrop }, drop] = useDrop4({
     accept: "MATCHING",
     drop: () => {
@@ -4922,7 +4960,7 @@ var MatchingActivityMaterialContent = ({
   });
   const { containerSize } = useScreenSize_default();
   const itemsRef = useRef5(null);
-  useEffect8(() => {
+  useEffect10(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -4941,13 +4979,13 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!itemsRef) return;
     if (!itemsRef.current) return;
     if (!containerSize) return;
@@ -5596,7 +5634,7 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect9, useState as useState17 } from "react";
+import { useEffect as useEffect11, useState as useState19 } from "react";
 import { useDrop as useDrop6 } from "react-dnd";
 import { InlineMath as InlineMath8 } from "react-katex";
 
@@ -5665,10 +5703,10 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = useState17(null);
-  const [selectedKey, setSelectedKey] = useState17(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
+  const [selectedKey, setSelectedKey] = useState19(null);
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = useState17("PC");
+  const [view, setView] = useState19("PC");
   const [{ isOver, canDrop }, drop] = useDrop6({
     accept: "ORDERING",
     drop: () => {
@@ -5678,7 +5716,7 @@ var OrderingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  useEffect9(() => {
+  useEffect11(() => {
     if (!screenSize) return;
     if (screenSize.width <= 768) {
       setView("TABLET");
@@ -5686,7 +5724,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -5863,7 +5901,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect10, useState as useState18 } from "react";
+import { useEffect as useEffect12, useState as useState20 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
 import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
@@ -5877,8 +5915,8 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = useState18([]);
-  useEffect10(() => {
+  const [shuffleOptionList, setShuffleOptionList] = useState20([]);
+  useEffect12(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -5888,7 +5926,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -6196,7 +6234,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect11, useState as useState19 } from "react";
+import { useEffect as useEffect13, useState as useState21 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -6248,14 +6286,14 @@ var ActivityPreviewByData = ({
   showTaxonomy,
   isFullScreen
 }) => {
-  const [key, setKey] = useState19((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState19(null);
-  const [optionList, setOptionList] = useState19([]);
-  useEffect11(() => {
+  const [key, setKey] = useState21((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState21(null);
+  const [optionList, setOptionList] = useState21([]);
+  useEffect13(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
     let foundTypeOption;
@@ -6270,7 +6308,7 @@ var ActivityPreviewByData = ({
       setSelectedType(typeOptionList[0].id);
     }
   }, [typeOptionList, lockedType]);
-  useEffect11(() => {
+  useEffect13(() => {
     const retrieveTaxonomyNameByActivityTypeFromData = (type) => {
       let taxonomyMap = {
         name: ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/DropdownActivityContent.tsx

@@ -8,6 +8,7 @@ import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
 import ActivityBodyContent from "./body-content/ActivityBodyContent";
 import DropdownActivityMaterialContent from "./material-content/DropdownActivityMaterialContent";
+import { useState, useEffect } from "react";
 
 const DropdownActivityContent = ({
   answer,
@@ -22,21 +23,52 @@ const DropdownActivityContent = ({
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
 
-  const retrieveCurrentAnswerMap = () => {
+  // Add state to track current answer map and force re-renders
+  const [currentAnswerMap, setCurrentAnswerMap] = useState(() => {
+    return retrieveCurrentAnswerMap();
+  });
+
+  // Function to retrieve answer map
+  function retrieveCurrentAnswerMap() {
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "DROPDOWN"
     );
     return answer.data[foundIndex].answerMap;
-  };
+  }
+
+  // Update local state when answer prop changes
+  useEffect(() => {
+    setCurrentAnswerMap(retrieveCurrentAnswerMap());
+  }, [answer]);
 
   const handleDropdownAnswerOnChange = (
-    answer: any,
+    answerObj: any,
     key: any,
     value: string
   ) => {
-    const answerMap = retrieveCurrentAnswerMap();
-    answerMap[key] = value;
-    changeAnswer(answer);
+    // Create a new answer object to ensure React detects the change
+    const newAnswer = {
+      ...answerObj,
+      data: answerObj.data.map((item: any) => {
+        if (item.type === "DROPDOWN") {
+          return {
+            ...item,
+            answerMap: {
+              ...item.answerMap,
+              [key]: value,
+            },
+          };
+        }
+        return item;
+      }),
+    };
+
+    // Update local state immediately for instant UI update
+    const newAnswerMap = { ...currentAnswerMap, [key]: value };
+    setCurrentAnswerMap(newAnswerMap);
+
+    // Call the parent's changeAnswer function
+    changeAnswer(newAnswer);
   };
 
   return (
@@ -44,7 +76,7 @@ const DropdownActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`}>
         <ActivityBodyContent
           bodyMap={dropdownBodyMap}
-          answerMap={retrieveCurrentAnswerMap()}
+          answerMap={currentAnswerMap} // Use local state instead of function call
           contentMap={contentMap}
           templateType={"DROPDOWN"}
         />

package/src/components/activities/FillInTheBlanksActivityContent.tsx

@@ -8,6 +8,7 @@ import FillInTheBlanksActivityMaterialContent from "./material-content/FillInThe
 import { IFillInTheBlanksActivityProps } from "../../properties/ActivityProperties";
 import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
+import { useState, useEffect } from "react";
 
 const FillInTheBlanksActivityContent = ({
   answer,
@@ -31,12 +32,23 @@ const FillInTheBlanksActivityContent = ({
     ? JSON.parse(data.fillInTheBlanksIncorrectList)
     : [];
 
-  const retrieveCurrentAnswerMap = () => {
+  // Add state to track current answer map and force re-renders
+  const [currentAnswerMap, setCurrentAnswerMap] = useState(() => {
+    return retrieveCurrentAnswerMap();
+  });
+
+  // Function to retrieve answer map
+  function retrieveCurrentAnswerMap() {
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
     );
     return answer.data[foundIndex].answerMap;
-  };
+  }
+
+  // Update local state when answer prop changes
+  useEffect(() => {
+    setCurrentAnswerMap(retrieveCurrentAnswerMap());
+  }, [answer]);
 
   const constructAnswerOptionList = () => {
     const optionList: any = [];
@@ -58,13 +70,33 @@ const FillInTheBlanksActivityContent = ({
   };
 
   const handleFillInTheBlanksAnswerOnChange = (
-    answer: any,
+    answerObj: any,
     key: any,
     value: string | null
   ) => {
-    const answerMap = retrieveCurrentAnswerMap();
-    answerMap[key] = value;
-    changeAnswer(answer);
+    // Create a new answer object to ensure React detects the change
+    const newAnswer = {
+      ...answerObj,
+      data: answerObj.data.map((item: any) => {
+        if (item.type === "FILL_IN_THE_BLANKS") {
+          return {
+            ...item,
+            answerMap: {
+              ...item.answerMap,
+              [key]: value,
+            },
+          };
+        }
+        return item;
+      }),
+    };
+
+    // Update local state immediately for instant UI update
+    const newAnswerMap = { ...currentAnswerMap, [key]: value };
+    setCurrentAnswerMap(newAnswerMap);
+
+    // Call the parent's changeAnswer function
+    changeAnswer(newAnswer);
   };
 
   return (
@@ -72,7 +104,7 @@ const FillInTheBlanksActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`}>
         <ActivityBodyContent
           bodyMap={fillInTheBlanksBodyMap}
-          answerMap={retrieveCurrentAnswerMap()}
+          answerMap={currentAnswerMap} // Use local state instead of function call
           contentMap={contentMap}
           templateType={"FILL_IN_THE_BLANKS"}
         />

package/src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx

@@ -48,7 +48,7 @@ const FillInTheBlanksActivityMaterialContent = ({
     if (foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
     foundAnswer.answerMap = Object.keys(materialMap).map(
-      (materialMapKey, index) => JSON.parse(materialMap[materialMapKey])[0]
+      (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
     );
 
     onChange(answer, 0, JSON.parse(materialMap[0])[0]);