catchup-library-web 1.0.0 → 1.0.1

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface IButtonProps {
     title: string;
     size: string;
-    onClick: () => any;
+    onClick: () => void;
     disabled: boolean;
     iconPosition: string;
     textOnly: boolean;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface IButtonProps {
     title: string;
     size: string;
-    onClick: () => any;
+    onClick: () => void;
     disabled: boolean;
     iconPosition: string;
     textOnly: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -11,13 +11,21 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "i18next": "^24.2.2",
     "react": "^18.3.0",
+    "react-dnd": "^16.0.1",
     "react-dom": "^18.3.0",
-    "react-loader-spinner": "^6.1.6"
+    "react-i18next": "^15.4.0",
+    "react-katex": "^3.0.1",
+    "react-loader-spinner": "^6.1.6",
+    "react-modal": "^3.16.3",
+    "react-select": "^5.10.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "@types/react-katex": "^3.0.4",
+    "@types/react-modal": "^3.16.3",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   }

package/src/components/activities/DropdownActivityContent.tsx

@@ -0,0 +1,73 @@
+import { IDropdownActivityProps } from "../../properties/ActivityProperties";
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} 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";
+
+const DropdownActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer,
+}: IDropdownActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
+  const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
+
+  const retrieveCurrentAnswerMap = () => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "DROPDOWN"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+
+  const handleDropdownAnswerOnChange = (
+    answer: any,
+    key: any,
+    value: string
+  ) => {
+    const answerMap = retrieveCurrentAnswerMap();
+    answerMap[key] = value;
+    changeAnswer(answer);
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      <div className="w-full md:w-[60%]">
+        <ActivityBodyContent
+          bodyMap={dropdownBodyMap}
+          answerMap={retrieveCurrentAnswerMap()}
+          contentMap={contentMap}
+          templateType={"DROPDOWN"}
+        />
+      </div>
+      <div className="contents md:hidden">
+        <DividerLine />
+      </div>
+      <div className="hidden md:contents">
+        <VerticalDividerLine />
+      </div>
+      <div className="w-full md:flex-1">
+        <DropdownActivityMaterialContent
+          uniqueValue={JSON.stringify(data.contentMap)}
+          answer={answer}
+          materialMap={dropdownMaterialMap}
+          contentMap={contentMap}
+          checkCanAnswerQuestion={canAnswerQuestion}
+          onChange={handleDropdownAnswerOnChange}
+          isPreview={isPreview}
+          showCorrectAnswer={showCorrectAnswer}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DropdownActivityContent;

package/src/components/activities/FillInTheBlanksActivityContent.tsx

@@ -0,0 +1,102 @@
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import FillInTheBlanksActivityMaterialContent from "./material-content/FillInTheBlanksActivityMaterialContent";
+import { IFillInTheBlanksActivityProps } from "../../properties/ActivityProperties";
+import DividerLine from "../dividers/DividerLine";
+import VerticalDividerLine from "../dividers/VerticalDividerLine";
+
+const FillInTheBlanksActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer,
+}: IFillInTheBlanksActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const fillInTheBlanksBodyMap = parseBodyMapFromData(
+    data,
+    "FILL_IN_THE_BLANKS"
+  );
+  const fillInTheBlanksMaterialMap = parseMaterialMapFromData(
+    data,
+    "FILL_IN_THE_BLANKS"
+  );
+  const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList
+    ? JSON.parse(data.fillInTheBlanksIncorrectList)
+    : [];
+
+  const retrieveCurrentAnswerMap = () => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+
+  const constructAnswerOptionList = () => {
+    const optionList: any = [];
+    Object.keys(fillInTheBlanksMaterialMap).forEach((key) => {
+      const array = JSON.parse(fillInTheBlanksMaterialMap[key]);
+      for (const item of array) {
+        const foundIndex = optionList.findIndex(
+          (option: string) => option === item
+        );
+        if (foundIndex === -1) {
+          optionList.push(item);
+        }
+      }
+    });
+    fillInTheBlanksIncorrectList.forEach((value: string) => {
+      optionList.push(value);
+    });
+    return optionList;
+  };
+
+  const handleFillInTheBlanksAnswerOnChange = (
+    answer: any,
+    key: any,
+    value: string | null
+  ) => {
+    const answerMap = retrieveCurrentAnswerMap();
+    answerMap[key] = value;
+    changeAnswer(answer);
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      <div className="w-full md:w-[60%]">
+        <ActivityBodyContent
+          bodyMap={fillInTheBlanksBodyMap}
+          answerMap={retrieveCurrentAnswerMap()}
+          contentMap={contentMap}
+          templateType={"FILL_IN_THE_BLANKS"}
+        />
+      </div>
+      <div className="contents md:hidden">
+        <DividerLine />
+      </div>
+      <div className="hidden md:contents">
+        <VerticalDividerLine />
+      </div>
+      <div className="w-full md:flex-1">
+        <FillInTheBlanksActivityMaterialContent
+          uniqueValue={JSON.stringify(data.contentMap)}
+          answer={answer}
+          optionList={constructAnswerOptionList()}
+          materialMap={fillInTheBlanksMaterialMap}
+          contentMap={contentMap}
+          checkCanAnswerQuestion={canAnswerQuestion}
+          onChange={handleFillInTheBlanksAnswerOnChange}
+          isPreview={isPreview}
+          showCorrectAnswer={showCorrectAnswer}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FillInTheBlanksActivityContent;

package/src/components/activities/GroupingActivityContent.tsx

@@ -0,0 +1,62 @@
+import { IGroupingActivityProps } from "../../properties/ActivityProperties";
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import DividerLine from "../dividers/DividerLine";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import GroupingActivityMaterialContent from "./material-content/GroupingActivityMaterialContent";
+
+const GroupingActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer,
+}: IGroupingActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const groupingBodyMap = parseBodyMapFromData(data, "GROUPING");
+  const groupingMaterialMap = parseMaterialMapFromData(data, "GROUPING");
+
+  const handleGroupingAnswerOnChange = (
+    answer: any,
+    key: any,
+    value: string | null,
+    index: number | null
+  ) => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "GROUPING"
+    );
+    const answerMap = answer.data[foundIndex].answerMap;
+    if (value) {
+      answerMap[key].push(value);
+    } else {
+      answerMap[key].splice(index, 1);
+    }
+    changeAnswer(answer);
+  };
+
+  return (
+    <>
+      <ActivityBodyContent
+        bodyMap={groupingBodyMap}
+        templateType={"GROUPING"}
+      />
+      <DividerLine />
+      <GroupingActivityMaterialContent
+        uniqueValue={JSON.stringify(data.contentMap)}
+        answer={answer}
+        materialMap={groupingMaterialMap}
+        contentMap={contentMap}
+        checkCanAnswerQuestion={canAnswerQuestion}
+        onChange={handleGroupingAnswerOnChange}
+        isPreview={isPreview}
+        showCorrectAnswer={showCorrectAnswer}
+      />
+    </>
+  );
+};
+
+export default GroupingActivityContent;

