catchup-library-web 1.1.9 → 1.1.11

package/dist/index.d.mts

@@ -157,6 +157,7 @@ interface IActivityPreviewByDataProps {
     typeOptionList: any[];
     showTaxonomy: boolean;
     showSolution: boolean;
+    showEvaluationRubric: boolean;
     isFullScreen: boolean;
 }
 
@@ -180,7 +181,7 @@ declare const TrueFalseActivityContent: ({ answer, data, canAnswerQuestion, chan
 
 declare const ActivitySolutionContent: ({ activityTemplateType, data, }: IActivitySolutionProps) => react_jsx_runtime.JSX.Element | undefined;
 
-declare const ActivityPreviewByData: ({ data, showType, showDescription, lockedType, typeOptionList, showSolution, showTaxonomy, isFullScreen, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+declare const ActivityPreviewByData: ({ data, showType, showDescription, lockedType, typeOptionList, showSolution, showEvaluationRubric, showTaxonomy, isFullScreen, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
 
 interface IDividerLineProps {
     opacity: string;

package/dist/index.d.ts

@@ -157,6 +157,7 @@ interface IActivityPreviewByDataProps {
     typeOptionList: any[];
     showTaxonomy: boolean;
     showSolution: boolean;
+    showEvaluationRubric: boolean;
     isFullScreen: boolean;
 }
 
@@ -180,7 +181,7 @@ declare const TrueFalseActivityContent: ({ answer, data, canAnswerQuestion, chan
 
 declare const ActivitySolutionContent: ({ activityTemplateType, data, }: IActivitySolutionProps) => react_jsx_runtime.JSX.Element | undefined;
 
-declare const ActivityPreviewByData: ({ data, showType, showDescription, lockedType, typeOptionList, showSolution, showTaxonomy, isFullScreen, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+declare const ActivityPreviewByData: ({ data, showType, showDescription, lockedType, typeOptionList, showSolution, showEvaluationRubric, showTaxonomy, isFullScreen, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
 
 interface IDividerLineProps {
     opacity: string;

package/dist/index.js

@@ -5313,7 +5313,7 @@ var OpenEndedActivityContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
-        className: `${showMaterialContent ? "w-full" : isFullScreen ? "w-full" : "w-full md:w-[40%]"}`,
+        className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ActivityBodyContent_default,
           {
@@ -5935,8 +5935,75 @@ var SelectionBox = ({
 };
 var SelectionBox_default = SelectionBox;
 
-// src/components/activities/ActivityPreviewByData.tsx
+// src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
+var import_react_katex11 = require("react-katex");
 var import_jsx_runtime41 = require("react/jsx-runtime");
+var ActivityEvaluationRubricContent = ({
+  activityTemplateType,
+  data
+}) => {
+  if (!activityTemplateType) return;
+  let evaluationRubricMapString = "";
+  if (activityTemplateType === "ORDERING") {
+    if (data["orderingEvaluationRubricMap"])
+      evaluationRubricMapString = data["orderingEvaluationRubricMap"];
+  } else if (activityTemplateType === "DROPDOWN") {
+    if (data["dropdownEvaluationRubricMap"])
+      evaluationRubricMapString = data["dropdownEvaluationRubricMap"];
+  } else if (activityTemplateType === "MCSA") {
+    if (data["MCSAEvaluationRubricMap"])
+      evaluationRubricMapString = data["MCSAEvaluationRubricMap"];
+  } else if (activityTemplateType === "MCMA") {
+    if (data["MCMAEvaluationRubricMap"])
+      evaluationRubricMapString = data["MCMAEvaluationRubricMap"];
+  } else if (activityTemplateType === "MATCHING") {
+    if (data["matchingEvaluationRubricMap"])
+      evaluationRubricMapString = data["matchingEvaluationRubricMap"];
+  } else if (activityTemplateType === "GROUPING") {
+    if (data["groupingEvaluationRubricMap"])
+      evaluationRubricMapString = data["groupingEvaluationRubricMap"];
+  } else if (activityTemplateType === "FILL_IN_THE_BLANKS") {
+    if (data["fillInTheBlanksEvaluationRubricMap"])
+      evaluationRubricMapString = data["fillInTheBlanksEvaluationRubricMap"];
+  } else if (activityTemplateType === "OPEN_ENDED") {
+    if (data["openEndedEvaluationRubricMap"])
+      evaluationRubricMapString = data["openEndedEvaluationRubricMap"];
+  } else if (activityTemplateType === "TRUE_FALSE") {
+    if (data["trueFalseEvaluationRubricMap"])
+      evaluationRubricMapString = data["trueFalseEvaluationRubricMap"];
+  }
+  const evaluationRubricMap = JSON.parse(evaluationRubricMapString);
+  if (!evaluationRubricMap) return;
+  if (Object.keys(evaluationRubricMap).length === 0) return;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+    Object.keys(evaluationRubricMap).map((key, index) => {
+      const currentItem = JSON.parse(evaluationRubricMap[key]);
+      const { value } = currentItem;
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "my-3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        "span",
+        {
+          className: "text-xl whitespace-pre-wrap",
+          children: constructInputWithSpecialExpressionList(value).map(
+            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )
+          )
+        },
+        `${key}_${index}`
+      ) });
+    })
+  ] }) });
+};
+var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
+
+// src/components/activities/ActivityPreviewByData.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -5944,6 +6011,7 @@ var ActivityPreviewByData = ({
   lockedType,
   typeOptionList,
   showSolution,
+  showEvaluationRubric,
   showTaxonomy,
   isFullScreen
 }) => {
@@ -6018,10 +6086,10 @@ var ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showTaxonomy]);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-    showType ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-4", children: [
-      showDescription ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+    showType ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         SelectionBox_default,
         {
           optionList,
@@ -6032,7 +6100,7 @@ var ActivityPreviewByData = ({
         }
       )
     ] }) : null,
-    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       OrderingActivityContent_default,
       {
         answer,
@@ -6046,7 +6114,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       DropdownActivityContent_default,
       {
         answer,
@@ -6060,7 +6128,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       MCSAActivityContent_default,
       {
         answer,
@@ -6074,7 +6142,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       MCMAActivityContent_default,
       {
         answer,
@@ -6088,7 +6156,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       MatchingActivityContent_default,
       {
         answer,
@@ -6102,7 +6170,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       GroupingActivityContent_default,
       {
         answer,
@@ -6116,7 +6184,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -6130,7 +6198,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -6140,7 +6208,7 @@ var ActivityPreviewByData = ({
         data,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -6155,21 +6223,28 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
+    ) }) : null,
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      ActivityEvaluationRubricContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
     ) }) : null
   ] }, key);
 };
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -6179,14 +6254,14 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -6201,14 +6276,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime43.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -6218,7 +6293,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -6229,7 +6304,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -6239,7 +6314,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.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`,
@@ -6247,8 +6322,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       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
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -6257,57 +6332,57 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, 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.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 })
+  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.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  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 }) });
+  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.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.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_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/personal-label.png",
@@ -6315,16 +6390,16 @@ var PersonalLabel = ({ 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 PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.png",
@@ -6332,7 +6407,7 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;

package/dist/index.mjs

@@ -5139,7 +5139,7 @@ var OpenEndedActivityContent = ({
     /* @__PURE__ */ jsx33(
       "div",
       {
-        className: `${showMaterialContent ? "w-full" : isFullScreen ? "w-full" : "w-full md:w-[40%]"}`,
+        className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
         children: /* @__PURE__ */ jsx33(
           ActivityBodyContent_default,
           {
@@ -5761,8 +5761,75 @@ var SelectionBox = ({
 };
 var SelectionBox_default = SelectionBox;
 
-// src/components/activities/ActivityPreviewByData.tsx
+// src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
+import { InlineMath as InlineMath11 } from "react-katex";
 import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+var ActivityEvaluationRubricContent = ({
+  activityTemplateType,
+  data
+}) => {
+  if (!activityTemplateType) return;
+  let evaluationRubricMapString = "";
+  if (activityTemplateType === "ORDERING") {
+    if (data["orderingEvaluationRubricMap"])
+      evaluationRubricMapString = data["orderingEvaluationRubricMap"];
+  } else if (activityTemplateType === "DROPDOWN") {
+    if (data["dropdownEvaluationRubricMap"])
+      evaluationRubricMapString = data["dropdownEvaluationRubricMap"];
+  } else if (activityTemplateType === "MCSA") {
+    if (data["MCSAEvaluationRubricMap"])
+      evaluationRubricMapString = data["MCSAEvaluationRubricMap"];
+  } else if (activityTemplateType === "MCMA") {
+    if (data["MCMAEvaluationRubricMap"])
+      evaluationRubricMapString = data["MCMAEvaluationRubricMap"];
+  } else if (activityTemplateType === "MATCHING") {
+    if (data["matchingEvaluationRubricMap"])
+      evaluationRubricMapString = data["matchingEvaluationRubricMap"];
+  } else if (activityTemplateType === "GROUPING") {
+    if (data["groupingEvaluationRubricMap"])
+      evaluationRubricMapString = data["groupingEvaluationRubricMap"];
+  } else if (activityTemplateType === "FILL_IN_THE_BLANKS") {
+    if (data["fillInTheBlanksEvaluationRubricMap"])
+      evaluationRubricMapString = data["fillInTheBlanksEvaluationRubricMap"];
+  } else if (activityTemplateType === "OPEN_ENDED") {
+    if (data["openEndedEvaluationRubricMap"])
+      evaluationRubricMapString = data["openEndedEvaluationRubricMap"];
+  } else if (activityTemplateType === "TRUE_FALSE") {
+    if (data["trueFalseEvaluationRubricMap"])
+      evaluationRubricMapString = data["trueFalseEvaluationRubricMap"];
+  }
+  const evaluationRubricMap = JSON.parse(evaluationRubricMapString);
+  if (!evaluationRubricMap) return;
+  if (Object.keys(evaluationRubricMap).length === 0) return;
+  return /* @__PURE__ */ jsx41("div", { className: "mx-2", children: /* @__PURE__ */ jsxs32("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx41("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+    Object.keys(evaluationRubricMap).map((key, index) => {
+      const currentItem = JSON.parse(evaluationRubricMap[key]);
+      const { value } = currentItem;
+      return /* @__PURE__ */ jsx41("p", { className: "my-3", children: /* @__PURE__ */ jsx41(
+        "span",
+        {
+          className: "text-xl whitespace-pre-wrap",
+          children: constructInputWithSpecialExpressionList(value).map(
+            (inputPart, index2) => /* @__PURE__ */ jsx41(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-2xl", children: /* @__PURE__ */ jsx41(InlineMath11, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )
+          )
+        },
+        `${key}_${index}`
+      ) });
+    })
+  ] }) });
+};
+var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
+
+// src/components/activities/ActivityPreviewByData.tsx
+import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -5770,6 +5837,7 @@ var ActivityPreviewByData = ({
   lockedType,
   typeOptionList,
   showSolution,
+  showEvaluationRubric,
   showTaxonomy,
   isFullScreen
 }) => {
@@ -5844,10 +5912,10 @@ var ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showTaxonomy]);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
-  return /* @__PURE__ */ jsxs32("div", { children: [
-    showType ? /* @__PURE__ */ jsxs32("div", { className: "mb-4", children: [
-      showDescription ? /* @__PURE__ */ jsx41("div", { className: "my-2", children: /* @__PURE__ */ jsx41("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-      /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs33("div", { children: [
+    showType ? /* @__PURE__ */ jsxs33("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ jsx42("div", { className: "my-2", children: /* @__PURE__ */ jsx42("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ jsx42(
         SelectionBox_default,
         {
           optionList,
@@ -5858,7 +5926,7 @@ var ActivityPreviewByData = ({
         }
       )
     ] }) : null,
-    selectedType ? /* @__PURE__ */ jsx41("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    selectedType ? /* @__PURE__ */ jsx42("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       OrderingActivityContent_default,
       {
         answer,
@@ -5872,7 +5940,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       DropdownActivityContent_default,
       {
         answer,
@@ -5886,7 +5954,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       MCSAActivityContent_default,
       {
         answer,
@@ -5900,7 +5968,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       MCMAActivityContent_default,
       {
         answer,
@@ -5914,7 +5982,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       MatchingActivityContent_default,
       {
         answer,
@@ -5928,7 +5996,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       GroupingActivityContent_default,
       {
         answer,
@@ -5942,7 +6010,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -5956,7 +6024,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx42(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -5966,7 +6034,7 @@ var ActivityPreviewByData = ({
         data,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx41(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx42(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -5981,21 +6049,28 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ jsx41("div", { className: "my-4", children: /* @__PURE__ */ jsx41(
+    selectedType && showSolution ? /* @__PURE__ */ jsx42("div", { className: "my-4", children: /* @__PURE__ */ jsx42(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
+    ) }) : null,
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(
+      ActivityEvaluationRubricContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
     ) }) : null
   ] }, key);
 };
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -6005,14 +6080,14 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  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(
+  return /* @__PURE__ */ jsx44("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx44(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -6027,14 +6102,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs34(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx44("div", { children: /* @__PURE__ */ jsx44(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -6044,7 +6119,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ jsx43("div", { className: "flex-1", children: /* @__PURE__ */ jsx43("p", { children: option.text }) })
+            /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: option.text }) })
           ]
         }
       )
@@ -6055,7 +6130,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -6065,7 +6140,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  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(
+  return /* @__PURE__ */ jsx45("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__ */ jsxs35(
     "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`,
