analytica-frontend-lib 1.2.67 → 1.2.69

package/dist/ActivityCardQuestionPreview/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ActivityCardQuestionPreview/ActivityCardQuestionPreview.tsx
-import { useMemo, useState as useState7 } from "react";
+import { useMemo as useMemo2, useState as useState8 } from "react";
 
 // src/components/Accordation/Accordation.tsx
 import {
@@ -3028,7 +3028,7 @@ var AlternativesList = ({
   const groupName = name || `alternatives-${uniqueId}`;
   const [actualValue, setActualValue] = useState5(value);
   const isReadonly = mode === "readonly";
-  const getStatusStyles = (status, isReadonly2) => {
+  const getStatusStyles2 = (status, isReadonly2) => {
     const hoverClass = isReadonly2 ? "" : "hover:bg-background-50";
     switch (status) {
       case "correct":
@@ -3039,7 +3039,7 @@ var AlternativesList = ({
         return `bg-background border-border-100 ${hoverClass}`;
     }
   };
-  const getStatusBadge = (status) => {
+  const getStatusBadge2 = (status) => {
     switch (status) {
       case "correct":
         return /* @__PURE__ */ jsx14(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ jsx14(CheckCircle2, {}), children: "Resposta correta" });
@@ -3069,8 +3069,8 @@ var AlternativesList = ({
     } else if (isCorrectAnswer) {
       displayStatus = "correct";
     }
-    const statusStyles = getStatusStyles(displayStatus, true);
-    const statusBadge = getStatusBadge(displayStatus);
+    const statusStyles = getStatusStyles2(displayStatus, true);
+    const statusBadge = getStatusBadge2(displayStatus);
     const renderRadio = () => {
       const radioClasses = `w-6 h-6 rounded-full border-2 cursor-default transition-all duration-200 flex items-center justify-center ${isUserSelected ? "border-primary-950 bg-background" : "border-border-400 bg-background"}`;
       const dotClasses = "w-3 h-3 rounded-full bg-primary-950 transition-all duration-200";
@@ -3161,8 +3161,8 @@ var AlternativesList = ({
       className: cn("flex flex-col", getLayoutClasses(), className),
       children: alternatives.map((alternative, index) => {
         const alternativeId = alternative.value || `alt-${index}`;
-        const statusStyles = getStatusStyles(alternative.status, false);
-        const statusBadge = getStatusBadge(alternative.status);
+        const statusStyles = getStatusStyles2(alternative.status, false);
+        const statusBadge = getStatusBadge2(alternative.status);
         if (layout === "detailed") {
           return /* @__PURE__ */ jsx14(
             "div",
@@ -3268,21 +3268,56 @@ var HeaderAlternative = forwardRef6(
   }
 );
 
-// src/types/questionTypes.ts
-var questionTypeLabels = {
-  ["ALTERNATIVA" /* ALTERNATIVA */]: "Alternativa",
-  ["VERDADEIRO_FALSO" /* VERDADEIRO_FALSO */]: "Verdadeiro ou Falso",
-  ["DISSERTATIVA" /* DISSERTATIVA */]: "Discursiva",
-  ["IMAGEM" /* IMAGEM */]: "Imagem",
-  ["MULTIPLA_ESCOLHA" /* MULTIPLA_ESCOLHA */]: "M\xFAltipla Escolha",
-  ["LIGAR_PONTOS" /* LIGAR_PONTOS */]: "Ligar Pontos",
-  ["PREENCHER" /* PREENCHER */]: "Preencher Lacunas"
+// src/utils/questionRenderer/alternative/index.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var renderQuestionAlternative = ({
+  question,
+  result
+}) => {
+  const alternatives = question.options?.map((option) => {
+    const isCorrectOption = result?.options?.find((op) => op.id === option.id)?.isCorrect || false;
+    const isSelected = result?.selectedOptions?.some(
+      (selectedOption) => selectedOption.optionId === option.id
+    ) || false;
+    const shouldShowCorrectAnswers = result?.answerStatus !== "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */;
+    let status;
+    if (shouldShowCorrectAnswers) {
+      if (isCorrectOption) {
+        status = "correct" /* CORRECT */;
+      } else if (isSelected && !isCorrectOption) {
+        status = "incorrect" /* INCORRECT */;
+      } else {
+        status = "neutral" /* NEUTRAL */;
+      }
+    } else {
+      status = "neutral" /* NEUTRAL */;
+    }
+    return {
+      label: option.option,
+      value: option.id,
+      status
+    };
+  });
+  if (!alternatives || alternatives.length === 0) {
+    return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(Text_default, { size: "sm", weight: "normal", children: "N\xE3o h\xE1 Alternativas" }) });
+  }
+  return /* @__PURE__ */ jsx15("div", { className: "pt-2", children: /* @__PURE__ */ jsx15(
+    AlternativesList,
+    {
+      mode: "readonly",
+      name: `question-${question.id}`,
+      layout: "compact",
+      alternatives,
+      selectedValue: result?.selectedOptions?.[0]?.optionId || ""
+    },
+    `question-${question.id}`
+  ) });
 };
 
 // src/components/MultipleChoice/MultipleChoice.tsx
 import { useEffect as useEffect5, useState as useState6 } from "react";
 import { CheckCircle as CheckCircle3, XCircle as XCircle3, Check as Check2 } from "phosphor-react";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var MultipleChoiceList = ({
   disabled = false,
   className = "",
@@ -3296,17 +3331,17 @@ var MultipleChoiceList = ({
   useEffect5(() => {
     setActualValue(selectedValues);
   }, [selectedValues]);
-  const getStatusBadge = (status) => {
+  const getStatusBadge2 = (status) => {
     switch (status) {
       case "correct":
-        return /* @__PURE__ */ jsx15(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ jsx15(CheckCircle3, {}), children: "Resposta correta" });
+        return /* @__PURE__ */ jsx16(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ jsx16(CheckCircle3, {}), children: "Resposta correta" });
       case "incorrect":
-        return /* @__PURE__ */ jsx15(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ jsx15(XCircle3, {}), children: "Resposta incorreta" });
+        return /* @__PURE__ */ jsx16(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ jsx16(XCircle3, {}), children: "Resposta incorreta" });
       default:
         return null;
     }
   };
-  const getStatusStyles = (status) => {
+  const getStatusStyles2 = (status) => {
     switch (status) {
       case "correct":
         return "bg-success-background border-success-300";
@@ -3322,13 +3357,13 @@ var MultipleChoiceList = ({
       isSelected ? "border-primary-950 bg-primary-950 text-text" : "border-border-400 bg-background",
       isDisabled && "opacity-40 cursor-not-allowed"
     );
-    return /* @__PURE__ */ jsx15("div", { className: checkboxClasses, children: isSelected && /* @__PURE__ */ jsx15(Check2, { size: 16, weight: "bold" }) });
+    return /* @__PURE__ */ jsx16("div", { className: checkboxClasses, children: isSelected && /* @__PURE__ */ jsx16(Check2, { size: 16, weight: "bold" }) });
   };
   if (mode === "readonly") {
-    return /* @__PURE__ */ jsx15("div", { className: cn("flex flex-col gap-2", className), children: choices.map((choice, i) => {
+    return /* @__PURE__ */ jsx16("div", { className: cn("flex flex-col gap-2", className), children: choices.map((choice, i) => {
       const isSelected = actualValue?.includes(choice.value) || false;
-      const statusStyles = getStatusStyles(choice.status);
-      const statusBadge = getStatusBadge(choice.status);
+      const statusStyles = getStatusStyles2(choice.status);
+      const statusBadge = getStatusBadge2(choice.status);
       return /* @__PURE__ */ jsxs12(
         "div",
         {
@@ -3340,7 +3375,7 @@ var MultipleChoiceList = ({
           children: [
             /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 flex-1", children: [
               renderVisualCheckbox(isSelected, choice.disabled || disabled),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "span",
                 {
                   className: cn(
@@ -3352,14 +3387,14 @@ var MultipleChoiceList = ({
                 }
               )
             ] }),
-            statusBadge && /* @__PURE__ */ jsx15("div", { className: "flex-shrink-0", children: statusBadge })
+            statusBadge && /* @__PURE__ */ jsx16("div", { className: "flex-shrink-0", children: statusBadge })
           ]
         },
         `readonly-${choice.value}-${i}`
       );
     }) });
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cn(
@@ -3367,7 +3402,7 @@ var MultipleChoiceList = ({
         disabled ? "opacity-50 cursor-not-allowed" : "",
         className
       ),
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         CheckboxList_default,
         {
           name,
@@ -3382,7 +3417,7 @@ var MultipleChoiceList = ({
             {
               className: "flex flex-row gap-2 items-center",
               children: [
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   CheckboxListItem,
                   {
                     value: choice.value,
@@ -3390,7 +3425,7 @@ var MultipleChoiceList = ({
                     disabled: choice.disabled || disabled
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   "label",
                   {
                     htmlFor: `interactive-${choice.value}-${i}`,
@@ -3412,32 +3447,588 @@ var MultipleChoiceList = ({
   );
 };
 
-// src/utils/questionRenderer.ts
+// src/utils/questionRenderer/multipleChoice/index.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var renderQuestionMultipleChoice = ({
+  question,
+  result
+}) => {
+  const choices = question.options?.map((option) => {
+    const isCorrectOption = result?.options?.find((op) => op.id === option.id)?.isCorrect || false;
+    const isSelected = result?.selectedOptions?.some(
+      (op) => op.optionId === option.id
+    );
+    const shouldShowCorrectAnswers = result?.answerStatus !== "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */ && result?.answerStatus !== "NAO_RESPONDIDO" /* NAO_RESPONDIDO */;
+    let status;
+    if (shouldShowCorrectAnswers) {
+      if (isCorrectOption) {
+        status = "correct" /* CORRECT */;
+      } else if (isSelected && !isCorrectOption) {
+        status = "incorrect" /* INCORRECT */;
+      } else {
+        status = "neutral" /* NEUTRAL */;
+      }
+    } else {
+      status = "neutral" /* NEUTRAL */;
+    }
+    return {
+      label: option.option,
+      value: option.id,
+      status
+    };
+  });
+  if (!choices || choices.length === 0) {
+    return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(Text_default, { size: "sm", weight: "normal", children: "N\xE3o h\xE1 Escolhas M\xFAltiplas" }) });
+  }
+  const selectedValues = result?.selectedOptions?.map((op) => op.optionId) || [];
+  return /* @__PURE__ */ jsx17("div", { className: "pt-2", children: /* @__PURE__ */ jsx17(
+    MultipleChoiceList,
+    {
+      mode: "readonly",
+      name: `question-${question.id}`,
+      choices,
+      selectedValues
+    },
+    `question-${question.id}`
+  ) });
+};
+
+// src/components/Quiz/QuizContent.tsx
+import {
+  forwardRef as forwardRef7,
+  useCallback,
+  useEffect as useEffect6,
+  useId as useId6,
+  useMemo,
+  useRef as useRef4,
+  useState as useState7
+} from "react";
+import { CheckCircle as CheckCircle4, XCircle as XCircle4 } from "phosphor-react";
+
+// src/assets/img/mock-image-question.png
+var mock_image_question_default = "../mock-image-question-HEZCLFDL.png";
+
+// src/components/Quiz/QuizContent.tsx
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var getStatusStyles = (variantCorrect) => {
+  switch (variantCorrect) {
+    case "correct":
+      return "bg-success-background border-success-300";
+    case "incorrect":
+      return "bg-error-background border-error-300";
+    default:
+      return "";
+  }
+};
+var QuizSubTitle = forwardRef7(
+  ({ subTitle, ...props }, ref) => {
+    return /* @__PURE__ */ jsx18("div", { className: "px-4 pb-2 pt-6", ...props, ref, children: /* @__PURE__ */ jsx18("p", { className: "font-bold text-lg text-text-950", children: subTitle }) });
+  }
+);
+var QuizContainer = forwardRef7(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      ref,
+      className: cn(
+        "bg-background rounded-t-xl px-4 pt-4 pb-[80px] h-auto flex flex-col gap-4 mb-auto",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+// src/utils/questionRenderer/components/index.tsx
+import { useId as useId7 } from "react";
+import { CheckCircle as CheckCircle5, XCircle as XCircle5 } from "phosphor-react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var getStatusBadge = (status) => {
+  switch (status) {
+    case "correct":
+      return /* @__PURE__ */ jsx19(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ jsx19(CheckCircle5, {}), children: "Resposta correta" });
+    case "incorrect":
+      return /* @__PURE__ */ jsx19(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ jsx19(XCircle5, {}), children: "Resposta incorreta" });
+    default:
+      return null;
+  }
+};
+var QuestionContainer = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: cn(
+        "bg-background rounded-t-xl px-4 pt-4 pb-[80px] h-auto flex flex-col gap-4 mb-auto",
+        className
+      ),
+      children
+    }
+  );
+};
+var QuestionSubTitle = ({ subTitle }) => {
+  return /* @__PURE__ */ jsx19("div", { className: "px-4 pb-2 pt-6", children: /* @__PURE__ */ jsx19(Text_default, { size: "md", weight: "bold", color: "text-text-950", children: subTitle }) });
+};
+var FillQuestionContent = ({
+  question,
+  result
+}) => {
+  const text = question.statement || "";
+  const baseId = useId7();
+  const studentAnswers = {};
+  try {
+    if (result?.answer) {
+      const parsed = typeof result.answer === "string" ? JSON.parse(result.answer) : result.answer;
+      if (typeof parsed === "object") {
+        Object.assign(studentAnswers, parsed);
+      }
+    }
+  } catch (error) {
+    console.error("Error parsing answer:", error);
+  }
+  const regex = /\{\{([\p{L}\p{M}\d_]+)\}\}/gu;
+  const placeholders = [];
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    placeholders.push(match[1]);
+  }
+  const correctAnswers = {};
+  placeholders.forEach((placeholder) => {
+    correctAnswers[placeholder] = studentAnswers[placeholder]?.correctAnswer || `[${placeholder}]`;
+  });
+  const addTextElement = (elements, textContent, elementCounter) => {
+    if (textContent) {
+      elements.push({
+        element: textContent,
+        id: `${baseId}-text-${++elementCounter.current}`
+      });
+    }
+  };
+  const renderGabaritoPlaceholder = (selectId, elementCounter) => {
+    const correctAnswer = correctAnswers[selectId] || `[${selectId}]`;
+    return {
+      element: /* @__PURE__ */ jsx19(
+        Text_default,
+        {
+          size: "md",
+          weight: "semibold",
+          color: "text-success-600",
+          className: "inline-flex mb-2.5 border-b-2 border-success-600",
+          children: correctAnswer
+        },
+        `${baseId}-gabarito-${selectId}`
+      ),
+      id: `${baseId}-gabarito-${++elementCounter.current}`
+    };
+  };
+  const renderStudentPlaceholder = (selectId, elementCounter) => {
+    const studentAnswer = studentAnswers[selectId];
+    if (!studentAnswer) {
+      return {
+        element: /* @__PURE__ */ jsx19(
+          Text_default,
+          {
+            size: "md",
+            weight: "normal",
+            color: "text-text-400",
+            className: "inline-flex mb-2.5 border-b-2 border-text-300",
+            children: "[N\xE3o respondido]"
+          },
+          `${baseId}-no-answer-${selectId}`
+        ),
+        id: `${baseId}-no-answer-${++elementCounter.current}`
+      };
+    }
+    const isCorrect = studentAnswer.isCorrect;
+    const colorClass = isCorrect ? "text-success-600 border-success-600" : "text-error-600 border-error-600";
+    return {
+      element: /* @__PURE__ */ jsx19(
+        Badge_default,
+        {
+          variant: "solid",
+          action: isCorrect ? "success" : "error",
+          iconRight: isCorrect ? /* @__PURE__ */ jsx19(CheckCircle5, {}) : /* @__PURE__ */ jsx19(XCircle5, {}),
+          size: "large",
+          className: `py-3 w-[180px] justify-between mb-2.5 ${colorClass}`,
+          children: /* @__PURE__ */ jsx19("span", { className: "text-text-900", children: studentAnswer.answer })
+        },
+        `${baseId}-answer-${selectId}`
+      ),
+      id: `${baseId}-answer-${++elementCounter.current}`
+    };
+  };
+  const renderTextWithAnswers = (isGabarito = false) => {
+    const elements = [];
+    let lastIndex = 0;
+    const elementCounter = { current: 0 };
+    regex.lastIndex = 0;
+    while ((match = regex.exec(text)) !== null) {
+      const [fullMatch, selectId] = match;
+      const startIndex = match.index;
+      if (startIndex > lastIndex) {
+        addTextElement(
+          elements,
+          text.slice(lastIndex, startIndex),
+          elementCounter
+        );
+      }
+      const placeholderElement = isGabarito ? renderGabaritoPlaceholder(selectId, elementCounter) : renderStudentPlaceholder(selectId, elementCounter);
+      elements.push(placeholderElement);
+      lastIndex = match.index + fullMatch.length;
+    }
+    if (lastIndex < text.length) {
+      addTextElement(elements, text.slice(lastIndex), elementCounter);
+    }
+    return elements;
+  };
+  return /* @__PURE__ */ jsxs14("div", { className: "pt-2 space-y-4", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx19(Text_default, { size: "xs", weight: "normal", color: "text-text-500", children: "Resposta do aluno:" }),
+      /* @__PURE__ */ jsx19("div", { className: "p-3 bg-background-50 rounded-lg border border-border-100", children: /* @__PURE__ */ jsx19("div", { className: "leading-8", children: renderTextWithAnswers(false).map((element) => /* @__PURE__ */ jsx19(
+        Text_default,
+        {
+          size: "md",
+          weight: "normal",
+          color: "text-text-900",
+          children: element.element
+        },
+        element.id
+      )) }) })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx19(Text_default, { size: "xs", weight: "normal", color: "text-text-500", children: "Gabarito:" }),
+      /* @__PURE__ */ jsx19("div", { className: "p-3 bg-background-50 rounded-lg border border-border-100", children: /* @__PURE__ */ jsx19("div", { className: "leading-8", children: renderTextWithAnswers(true).map((element) => /* @__PURE__ */ jsx19(
+        Text_default,
+        {
+          size: "md",
+          weight: "normal",
+          color: "text-text-900",
+          children: element.element
+        },
+        element.id
+      )) }) })
+    ] })
+  ] });
+};
+
+// src/utils/questionRenderer/trueOrFalse/index.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var renderQuestionTrueOrFalse = ({
+  question,
+  result
+}) => {
+  const options = question.options || [];
+  const getLetterByIndex = (index) => String.fromCodePoint(97 + index);
+  const shouldShowStatus = result?.answerStatus !== "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */ && result?.answerStatus !== "NAO_RESPONDIDO" /* NAO_RESPONDIDO */;
+  return /* @__PURE__ */ jsx20("div", { className: "pt-2", children: /* @__PURE__ */ jsx20("div", { className: "flex flex-col gap-3.5", children: options.map((option, index) => {
+    const statementIsTrue = result?.options?.find((op) => op.id === option.id)?.isCorrect || false;
+    const isSelected = result?.selectedOptions?.some(
+      (op) => op.optionId === option.id
+    );
+    const isStudentCorrect = statementIsTrue === isSelected;
+    const variantCorrect = statementIsTrue ? "correct" : "incorrect";
+    const studentAnswer = isSelected ? "V" : "F";
+    const correctAnswer = statementIsTrue ? "V" : "F";
+    return /* @__PURE__ */ jsxs15(
+      "section",
+      {
+        className: "flex flex-col gap-2",
+        children: [
+          /* @__PURE__ */ jsxs15(
+            "div",
+            {
+              className: cn(
+                "flex flex-row justify-between items-center gap-2 p-2 rounded-md border",
+                shouldShowStatus ? getStatusStyles(variantCorrect) : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsx20(Text_default, { size: "sm", weight: "normal", color: "text-text-900", children: getLetterByIndex(index).concat(") ").concat(option.option) }),
+                shouldShowStatus && /* @__PURE__ */ jsx20("div", { className: "flex-shrink-0", children: getStatusBadge(isStudentCorrect ? "correct" : "incorrect") })
+              ]
+            }
+          ),
+          shouldShowStatus && /* @__PURE__ */ jsxs15("span", { className: "flex flex-row gap-2 items-center", children: [
+            /* @__PURE__ */ jsxs15(Text_default, { size: "2xs", weight: "normal", color: "text-text-800", children: [
+              "Resposta selecionada: ",
+              studentAnswer
+            ] }),
+            !isStudentCorrect && /* @__PURE__ */ jsxs15(Text_default, { size: "2xs", weight: "normal", color: "text-text-800", children: [
+              "Resposta correta: ",
+              correctAnswer
+            ] })
+          ] })
+        ]
+      },
+      option.id || `option-${index}`
+    );
+  }) }) });
+};
+
+// src/utils/questionRenderer/dissertative/index.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var renderQuestionDissertative = ({
+  result
+}) => {
+  const localAnswer = result?.answer || "";
+  return /* @__PURE__ */ jsxs16("div", { className: "pt-2 space-y-4", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx21(Text_default, { size: "sm", weight: "normal", color: "text-text-950", children: "Resposta do aluno" }),
+      /* @__PURE__ */ jsx21("div", { className: "p-3 bg-background-50 rounded-lg border border-border-100", children: /* @__PURE__ */ jsx21(Text_default, { size: "sm", weight: "normal", color: "text-text-700", children: localAnswer || "Nenhuma resposta fornecida" }) })
+    ] }),
+    result?.answerStatus === "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && result?.teacherFeedback && /* @__PURE__ */ jsxs16("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx21(Text_default, { size: "xs", weight: "normal", color: "text-text-500", children: "Observa\xE7\xE3o do professor:" }),
+      /* @__PURE__ */ jsx21("div", { className: "p-3 bg-background-50 rounded-lg border border-border-100", children: /* @__PURE__ */ jsx21(Text_default, { size: "sm", weight: "normal", color: "text-text-700", children: result.teacherFeedback }) })
+    ] })
+  ] });
+};
+
+// src/utils/questionRenderer/fill/index.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var renderQuestionFill = ({
+  question,
+  result
+}) => {
+  return /* @__PURE__ */ jsx22(FillQuestionContent, { question, result });
+};
+
+// src/utils/questionRenderer/image/index.tsx
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var renderQuestionImage = ({
+  result
+}) => {
+  const correctPositionRelative = { x: 0.48, y: 0.45 };
+  const correctRadiusRelative = 0.1;
+  let userPositionRelative = null;
+  try {
+    if (result?.answer) {
+      const parsed = typeof result.answer === "string" ? JSON.parse(result.answer) : result.answer;
+      if (parsed && typeof parsed.x === "number" && typeof parsed.y === "number") {
+        userPositionRelative = { x: parsed.x, y: parsed.y };
+      }
+    }
+  } catch {
+    userPositionRelative = null;
+  }
+  const isCorrect = userPositionRelative ? Math.sqrt(
+    Math.pow(userPositionRelative.x - correctPositionRelative.x, 2) + Math.pow(userPositionRelative.y - correctPositionRelative.y, 2)
+  ) <= correctRadiusRelative : false;
+  const getUserCircleColorClasses = () => {
+    if (!userPositionRelative) return "";
+    return isCorrect ? "bg-success-600/70 border-white" : "bg-indicator-error/70 border-white";
+  };
+  const getPositionDescription = (x, y) => {
+    const xPercent = Math.round(x * 100);
+    const yPercent = Math.round(y * 100);
+    return `${xPercent}% da esquerda, ${yPercent}% do topo`;
+  };
+  const getSpatialRelationship = () => {
+    if (!userPositionRelative) {
+      return `\xC1rea correta localizada em ${getPositionDescription(
+        correctPositionRelative.x,
+        correctPositionRelative.y
+      )}. Nenhuma resposta do aluno fornecida.`;
+    }
+    const deltaX = userPositionRelative.x - correctPositionRelative.x;
+    const deltaY = userPositionRelative.y - correctPositionRelative.y;
+    const distance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
+    const distancePercent = Math.round(distance * 100);
+    let direction = "";
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+      direction = deltaX > 0 ? "\xE0 direita" : "\xE0 esquerda";
+    } else {
+      direction = deltaY > 0 ? "abaixo" : "acima";
+    }
+    const correctPos = getPositionDescription(
+      correctPositionRelative.x,
+      correctPositionRelative.y
+    );
+    const userPos = getPositionDescription(
+      userPositionRelative.x,
+      userPositionRelative.y
+    );
+    return `\xC1rea correta localizada em ${correctPos}. Resposta do aluno em ${userPos}. A resposta do aluno est\xE1 ${distancePercent}% de dist\xE2ncia ${direction} da \xE1rea correta. ${isCorrect ? "A resposta est\xE1 dentro da \xE1rea de toler\xE2ncia e \xE9 considerada correta." : "A resposta est\xE1 fora da \xE1rea de toler\xE2ncia e \xE9 considerada incorreta."}`;
+  };
+  const correctPositionDescription = getPositionDescription(
+    correctPositionRelative.x,
+    correctPositionRelative.y
+  );
+  const imageAltText = `Quest\xE3o de imagem com \xE1rea correta localizada em ${correctPositionDescription}`;
+  return /* @__PURE__ */ jsxs17("div", { className: "pt-2 space-y-4", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-4 text-xs", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx23("div", { className: "w-3 h-3 rounded-full bg-indicator-primary/70 border border-[#F8CC2E]" }),
+        /* @__PURE__ */ jsx23(Text_default, { size: "sm", weight: "normal", color: "text-text-600", children: "\xC1rea correta" })
+      ] }),
+      userPositionRelative && /* @__PURE__ */ jsxs17(Fragment5, { children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx23("div", { className: "w-3 h-3 rounded-full bg-success-600/70 border border-white" }),
+          /* @__PURE__ */ jsx23(Text_default, { size: "sm", weight: "normal", color: "text-text-600", children: "Resposta correta" })
+        ] }),
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx23("div", { className: "w-3 h-3 rounded-full bg-indicator-error/70 border border-white" }),
+          /* @__PURE__ */ jsx23(Text_default, { size: "sm", weight: "normal", color: "text-text-600", children: "Resposta incorreta" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx23("div", { className: "sr-only", children: getSpatialRelationship() }),
+      /* @__PURE__ */ jsx23(
+        "img",
+        {
+          src: mock_image_question_default,
+          alt: imageAltText,
+          className: "w-full h-auto rounded-md"
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        "div",
+        {
+          role: "img",
+          "aria-label": `\xC1rea correta marcada em ${correctPositionDescription}`,
+          className: "absolute rounded-full bg-indicator-primary/70 border-4 border-[#F8CC2E] pointer-events-none",
+          style: {
+            minWidth: "50px",
+            maxWidth: "160px",
+            width: "15%",
+            aspectRatio: "1 / 1",
+            left: `calc(${correctPositionRelative.x * 100}% - 7.5%)`,
+            top: `calc(${correctPositionRelative.y * 100}% - 15%)`
+          },
+          children: /* @__PURE__ */ jsxs17(
+            Text_default,
+            {
+              size: "sm",
+              weight: "normal",
+              color: "text-text-600",
+              className: "sr-only",
+              children: [
+                "C\xEDrculo amarelo indicando a \xE1rea correta da resposta, posicionado em",
+                " ",
+                correctPositionDescription
+              ]
+            }
+          )
+        }
+      ),
+      userPositionRelative && /* @__PURE__ */ jsx23(
+        "div",
+        {
+          role: "img",
+          "aria-label": `Resposta do aluno marcada em ${getPositionDescription(
+            userPositionRelative.x,
+            userPositionRelative.y
+          )}, ${isCorrect ? "correta" : "incorreta"}`,
+          className: `absolute rounded-full border-4 pointer-events-none ${getUserCircleColorClasses()}`,
+          style: {
+            minWidth: "30px",
+            maxWidth: "52px",
+            width: "5%",
+            aspectRatio: "1 / 1",
+            left: `calc(${userPositionRelative.x * 100}% - 2.5%)`,
+            top: `calc(${userPositionRelative.y * 100}% - 2.5%)`
+          },
+          children: /* @__PURE__ */ jsxs17(
+            Text_default,
+            {
+              size: "sm",
+              weight: "normal",
+              color: "text-text-600",
+              className: "sr-only",
+              children: [
+                "C\xEDrculo ",
+                isCorrect ? "verde" : "vermelho",
+                " indicando a resposta do aluno, posicionado em",
+                " ",
+                getPositionDescription(
+                  userPositionRelative.x,
+                  userPositionRelative.y
+                ),
+                ". A resposta est\xE1",
+                " ",
+                Math.round(
+                  Math.sqrt(
+                    Math.pow(
+                      userPositionRelative.x - correctPositionRelative.x,
+                      2
+                    ) + Math.pow(
+                      userPositionRelative.y - correctPositionRelative.y,
+                      2
+                    )
+                  ) * 100
+                ),
+                "% de dist\xE2ncia da \xE1rea correta e \xE9 considerada",
+                " ",
+                isCorrect ? "correta" : "incorreta",
+                "."
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/utils/questionRenderer/connectDots/index.tsx
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var renderQuestionConnectDots = ({
+  paddingBottom
+} = {}) => {
+  return /* @__PURE__ */ jsxs18(Fragment6, { children: [
+    /* @__PURE__ */ jsx24(QuestionSubTitle, { subTitle: "Tipo de quest\xE3o: Ligar Pontos" }),
+    /* @__PURE__ */ jsx24(QuestionContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsx24("div", { className: "space-y-4", children: /* @__PURE__ */ jsx24(Text_default, { size: "md", weight: "normal", color: "text-text-600", children: "Tipo de quest\xE3o: Ligar Pontos (n\xE3o implementado)" }) }) })
+  ] });
+};
+
+// src/utils/questionRenderer/index.tsx
+var questionRendererMap = {
+  ["ALTERNATIVA" /* ALTERNATIVA */]: renderQuestionAlternative,
+  ["MULTIPLA_ESCOLHA" /* MULTIPLA_ESCOLHA */]: renderQuestionMultipleChoice,
+  ["VERDADEIRO_FALSO" /* VERDADEIRO_FALSO */]: renderQuestionTrueOrFalse,
+  ["DISSERTATIVA" /* DISSERTATIVA */]: renderQuestionDissertative,
+  ["PREENCHER" /* PREENCHER */]: renderQuestionFill,
+  ["IMAGEM" /* IMAGEM */]: renderQuestionImage,
+  ["LIGAR_PONTOS" /* LIGAR_PONTOS */]: renderQuestionConnectDots
+};
 var renderFromMap = (renderers, questionType) => {
   if (!questionType) return null;
   const renderer = renderers[questionType];
   return renderer ? renderer() : null;
 };
 
+// src/types/questionTypes.ts
+var questionTypeLabels = {
+  ["ALTERNATIVA" /* ALTERNATIVA */]: "Alternativa",
+  ["VERDADEIRO_FALSO" /* VERDADEIRO_FALSO */]: "Verdadeiro ou Falso",
+  ["DISSERTATIVA" /* DISSERTATIVA */]: "Discursiva",
+  ["IMAGEM" /* IMAGEM */]: "Imagem",
+  ["MULTIPLA_ESCOLHA" /* MULTIPLA_ESCOLHA */]: "M\xFAltipla Escolha",
+  ["LIGAR_PONTOS" /* LIGAR_PONTOS */]: "Ligar Pontos",
+  ["PREENCHER" /* PREENCHER */]: "Preencher Lacunas"
+};
+
 // src/components/ActivityCardQuestionPreview/ActivityCardQuestionPreview.tsx
-import { CheckCircle as CheckCircle4, XCircle as XCircle4 } from "phosphor-react";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { CheckCircle as CheckCircle6, XCircle as XCircle6 } from "phosphor-react";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var QuestionHeader = ({
   badgeColor,
   iconName,
   subjectName,
   resolvedQuestionTypeLabel,
   position
-}) => /* @__PURE__ */ jsxs13("div", { className: "flex flex-row gap-2 text-text-650", children: [
-  /* @__PURE__ */ jsxs13("div", { className: "py-1 px-2 flex flex-row items-center gap-1", children: [
-    /* @__PURE__ */ jsx16(
+}) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row gap-2 text-text-650", children: [
+  /* @__PURE__ */ jsxs19("div", { className: "py-1 px-2 flex flex-row items-center gap-1", children: [
+    /* @__PURE__ */ jsx25(
       "span",
       {
         className: "size-4 rounded-sm flex items-center justify-center shrink-0 text-text-950",
         style: {
           backgroundColor: badgeColor
         },
-        children: /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsx25(
           IconRender_default,
           {
             iconName: iconName ?? "Book",
@@ -3447,13 +4038,13 @@ var QuestionHeader = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx16(Text_default, { size: "sm", children: subjectName ?? "Assunto n\xE3o informado" })
+    /* @__PURE__ */ jsx25(Text_default, { size: "sm", children: subjectName ?? "Assunto n\xE3o informado" })
   ] }),
-  typeof position === "number" && /* @__PURE__ */ jsx16("div", { className: "py-1 px-2 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsxs13(Text_default, { size: "sm", className: "text-text-700", children: [
+  typeof position === "number" && /* @__PURE__ */ jsx25("div", { className: "py-1 px-2 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsxs19(Text_default, { size: "sm", className: "text-text-700", children: [
     "#",
     position
   ] }) }),
-  /* @__PURE__ */ jsx16("div", { className: "py-1 px-2 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsx16(Text_default, { size: "sm", className: "", children: resolvedQuestionTypeLabel ?? "Tipo de quest\xE3o" }) })
+  /* @__PURE__ */ jsx25("div", { className: "py-1 px-2 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsx25(Text_default, { size: "sm", className: "", children: resolvedQuestionTypeLabel ?? "Tipo de quest\xE3o" }) })
 ] });
 var ActivityCardQuestionPreview = ({
   subjectName = "Assunto n\xE3o informado",
@@ -3471,13 +4062,13 @@ var ActivityCardQuestionPreview = ({
   position
 }) => {
   const badgeColor = getSubjectColorWithOpacity(subjectColor, isDark) ?? subjectColor;
-  const [isExpanded, setIsExpanded] = useState7(defaultExpanded);
+  const [isExpanded, setIsExpanded] = useState8(defaultExpanded);
   const correctOptionIds = question?.correctOptionIds || [];
   const resolvedQuestionTypeLabel = questionType && questionTypeLabels[questionType] ? questionTypeLabels[questionType] : questionTypeLabel || "Tipo de quest\xE3o";
   const safeSubjectName = subjectName ?? "Assunto n\xE3o informado";
   const safeIconName = iconName ?? "Book";
   const safeResolvedLabel = resolvedQuestionTypeLabel ?? "Tipo de quest\xE3o";
-  const alternatives = useMemo(() => {
+  const alternatives = useMemo2(() => {
     if (!question?.options || questionType !== "ALTERNATIVA" /* ALTERNATIVA */)
       return [];
     return question.options.map((option) => {
@@ -3490,7 +4081,7 @@ var ActivityCardQuestionPreview = ({
       };
     });
   }, [question, questionType, correctOptionIds]);
-  const multipleChoices = useMemo(() => {
+  const multipleChoices = useMemo2(() => {
     if (!question?.options || questionType !== "MULTIPLA_ESCOLHA" /* MULTIPLA_ESCOLHA */)
       return [];
     return question.options.map((option) => {
@@ -3505,7 +4096,7 @@ var ActivityCardQuestionPreview = ({
   }, [question, questionType, correctOptionIds]);
   const renderAlternative = () => {
     if (alternatives.length === 0) return null;
-    return /* @__PURE__ */ jsx16("div", { className: "mt-4", children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx25("div", { className: "mt-4", children: /* @__PURE__ */ jsx25(
       AlternativesList,
       {
         alternatives,
@@ -3518,7 +4109,7 @@ var ActivityCardQuestionPreview = ({
   };
   const renderMultipleChoice = () => {
     if (multipleChoices.length === 0) return null;
-    return /* @__PURE__ */ jsx16("div", { className: "mt-4", children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx25("div", { className: "mt-4", children: /* @__PURE__ */ jsx25(
       MultipleChoiceList,
       {
         choices: multipleChoices,
@@ -3530,10 +4121,10 @@ var ActivityCardQuestionPreview = ({
   };
   const renderTrueOrFalse = () => {
     if (!question?.options || question.options.length === 0) return null;
-    return /* @__PURE__ */ jsx16("div", { className: "mt-4", children: /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-3.5", children: question.options.map((option, index) => {
+    return /* @__PURE__ */ jsx25("div", { className: "mt-4", children: /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-3.5", children: question.options.map((option, index) => {
       const isCorrect = correctOptionIds.includes(option.id);
       const correctAnswer = isCorrect ? "Verdadeiro" : "Falso";
-      return /* @__PURE__ */ jsx16("section", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs13(
+      return /* @__PURE__ */ jsx25("section", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs19(
         "div",
         {
           className: cn(
@@ -3541,18 +4132,18 @@ var ActivityCardQuestionPreview = ({
             isCorrect ? "bg-success-background border-success-300" : "bg-error-background border-error-300"
           ),
           children: [
-            /* @__PURE__ */ jsx16(Text_default, { size: "sm", className: "text-text-900", children: String.fromCodePoint(97 + index).concat(") ").concat(option.option) }),
-            /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsxs13(Text_default, { size: "sm", className: "text-text-700", children: [
+            /* @__PURE__ */ jsx25(Text_default, { size: "sm", className: "text-text-900", children: String.fromCodePoint(97 + index).concat(") ").concat(option.option) }),
+            /* @__PURE__ */ jsxs19("div", { className: "flex flex-row items-center gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsxs19(Text_default, { size: "sm", className: "text-text-700", children: [
                 "Resposta correta: ",
                 correctAnswer
               ] }),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx25(
                 Badge_default,
                 {
                   variant: "solid",
                   action: isCorrect ? "success" : "error",
-                  iconLeft: isCorrect ? /* @__PURE__ */ jsx16(CheckCircle4, {}) : /* @__PURE__ */ jsx16(XCircle4, {}),
+                  iconLeft: isCorrect ? /* @__PURE__ */ jsx25(CheckCircle6, {}) : /* @__PURE__ */ jsx25(XCircle6, {}),
                   children: isCorrect ? "Resposta correta" : "Resposta incorreta"
                 }
               )
@@ -3563,7 +4154,7 @@ var ActivityCardQuestionPreview = ({
     }) }) });
   };
   const renderDissertative = () => {
-    return /* @__PURE__ */ jsx16("div", { className: "mt-4 px-2 py-4", children: /* @__PURE__ */ jsx16(Text_default, { size: "sm", className: "text-text-600 italic", children: "Resposta do aluno" }) });
+    return /* @__PURE__ */ jsx25("div", { className: "mt-4 px-2 py-4", children: /* @__PURE__ */ jsx25(Text_default, { size: "sm", className: "text-text-600 italic", children: "Resposta do aluno" }) });
   };
   const renderConnectDots = () => null;
   const renderFill = () => null;
@@ -3577,7 +4168,7 @@ var ActivityCardQuestionPreview = ({
     ["PREENCHER" /* PREENCHER */]: renderFill,
     ["IMAGEM" /* IMAGEM */]: renderImage
   };
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: "w-full",
@@ -3607,13 +4198,13 @@ var ActivityCardQuestionPreview = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx25(
           "div",
           {
             "data-drag-preview": "true",
             className: "fixed -left-[9999px] -top-[9999px] pointer-events-none z-[9999] w-[440px]",
-            children: /* @__PURE__ */ jsx16("div", { className: "w-full rounded-lg border border-border-200 bg-background", children: /* @__PURE__ */ jsxs13("div", { className: "w-full min-w-0 flex flex-col gap-2 py-2", children: [
-              /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx25("div", { className: "w-full rounded-lg border border-border-200 bg-background", children: /* @__PURE__ */ jsxs19("div", { className: "w-full min-w-0 flex flex-col gap-2 py-2", children: [
+              /* @__PURE__ */ jsx25(
                 QuestionHeader,
                 {
                   badgeColor,
@@ -3623,7 +4214,7 @@ var ActivityCardQuestionPreview = ({
                   position
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx25(
                 Text_default,
                 {
                   size: "md",
@@ -3635,7 +4226,7 @@ var ActivityCardQuestionPreview = ({
             ] }) })
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs19(
           CardAccordation,
           {
             className: cn(
@@ -3646,8 +4237,8 @@ var ActivityCardQuestionPreview = ({
             onToggleExpanded: setIsExpanded,
             defaultExpanded,
             value,
-            trigger: /* @__PURE__ */ jsxs13("div", { className: "w-full min-w-0 flex flex-col gap-2 py-2", children: [
-              /* @__PURE__ */ jsx16(
+            trigger: /* @__PURE__ */ jsxs19("div", { className: "w-full min-w-0 flex flex-col gap-2 py-2", children: [
+              /* @__PURE__ */ jsx25(
                 QuestionHeader,
                 {
                   badgeColor,
@@ -3657,7 +4248,7 @@ var ActivityCardQuestionPreview = ({
                   position
                 }
               ),
-              !isExpanded && /* @__PURE__ */ jsx16(
+              !isExpanded && /* @__PURE__ */ jsx25(
                 Text_default,
                 {
                   size: "md",
@@ -3668,7 +4259,7 @@ var ActivityCardQuestionPreview = ({
               )
             ] }),
             children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx25(
                 Text_default,
                 {
                   size: "md",