catchup-library-web 2.2.2 → 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/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 {