catchup-library-web 1.10.2 → 1.10.4

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,26 +4475,21 @@ 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"
     );
-    if (!foundAnswer) return;
     if (foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
-    const newAnswerMap = {};
-    Object.keys(materialMap).forEach((materialMapKey) => {
-      newAnswerMap[materialMapKey] = JSON.parse(materialMap[materialMapKey])[0];
-    });
-    foundAnswer.answerMap = newAnswerMap;
-    if (Object.keys(materialMap).length > 0) {
-      onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-    }
-  }, [showCorrectAnswer, answer, materialMap, onChange]);
+    foundAnswer.answerMap = Object.keys(materialMap).map(
+      (materialMapKey) => 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"
@@ -4642,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,
@@ -4662,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) => {
@@ -4686,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"
       }
@@ -4722,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,
@@ -4773,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",
@@ -4787,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));
@@ -4823,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"
@@ -4872,7 +4905,7 @@ var GroupingActivityMaterialContent = ({
       "div",
       {
         ref: itemsRef,
-        className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
+        className: "flex-1 flex flex-row gap-4 overflow-x-auto py-2 min-w-0",
         children: filteredMaterialList.map((materialValue, index) => {
           return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             DraggableItem_default,
@@ -5097,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");
@@ -5111,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: () => {
@@ -5125,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));
@@ -5145,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;
@@ -5800,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 = ({
@@ -5818,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() {
@@ -5869,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: () => {
@@ -5882,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");
@@ -5890,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"
@@ -6067,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 = ({
@@ -6081,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);
@@ -6092,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"
@@ -6400,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");
@@ -6452,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;
@@ -6474,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,26 +4276,21 @@ 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"
     );
-    if (!foundAnswer) return;
     if (foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
-    const newAnswerMap = {};
-    Object.keys(materialMap).forEach((materialMapKey) => {
-      newAnswerMap[materialMapKey] = JSON.parse(materialMap[materialMapKey])[0];
-    });
-    foundAnswer.answerMap = newAnswerMap;
-    if (Object.keys(materialMap).length > 0) {
-      onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-    }
-  }, [showCorrectAnswer, answer, materialMap, onChange]);
+    foundAnswer.answerMap = Object.keys(materialMap).map(
+      (materialMapKey) => 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"
@@ -4443,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,
@@ -4463,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) => {
@@ -4487,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"
       }
@@ -4523,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,
@@ -4574,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",
@@ -4590,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));
@@ -4624,7 +4657,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -4673,7 +4706,7 @@ var GroupingActivityMaterialContent = ({
       "div",
       {
         ref: itemsRef,
-        className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
+        className: "flex-1 flex flex-row gap-4 overflow-x-auto py-2 min-w-0",
         children: filteredMaterialList.map((materialValue, index) => {
           return /* @__PURE__ */ jsx25(
             DraggableItem_default,
@@ -4898,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";
@@ -4912,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: () => {
@@ -4927,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));
@@ -4946,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;
@@ -5601,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";
 
@@ -5670,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: () => {
@@ -5683,7 +5716,7 @@ var OrderingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  useEffect9(() => {
+  useEffect11(() => {
     if (!screenSize) return;
     if (screenSize.width <= 768) {
       setView("TABLET");
@@ -5691,7 +5724,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -5868,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 = ({
@@ -5882,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);
@@ -5893,7 +5926,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -6201,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";
@@ -6253,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;
@@ -6275,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.2",
+  "version": "1.10.4",
   "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

@@ -40,45 +40,19 @@ const FillInTheBlanksActivityMaterialContent = ({
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
 
-  // useEffect(() => {
-  //   if (!showCorrectAnswer) return;
-  //   const foundAnswer = answer.data.find(
-  //     (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
-  //   );
-  //   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]
-  //   );
-
-  //   onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-  // }, [showCorrectAnswer]);
-
   useEffect(() => {
     if (!showCorrectAnswer) return;
-
     const foundAnswer = answer.data.find(
       (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
     );
-
-    if (!foundAnswer) return;
     if (foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
+    foundAnswer.answerMap = Object.keys(materialMap).map(
+      (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
+    );
 
-    // Create a new answerMap with correct answers
-    const newAnswerMap: any = {};
-    Object.keys(materialMap).forEach((materialMapKey) => {
-      newAnswerMap[materialMapKey] = JSON.parse(materialMap[materialMapKey])[0];
-    });
-
-    // Update the answer map
-    foundAnswer.answerMap = newAnswerMap;
-
-    // Trigger onChange for the first item
-    if (Object.keys(materialMap).length > 0) {
-      onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-    }
-  }, [showCorrectAnswer, answer, materialMap, onChange]);
+    onChange(answer, 0, JSON.parse(materialMap[0])[0]);
+  }, [showCorrectAnswer]);
 
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(

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

@@ -131,7 +131,7 @@ const GroupingActivityMaterialContent = ({
     <>
       <div
         ref={itemsRef}
-        className="flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2"
+        className="flex-1 flex flex-row gap-4 overflow-x-auto py-2 min-w-0"
       >
         {filteredMaterialList.map((materialValue, index) => {
           return (