catchup-library-web 1.19.0 → 1.20.1

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

@@ -0,0 +1,342 @@
+import { useEffect, useRef, useState } from "react";
+import { useDrop } from "react-dnd";
+import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
+import { InlineMath } from "react-katex";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import { IMatchingActivityMaterialProps } from "../../../properties/ActivityProperties";
+import DraggableItem from "../../dnds/DraggableItem";
+import DroppableItem from "../../dnds/DroppableItem";
+import DividerLine from "../../dividers/DividerLine";
+
+const MatchingActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer,
+}: IMatchingActivityMaterialProps) => {
+  const [selectedValue, setSelectedValue] = useState(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState(null);
+  const [isShuffled, setIsShuffled] = useState(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState([]);
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: "MATCHING",
+    drop: () => {},
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  });
+  const itemsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const shuffleArray = (array: any) => {
+      if (!isShuffled) {
+        const copyArray = JSON.parse(JSON.stringify(array));
+        for (let i = copyArray.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
+        }
+        setIsShuffled(true);
+        return copyArray;
+      }
+      return array;
+    };
+    const materialList: any = [];
+    Object.keys(materialMap).forEach((materialKey) => {
+      materialList.push(materialMap[materialKey]);
+    });
+    setShuffledMaterialList(shuffleArray(materialList));
+  }, []);
+
+  useEffect(() => {
+    if (!showCorrectAnswer) return;
+    answer.data.find(
+      (answerData: any) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
+  }, [showCorrectAnswer]);
+
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "MATCHING"
+    );
+    return answer.data[foundIndex].answerMap;
+    // const sortedAnswerMapKeys = Object.keys(answerMap).sort((a, b) =>
+    //   answerMap[a]
+    //     ? answerMap[b]
+    //       ? answerMap[a].localeCompare(answerMap[b])
+    //       : 1
+    //     : -1
+    // );
+    // const sortedAnswerMap: any = {};
+    // for (const answerMapKey of sortedAnswerMapKeys) {
+    //   sortedAnswerMap[answerMapKey] = answerMap[answerMapKey];
+    // }
+    // return sortedAnswerMap;
+  };
+
+  const retrieveFilteredMaterialList = (answerMap: any) => {
+    const selectedValueList: any = [];
+    Object.keys(answerMap).forEach((key) => {
+      selectedValueList.push(answerMap[key]);
+    });
+
+    return shuffledMaterialList.filter(
+      (material) =>
+        selectedValueList.findIndex((value: string) => material === value) ===
+        -1
+    );
+  };
+
+  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
+    if (!isPreview) return null;
+    if (!learnerAnswer) return "EMPTY";
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+
+  const handleMatchingActivityItemOnChange = (
+    selectedTargetKey: string,
+    selectedValue: string | null
+  ) => {
+    if (checkCanAnswerQuestion()) {
+      onChange(answer, selectedTargetKey, selectedValue);
+      setSelectedValue(null);
+    }
+  };
+
+  const answerMap = retrieveAnswerMap();
+  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+
+  return (
+    <>
+      {filteredMaterialList.length > 0 ? (
+        <>
+          <div
+            ref={itemsRef}
+            className="flex-shrink-0 flex flex-row gap-x-4 gap-y-4 overflow-x-auto py-2"
+          >
+            {filteredMaterialList.map((materialValue, index) => (
+              <DraggableItem
+                key={index}
+                item={{ index: materialValue }}
+                type={"MATCHING"}
+                component={
+                  <div
+                    className={`${
+                      selectedValue === materialValue
+                        ? "border-catchup-blue"
+                        : "border-catchup-lighter-gray"
+                    } ${
+                      contentMap.type === "TEXT"
+                        ? "h-catchup-activity-text-box-item"
+                        : "h-catchup-activity-media-box-item"
+                    } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`}
+                    onMouseDown={() => {
+                      if (checkCanAnswerQuestion()) {
+                        setSelectedValue(materialValue);
+                      }
+                    }}
+                    onMouseUp={() => {
+                      if (checkCanAnswerQuestion()) {
+                        setSelectedValue(null);
+                      }
+                    }}
+                  >
+                    {contentMap.type === "TEXT" ? (
+                      <div
+                        className={`flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`}
+                      >
+                        <p className="text-lg whitespace-pre-wrap">
+                          {constructInputWithSpecialExpressionList(
+                            materialValue
+                          ).map((inputPart, index) => (
+                            <span
+                              key={index}
+                              className={`${
+                                inputPart.isBold ? "font-bold" : ""
+                              } ${inputPart.isUnderline ? "underline" : ""}`}
+                            >
+                              {inputPart.isEquation ? (
+                                <span className="text-xl">
+                                  <InlineMath math={inputPart.value} />
+                                </span>
+                              ) : (
+                                inputPart.value
+                              )}
+                            </span>
+                          ))}
+                        </p>
+                      </div>
+                    ) : (
+                      <ShowMaterialMediaByContentType
+                        key={`${uniqueValue}-${index}`}
+                        contentType={contentMap.type}
+                        src={materialValue}
+                        canFullScreen={true}
+                      />
+                    )}
+                  </div>
+                }
+                moveCardHandler={() => {
+                  if (!selectedTargetKey) return;
+                  if (!selectedValue) return;
+                  handleMatchingActivityItemOnChange(
+                    selectedTargetKey,
+                    selectedValue
+                  );
+                }}
+              />
+            ))}
+          </div>
+          <div className="flex-shrink-0">
+            <DividerLine />
+          </div>
+        </>
+      ) : null}
+
+      <div className="overflow-y-auto max-h-[600px]">
+        {Object.keys(answerMap).map((answerMapKey, index) => {
+          const learnerAnswerState = checkAnswerState(
+            materialMap[answerMapKey],
+            answerMap[answerMapKey]
+          );
+
+          return (
+            <div key={index} className="flex flex-row w-full">
+              <div className="w-1/3">
+                <div
+                  className={`${
+                    contentMap.type === "TEXT"
+                      ? "h-catchup-activity-text-box-item"
+                      : "h-catchup-activity-media-box-item"
+                  } flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${
+                    learnerAnswerState === "EMPTY"
+                      ? "border-catchup-blue"
+                      : learnerAnswerState === "CORRECT"
+                      ? "border-catchup-green"
+                      : learnerAnswerState === "INCORRECT"
+                      ? "border-catchup-red"
+                      : "border-catchup-blue"
+                  }`}
+                >
+                  <div className="flex flex-col items-center justify-center transition-all duration-300 m-4">
+                    <p className="text-lg whitespace-pre-wrap">
+                      {constructInputWithSpecialExpressionList(
+                        answerMapKey
+                      ).map((inputPart, index) => (
+                        <span
+                          key={index}
+                          className={`${inputPart.isBold ? "font-bold" : ""} ${
+                            inputPart.isUnderline ? "underline" : ""
+                          }`}
+                        >
+                          {inputPart.isEquation ? (
+                            <span className="text-xl">
+                              <InlineMath math={inputPart.value} />
+                            </span>
+                          ) : (
+                            inputPart.value
+                          )}
+                        </span>
+                      ))}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
+              <div className="flex-1">
+                <div
+                  className={`${
+                    canDrop
+                      ? selectedTargetKey === answerMapKey
+                        ? "bg-catchup-light-blue"
+                        : "bg-catchup-light-blue opacity-40"
+                      : ""
+                  } ${
+                    contentMap.type === "TEXT"
+                      ? "h-catchup-activity-text-box-item"
+                      : "h-catchup-activity-media-box-item"
+                  } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${
+                    learnerAnswerState === "EMPTY"
+                      ? "border-catchup-blue"
+                      : learnerAnswerState === "CORRECT"
+                      ? "border-catchup-green"
+                      : learnerAnswerState === "INCORRECT"
+                      ? "border-catchup-red"
+                      : "border-catchup-blue"
+                  }`}
+                  onClick={() => {
+                    if (checkCanAnswerQuestion()) {
+                      setSelectedValue(null);
+                    }
+                  }}
+                >
+                  <DroppableItem
+                    key={index}
+                    item={{ index: answerMapKey }}
+                    type={"MATCHING"}
+                    target={selectedTargetKey}
+                    setTarget={setSelectedTargetKey}
+                    dropRef={drop}
+                    component={
+                      <div
+                        className="h-full flex-1 flex flex-row items-center justify-center"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          if (checkCanAnswerQuestion()) {
+                            handleMatchingActivityItemOnChange(
+                              answerMapKey,
+                              null
+                            );
+                          }
+                        }}
+                      >
+                        {contentMap.type === "TEXT" ? (
+                          <p className="text-lg whitespace-pre-wrap">
+                            {constructInputWithSpecialExpressionList(
+                              answerMap[answerMapKey]
+                            ).map((inputPart, index) => (
+                              <span
+                                key={index}
+                                className={`${
+                                  inputPart.isBold ? "font-bold" : ""
+                                } ${inputPart.isUnderline ? "underline" : ""}`}
+                              >
+                                {inputPart.isEquation ? (
+                                  <span className="text-xl">
+                                    <InlineMath math={inputPart.value} />
+                                  </span>
+                                ) : (
+                                  inputPart.value
+                                )}
+                              </span>
+                            ))}
+                          </p>
+                        ) : (
+                          <ShowMaterialMediaByContentType
+                            key={`${uniqueValue}-${index}`}
+                            contentType={contentMap.type}
+                            src={answerMap[answerMapKey]}
+                            canFullScreen={false}
+                          />
+                        )}
+                      </div>
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default MatchingActivityMaterialContent;

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

@@ -82,9 +82,9 @@ const OrderingActivityMaterialContent = ({
     if (index === 0) {
       return 0;
     } else if (index === 1) {
-      return 150;
+      return 65;
     } else if (index % 2 === 0) {
-      return -150;
+      return -65;
     } else if (index % 2 === 1) {
       return 0;
     }
@@ -112,9 +112,7 @@ const OrderingActivityMaterialContent = ({
               }}
             >
               <div className="mr-3">
-                <div
-                  className={`min-h-catchup-activity-outer-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300`}
-                >
+                <div className="h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto">
                   <div
                     className={`${
                       selectedKey === materialKey
@@ -142,7 +140,11 @@ const OrderingActivityMaterialContent = ({
                             : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40"
                           : ""
                         : ""
-                    } flex-1 min-h-catchup-activity-outer-box-item flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${
+                    } ${
+                      contentMap.type === "TEXT"
+                        ? "h-catchup-activity-text-box-item"
+                        : "h-catchup-activity-media-box-item"
+                    } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${
                       learnerAnswerState === "CORRECT"
                         ? "border-catchup-green"
                         : learnerAnswerState === "INCORRECT"
@@ -167,7 +169,7 @@ const OrderingActivityMaterialContent = ({
                             } ${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}/ShowMaterialMediaByContentType.tsx

@@ -92,15 +92,15 @@ const ShowMaterialMediaByContentType = ({
   };
 
   return contentType === "IMAGE" ? (
-    <div key={key}>
+    <>
       {RenderShowFullScreenItem()}
       <div className="my-2">
         <div className="h-full flex flex-row flex-wrap items-center">
           <div
             className={`${
               isFullHeight
-                ? "h-catchup-activity-box-item"
-                : "max-w-catchup-activity-box-item"
+                ? "h-catchup-activity-media-box-item"
+                : "max-w-catchup-activity-media-box-item"
             }  flex flex-col justify-center items-center relative`}
           >
             <BaseImage
@@ -139,13 +139,13 @@ const ShowMaterialMediaByContentType = ({
           </div>
         </div>
       </div>
-    </div>
+    </>
   ) : contentType === "VIDEO" ? (
     <div className="my-2">
       <div className="h-full flex flex-row flex-wrap items-center">
         <div className="h-full flex flex-col justify-center items-center">
           <video
-            className="h-catchup-activity-box-item rounded-catchup-xlarge"
+            className="h-catchup-activity-media-box-item rounded-catchup-xlarge"
             src={src}
             controls
             onClick={() => {}}
@@ -158,7 +158,7 @@ const ShowMaterialMediaByContentType = ({
       <div className="h-full flex flex-row flex-wrap items-center">
         <div className="h-full flex flex-col justify-center items-center">
           <audio
-            className="h-catchup-activity-box-item rounded-catchup-xlarge"
+            className="h-catchup-activity-media-box-item rounded-catchup-xlarge"
             src={src}
             controls
             onClick={() => {}}

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

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

package/src/components/activities/{solution-content → solution-contents}/ActivitySolutionContent.tsx

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

package/src/index.ts

@@ -21,8 +21,8 @@ export { default as BaseModal } from "./components/modals/BaseModal";
 
 export { default as BasePDF } from "./components/pdfs/BasePDF";
 
-export { default as ActivityEmptyContent } from "./components/activities/empty-content/ActivityEmptyContent";
-export { default as ActivityBodyContent } from "./components/activities/body-content/ActivityBodyContent";
+export { default as ActivityEmptyContent } from "./components/activities/empty-contents/ActivityEmptyContent";
+export { default as ActivityBodyContent } from "./components/activities/body-contents/ActivityBodyContent";
 export { default as DropdownActivityContent } from "./components/activities/DropdownActivityContent";
 export { default as FillInTheBlanksActivityContent } from "./components/activities/FillInTheBlanksActivityContent";
 export { default as GroupingActivityContent } from "./components/activities/GroupingActivityContent";
@@ -32,8 +32,8 @@ export { default as MCSAActivityContent } from "./components/activities/MCSAActi
 export { default as OpenEndedActivityContent } from "./components/activities/OpenEndedActivityContent";
 export { default as OrderingActivityContent } from "./components/activities/OrderingActivityContent";
 export { default as TrueFalseActivityContent } from "./components/activities/TrueFalseActivityContent";
-export { default as ActivitySolutionContent } from "./components/activities/solution-content/ActivitySolutionContent";
-export { default as ActivityEvaluationRubricContent } from "./components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent";
+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";
 

package/src/properties/ActivityProperties.ts

@@ -108,7 +108,6 @@ export interface IGroupingActivityProps {
   changeAnswer: (e: any) => void;
   isPreview: boolean;
   showCorrectAnswer: boolean;
-  isFullScreen: boolean;
 }
 
 export interface IGroupingActivityMaterialProps {
@@ -129,7 +128,6 @@ export interface IMatchingActivityProps {
   changeAnswer: (e: any) => void;
   isPreview: boolean;
   showCorrectAnswer: boolean;
-  isFullScreen: boolean;
 }
 
 export interface IMatchingActivityMaterialProps {
@@ -171,6 +169,7 @@ export interface IOpenEndedActivityProps {
   changeAnswer: (e: any) => void;
   canAnswerQuestion: () => boolean;
   showMaterialContent: boolean;
+  isPreview: boolean;
   isFullScreen: boolean;
 }