catchup-library-web 1.0.13 → 1.0.15

package/dist/index.d.mts

@@ -140,6 +140,12 @@ interface IActivitySolutionProps {
     activityTemplateType: string;
     data: any;
 }
+interface IActivityPreviewByDataProps {
+    data: any;
+    showType: boolean;
+    lockedType: string;
+    typeOptionList: any[];
+}
 
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 
@@ -161,6 +167,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, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+
 interface IDividerLineProps {
     opacity: string;
 }
@@ -382,7 +390,7 @@ declare const parseMaterialMapFromData: (data: any, type: string) => any;
 declare const convertToBodyMapString: (type: string, bodyMap: any) => any;
 declare const convertToSolutionMapString: (type: string, solutionMap: any) => any;
 declare const convertToEvaluationRubricMapString: (type: string, evaluationRubricMap: any) => any;
-declare const constructActivityData: (activityTemplateType: string, bodyMap: any, materialMap: any, solutionMap: any, taxonomyMap: any, evaluationRubricMap: any) => any;
+declare const constructActivityData: (activityTemplateType: string, contentMap: any, bodyMap: any, materialMap: any, solutionMap: any, taxonomyMap: any, evaluationRubricMap: any) => any;
 declare const constructAnswerBasedOnData: (data: any) => any;
 
 declare const retrieveCategoryVersionCodeOptionList: () => {
@@ -610,4 +618,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,12 @@ interface IActivitySolutionProps {
     activityTemplateType: string;
     data: any;
 }
+interface IActivityPreviewByDataProps {
+    data: any;
+    showType: boolean;
+    lockedType: string;
+    typeOptionList: any[];
+}
 
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 
@@ -161,6 +167,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, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+
 interface IDividerLineProps {
     opacity: string;
 }
@@ -382,7 +390,7 @@ declare const parseMaterialMapFromData: (data: any, type: string) => any;
 declare const convertToBodyMapString: (type: string, bodyMap: any) => any;
 declare const convertToSolutionMapString: (type: string, solutionMap: any) => any;
 declare const convertToEvaluationRubricMapString: (type: string, evaluationRubricMap: any) => any;
-declare const constructActivityData: (activityTemplateType: string, bodyMap: any, materialMap: any, solutionMap: any, taxonomyMap: any, evaluationRubricMap: any) => any;
+declare const constructActivityData: (activityTemplateType: string, contentMap: any, bodyMap: any, materialMap: any, solutionMap: any, taxonomyMap: any, evaluationRubricMap: any) => any;
 declare const constructAnswerBasedOnData: (data: any) => any;
 
 declare const retrieveCategoryVersionCodeOptionList: () => {
@@ -610,4 +618,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,
@@ -2427,11 +2428,9 @@ var convertToEvaluationRubricMapString = (type, evaluationRubricMap) => {
   }
   return convertedEvaluationRubricMap;
 };
-var constructActivityData = (activityTemplateType, bodyMap, materialMap, solutionMap, taxonomyMap, evaluationRubricMap) => {
+var constructActivityData = (activityTemplateType, contentMap, bodyMap, materialMap, solutionMap, taxonomyMap, evaluationRubricMap) => {
   const constructedData = {};
-  constructedData["contentMap"] = JSON.stringify({
-    type: "TEXT"
-  });
+  constructedData["contentMap"] = JSON.stringify(contentMap);
   if (activityTemplateType === "ORDERING") {
     constructedData["orderingBodyMap"] = JSON.stringify(
       convertToBodyMapString("ORDERING", bodyMap)
@@ -3827,14 +3826,14 @@ var DropdownActivityMaterialContent = ({
             },
             index2
           )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute top-[0px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             BaseImage_default,
             {
               src: "/icons/checkbox.png",
               alt: "chekbbox",
               size: "small"
             }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute top-[0px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.png",
@@ -5879,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,
                 ")"
@@ -5928,15 +5918,176 @@ 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
+}) => {
+  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
+  ] });
+};
+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(
@@ -5951,14 +6102,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(
@@ -5968,7 +6119,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 }) })
           ]
         }
       )
@@ -5979,7 +6130,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,
@@ -5989,7 +6140,7 @@ 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-5 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-lg text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "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`,
@@ -6004,57 +6155,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",
@@ -6062,16 +6213,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",
@@ -6079,7 +6230,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;
@@ -8178,6 +8329,7 @@ var retrieveTokenUsageSubTypeOptionList = () => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActivityPreviewByData,
   ActivitySolutionContent,
   ActivityTemplateLabel,
   ApproveButton,

package/dist/index.mjs

