catchup-library-web 1.11.0 → 1.11.2

package/src/components/activities/ActivityPreviewByAnswerData.tsx

@@ -0,0 +1,301 @@
+import { useEffect, useState } from "react";
+import DropdownActivityContent from "./DropdownActivityContent";
+import FillInTheBlanksActivityContent from "./FillInTheBlanksActivityContent";
+import GroupingActivityContent from "./GroupingActivityContent";
+import MatchingActivityContent from "./MatchingActivityContent";
+import MCMAActivityContent from "./MCMAActivityContent";
+import MCSAActivityContent from "./MCSAActivityContent";
+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 DividerLine from "../dividers/DividerLine";
+import i18n from "../../language/i18n";
+import { constructActivityAnswerMap } from "../../utilization/CatchtivityUtilization";
+import { IActivityPreviewByAnswerDataProps } from "../../properties/ActivityProperties";
+import ActivityEmptyContent from "./empty-content/ActivityEmptyContent";
+
+const ActivityPreviewByAnswerData = ({
+  data,
+  showType = true,
+  showDescription = true,
+  lockedType = null,
+  typeOptionList = [],
+  showSolution = false,
+  showEvaluationRubric = false,
+  showTaxonomy = true,
+  isFullScreen = false,
+  showCorrectAnswer = false,
+}: IActivityPreviewByAnswerDataProps) => {
+  const [key, setKey] = useState(new Date().getTime());
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+  const [optionList, setOptionList] = useState<any[]>([]);
+  // Define proper types for answer data
+  interface AnswerItem {
+    type: string;
+    isEmpty?: boolean;
+    answerMap?: any;
+    [key: string]: any;
+  }
+
+  interface Answer {
+    data: AnswerItem[];
+  }
+
+  const [answer, setAnswer] = useState<Answer>({ data: [] });
+
+  // Reset component when data changes
+  useEffect(() => {
+    if (!data) return;
+    setKey(new Date().getTime());
+  }, [data]);
+
+  // Helper function to check if answer map exists for a specific type
+  const checkAnswerMapExists = (type: string): AnswerItem | null => {
+    if (data && data.answerMap && Array.isArray(data.answerMap)) {
+      const foundAnswer = data.answerMap.find(
+        (answer: any) => answer.type === type
+      );
+      return foundAnswer || null;
+    }
+    return null;
+  };
+
+  // Helper function to retrieve taxonomy name from activity type
+  const retrieveTaxonomyNameFromActivityType = (type: string) => {
+    if (!data) return "";
+
+    let taxonomyMap = { name: "" };
+
+    const taxonomyMapNames: { [key: string]: string } = {
+      ORDERING: "orderingTaxonomyMap",
+      DROPDOWN: "dropdownTaxonomyMap",
+      MCSA: "MCSATaxonomyMap",
+      MCMA: "MCMATaxonomyMap",
+      MATCHING: "matchingTaxonomyMap",
+      GROUPING: "groupingTaxonomyMap",
+      FILL_IN_THE_BLANKS: "fillInTheBlanksTaxonomyMap",
+      OPEN_ENDED: "openEndedTaxonomyMap",
+      TRUE_FALSE: "trueFalseTaxonomyMap",
+    };
+
+    const mapName = taxonomyMapNames[type];
+    if (mapName && data[mapName]) {
+      try {
+        taxonomyMap = JSON.parse(data[mapName]);
+      } catch (error) {
+        console.error(`Error parsing taxonomy map for ${type}:`, error);
+      }
+    }
+
+    return taxonomyMap.name || "";
+  };
+
+  // Construct answer data based on available activity types
+  useEffect(() => {
+    if (!data) return;
+
+    const constructAnswerBasedOnData = () => {
+      const newAnswer: Answer = { data: [] };
+
+      const activityTypes = [
+        { 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" },
+      ];
+
+      activityTypes.forEach(({ type, materialMap }) => {
+        if (data[materialMap]) {
+          const foundAnswer = checkAnswerMapExists(type);
+          const answerItem: AnswerItem =
+            foundAnswer ||
+            constructActivityAnswerMap(
+              { type },
+              JSON.parse(JSON.stringify(data))
+            );
+          newAnswer.data.push(answerItem);
+        }
+      });
+
+      setAnswer(newAnswer);
+
+      // Set initial selected type
+      if (newAnswer.data.length > 0) {
+        if (
+          lockedType &&
+          newAnswer.data.find((item: AnswerItem) => item.type === lockedType)
+        ) {
+          setSelectedType(lockedType);
+        } else {
+          setSelectedType(newAnswer.data[0].type);
+        }
+      }
+    };
+
+    constructAnswerBasedOnData();
+  }, [data, lockedType]);
+
+  // Set up option list for type selection
+  useEffect(() => {
+    if (!data || !answer.data.length) return;
+
+    let currentTypeOptionList =
+      typeOptionList ||
+      answer.data.map((item) => ({
+        id: item.type,
+        text: i18n.t(item.type),
+      }));
+
+    if (lockedType) {
+      currentTypeOptionList = currentTypeOptionList.filter(
+        (typeOption: any) => typeOption.id === lockedType
+      );
+    }
+
+    if (showTaxonomy) {
+      setOptionList(
+        currentTypeOptionList.map((typeOption: any) => ({
+          ...typeOption,
+          subText: i18n.t(retrieveTaxonomyNameFromActivityType(typeOption.id)),
+        }))
+      );
+    } else {
+      setOptionList(currentTypeOptionList);
+    }
+  }, [data, answer.data, lockedType, typeOptionList, showTaxonomy]);
+
+  // Render the appropriate activity content based on selected type
+  const RenderSelectedActivityContent = () => {
+    const commonProps = {
+      answer,
+      data,
+      canAnswerQuestion: () => true,
+      changeAnswer: (newAnswer: Answer) =>
+        setAnswer(JSON.parse(JSON.stringify(newAnswer))),
+      isPreview: true,
+      showCorrectAnswer,
+      isFullScreen,
+    };
+
+    switch (selectedType) {
+      case "ORDERING":
+        return data.orderingBodyMap && data.orderingMaterialMap ? (
+          <OrderingActivityContent {...commonProps} />
+        ) : null;
+
+      case "DROPDOWN":
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? (
+          <DropdownActivityContent {...commonProps} />
+        ) : null;
+
+      case "MCSA":
+        return data.MCSABodyMap && data.MCSAMaterialMap ? (
+          <MCSAActivityContent {...commonProps} />
+        ) : null;
+
+      case "MCMA":
+        return data.MCMABodyMap && data.MCMAMaterialMap ? (
+          <MCMAActivityContent {...commonProps} />
+        ) : null;
+
+      case "MATCHING":
+        return data.matchingBodyMap && data.matchingMaterialMap ? (
+          <MatchingActivityContent {...commonProps} />
+        ) : null;
+
+      case "GROUPING":
+        return data.groupingBodyMap && data.groupingMaterialMap ? (
+          <GroupingActivityContent {...commonProps} />
+        ) : null;
+
+      case "FILL_IN_THE_BLANKS":
+        return data.fillInTheBlanksBodyMap &&
+          data.fillInTheBlanksMaterialMap ? (
+          <FillInTheBlanksActivityContent {...commonProps} />
+        ) : null;
+
+      case "OPEN_ENDED":
+        return data.openEndedBodyMap ? (
+          <OpenEndedActivityContent
+            {...commonProps}
+            showMaterialContent={true}
+          />
+        ) : null;
+
+      case "TRUE_FALSE":
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? (
+          <TrueFalseActivityContent {...commonProps} />
+        ) : null;
+
+      default:
+        return null;
+    }
+  };
+
+  if (!data) return null;
+
+  return (
+    <div key={key}>
+      {showType && optionList.length > 0 ? (
+        <div className="mb-4">
+          {showDescription ? (
+            <div className="my-2">
+              <p className="font-semibold text-lg">
+                {i18n.t("activity_template")}
+              </p>
+            </div>
+          ) : null}
+
+          <SelectionBox
+            optionList={optionList}
+            selectedId={selectedType}
+            handleSelectOnClick={(itemId) => {
+              setSelectedType(itemId);
+            }}
+          />
+        </div>
+      ) : null}
+
+      <DividerLine />
+
+      <div className="flex flex-col my-2 w-full p-5">
+        {answer?.data[0]?.isEmpty ? <ActivityEmptyContent /> : null}
+
+        {selectedType ? (
+          <div key={selectedType}>{RenderSelectedActivityContent()}</div>
+        ) : null}
+      </div>
+
+      {selectedType && showSolution ? (
+        <div className="my-4">
+          <ActivitySolutionContent
+            activityTemplateType={selectedType}
+            data={data}
+          />
+        </div>
+      ) : null}
+
+      {selectedType && showEvaluationRubric ? (
+        <div className="my-4">
+          <ActivityEvaluationRubricContent
+            activityTemplateType={selectedType}
+            data={data}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default ActivityPreviewByAnswerData;

package/src/index.ts

@@ -26,6 +26,7 @@ export { default as TrueFalseActivityContent } from "./components/activities/Tru
 export { default as ActivitySolutionContent } from "./components/activities/solution-content/ActivitySolutionContent";
 export { default as ActivityEvaluationRubricContent } from "./components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent";
 export { default as ActivityPreviewByData } from "./components/activities/ActivityPreviewByData";
+export { default as ActivityPreviewByAnswerData } from "./components/activities/ActivityPreviewByAnswerData";
 
 export { default as BlueVerticalDividerLine } from "./components/dividers/BlueVerticalDividerLine";
 export { default as DividerLine } from "./components/dividers/DividerLine";

package/src/properties/ActivityProperties.ts

@@ -228,3 +228,16 @@ export interface IActivityPreviewByDataProps {
   showEvaluationRubric: boolean;
   isFullScreen: boolean;
 }
+
+export interface IActivityPreviewByAnswerDataProps {
+  data: any;
+  showType?: boolean;
+  showDescription?: boolean;
+  lockedType?: string | null;
+  typeOptionList?: any[];
+  showSolution?: boolean;
+  showEvaluationRubric?: boolean;
+  showTaxonomy?: boolean;
+  isFullScreen?: boolean;
+  showCorrectAnswer?: boolean;
+}