package/src/components/activities/MCMAActivityContent.tsx

@@ -0,0 +1,65 @@
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import MCMAActivityMaterialContent from "./material-content/MCMAActivityMaterialContent";
+import { IMCMAActivityProps } from "../../properties/ActivityProperties";
+import DividerLine from "../dividers/DividerLine";
+import VerticalDividerLine from "../dividers/VerticalDividerLine";
+
+const MCMAActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+}: IMCMAActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const MCMABodyMap = parseBodyMapFromData(data, "MCMA");
+  const MCMAMaterialMap = parseMaterialMapFromData(data, "MCMA");
+
+  const handleMCMAAnswerOnChange = (answer: any, key: any, value: string) => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "MCMA"
+    );
+    const answerMap = answer.data[foundIndex].answerMap;
+    const foundSubIndex = answerMap[key].findIndex(
+      (answerMaterialKey: string) => answerMaterialKey === value
+    );
+    if (foundSubIndex === -1) {
+      answerMap[key].push(value);
+    } else {
+      answerMap[key].splice(foundSubIndex, 1);
+    }
+    changeAnswer(answer);
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      <div className="w-full md:w-[60%]">
+        <ActivityBodyContent bodyMap={MCMABodyMap} templateType={"MCMA"} />
+      </div>
+      <div className="contents md:hidden">
+        <DividerLine />
+      </div>
+      <div className="hidden md:block">
+        <VerticalDividerLine />
+      </div>
+      <div className="w-full md:flex-1">
+        <MCMAActivityMaterialContent
+          uniqueValue={JSON.stringify(data.contentMap)}
+          answer={answer}
+          materialMap={MCMAMaterialMap}
+          contentMap={contentMap}
+          checkCanAnswerQuestion={canAnswerQuestion}
+          onChange={handleMCMAAnswerOnChange}
+          isPreview={isPreview}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MCMAActivityContent;