@@ -2254,11 +2254,9 @@ var convertToEvaluationRubricMapString = (type, evaluationRubricMap) => {
   }
   return convertedEvaluationRubricMap;
 };
-var constructActivityData = (activityTemplateType, bodyMap, materialMap, solutionMap, taxonomyMap, evaluationRubricMap) => {
+var constructActivityData = (activityTemplateType, contentMap, bodyMap, materialMap, solutionMap, taxonomyMap, evaluationRubricMap) => {
   const constructedData = {};
-  constructedData["contentMap"] = JSON.stringify({
-    type: "TEXT"
-  });
+  constructedData["contentMap"] = JSON.stringify(contentMap);
   if (activityTemplateType === "ORDERING") {
     constructedData["orderingBodyMap"] = JSON.stringify(
       convertToBodyMapString("ORDERING", bodyMap)
@@ -3654,14 +3652,14 @@ var DropdownActivityMaterialContent = ({
             },
             index2
           )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx18("div", { className: "absolute top-[0px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx18(
+          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx18("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx18(
             BaseImage_default,
             {
               src: "/icons/checkbox.png",
               alt: "chekbbox",
               size: "small"
             }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx18("div", { className: "absolute top-[0px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx18(
+          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx18("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx18(
             BaseImage_default,
             {
               src: "/icons/cross-red.png",
@@ -5706,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`,
@@ -5737,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,
@@ -5755,15 +5744,176 @@ 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
+}) => {
+  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
+  ] });
+};
+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(
@@ -5778,14 +5928,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(
@@ -5795,7 +5945,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 }) })
           ]
         }
       )
@@ -5806,7 +5956,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -5816,7 +5966,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx43("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-5 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-lg text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx44(
     "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`,
@@ -5831,57 +5981,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 jsxs34 } 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__ */ jsxs34("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 jsxs35 } 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__ */ jsxs35("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 jsxs36 } 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__ */ jsxs36("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 jsxs37 } 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__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx50(
       BaseImage_default,
       {
         src: "/icons/personal-label.png",
@@ -5889,16 +6039,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 jsxs38 } 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__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx51(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.png",
@@ -5906,7 +6056,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;
@@ -8004,6 +8154,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.13",
+  "version": "1.0.15",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/ActivityPreviewByData.tsx

@@ -0,0 +1,149 @@
+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";
+
+const ActivityPreviewByData = ({
+  data,
+  showType,
+  lockedType,
+  typeOptionList,
+}: 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}
+    </>
+  );
+};
+
+export default ActivityPreviewByData;

package/src/components/activities/material-content/DropdownActivityMaterialContent.tsx

@@ -197,7 +197,7 @@ const DropdownActivityMaterialContent = ({
                       )}
                     </div>
                     {learnerAnswerState === "CORRECT" ? (
-                      <div className="absolute top-[0px] right-4 bg-catchup-white">
+                      <div className="absolute -top-2 right-3 bg-catchup-white">
                         <BaseImage
                           src="/icons/checkbox.png"
                           alt="chekbbox"
@@ -205,7 +205,7 @@ const DropdownActivityMaterialContent = ({
                         />
                       </div>
                     ) : learnerAnswerState === "INCORRECT" ? (
-                      <div className="absolute top-[0px] right-4 bg-catchup-white">
+                      <div className="absolute -top-2 right-3 bg-catchup-white">
                         <BaseImage
                           src="/icons/cross-red.png"
                           alt="cross-red"

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-5 text-lg text-center">
+    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-lg text-center">
       {optionList.map((option: any, index: number) => (
         <div
           key={index}

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,10 @@ export interface IActivitySolutionProps {
   activityTemplateType: string;
   data: any;
 }
+
+export interface IActivityPreviewByDataProps {
+  data: any;
+  showType: boolean;
+  lockedType: string;
+  typeOptionList: any[];
+}

package/src/utilization/CatchtivityUtilization.ts

@@ -1728,6 +1728,7 @@ export const convertToEvaluationRubricMapString = (
 
 export const constructActivityData = (
   activityTemplateType: string,
+  contentMap: any,
   bodyMap: any,
   materialMap: any,
   solutionMap: any,
@@ -1735,9 +1736,10 @@ export const constructActivityData = (
   evaluationRubricMap: any
 ) => {
   const constructedData: any = {};
-  constructedData["contentMap"] = JSON.stringify({
-    type: "TEXT",
-  });
+  // constructedData["contentMap"] = JSON.stringify({
+  //   type: "TEXT",
+  // });
+  constructedData["contentMap"] = JSON.stringify(contentMap);
   if (activityTemplateType === "ORDERING") {
     constructedData["orderingBodyMap"] = JSON.stringify(
       convertToBodyMapString("ORDERING", bodyMap)