catchup-library-web 1.19.0 → 1.20.1

package/package.json

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

package/src/components/activities/ActivityPreviewByAnswerData.tsx

@@ -9,8 +9,8 @@ import OpenEndedActivityContent from "./OpenEndedActivityContent";
 import OrderingActivityContent from "./OrderingActivityContent";
 import SelectionBox from "../boxes/SelectionBox";
 import TrueFalseActivityContent from "./TrueFalseActivityContent";
-import ActivitySolutionContent from "./solution-content/ActivitySolutionContent";
-import ActivityEvaluationRubricContent from "./evaluation-rubric-content/ActivityEvaluationRubricContent";
+import ActivitySolutionContent from "./solution-contents/ActivitySolutionContent";
+import ActivityEvaluationRubricContent from "./evaluation-rubric-contents/ActivityEvaluationRubricContent";
 import DividerLine from "../dividers/DividerLine";
 import i18n from "../../language/i18n";
 import {
@@ -18,7 +18,7 @@ import {
   retrieveDifficultyByActivityTypeFromData,
 } from "../../utilization/CatchtivityUtilization";
 import { IActivityPreviewByAnswerDataProps } from "../../properties/ActivityProperties";
-import ActivityEmptyContent from "./empty-content/ActivityEmptyContent";
+import ActivityEmptyContent from "./empty-contents/ActivityEmptyContent";
 
 const ActivityPreviewByAnswerData = ({
   data,

package/src/components/activities/ActivityPreviewByData.tsx

@@ -14,9 +14,9 @@ import OrderingActivityContent from "./OrderingActivityContent";
 import SelectionBox from "../boxes/SelectionBox";
 import TrueFalseActivityContent from "./TrueFalseActivityContent";
 import { IActivityPreviewByDataProps } from "../../properties/ActivityProperties";
-import ActivitySolutionContent from "./solution-content/ActivitySolutionContent";
+import ActivitySolutionContent from "./solution-contents/ActivitySolutionContent";
 import i18n from "../../language/i18n";
-import ActivityEvaluationRubricContent from "./evaluation-rubric-content/ActivityEvaluationRubricContent";
+import ActivityEvaluationRubricContent from "./evaluation-rubric-contents/ActivityEvaluationRubricContent";
 import DividerLine from "../dividers/DividerLine";
 
 const ActivityPreviewByData = ({
@@ -176,7 +176,6 @@ const ActivityPreviewByData = ({
               data={data}
               isPreview={true}
               showCorrectAnswer={true}
-              isFullScreen={isFullScreen}
             />
           ) : selectedType === "GROUPING" &&
             data["groupingBodyMap"] != null &&
@@ -190,7 +189,6 @@ const ActivityPreviewByData = ({
               data={data}
               isPreview={true}
               showCorrectAnswer={true}
-              isFullScreen={isFullScreen}
             />
           ) : selectedType === "FILL_IN_THE_BLANKS" &&
             data["fillInTheBlanksBodyMap"] != null &&
@@ -214,6 +212,7 @@ const ActivityPreviewByData = ({
               changeAnswer={() => {}}
               showMaterialContent={true}
               data={data}
+              isPreview={true}
               isFullScreen={isFullScreen}
             />
           ) : selectedType === "TRUE_FALSE" &&

package/src/components/activities/DropdownActivityContent.tsx

@@ -6,8 +6,8 @@ import {
 } from "../../utilization/CatchtivityUtilization";
 import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import DropdownActivityMaterialContent from "./material-content/DropdownActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import DropdownActivityMaterialContent from "./material-contents/DropdownActivityMaterialContent";
 import { useState, useEffect } from "react";
 
 const DropdownActivityContent = ({
@@ -23,12 +23,10 @@ const DropdownActivityContent = ({
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
 
-  // 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"
@@ -36,7 +34,6 @@ const DropdownActivityContent = ({
     return answer.data[foundIndex].answerMap;
   }
 
-  // Update local state when answer prop changes
   useEffect(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
@@ -46,7 +43,7 @@ const DropdownActivityContent = ({
     key: any,
     value: string
   ) => {
-    // Create a new answer object to ensure React detects the change
+    if (isPreview) return;
     const newAnswer = {
       ...answerObj,
       data: answerObj.data.map((item: any) => {
@@ -63,11 +60,8 @@ const DropdownActivityContent = ({
       }),
     };
 
-    // Update local state immediately for instant UI update
     const newAnswerMap = { ...currentAnswerMap, [key]: value };
     setCurrentAnswerMap(newAnswerMap);
-
-    // Call the parent's changeAnswer function
     changeAnswer(newAnswer);
   };
 

package/src/components/activities/FillInTheBlanksActivityContent.tsx

@@ -3,8 +3,8 @@ import {
   parseContentMapFromData,
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import FillInTheBlanksActivityMaterialContent from "./material-content/FillInTheBlanksActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import FillInTheBlanksActivityMaterialContent from "./material-contents/FillInTheBlanksActivityMaterialContent";
 import { IFillInTheBlanksActivityProps } from "../../properties/ActivityProperties";
 import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
@@ -32,12 +32,10 @@ const FillInTheBlanksActivityContent = ({
     ? JSON.parse(data.fillInTheBlanksIncorrectList)
     : [];
 
-  // 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"
@@ -45,7 +43,6 @@ const FillInTheBlanksActivityContent = ({
     return answer.data[foundIndex].answerMap;
   }
 
-  // Update local state when answer prop changes
   useEffect(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
@@ -74,7 +71,7 @@ const FillInTheBlanksActivityContent = ({
     key: any,
     value: string | null
   ) => {
-    // Create a new answer object to ensure React detects the change
+    if (isPreview) return;
     const newAnswer = {
       ...answerObj,
       data: answerObj.data.map((item: any) => {
@@ -91,11 +88,8 @@ const FillInTheBlanksActivityContent = ({
       }),
     };
 
-    // Update local state immediately for instant UI update
     const newAnswerMap = { ...currentAnswerMap, [key]: value };
     setCurrentAnswerMap(newAnswerMap);
-
-    // Call the parent's changeAnswer function
     changeAnswer(newAnswer);
   };
 
@@ -104,7 +98,7 @@ const FillInTheBlanksActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`}>
         <ActivityBodyContent
           bodyMap={fillInTheBlanksBodyMap}
-          answerMap={currentAnswerMap} // Use local state instead of function call
+          answerMap={currentAnswerMap}
           contentMap={contentMap}
           templateType={"FILL_IN_THE_BLANKS"}
         />

package/src/components/activities/GroupingActivityContent.tsx

@@ -5,8 +5,8 @@ import {
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
 import DividerLine from "../dividers/DividerLine";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import GroupingActivityMaterialContent from "./material-content/GroupingActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import GroupingActivityMaterialContent from "./material-contents/GroupingActivityMaterialContent";
 
 const GroupingActivityContent = ({
   answer,
@@ -15,7 +15,6 @@ const GroupingActivityContent = ({
   changeAnswer,
   isPreview,
   showCorrectAnswer,
-  isFullScreen,
 }: IGroupingActivityProps) => {
   const contentMap = parseContentMapFromData(data);
   const groupingBodyMap = parseBodyMapFromData(data, "GROUPING");
@@ -27,6 +26,7 @@ const GroupingActivityContent = ({
     value: string | null,
     index: number | null
   ) => {
+    if (isPreview) return;
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "GROUPING"
     );

package/src/components/activities/MCMAActivityContent.tsx

@@ -3,8 +3,8 @@ import {
   parseContentMapFromData,
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import MCMAActivityMaterialContent from "./material-content/MCMAActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import MCMAActivityMaterialContent from "./material-contents/MCMAActivityMaterialContent";
 import { IMCMAActivityProps } from "../../properties/ActivityProperties";
 import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
@@ -22,6 +22,7 @@ const MCMAActivityContent = ({
   const MCMAMaterialMap = parseMaterialMapFromData(data, "MCMA");
 
   const handleMCMAAnswerOnChange = (answer: any, key: any, value: string) => {
+    if (isPreview) return;
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "MCMA"
     );

package/src/components/activities/MCSAActivityContent.tsx

@@ -3,8 +3,8 @@ import {
   parseContentMapFromData,
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import MCSAActivityMaterialContent from "./material-content/MCSAActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import MCSAActivityMaterialContent from "./material-contents/MCSAActivityMaterialContent";
 import { IMCSAActivityProps } from "../../properties/ActivityProperties";
 import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
@@ -22,6 +22,7 @@ const MCSAActivityContent = ({
   const MCSAMaterialMap = parseMaterialMapFromData(data, "MCSA");
 
   const handleMCSAAnswerOnChange = (answer: any, key: any, value: string) => {
+    if (isPreview) return;
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "MCSA"
     );

package/src/components/activities/MatchingActivityContent.tsx

@@ -5,8 +5,8 @@ import {
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
 import DividerLine from "../dividers/DividerLine";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import MatchingActivityMaterialContent from "./material-content/MatchingActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import MatchingActivityMaterialContent from "./material-contents/MatchingActivityMaterialContent";
 
 const MatchingActivityContent = ({
   answer,
@@ -15,7 +15,6 @@ const MatchingActivityContent = ({
   changeAnswer,
   isPreview,
   showCorrectAnswer,
-  isFullScreen,
 }: IMatchingActivityProps) => {
   const contentMap = parseContentMapFromData(data);
   const matchingBodyMap = parseBodyMapFromData(data, "MATCHING");
@@ -26,6 +25,7 @@ const MatchingActivityContent = ({
     key: any,
     value: string | null
   ) => {
+    if (isPreview) return;
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "MATCHING"
     );

package/src/components/activities/OpenEndedActivityContent.tsx

@@ -2,8 +2,8 @@ import {
   parseBodyMapFromData,
   parseContentMapFromData,
 } from "../../utilization/CatchtivityUtilization";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import OpenEndedActivityMaterialContent from "./material-content/OpenEndedActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import OpenEndedActivityMaterialContent from "./material-contents/OpenEndedActivityMaterialContent";
 import { IOpenEndedActivityProps } from "../../properties/ActivityProperties";
 import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
@@ -14,12 +14,14 @@ const OpenEndedActivityContent = ({
   changeAnswer,
   canAnswerQuestion,
   showMaterialContent,
+  isPreview,
   isFullScreen,
 }: IOpenEndedActivityProps) => {
   const contentMap = parseContentMapFromData(data);
   const openEndedBodyMap = parseBodyMapFromData(data, "OPEN_ENDED");
 
   const handleOpenEndedAnswerOnChange = (answer: any, value: string) => {
+    if (isPreview) return;
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "OPEN_ENDED"
     );

package/src/components/activities/OrderingActivityContent.tsx

@@ -5,8 +5,8 @@ import {
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
 import DividerLine from "../dividers/DividerLine";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import OrderingActivityMaterialContent from "./material-content/OrderingActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import OrderingActivityMaterialContent from "./material-contents/OrderingActivityMaterialContent";
 
 const OrderingActivityContent = ({
   answer,
@@ -26,6 +26,7 @@ const OrderingActivityContent = ({
     primaryKey: any,
     secondaryKey: any
   ) => {
+    if (isPreview) return;
     let foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "ORDERING"
     );

package/src/components/activities/TrueFalseActivityContent.tsx

@@ -3,8 +3,8 @@ import {
   parseContentMapFromData,
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
-import ActivityBodyContent from "./body-content/ActivityBodyContent";
-import TrueFalseActivityMaterialContent from "./material-content/TrueFalseActivityMaterialContent";
+import ActivityBodyContent from "./body-contents/ActivityBodyContent";
+import TrueFalseActivityMaterialContent from "./material-contents/TrueFalseActivityMaterialContent";
 import { ITrueFalseActivityProps } from "../../properties/ActivityProperties";
 import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
@@ -34,6 +34,7 @@ const TrueFalseActivityContent = ({
     key: any,
     value: string
   ) => {
+    if (isPreview) return;
     const answerMap = retrieveCurrentAnswerMap();
     if (key === "TRUE") {
       const foundFalseIndex = answerMap.falseList.findIndex(

package/src/components/activities/{body-content → body-contents}/ShowBodyMediaByContentType.tsx

@@ -44,7 +44,7 @@ const ShowBodyMediaByContentType = ({
         }`}
       >
         {inputPart.isEquation ? (
-          <span className="text-2xl">
+          <span className="text-xl">
             <InlineMath math={inputPart.value} />
           </span>
         ) : (

package/src/components/activities/{evaluation-rubric-content → evaluation-rubric-contents}/ActivityEvaluationRubricContent.tsx

@@ -57,7 +57,7 @@ const ActivityEvaluationRubricContent = ({
                     }`}
                   >
                     {inputPart.isEquation ? (
-                      <span className="text-2xl">
+                      <span className="text-xl">
                         <InlineMath math={inputPart.value} />
                       </span>
                     ) : (

package/src/components/activities/{material-content → material-contents}/DropdownActivityMaterialContent.tsx

@@ -110,7 +110,7 @@ const DropdownActivityMaterialContent = ({
                                         }`}
                                       >
                                         {inputPart.isEquation ? (
-                                          <span className="text-2xl">
+                                          <span className="text-xl">
                                             <InlineMath
                                               math={inputPart.value}
                                             />
@@ -134,7 +134,7 @@ const DropdownActivityMaterialContent = ({
                             id={materialKey}
                             answer={
                               answerMap[materialKey] === "DEFAULT_OPTION" ? (
-                                <div className="w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue">
+                                <div className="w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue">
                                   <div className="h-full flex flex-col items-center justify-center px-4 py-2">
                                     <span className="italic">
                                       {i18n.t("please_select")}
@@ -186,7 +186,7 @@ const DropdownActivityMaterialContent = ({
                               } ${inputPart.isUnderline ? "underline" : ""}`}
                             >
                               {inputPart.isEquation ? (
-                                <span className="text-2xl">
+                                <span className="text-xl">
                                   <InlineMath math={inputPart.value} />
                                 </span>
                               ) : (

package/src/components/activities/{material-content → material-contents}/FillInTheBlanksActivityMaterialContent.tsx

@@ -204,7 +204,7 @@ const FillInTheBlanksActivityMaterialContent = ({
                             </div>
                           ) : answerMap[materialKey] === "" ? (
                             <div
-                              className={`w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed ${
+                              className={`w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${
                                 learnerAnswerState === "CORRECT"
                                   ? "border-catchup-green"
                                   : learnerAnswerState === "INCORRECT"
@@ -245,7 +245,7 @@ const FillInTheBlanksActivityMaterialContent = ({
                                 } ${inputPart.isUnderline ? "underline" : ""}`}
                               >
                                 {inputPart.isEquation ? (
-                                  <span className="text-2xl">
+                                  <span className="text-xl">
                                     <InlineMath math={inputPart.value} />
                                   </span>
                                 ) : (