package/src/components/activities/MCSAActivityContent.tsx

@@ -0,0 +1,58 @@
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import MCSAActivityMaterialContent from "./material-content/MCSAActivityMaterialContent";
+import { IMCSAActivityProps } from "../../properties/ActivityProperties";
+import DividerLine from "../dividers/DividerLine";
+import VerticalDividerLine from "../dividers/VerticalDividerLine";
+
+const MCSAActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+}: IMCSAActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const MCSABodyMap = parseBodyMapFromData(data, "MCSA");
+  const MCSAMaterialMap = parseMaterialMapFromData(data, "MCSA");
+
+  const handleMCSAAnswerOnChange = (answer: any, key: any, value: string) => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "MCSA"
+    );
+    const answerMap = answer.data[foundIndex].answerMap;
+    answerMap[key] = value;
+    changeAnswer(answer);
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      <div className="w-full md:w-[60%]">
+        <ActivityBodyContent bodyMap={MCSABodyMap} templateType={"MCSA"} />
+      </div>
+      <div className="contents md:hidden">
+        <DividerLine />
+      </div>
+      <div className="hidden md:block">
+        <VerticalDividerLine />
+      </div>
+      <div className="w-full md:flex-1">
+        <MCSAActivityMaterialContent
+          uniqueValue={JSON.stringify(data.contentMap)}
+          answer={answer}
+          materialMap={MCSAMaterialMap}
+          contentMap={contentMap}
+          checkCanAnswerQuestion={canAnswerQuestion}
+          onChange={handleMCSAAnswerOnChange}
+          isPreview={isPreview}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MCSAActivityContent;

package/src/components/activities/MatchingActivityContent.tsx

@@ -0,0 +1,57 @@
+import { IMatchingActivityProps } from "../../properties/ActivityProperties";
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import DividerLine from "../dividers/DividerLine";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import MatchingActivityMaterialContent from "./material-content/MatchingActivityMaterialContent";
+
+const MatchingActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer,
+}: IMatchingActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const matchingBodyMap = parseBodyMapFromData(data, "MATCHING");
+  const matchingMaterialMap = parseMaterialMapFromData(data, "MATCHING");
+
+  const handleMatchingAnswerOnChange = (
+    answer: any,
+    key: any,
+    value: string | null
+  ) => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "MATCHING"
+    );
+    const answerMap = answer.data[foundIndex].answerMap;
+    answerMap[key] = value;
+    changeAnswer(answer);
+  };
+
+  return (
+    <>
+      <ActivityBodyContent
+        bodyMap={matchingBodyMap}
+        templateType={"MATCHING"}
+      />
+      <DividerLine />
+      <MatchingActivityMaterialContent
+        uniqueValue={JSON.stringify(data.contentMap)}
+        answer={answer}
+        materialMap={matchingMaterialMap}
+        contentMap={contentMap}
+        checkCanAnswerQuestion={canAnswerQuestion}
+        onChange={handleMatchingAnswerOnChange}
+        isPreview={isPreview}
+        showCorrectAnswer={showCorrectAnswer}
+      />
+    </>
+  );
+};
+
+export default MatchingActivityContent;

package/src/components/activities/OpenEndedActivityContent.tsx