@@ -6073,8 +6148,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx44("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx44("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx45("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx45("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -6083,57 +6158,57 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  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 })
+  return /* @__PURE__ */ jsx46("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__ */ jsxs36("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx46(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx46("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, 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__ */ 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 })
+  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__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx47(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx47("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  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 }) });
+  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__ */ jsx48("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  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 }) });
+  return /* @__PURE__ */ jsx49("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__ */ jsx49("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  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 })
+  return /* @__PURE__ */ jsx50("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__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx50(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  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(
+  return /* @__PURE__ */ jsx51("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__ */ jsxs39("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx51(
       BaseImage_default,
       {
         src: "/icons/personal-label.png",
@@ -6141,16 +6216,16 @@ var PersonalLabel = ({ 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 PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  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(
+  return /* @__PURE__ */ jsx52("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__ */ jsxs40("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx52(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.png",
@@ -6158,7 +6233,7 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx51("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx52("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;

package/package.json

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

package/src/components/activities/ActivityPreviewByData.tsx

@@ -13,6 +13,7 @@ import TrueFalseActivityContent from "./TrueFalseActivityContent";
 import { IActivityPreviewByDataProps } from "../../properties/ActivityProperties";
 import ActivitySolutionContent from "./solution-content/ActivitySolutionContent";
 import i18n from "../../language/i18n";
+import ActivityEvaluationRubricContent from "./evaluation-rubric-content/ActivityEvaluationRubricContent";
 
 const ActivityPreviewByData = ({
   data,
@@ -21,6 +22,7 @@ const ActivityPreviewByData = ({
   lockedType,
   typeOptionList,
   showSolution,
+  showEvaluationRubric,
   showTaxonomy,
   isFullScreen,
 }: IActivityPreviewByDataProps) => {
@@ -258,6 +260,14 @@ const ActivityPreviewByData = ({
           />
         </div>
       ) : null}
+      {selectedType && showEvaluationRubric ? (
+        <div>
+          <ActivityEvaluationRubricContent
+            activityTemplateType={selectedType}
+            data={data}
+          />
+        </div>
+      ) : null}
     </div>
   );
 };

package/src/components/activities/OpenEndedActivityContent.tsx

@@ -48,10 +48,10 @@ const OpenEndedActivityContent = ({
       <div
         className={`${
           showMaterialContent
-            ? "w-full"
-            : isFullScreen
-            ? "w-full"
-            : "w-full md:w-[40%]"
+            ? isFullScreen
+              ? "w-full"
+              : "w-full md:w-[40%]"
+            : "w-full"
         }`}
       >
         <ActivityBodyContent

package/src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx

@@ -0,0 +1,88 @@
+import { InlineMath } from "react-katex";
+import i18n from "../../../language/i18n";
+import { IActivityEvaluationRubricProps } from "../../../properties/ActivityProperties";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+
+const ActivityEvaluationRubricContent = ({
+  activityTemplateType,
+  data,
+}: IActivityEvaluationRubricProps) => {
+  if (!activityTemplateType) return;
+
+  let evaluationRubricMapString = "";
+  if (activityTemplateType === "ORDERING") {
+    if (data["orderingEvaluationRubricMap"])
+      evaluationRubricMapString = data["orderingEvaluationRubricMap"];
+  } else if (activityTemplateType === "DROPDOWN") {
+    if (data["dropdownEvaluationRubricMap"])
+      evaluationRubricMapString = data["dropdownEvaluationRubricMap"];
+  } else if (activityTemplateType === "MCSA") {
+    if (data["MCSAEvaluationRubricMap"])
+      evaluationRubricMapString = data["MCSAEvaluationRubricMap"];
+  } else if (activityTemplateType === "MCMA") {
+    if (data["MCMAEvaluationRubricMap"])
+      evaluationRubricMapString = data["MCMAEvaluationRubricMap"];
+  } else if (activityTemplateType === "MATCHING") {
+    if (data["matchingEvaluationRubricMap"])
+      evaluationRubricMapString = data["matchingEvaluationRubricMap"];
+  } else if (activityTemplateType === "GROUPING") {
+    if (data["groupingEvaluationRubricMap"])
+      evaluationRubricMapString = data["groupingEvaluationRubricMap"];
+  } else if (activityTemplateType === "FILL_IN_THE_BLANKS") {
+    if (data["fillInTheBlanksEvaluationRubricMap"])
+      evaluationRubricMapString = data["fillInTheBlanksEvaluationRubricMap"];
+  } else if (activityTemplateType === "OPEN_ENDED") {
+    if (data["openEndedEvaluationRubricMap"])
+      evaluationRubricMapString = data["openEndedEvaluationRubricMap"];
+  } else if (activityTemplateType === "TRUE_FALSE") {
+    if (data["trueFalseEvaluationRubricMap"])
+      evaluationRubricMapString = data["trueFalseEvaluationRubricMap"];
+  }
+  const evaluationRubricMap = JSON.parse(evaluationRubricMapString);
+  if (!evaluationRubricMap) return;
+
+  if (Object.keys(evaluationRubricMap).length === 0) return;
+
+  return (
+    <div className="mx-2">
+      <div className="p-4 border-catchup-blue border-2 rounded-catchup-xlarge">
+        <p className="text-xl font-bold text-center mb-3">
+          {i18n.t("evaluation_rubric")}
+        </p>
+        {Object.keys(evaluationRubricMap).map((key, index) => {
+          const currentItem = JSON.parse(evaluationRubricMap[key]);
+          const { value } = currentItem;
+          return (
+            <p className="my-3">
+              <span
+                key={`${key}_${index}`}
+                className="text-xl whitespace-pre-wrap"
+              >
+                {constructInputWithSpecialExpressionList(value).map(
+                  (inputPart, index) => (
+                    <span
+                      key={index}
+                      className={`${inputPart.isBold ? "font-bold" : ""} ${
+                        inputPart.isUnderline ? "underline" : ""
+                      }`}
+                    >
+                      {inputPart.isEquation ? (
+                        <span className="text-2xl">
+                          <InlineMath math={inputPart.value} />
+                        </span>
+                      ) : (
+                        inputPart.value
+                      )}
+                    </span>
+                  )
+                )}
+              </span>
+            </p>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ActivityEvaluationRubricContent;

package/src/properties/ActivityProperties.ts

@@ -207,6 +207,11 @@ export interface IShowMaterialMediaByContentTypeProps {
   canFullScreen: boolean;
 }
 
+export interface IActivityEvaluationRubricProps {
+  activityTemplateType: string;
+  data: any;
+}
+
 export interface IActivitySolutionProps {
   activityTemplateType: string;
   data: any;
@@ -220,5 +225,6 @@ export interface IActivityPreviewByDataProps {
   typeOptionList: any[];
   showTaxonomy: boolean;
   showSolution: boolean;
+  showEvaluationRubric: boolean;
   isFullScreen: boolean;
 }