catchup-library-web 2.1.6 → 2.2.1

package/package.json

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

package/src/components/activities/ActivityPreviewByData.tsx

@@ -1,8 +1,4 @@
 import { useEffect, useState } from "react";
-import {
-  constructAnswerBasedOnData,
-  retrieveDifficultyByActivityTypeFromData,
-} from "../../utilization/CatchtivityUtilization";
 import DropdownActivityContent from "./DropdownActivityContent";
 import FillInTheBlanksActivityContent from "./FillInTheBlanksActivityContent";
 import GroupingActivityContent from "./GroupingActivityContent";
@@ -13,79 +9,215 @@ import OpenEndedActivityContent from "./OpenEndedActivityContent";
 import OrderingActivityContent from "./OrderingActivityContent";
 import SelectionBox from "../boxes/SelectionBox";
 import TrueFalseActivityContent from "./TrueFalseActivityContent";
-import { IActivityPreviewByDataProps } from "../../properties/ActivityProperties";
 import ActivitySolutionContent from "./solution-contents/ActivitySolutionContent";
-import i18n from "../../language/i18n";
 import ActivityEvaluationRubricContent from "./evaluation-rubric-contents/ActivityEvaluationRubricContent";
 import DividerLine from "../dividers/DividerLine";
+import i18n from "../../language/i18n";
+import {
+  constructActivityAnswerMap,
+  retrieveDifficultyByActivityTypeFromData,
+} from "../../utilization/CatchtivityUtilization";
+import { IActivityPreviewByDataProps } from "../../properties/ActivityProperties";
+import ActivityEmptyContent from "./empty-contents/ActivityEmptyContent";
+
+const ACTIVITY_TEMPLATE_LIST = [
+  { type: "ORDERING", materialMap: "orderingMaterialMap" },
+  { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
+  { type: "MCSA", materialMap: "MCSAMaterialMap" },
+  { type: "MCMA", materialMap: "MCMAMaterialMap" },
+  { type: "MATCHING", materialMap: "matchingMaterialMap" },
+  { type: "GROUPING", materialMap: "groupingMaterialMap" },
+  {
+    type: "FILL_IN_THE_BLANKS",
+    materialMap: "fillInTheBlanksMaterialMap",
+  },
+  { type: "OPEN_ENDED", materialMap: "openEndedMaterialMap" },
+  { type: "TRUE_FALSE", materialMap: "trueFalseMaterialMap" },
+];
 
 const ActivityPreviewByData = ({
   data,
-  showType,
-  showDescription,
-  lockedType,
-  typeOptionList,
-  showSolution,
-  showEvaluationRubric,
-  showDifficulty,
-  isFullScreen,
+  answerType = null,
+  showType = true,
+  showDescription = true,
+  typeList = [],
+  showSolution = false,
+  showEvaluationRubric = false,
+  showDifficulty = true,
+  isFullScreen = false,
+  showCorrectAnswer = false,
 }: IActivityPreviewByDataProps) => {
-  const [key, setKey] = useState(new Date().getTime());
   const [selectedType, setSelectedType] = useState<string | null>(null);
   const [optionList, setOptionList] = useState<any[]>([]);
+  const [answerMapMap, setAnswerMapMap] = useState<any>({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState<
+    any[]
+  >([]);
 
   useEffect(() => {
     if (!data) return;
-    setKey(new Date().getTime());
-  }, [data]);
-
-  useEffect(() => {
-    if (!typeOptionList) return;
-    if (typeOptionList.length === 0) return;
-    let foundTypeOption;
-    if (lockedType) {
-      foundTypeOption = typeOptionList.find(
-        (typeOption) => typeOption.id === lockedType
+    let currentActivityTemplateMapList: any[] = JSON.parse(
+      JSON.stringify(ACTIVITY_TEMPLATE_LIST)
+    );
+    if (typeList.length > 0) {
+      currentActivityTemplateMapList = currentActivityTemplateMapList.filter(
+        (activityTemplateMap) => typeList.includes(activityTemplateMap.type)
       );
     }
-    if (foundTypeOption) {
-      setSelectedType(foundTypeOption.id);
-    } else {
-      setSelectedType(typeOptionList[0].id);
+    const currentActivityTemplateTypeList = [];
+    for (const activityTemplateMap of currentActivityTemplateMapList) {
+      if (data[activityTemplateMap.materialMap]) {
+        currentActivityTemplateTypeList.push(activityTemplateMap);
+      }
     }
-  }, [typeOptionList, lockedType]);
+    setActivityTemplateTypeList(currentActivityTemplateMapList);
+  }, [data, answerType, typeList]);
 
   useEffect(() => {
-    if (!data) return;
-    if (!typeOptionList) return;
-    if (typeOptionList.length === 0) return;
-    let currentTypeOptionList = JSON.parse(JSON.stringify(typeOptionList));
-    if (lockedType) {
-      currentTypeOptionList = currentTypeOptionList.filter(
-        (typeOption: any) => typeOption.id === lockedType
-      );
+    if (activityTemplateTypeList.length === 0) return;
+    const currentOptionList = [];
+    for (const activityTemplateType of activityTemplateTypeList) {
+      const currentTypeOption: any = {
+        id: activityTemplateType.type,
+        value: i18n.t(activityTemplateType.type),
+      };
+      if (showDifficulty) {
+        currentTypeOption.subText = i18n.t(
+          retrieveDifficultyByActivityTypeFromData(
+            activityTemplateType.type,
+            data
+          )
+        );
+      }
+      currentOptionList.push(currentTypeOption);
     }
-    if (showDifficulty) {
-      setOptionList(
-        currentTypeOptionList.map((typeOption: any) => ({
-          ...typeOption,
-          subText: i18n.t(
-            retrieveDifficultyByActivityTypeFromData(typeOption.id, data)
-          ),
-        }))
-      );
-    } else {
-      setOptionList(currentTypeOptionList);
+    setOptionList(currentOptionList);
+  }, [activityTemplateTypeList, showDifficulty]);
+
+  useEffect(() => {
+    if (optionList.length === 0) return;
+    setSelectedType(optionList[0].id);
+  }, [optionList]);
+
+  useEffect(() => {
+    if (activityTemplateTypeList.length === 0) return;
+    const currentAnswerMapMap: any = {};
+    for (const activityTemplateMap of activityTemplateTypeList) {
+      if (answerType === activityTemplateMap.type) {
+        currentAnswerMapMap[activityTemplateMap.type] = data.answerMap;
+      } else {
+        currentAnswerMapMap[activityTemplateMap.type] =
+          constructActivityAnswerMap(
+            activityTemplateMap.type,
+            JSON.parse(JSON.stringify(data))
+          );
+      }
+    }
+    setAnswerMapMap(currentAnswerMapMap);
+  }, [activityTemplateTypeList]);
+
+  const RenderSelectedActivityContent = () => {
+    if (!selectedType) return null;
+
+    const commonProps = {
+      answerMap: answerMapMap[selectedType],
+      data,
+      canAnswerQuestion: () => true,
+      changeAnswer: () => {},
+      isPreview: true,
+      showCorrectAnswer,
+      isFullScreen,
+    };
+
+    const isEmpty = answerMapMap[selectedType].isEmpty;
+
+    switch (selectedType) {
+      case "ORDERING":
+        return data.orderingBodyMap && data.orderingMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <OrderingActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      case "DROPDOWN":
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <DropdownActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      case "MCSA":
+        return data.MCSABodyMap && data.MCSAMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <MCSAActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      case "MCMA":
+        return data.MCMABodyMap && data.MCMAMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <MCMAActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      case "MATCHING":
+        return data.matchingBodyMap && data.matchingMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <MatchingActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      case "GROUPING":
+        return data.groupingBodyMap && data.groupingMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <GroupingActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      case "FILL_IN_THE_BLANKS":
+        return data.fillInTheBlanksBodyMap &&
+          data.fillInTheBlanksMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <FillInTheBlanksActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      case "OPEN_ENDED":
+        return data.openEndedBodyMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <OpenEndedActivityContent
+              {...commonProps}
+              showMaterialContent={true}
+            />
+          </>
+        ) : null;
+
+      case "TRUE_FALSE":
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? (
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <TrueFalseActivityContent {...commonProps} />
+          </>
+        ) : null;
+
+      default:
+        return null;
     }
-  }, [data, lockedType, typeOptionList, showDifficulty]);
+  };
 
-  if (!data) return;
-  if (!selectedType) return;
-  let answerMap = constructAnswerBasedOnData(selectedType, data);
+  if (!data) return null;
 
   return (
-    <div key={key}>
-      {showType ? (
+    <div>
+      {showType && optionList.length > 0 ? (
         <>
           <div className="mb-4">
             {showDescription ? (
@@ -107,130 +239,12 @@ const ActivityPreviewByData = ({
           <DividerLine />
         </>
       ) : null}
-      <div key={selectedType} className="">
-        {selectedType === "ORDERING" &&
-        data["orderingBodyMap"] != null &&
-        data["orderingMaterialMap"] != null ? (
-          <OrderingActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "DROPDOWN" &&
-          data["dropdownBodyMap"] != null &&
-          data["dropdownMaterialMap"] != null ? (
-          <DropdownActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-            isFullScreen={isFullScreen}
-          />
-        ) : selectedType === "MCSA" &&
-          data["MCSABodyMap"] != null &&
-          data["MCSAMaterialMap"] != null ? (
-          <MCSAActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-            isFullScreen={isFullScreen}
-          />
-        ) : selectedType === "MCMA" &&
-          data["MCMABodyMap"] != null &&
-          data["MCMAMaterialMap"] != null ? (
-          <MCMAActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-            isFullScreen={isFullScreen}
-          />
-        ) : selectedType === "MATCHING" &&
-          data["matchingBodyMap"] != null &&
-          data["matchingMaterialMap"] != null ? (
-          <MatchingActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "GROUPING" &&
-          data["groupingBodyMap"] != null &&
-          data["groupingMaterialMap"] != null ? (
-          <GroupingActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "FILL_IN_THE_BLANKS" &&
-          data["fillInTheBlanksBodyMap"] != null &&
-          data["fillInTheBlanksMaterialMap"] != null ? (
-          <FillInTheBlanksActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-            isFullScreen={isFullScreen}
-          />
-        ) : selectedType === "OPEN_ENDED" &&
-          data["openEndedBodyMap"] != null ? (
-          <OpenEndedActivityContent
-            answerMap={answerMap}
-            canAnswerQuestion={() => false}
-            changeAnswer={() => {}}
-            showMaterialContent={true}
-            data={data}
-            isPreview={true}
-            isFullScreen={isFullScreen}
-          />
-        ) : selectedType === "TRUE_FALSE" &&
-          data["trueFalseBodyMap"] != null &&
-          data["trueFalseMaterialMap"] != null ? (
-          <TrueFalseActivityContent
-            answerMap={answerMap}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-            isFullScreen={isFullScreen}
-          />
-        ) : null}
+
+      <div className="flex flex-col my-2 w-full p-5">
+        {RenderSelectedActivityContent()}
       </div>
-      {showSolution ? (
+
+      {selectedType && showSolution ? (
         <div className="my-4">
           <ActivitySolutionContent
             activityTemplateType={selectedType}
@@ -238,7 +252,8 @@ const ActivityPreviewByData = ({
           />
         </div>
       ) : null}
-      {showEvaluationRubric ? (
+
+      {selectedType && showEvaluationRubric ? (
         <div className="my-4">
           <ActivityEvaluationRubricContent
             activityTemplateType={selectedType}

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

@@ -19,6 +19,7 @@ const TrueFalseActivityMaterialContent = ({
   showCorrectAnswer,
 }: ITrueFalseActivityMaterialProps) => {
   const [shuffleOptionList, setShuffleOptionList] = useState<any[]>([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
 
   useEffect(() => {
     const optionList = [];
@@ -32,9 +33,12 @@ const TrueFalseActivityMaterialContent = ({
   }, []);
 
   useEffect(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, materialMap, answerMap]);
 
   const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
     if (!isPreview) return null;
@@ -130,7 +134,7 @@ const TrueFalseActivityMaterialContent = ({
                     <div className="flex flex-col items-center justify-center">
                       <BaseImage
                         src={
-                          answerMap.trueList.includes(shuffleOption)
+                          displayAnswerMap.trueList.includes(shuffleOption)
                             ? "/icons/checkbox.webp"
                             : "/icons/checkbox-empty.webp"
                         }
@@ -146,7 +150,7 @@ const TrueFalseActivityMaterialContent = ({
                     <div className="flex flex-col items-center justify-center">
                       <BaseImage
                         src={
-                          answerMap.falseList.includes(shuffleOption)
+                          displayAnswerMap.falseList.includes(shuffleOption)
                             ? "/icons/checkbox.webp"
                             : "/icons/checkbox-empty.webp"
                         }
@@ -165,7 +169,7 @@ const TrueFalseActivityMaterialContent = ({
         </div>
       ) : (
         <>
-          {answerMap.trueList.map((item: string) => (
+          {displayAnswerMap.trueList.map((item: string) => (
             <div className="flex flex-row items-center gap-x-2">
               <div className="flex-1">
                 <p>{item}</p>
@@ -175,7 +179,7 @@ const TrueFalseActivityMaterialContent = ({
               </div>
             </div>
           ))}
-          {answerMap.falseList.map((item: string) => (
+          {displayAnswerMap.falseList.map((item: string) => (
             <div className="flex flex-row items-center gap-x-2">
               <div className="flex-1">
                 <p>{item}</p>

package/src/index.ts

@@ -35,7 +35,6 @@ export { default as TrueFalseActivityContent } from "./components/activities/Tru
 export { default as ActivitySolutionContent } from "./components/activities/solution-contents/ActivitySolutionContent";
 export { default as ActivityEvaluationRubricContent } from "./components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent";
 export { default as ActivityPreviewByData } from "./components/activities/ActivityPreviewByData";
-export { default as ActivityPreviewByAnswerData } from "./components/activities/ActivityPreviewByAnswerData";
 
 export { default as StatusError } from "./components/errors/StatusError";
 

package/src/properties/ActivityProperties.ts

@@ -218,18 +218,6 @@ export interface IActivitySolutionProps {
 }
 
 export interface IActivityPreviewByDataProps {
-  data: any;
-  showType: boolean;
-  showDescription: boolean;
-  lockedType: string;
-  typeOptionList: any[];
-  showDifficulty: boolean;
-  showSolution: boolean;
-  showEvaluationRubric: boolean;
-  isFullScreen: boolean;
-}
-
-export interface IActivityPreviewByAnswerDataProps {
   data: any;
   answerType?: string | null;
   showType?: boolean;