@@ -0,0 +1,92 @@
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import OpenEndedActivityMaterialContent from "./material-content/OpenEndedActivityMaterialContent";
+import { IOpenEndedActivityProps } from "../../properties/ActivityProperties";
+import DividerLine from "../dividers/DividerLine";
+import VerticalDividerLine from "../dividers/VerticalDividerLine";
+
+const OpenEndedActivityContent = ({
+  answer,
+  data,
+  changeAnswer,
+  showMaterialContent,
+}: IOpenEndedActivityProps) => {
+  // const {
+  //   answer,
+  //   data,
+  //   canAnswerQuestion,
+  //   changeAnswer,
+  //   userId,
+  //   userProfileId,
+  //   catchtivityApplicationId,
+  //   catchxamApplicationId,
+  //   etudeId,
+  //   activityId,
+  //   activityTemplateId,
+  //   showMaterialContent,
+  //   storageStompClient,
+  // } = props;
+  const contentMap = parseContentMapFromData(data);
+  const openEndedBodyMap = parseBodyMapFromData(data, "OPEN_ENDED");
+  // const openEndedMaterialMap = JSON.parse(data.openEndedMaterialMap);
+
+  const handleOpenEndedAnswerOnChange = (answer: any, value: string) => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "OPEN_ENDED"
+    );
+    const answerMap = answer.data[foundIndex].answerMap;
+    answerMap["ANSWER"] = value;
+    changeAnswer(answer);
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      <div
+        className={`${showMaterialContent ? "w-full md:w-[40%]" : "w-full"}`}
+      >
+        <ActivityBodyContent
+          bodyMap={openEndedBodyMap}
+          templateType={"OPEN_ENDED"}
+        />
+      </div>
+
+      {showMaterialContent ? (
+        <>
+          <div className="contents md:hidden">
+            <DividerLine />
+          </div>
+          <div className="hidden md:block">
+            <VerticalDividerLine />
+          </div>
+          <div className="w-full md:flex-1">
+            <OpenEndedActivityMaterialContent
+              answer={answer}
+              contentMap={contentMap}
+              onChange={handleOpenEndedAnswerOnChange}
+            />
+            {/* <OpenEndedActivityMaterialContent
+              answer={answer}
+              bodyMap={openEndedBodyMap}
+              contentMap={contentMap}
+              checkCanAnswerQuestion={canAnswerQuestion}
+              onChange={handleOpenEndedAnswerOnChange}
+              userId={userId}
+              userProfileId={userProfileId}
+              catchtivityApplicationId={catchtivityApplicationId}
+              catchxamApplicationId={catchxamApplicationId}
+              etudeId={etudeId}
+              activityId={activityId}
+              activityTemplateId={activityTemplateId}
+              storageStompClient={storageStompClient}
+            /> */}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default OpenEndedActivityContent;

package/src/components/activities/OrderingActivityContent.tsx

@@ -0,0 +1,59 @@
+import { IOrderingActivityProps } from "../../properties/ActivityProperties";
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import DividerLine from "../dividers/DividerLine";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import OrderingActivityMaterialContent from "./material-content/OrderingActivityMaterialContent";
+
+const OrderingActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer,
+}: IOrderingActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");
+  const orderingMaterialMap = parseMaterialMapFromData(data, "ORDERING");
+
+  const handleOrderingAnswerOnChange = (
+    answer: any,
+    primaryKey: any,
+    secondaryKey: any
+  ) => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "ORDERING"
+    );
+    const answerMap = answer.data[foundIndex].answerMap;
+    const prevValue = answerMap[primaryKey];
+    answerMap[primaryKey] = answerMap[secondaryKey];
+    answerMap[secondaryKey] = prevValue;
+    changeAnswer(answer);
+  };
+
+  return (
+    <>
+      <ActivityBodyContent
+        bodyMap={orderingBodyMap}
+        templateType={"ORDERING"}
+      />
+      <DividerLine />
+      <OrderingActivityMaterialContent
+        uniqueValue={JSON.stringify(data.contentMap)}
+        answer={answer}
+        materialMap={orderingMaterialMap}
+        contentMap={contentMap}
+        checkCanAnswerQuestion={canAnswerQuestion}
+        onChange={handleOrderingAnswerOnChange}
+        isPreview={isPreview}
+        showCorrectAnswer={showCorrectAnswer}
+      />
+    </>
+  );
+};
+
+export default OrderingActivityContent;