catchup-library-web 1.0.14 → 1.0.16

package/dist/index.d.mts

@@ -140,6 +140,13 @@ interface IActivitySolutionProps {
     activityTemplateType: string;
     data: any;
 }
+interface IActivityPreviewByDataProps {
+    data: any;
+    showType: boolean;
+    lockedType: string;
+    typeOptionList: any[];
+    showSolution: boolean;
+}
 
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 
@@ -161,6 +168,8 @@ declare const TrueFalseActivityContent: ({ answer, data, canAnswerQuestion, chan
 
 declare const ActivitySolutionContent: ({ activityTemplateType, data, }: IActivitySolutionProps) => react_jsx_runtime.JSX.Element | undefined;
 
+declare const ActivityPreviewByData: ({ data, showType, lockedType, typeOptionList, showSolution, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+
 interface IDividerLineProps {
     opacity: string;
 }
@@ -610,4 +619,4 @@ declare const retrieveTokenUsageSubTypeOptionList: () => {
     value: string;
 }[];
 
-export { ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.d.ts

@@ -140,6 +140,13 @@ interface IActivitySolutionProps {
     activityTemplateType: string;
     data: any;
 }
+interface IActivityPreviewByDataProps {
+    data: any;
+    showType: boolean;
+    lockedType: string;
+    typeOptionList: any[];
+    showSolution: boolean;
+}
 
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 
@@ -161,6 +168,8 @@ declare const TrueFalseActivityContent: ({ answer, data, canAnswerQuestion, chan
 
 declare const ActivitySolutionContent: ({ activityTemplateType, data, }: IActivitySolutionProps) => react_jsx_runtime.JSX.Element | undefined;
 
+declare const ActivityPreviewByData: ({ data, showType, lockedType, typeOptionList, showSolution, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+
 interface IDividerLineProps {
     opacity: string;
 }
@@ -610,4 +619,4 @@ declare const retrieveTokenUsageSubTypeOptionList: () => {
     value: string;
 }[];
 
-export { ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.js

@@ -67,6 +67,7 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ActivityPreviewByData: () => ActivityPreviewByData_default,
   ActivitySolutionContent: () => ActivitySolutionContent_default,
   ActivityTemplateLabel: () => ActivityTemplateLabel_default,
   ApproveButton: () => ApproveButton_default,
@@ -5877,41 +5878,32 @@ var ActivitySolutionContent = ({
 };
 var ActivitySolutionContent_default = ActivitySolutionContent;
 
-// src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    "div",
-    {
-      className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
-    }
-  );
-};
-var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
+// src/components/activities/ActivityPreviewByData.tsx
+var import_react24 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       className: `${option.id === selectedId ? "border-catchup-blue-400" : "border-catchup-gray-100 hover:border-catchup-blue-500"} border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: option.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "text-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: option.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: option.text }),
+              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -5926,15 +5918,184 @@ var SelectionBox = ({
 };
 var SelectionBox_default = SelectionBox;
 
-// src/components/boxes/SelectionCheckbox.tsx
+// src/components/activities/ActivityPreviewByData.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var ActivityPreviewByData = ({
+  data,
+  showType,
+  lockedType,
+  typeOptionList,
+  showSolution
+}) => {
+  const [selectedType, setSelectedType] = (0, import_react24.useState)(null);
+  (0, import_react24.useEffect)(() => {
+    if (!typeOptionList) return;
+    if (typeOptionList.length === 0) return;
+    const foundTypeOption = typeOptionList.find(
+      (typeOption) => typeOption.id === lockedType
+    );
+    if (!foundTypeOption) return;
+    setSelectedType(foundTypeOption.id);
+  }, [typeOptionList]);
+  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)(
+      SelectionBox_default,
+      {
+        optionList: typeOptionList,
+        selectedId: selectedType,
+        handleSelectOnClick: (itemId) => {
+          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,
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      ActivitySolutionContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) : null
+  ] });
+};
+var ActivityPreviewByData_default = ActivityPreviewByData;
+
+// src/components/dividers/BlueVerticalDividerLine.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
+var BlueVerticalDividerLine = ({ opacity }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "div",
+    {
+      className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
+    }
+  );
+};
+var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
+
+// src/components/boxes/SelectionCheckbox.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -5949,14 +6110,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -5966,7 +6127,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -5977,7 +6138,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -5987,14 +6148,17 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-lg text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: option.title
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+      ]
     },
     index
   )) });
@@ -6002,57 +6166,57 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       BaseImage_default,
       {
         src: "/icons/personal-label.png",
@@ -6060,16 +6224,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.png",
@@ -6077,7 +6241,7 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
@@ -8176,6 +8340,7 @@ var retrieveTokenUsageSubTypeOptionList = () => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActivityPreviewByData,
   ActivitySolutionContent,
   ActivityTemplateLabel,
   ApproveButton,

package/dist/index.mjs

@@ -5704,26 +5704,17 @@ var ActivitySolutionContent = ({
 };
 var ActivitySolutionContent_default = ActivitySolutionContent;
 
-// src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
-var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx40(
-    "div",
-    {
-      className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
-    }
-  );
-};
-var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
+// src/components/activities/ActivityPreviewByData.tsx
+import { useEffect as useEffect11, useState as useState19 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
-import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx40(
     "div",
     {
       className: `${option.id === selectedId ? "border-catchup-blue-400" : "border-catchup-gray-100 hover:border-catchup-blue-500"} border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`,
@@ -5735,9 +5726,9 @@ var SelectionBox = ({
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx41("div", { children: option.icon }),
+            /* @__PURE__ */ jsx40("div", { children: option.icon }),
             /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx41("p", { children: option.text }),
+              /* @__PURE__ */ jsx40("p", { children: option.text }),
               option.subText ? /* @__PURE__ */ jsxs31("p", { className: "text-md", children: [
                 "(",
                 option.subText,
@@ -5753,15 +5744,184 @@ var SelectionBox = ({
 };
 var SelectionBox_default = SelectionBox;
 
+// src/components/activities/ActivityPreviewByData.tsx
+import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+var ActivityPreviewByData = ({
+  data,
+  showType,
+  lockedType,
+  typeOptionList,
+  showSolution
+}) => {
+  const [selectedType, setSelectedType] = useState19(null);
+  useEffect11(() => {
+    if (!typeOptionList) return;
+    if (typeOptionList.length === 0) return;
+    const foundTypeOption = typeOptionList.find(
+      (typeOption) => typeOption.id === lockedType
+    );
+    if (!foundTypeOption) return;
+    setSelectedType(foundTypeOption.id);
+  }, [typeOptionList]);
+  if (!data) return;
+  const answer = constructAnswerBasedOnData(data);
+  return /* @__PURE__ */ jsxs32(Fragment9, { children: [
+    showType ? /* @__PURE__ */ jsx41(
+      SelectionBox_default,
+      {
+        optionList: typeOptionList,
+        selectedId: selectedType,
+        handleSelectOnClick: (itemId) => {
+          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,
+    selectedType && showSolution ? /* @__PURE__ */ jsx41(
+      ActivitySolutionContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) : null
+  ] });
+};
+var ActivityPreviewByData_default = ActivityPreviewByData;
+
+// src/components/dividers/BlueVerticalDividerLine.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+var BlueVerticalDividerLine = ({ opacity }) => {
+  return /* @__PURE__ */ jsx42(
+    "div",
+    {
+      className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
+    }
+  );
+};
+var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
+
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ jsx42("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx43(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -5776,14 +5936,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs33(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(
+            /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsx43(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -5793,7 +5953,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: option.text }) })
+            /* @__PURE__ */ jsx43("div", { className: "flex-1", children: /* @__PURE__ */ jsx43("p", { children: option.text }) })
           ]
         }
       )
@@ -5804,7 +5964,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -5814,14 +5974,17 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx43("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-lg text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs34(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: option.title
+      children: [
+        /* @__PURE__ */ jsx44("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx44("p", { className: "text-md", children: option.subTitle }) : null
+      ]
     },
     index
   )) });
@@ -5829,57 +5992,57 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ jsx44("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx44(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx44("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx45("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx45(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx45("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx45("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx45(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx45("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx46("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx46(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx46("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx46("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx46("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx47("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx47("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx47("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx47("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx48("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx48("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx48("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx48(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx48("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx49("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx49(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx49("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx49("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx50(
       BaseImage_default,
       {
         src: "/icons/personal-label.png",
@@ -5887,16 +6050,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx49("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx50("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx51(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.png",
@@ -5904,7 +6067,7 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx51("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
@@ -8002,6 +8165,7 @@ var retrieveTokenUsageSubTypeOptionList = () => {
   ];
 };
 export {
+  ActivityPreviewByData_default as ActivityPreviewByData,
   ActivitySolutionContent_default as ActivitySolutionContent,
   ActivityTemplateLabel_default as ActivityTemplateLabel,
   ApproveButton_default as ApproveButton,

package/package.json

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

package/src/components/activities/ActivityPreviewByData.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useState } from "react";
+import { constructAnswerBasedOnData } from "../../utilization/CatchtivityUtilization";
+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 { IActivityPreviewByDataProps } from "../../properties/ActivityProperties";
+import ActivitySolutionContent from "./solution-content/ActivitySolutionContent";
+
+const ActivityPreviewByData = ({
+  data,
+  showType,
+  lockedType,
+  typeOptionList,
+  showSolution,
+}: IActivityPreviewByDataProps) => {
+  const [selectedType, setSelectedType] = useState(null);
+
+  useEffect(() => {
+    if (!typeOptionList) return;
+    if (typeOptionList.length === 0) return;
+    const foundTypeOption = typeOptionList.find(
+      (typeOption) => typeOption.id === lockedType
+    );
+    if (!foundTypeOption) return;
+    setSelectedType(foundTypeOption.id);
+  }, [typeOptionList]);
+
+  if (!data) return;
+  const answer = constructAnswerBasedOnData(data);
+
+  return (
+    <>
+      {showType ? (
+        <SelectionBox
+          optionList={typeOptionList}
+          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
+      ) : null}
+      {selectedType && showSolution ? (
+        <ActivitySolutionContent
+          activityTemplateType={selectedType}
+          data={data}
+        />
+      ) : null}
+    </>
+  );
+};
+
+export default ActivityPreviewByData;

package/src/components/tabs/SelectionTab.tsx

@@ -10,7 +10,7 @@ const SelectionTab = ({
   borderColor,
 }: ISelectionTabProps) => {
   return (
-    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-lg text-center">
+    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center">
       {optionList.map((option: any, index: number) => (
         <div
           key={index}
@@ -35,7 +35,10 @@ const SelectionTab = ({
             handleSelectOnClick(option.id);
           }}
         >
-          {option.title}
+          <p className="text-lg">{option.title}</p>
+          {option.subTitle ? (
+            <p className="text-md">{option.subTitle}</p>
+          ) : null}
         </div>
       ))}
     </div>

package/src/index.ts

@@ -22,6 +22,7 @@ export { default as OpenEndedActivityContent } from "./components/activities/Ope
 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 ActivityPreviewByData } from "./components/activities/ActivityPreviewByData";
 
 export { default as BlueVerticalDividerLine } from "./components/dividers/BlueVerticalDividerLine";
 export { default as DividerLine } from "./components/dividers/DividerLine";

package/src/properties/ActivityProperties.ts

@@ -202,3 +202,11 @@ export interface IActivitySolutionProps {
   activityTemplateType: string;
   data: any;
 }
+
+export interface IActivityPreviewByDataProps {
+  data: any;
+  showType: boolean;
+  lockedType: string;
+  typeOptionList: any[];
+  showSolution: boolean;
+}