catchup-library-web 2.2.2 → 2.2.4

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

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { InlineMath } from "react-katex";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
 import i18n from "../../../language/i18n";
@@ -14,7 +15,23 @@ const MCSAActivityMaterialContent = ({
   checkCanAnswerQuestion,
   onChange,
   isPreview,
+  showCorrectAnswer,
 }: IMCSAActivityMaterialProps) => {
+  const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
+
+  useEffect(() => {
+    if (showCorrectAnswer) {
+      // Create correct answer map where each key maps to the first item (correct answer)
+      const correctAnswerMap: any = {};
+      Object.keys(materialMap).forEach((materialKey) => {
+        correctAnswerMap[materialKey] = materialMap[materialKey][0];
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
+
   const retrieveCorrectAnswer = () => {
     return Object.keys(materialMap)[0];
   };
@@ -59,7 +76,7 @@ const MCSAActivityMaterialContent = ({
                   const learnerAnswerState = checkAnswerState(
                     correctAnswer,
                     materialSubKey,
-                    answerMap[materialKey]
+                    displayAnswerMap[materialKey]
                   );
 
                   return (
@@ -80,7 +97,7 @@ const MCSAActivityMaterialContent = ({
                     >
                       <BaseImage
                         src={
-                          answerMap[materialKey] === materialSubKey
+                          displayAnswerMap[materialKey] === materialSubKey
                             ? "/icons/item-element.webp"
                             : "/icons/not-selected-item-element.webp"
                         }
@@ -127,7 +144,7 @@ const MCSAActivityMaterialContent = ({
           ) : (
             <p className="text-xl whitespace-pre-wrap">
               {constructInputWithSpecialExpressionList(
-                answerMap[materialKey]
+                displayAnswerMap[materialKey]
               ).map((inputPart, index) => (
                 <span
                   key={index}

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/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 {