catchup-library-web 2.2.1 → 2.2.3

package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx

@@ -22,6 +22,7 @@ const MatchingActivityMaterialContent = ({
     null
   );
   const [shuffledMaterialList, setShuffledMaterialList] = useState<any[]>([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
   const dragElementRef = useRef<HTMLDivElement>(null);
   const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
     x: 0,
@@ -58,9 +59,12 @@ const MatchingActivityMaterialContent = ({
   }, [materialMap]);
 
   useEffect(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
 
   useEffect(() => {
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
@@ -127,10 +131,10 @@ const MatchingActivityMaterialContent = ({
     requestAnimationFrame(animate);
   }, [dropTargetKey]);
 
-  const retrieveFilteredMaterialList = (answerMap: any) => {
+  const retrieveFilteredMaterialList = (currentAnswerMap: any) => {
     const selectedValueList: any = [];
-    Object.keys(answerMap).forEach((key) => {
-      selectedValueList.push(answerMap[key]);
+    Object.keys(currentAnswerMap).forEach((key) => {
+      selectedValueList.push(currentAnswerMap[key]);
     });
 
     return shuffledMaterialList.filter(
@@ -246,7 +250,7 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+  const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
 
   return (
     <div onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
@@ -421,10 +425,10 @@ const MatchingActivityMaterialContent = ({
         </>
       ) : null}
 
-      {Object.keys(answerMap).map((answerMapKey, index) => {
+      {Object.keys(displayAnswerMap).map((answerMapKey, index) => {
         const learnerAnswerState = checkAnswerState(
           materialMap[answerMapKey],
-          answerMap[answerMapKey]
+          displayAnswerMap[answerMapKey]
         );
 
         return (
@@ -501,17 +505,20 @@ const MatchingActivityMaterialContent = ({
                   className="h-full flex-1 flex flex-row items-center justify-center px-4"
                   onClick={(e) => {
                     e.stopPropagation();
-                    if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
+                    if (
+                      checkCanAnswerQuestion() &&
+                      displayAnswerMap[answerMapKey]
+                    ) {
                       onChange(answerMap, answerMapKey, null);
                       setSelectedValue(null);
                     }
                   }}
                 >
-                  {answerMap[answerMapKey] ? (
+                  {displayAnswerMap[answerMapKey] ? (
                     contentMap.type === "TEXT" ? (
                       <p className="text-lg whitespace-pre-wrap">
                         {constructInputWithSpecialExpressionList(
-                          answerMap[answerMapKey]
+                          displayAnswerMap[answerMapKey]
                         ).map((inputPart, index) => (
                           <span
                             key={index}
@@ -533,7 +540,7 @@ const MatchingActivityMaterialContent = ({
                       <ShowMaterialMediaByContentType
                         key={`${uniqueValue}-${index}`}
                         contentType={contentMap.type}
-                        src={answerMap[answerMapKey]}
+                        src={displayAnswerMap[answerMapKey]}
                         canFullScreen={false}
                       />
                     )

package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx

@@ -32,6 +32,7 @@ const OrderingActivityMaterialContent = ({
   });
   const { screenSize } = useScreenSize();
   const [view, setView] = useState("PC");
+  const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
 
   useEffect(() => {
     if (!screenSize) return;
@@ -43,11 +44,16 @@ const OrderingActivityMaterialContent = ({
   }, [screenSize]);
 
   useEffect(() => {
-    if (!showCorrectAnswer) return;
-    Object.keys(answerMap).forEach((answerKey, index) => {
-      answerMap[answerKey] = index;
-    });
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      const correctAnswerMap: any = {};
+      Object.keys(answerMap).forEach((answerKey, index) => {
+        correctAnswerMap[answerKey] = index;
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap]);
 
   const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
     if (!isPreview) return null;
@@ -197,7 +203,7 @@ const OrderingActivityMaterialContent = ({
             <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
               <p className="text-xl whitespace-pre-wrap">
                 {constructInputWithSpecialExpressionList(
-                  materialMap[answerMap[draggedKey]]
+                  materialMap[displayAnswerMap[draggedKey]]
                 ).map((inputPart, index) => (
                   <span
                     key={index}
@@ -221,7 +227,7 @@ const OrderingActivityMaterialContent = ({
               <ShowMaterialMediaByContentType
                 key={`${uniqueValue}-drag-mouse`}
                 contentType={contentMap.type}
-                src={materialMap[answerMap[draggedKey]]}
+                src={materialMap[displayAnswerMap[draggedKey]]}
                 canFullScreen={false}
               />
             </div>
@@ -242,7 +248,7 @@ const OrderingActivityMaterialContent = ({
             <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
               <p className="text-xl whitespace-pre-wrap">
                 {constructInputWithSpecialExpressionList(
-                  materialMap[answerMap[draggedKey]]
+                  materialMap[displayAnswerMap[draggedKey]]
                 ).map((inputPart, index) => (
                   <span
                     key={index}
@@ -266,7 +272,7 @@ const OrderingActivityMaterialContent = ({
               <ShowMaterialMediaByContentType
                 key={`${uniqueValue}-drag-touch`}
                 contentType={contentMap.type}
-                src={materialMap[answerMap[draggedKey]]}
+                src={materialMap[displayAnswerMap[draggedKey]]}
                 canFullScreen={false}
               />
             </div>
@@ -274,9 +280,9 @@ const OrderingActivityMaterialContent = ({
         </div>
       )}
 
-      {Object.keys(answerMap).map((materialKey, index) => {
+      {Object.keys(displayAnswerMap).map((materialKey, index) => {
         const learnerAnswerState = checkAnswerState(
-          answerMap[materialKey] + "",
+          displayAnswerMap[materialKey] + "",
           index + ""
         );
         return (
@@ -348,7 +354,7 @@ const OrderingActivityMaterialContent = ({
                   {contentMap.type === "TEXT" ? (
                     <p className="text-xl whitespace-pre-wrap">
                       {constructInputWithSpecialExpressionList(
-                        materialMap[answerMap[materialKey]]
+                        materialMap[displayAnswerMap[materialKey]]
                       ).map((inputPart, index) => (
                         <span
                           key={index}
@@ -370,7 +376,7 @@ const OrderingActivityMaterialContent = ({
                     <ShowMaterialMediaByContentType
                       key={`${uniqueValue}-${index}`}
                       contentType={contentMap.type}
-                      src={materialMap[answerMap[materialKey]]}
+                      src={materialMap[displayAnswerMap[materialKey]]}
                       canFullScreen={true}
                     />
                   )}

package/src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx

@@ -76,7 +76,7 @@ const TrueFalseActivityMaterialContent = ({
                 ? "TRUE"
                 : "FALSE";
             const learnerAnswer =
-              answerMap.trueList.find(
+              displayAnswerMap.trueList.find(
                 (trueItem: string) => trueItem === shuffleOption
               ) !== undefined
                 ? "TRUE"

package/src/properties/ActivityProperties.ts

@@ -78,6 +78,7 @@ export interface IMCSAActivityMaterialProps {
   checkCanAnswerQuestion: () => boolean;
   onChange: (e1: any, e2: any, e3: string) => void;
   isPreview: boolean;
+  showCorrectAnswer: boolean;
 }
 
 export interface IMCMAActivityProps {
@@ -98,6 +99,7 @@ export interface IMCMAActivityMaterialProps {
   checkCanAnswerQuestion: () => boolean;
   onChange: (e1: any, e2: any, e3: string) => void;
   isPreview: boolean;
+  showCorrectAnswer: boolean;
 }
 
 export interface IGroupingActivityProps {