catchup-library-web 1.0.20 → 1.0.22

package/dist/index.js

@@ -5930,11 +5930,6 @@ var ActivityPreviewByData = ({
 }) => {
   const [selectedType, setSelectedType] = (0, import_react24.useState)(null);
   const [optionList, setOptionList] = (0, import_react24.useState)([]);
-  console.log("inner selected type: ", selectedType);
-  (0, import_react24.useEffect)(() => {
-    setSelectedType(null);
-    setOptionList([]);
-  }, []);
   (0, import_react24.useEffect)(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
@@ -5982,17 +5977,18 @@ var ActivityPreviewByData = ({
     if (showTaxonomy) {
       setOptionList(
         typeOptionList.map((typeOption) => __spreadProps(__spreadValues({}, typeOption), {
-          subTitle: retrieveTaxonomyNameByActivityTypeFromData(typeOption)
+          subText: retrieveTaxonomyNameByActivityTypeFromData(typeOption)
         }))
       );
     } else {
       setOptionList(typeOptionList);
     }
   }, [data, typeOptionList, showTaxonomy]);
+  console.log(optionList);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    showType ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    showType ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       SelectionBox_default,
       {
         optionList,
@@ -6001,121 +5997,124 @@ var ActivityPreviewByData = ({
           setSelectedType(itemId);
         }
       }
-    ) }) : null,
-    selectedType ? selectedType === "ORDERING" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      OrderingActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "DROPDOWN" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      DropdownActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "MCSA" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      MCSAActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "MCMA" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      MCMAActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "MATCHING" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      MatchingActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "GROUPING" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      GroupingActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "FILL_IN_THE_BLANKS" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      FillInTheBlanksActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "OPEN_ENDED" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      OpenEndedActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        showMaterialContent: false,
-        data
-      }
-    ) : selectedType === "TRUE_FALSE" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      TrueFalseActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : null : null,
+    ) : null,
+    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DividerLine_default, {}),
+      selectedType === "ORDERING" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        OrderingActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "DROPDOWN" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        DropdownActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "MCSA" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        MCSAActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "MCMA" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        MCMAActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "MATCHING" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        MatchingActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "GROUPING" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        GroupingActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "FILL_IN_THE_BLANKS" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        FillInTheBlanksActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "OPEN_ENDED" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        OpenEndedActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          showMaterialContent: false,
+          data
+        }
+      ) : selectedType === "TRUE_FALSE" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        TrueFalseActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : null
+    ] }) : null,
     selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       ActivitySolutionContent_default,
       {

package/dist/index.mjs

@@ -5756,11 +5756,6 @@ var ActivityPreviewByData = ({
 }) => {
   const [selectedType, setSelectedType] = useState19(null);
   const [optionList, setOptionList] = useState19([]);
-  console.log("inner selected type: ", selectedType);
-  useEffect11(() => {
-    setSelectedType(null);
-    setOptionList([]);
-  }, []);
   useEffect11(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
@@ -5808,17 +5803,18 @@ var ActivityPreviewByData = ({
     if (showTaxonomy) {
       setOptionList(
         typeOptionList.map((typeOption) => __spreadProps(__spreadValues({}, typeOption), {
-          subTitle: retrieveTaxonomyNameByActivityTypeFromData(typeOption)
+          subText: retrieveTaxonomyNameByActivityTypeFromData(typeOption)
         }))
       );
     } else {
       setOptionList(typeOptionList);
     }
   }, [data, typeOptionList, showTaxonomy]);
+  console.log(optionList);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
   return /* @__PURE__ */ jsxs32(Fragment9, { children: [
-    showType ? /* @__PURE__ */ jsx41("div", { className: "mb-4", children: /* @__PURE__ */ jsx41(
+    showType ? /* @__PURE__ */ jsx41(
       SelectionBox_default,
       {
         optionList,
@@ -5827,121 +5823,124 @@ var ActivityPreviewByData = ({
           setSelectedType(itemId);
         }
       }
-    ) }) : null,
-    selectedType ? selectedType === "ORDERING" ? /* @__PURE__ */ jsx41(
-      OrderingActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "DROPDOWN" ? /* @__PURE__ */ jsx41(
-      DropdownActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "MCSA" ? /* @__PURE__ */ jsx41(
-      MCSAActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "MCMA" ? /* @__PURE__ */ jsx41(
-      MCMAActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "MATCHING" ? /* @__PURE__ */ jsx41(
-      MatchingActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "GROUPING" ? /* @__PURE__ */ jsx41(
-      GroupingActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "FILL_IN_THE_BLANKS" ? /* @__PURE__ */ jsx41(
-      FillInTheBlanksActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "OPEN_ENDED" ? /* @__PURE__ */ jsx41(
-      OpenEndedActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        showMaterialContent: false,
-        data
-      }
-    ) : selectedType === "TRUE_FALSE" ? /* @__PURE__ */ jsx41(
-      TrueFalseActivityContent_default,
-      {
-        answer,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : null : null,
+    ) : null,
+    selectedType ? /* @__PURE__ */ jsxs32("div", { className: "", children: [
+      /* @__PURE__ */ jsx41(DividerLine_default, {}),
+      selectedType === "ORDERING" ? /* @__PURE__ */ jsx41(
+        OrderingActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "DROPDOWN" ? /* @__PURE__ */ jsx41(
+        DropdownActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "MCSA" ? /* @__PURE__ */ jsx41(
+        MCSAActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "MCMA" ? /* @__PURE__ */ jsx41(
+        MCMAActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "MATCHING" ? /* @__PURE__ */ jsx41(
+        MatchingActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "GROUPING" ? /* @__PURE__ */ jsx41(
+        GroupingActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "FILL_IN_THE_BLANKS" ? /* @__PURE__ */ jsx41(
+        FillInTheBlanksActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : selectedType === "OPEN_ENDED" ? /* @__PURE__ */ jsx41(
+        OpenEndedActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          showMaterialContent: false,
+          data
+        }
+      ) : selectedType === "TRUE_FALSE" ? /* @__PURE__ */ jsx41(
+        TrueFalseActivityContent_default,
+        {
+          answer,
+          changeAnswer: () => {
+          },
+          canAnswerQuestion: () => {
+            return true;
+          },
+          data,
+          isPreview: true,
+          showCorrectAnswer: true
+        }
+      ) : null
+    ] }) : null,
     selectedType && showSolution ? /* @__PURE__ */ jsx41("div", { className: "my-4", children: /* @__PURE__ */ jsx41(
       ActivitySolutionContent_default,
       {

package/package.json

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

package/src/components/activities/ActivityPreviewByData.tsx

@@ -12,6 +12,7 @@ import SelectionBox from "../boxes/SelectionBox";
 import TrueFalseActivityContent from "./TrueFalseActivityContent";
 import { IActivityPreviewByDataProps } from "../../properties/ActivityProperties";
 import ActivitySolutionContent from "./solution-content/ActivitySolutionContent";
+import DividerLine from "../dividers/DividerLine";
 
 const ActivityPreviewByData = ({
   data,
@@ -24,13 +25,6 @@ const ActivityPreviewByData = ({
   const [selectedType, setSelectedType] = useState<string | null>(null);
   const [optionList, setOptionList] = useState<any[]>([]);
 
-  console.log("inner selected type: ", selectedType);
-
-  useEffect(() => {
-    setSelectedType(null);
-    setOptionList([]);
-  }, []);
-
   useEffect(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
@@ -80,7 +74,7 @@ const ActivityPreviewByData = ({
       setOptionList(
         typeOptionList.map((typeOption) => ({
           ...typeOption,
-          subTitle: retrieveTaxonomyNameByActivityTypeFromData(typeOption),
+          subText: retrieveTaxonomyNameByActivityTypeFromData(typeOption),
         }))
       );
     } else {
@@ -88,119 +82,122 @@ const ActivityPreviewByData = ({
     }
   }, [data, typeOptionList, showTaxonomy]);
 
+  console.log(optionList);
+
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
 
   return (
     <>
       {showType ? (
-        <div className="mb-4">
-          <SelectionBox
-            optionList={optionList}
-            selectedId={selectedType}
-            handleSelectOnClick={(itemId) => {
-              setSelectedType(itemId);
-            }}
-          />
-        </div>
+        <SelectionBox
+          optionList={optionList}
+          selectedId={selectedType}
+          handleSelectOnClick={(itemId) => {
+            setSelectedType(itemId);
+          }}
+        />
       ) : null}
       {selectedType ? (
-        selectedType === "ORDERING" ? (
-          <OrderingActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "DROPDOWN" ? (
-          <DropdownActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "MCSA" ? (
-          <MCSAActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "MCMA" ? (
-          <MCMAActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "MATCHING" ? (
-          <MatchingActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "GROUPING" ? (
-          <GroupingActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "FILL_IN_THE_BLANKS" ? (
-          <FillInTheBlanksActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : selectedType === "OPEN_ENDED" ? (
-          <OpenEndedActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            showMaterialContent={false}
-            data={data}
-          />
-        ) : selectedType === "TRUE_FALSE" ? (
-          <TrueFalseActivityContent
-            answer={answer}
-            changeAnswer={() => {}}
-            canAnswerQuestion={() => {
-              return true;
-            }}
-            data={data}
-            isPreview={true}
-            showCorrectAnswer={true}
-          />
-        ) : null
+        <div className="">
+          <DividerLine />
+          {selectedType === "ORDERING" ? (
+            <OrderingActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : selectedType === "DROPDOWN" ? (
+            <DropdownActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : selectedType === "MCSA" ? (
+            <MCSAActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : selectedType === "MCMA" ? (
+            <MCMAActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : selectedType === "MATCHING" ? (
+            <MatchingActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : selectedType === "GROUPING" ? (
+            <GroupingActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : selectedType === "FILL_IN_THE_BLANKS" ? (
+            <FillInTheBlanksActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : selectedType === "OPEN_ENDED" ? (
+            <OpenEndedActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              showMaterialContent={false}
+              data={data}
+            />
+          ) : selectedType === "TRUE_FALSE" ? (
+            <TrueFalseActivityContent
+              answer={answer}
+              changeAnswer={() => {}}
+              canAnswerQuestion={() => {
+                return true;
+              }}
+              data={data}
+              isPreview={true}
+              showCorrectAnswer={true}
+            />
+          ) : null}
+        </div>
       ) : null}
       {selectedType && showSolution ? (
         <div className="my-4">