analytica-frontend-lib 1.0.83 → 1.0.85

package/dist/Quiz/index.js

@@ -25,7 +25,13 @@ __export(Quiz_exports, {
   QuizContent: () => QuizContent,
   QuizFooter: () => QuizFooter,
   QuizHeader: () => QuizHeader,
+  QuizHeaderResult: () => QuizHeaderResult,
+  QuizListResult: () => QuizListResult,
+  QuizListResultByMateria: () => QuizListResultByMateria,
   QuizQuestionList: () => QuizQuestionList,
+  QuizResultHeaderTitle: () => QuizResultHeaderTitle,
+  QuizResultPerformance: () => QuizResultPerformance,
+  QuizResultTitle: () => QuizResultTitle,
   QuizTitle: () => QuizTitle
 });
 module.exports = __toCommonJS(Quiz_exports);
@@ -33,6 +39,15 @@ var import_phosphor_react6 = require("phosphor-react");
 
 // src/components/Badge/Badge.tsx
 var import_phosphor_react = require("phosphor-react");
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Badge/Badge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES = {
   solid: {
@@ -98,7 +113,7 @@ var Badge = ({
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+        className: cn(baseClasses, variantClasses, sizeClasses, className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
@@ -116,12 +131,12 @@ var Badge = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
       ]
     }
   );
@@ -178,7 +193,7 @@ var Text = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
-      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
       ...props,
       children
     }
@@ -299,8 +314,19 @@ var Radio = (0, import_react.forwardRef)(
       return sizeClasses.borderWidth;
     };
     const borderWidthClass = getBorderWidth();
-    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
-    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
+    const radioClasses = cn(
+      BASE_RADIO_CLASSES,
+      actualRadioSize,
+      borderWidthClass,
+      stylingClasses,
+      className
+    );
+    const dotClasses = cn(
+      actualDotSize,
+      "rounded-full",
+      DOT_CLASSES[currentState],
+      "transition-all duration-200"
+    );
     const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
     const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
     const getTextColor = () => {
@@ -319,7 +345,11 @@ var Radio = (0, import_react.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
-          className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          className: cn(
+            "flex flex-row items-center",
+            isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
+            disabled ? "opacity-40" : ""
+          ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "input",
@@ -376,7 +406,11 @@ var Radio = (0, import_react.forwardRef)(
             label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
+                className: cn(
+                  "flex flex-row items-center",
+                  sizeClasses.labelHeight,
+                  "flex-1 min-w-0"
+                ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   Text_default,
                   {
@@ -384,7 +418,11 @@ var Radio = (0, import_react.forwardRef)(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
+                    className: cn(
+                      getCursorClass(),
+                      "select-none leading-normal flex items-center font-roboto truncate",
+                      labelClassName
+                    ),
                     color: getTextColor(),
                     children: label
                   }
@@ -613,7 +651,11 @@ var AlternativesList = ({
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
-          className: `border-2 rounded-lg p-4 w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
+          className: cn(
+            "border-2 rounded-lg p-4 w-full",
+            statusStyles,
+            alternative.disabled ? "opacity-50" : ""
+          ),
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-1", children: renderRadio() }),
@@ -621,7 +663,10 @@ var AlternativesList = ({
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "p",
                   {
-                    className: `block font-medium ${selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"}`,
+                    className: cn(
+                      "block font-medium",
+                      selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
+                    ),
                     children: alternative.label
                   }
                 ),
@@ -637,14 +682,21 @@ var AlternativesList = ({
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
-        className: `flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
+        className: cn(
+          "flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full",
+          statusStyles,
+          alternative.disabled ? "opacity-50" : ""
+        ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
             renderRadio(),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "span",
               {
-                className: `flex-1 ${selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"}`,
+                className: cn(
+                  "flex-1",
+                  selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
+                ),
                 children: alternative.label
               }
             )
@@ -659,7 +711,7 @@ var AlternativesList = ({
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
-        className: `flex flex-col ${getLayoutClasses()} w-full ${className}`,
+        className: cn("flex flex-col", getLayoutClasses(), "w-full", className),
         children: alternatives.map(
           (alternative) => renderReadonlyAlternative(alternative)
         )
@@ -677,7 +729,7 @@ var AlternativesList = ({
         onValueChange?.(value2);
       },
       disabled,
-      className: `flex flex-col ${getLayoutClasses()} ${className}`,
+      className: cn("flex flex-col", getLayoutClasses(), className),
       children: alternatives.map((alternative, index) => {
         const alternativeId = alternative.value || `alt-${index}`;
         const statusStyles = getStatusStyles(alternative.status, false);
@@ -686,7 +738,11 @@ var AlternativesList = ({
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
-              className: `border-2 rounded-lg p-4 transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+              className: cn(
+                "border-2 rounded-lg p-4 transition-all",
+                statusStyles,
+                alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+              ),
               children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -703,9 +759,11 @@ var AlternativesList = ({
                       "label",
                       {
                         htmlFor: alternativeId,
-                        className: `block font-medium
-                        ${actualValue === alternative.value ? "text-text-950" : "text-text-600"}
-                        ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+                        className: cn(
+                          "block font-medium",
+                          actualValue === alternative.value ? "text-text-950" : "text-text-600",
+                          alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
+                        ),
                         children: alternative.label
                       }
                     ),
@@ -721,7 +779,11 @@ var AlternativesList = ({
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
-            className: `flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+            className: cn(
+              "flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all",
+              statusStyles,
+              alternative.disabled ? "opacity-50 cursor-not-allowed" : ""
+            ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -736,9 +798,11 @@ var AlternativesList = ({
                   "label",
                   {
                     htmlFor: alternativeId,
-                    className: `flex-1
-                  ${actualValue === alternative.value ? "text-text-950" : "text-text-600"}
-                  ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+                    className: cn(
+                      "flex-1",
+                      actualValue === alternative.value ? "text-text-950" : "text-text-600",
+                      alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
+                    ),
                     children: alternative.label
                   }
                 )
@@ -758,7 +822,10 @@ var HeaderAlternative = (0, import_react2.forwardRef)(
       "div",
       {
         ref,
-        className: `bg-background p-4 flex flex-col gap-4 rounded-xl ${className}`,
+        className: cn(
+          "bg-background p-4 flex flex-col gap-4 rounded-xl",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex flex-col", children: [
@@ -816,7 +883,7 @@ var Button = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
       disabled,
       type,
       ...props,
@@ -870,7 +937,7 @@ var IconButton = (0, import_react3.forwardRef)(
       {
         ref,
         type: "button",
-        className: `${allClasses} ${className}`,
+        className: cn(allClasses, className),
         disabled,
         "aria-pressed": active,
         "aria-label": ariaLabel,
@@ -894,6 +961,9 @@ var useQuizStore = (0, import_zustand2.create)()(
     (set, get) => {
       let timerInterval = null;
       const startTimer = () => {
+        if (get().isFinished) {
+          return;
+        }
         if (timerInterval) {
           clearInterval(timerInterval);
         }
@@ -912,15 +982,17 @@ var useQuizStore = (0, import_zustand2.create)()(
         // Initial State
         currentQuestionIndex: 0,
         selectedAnswers: {},
-        skippedQuestions: [],
         userAnswers: [],
         timeElapsed: 0,
         isStarted: false,
         isFinished: false,
+        userId: "",
         // Setters
-        setBySimulado: (simulado) => set({ bySimulado: simulado }),
-        setByAtividade: (atividade) => set({ byAtividade: atividade }),
-        setByAula: (aula) => set({ byAula: aula }),
+        setBySimulated: (simulado) => set({ bySimulated: simulado }),
+        setByActivity: (atividade) => set({ byActivity: atividade }),
+        setByQuestionary: (aula) => set({ byQuestionary: aula }),
+        setUserId: (userId) => set({ userId }),
+        getUserId: () => get().userId,
         // Navigation
         goToNextQuestion: () => {
           const { currentQuestionIndex, getTotalQuestions } = get();
@@ -942,58 +1014,107 @@ var useQuizStore = (0, import_zustand2.create)()(
             set({ currentQuestionIndex: index });
           }
         },
-        // Quiz Actions
+        getActiveQuiz: () => {
+          const { bySimulated, byActivity, byQuestionary } = get();
+          if (bySimulated)
+            return { quiz: bySimulated, type: "bySimulated" };
+          if (byActivity)
+            return { quiz: byActivity, type: "byActivity" };
+          if (byQuestionary)
+            return { quiz: byQuestionary, type: "byQuestionary" };
+          return null;
+        },
         selectAnswer: (questionId, answerId) => {
-          const { selectedAnswers, skippedQuestions, addUserAnswer } = get();
-          const newSkippedQuestions = skippedQuestions.filter(
-            (id) => id !== questionId
+          const { getActiveQuiz, userAnswers } = get();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) return;
+          const updatedQuestions = activeQuiz.quiz.questions.map(
+            (question) => question.id === questionId ? { ...question, answerKey: answerId } : question
           );
+          const updatedQuiz = {
+            ...activeQuiz.quiz,
+            questions: updatedQuestions
+          };
+          const activityId = activeQuiz.quiz.id;
+          const userId = get().getUserId();
+          if (!userId) {
+            console.warn("selectAnswer called before userId is set");
+            return;
+          }
+          const existingAnswerIndex = userAnswers.findIndex(
+            (answer) => answer.questionId === questionId
+          );
+          const newUserAnswer = {
+            questionId,
+            activityId,
+            userId,
+            answer: answerId,
+            optionId: answerId
+          };
+          let updatedUserAnswers;
+          if (existingAnswerIndex !== -1) {
+            updatedUserAnswers = [...userAnswers];
+            updatedUserAnswers[existingAnswerIndex] = newUserAnswer;
+          } else {
+            updatedUserAnswers = [...userAnswers, newUserAnswer];
+          }
           set({
-            selectedAnswers: {
-              ...selectedAnswers,
-              [questionId]: answerId
-            },
-            skippedQuestions: newSkippedQuestions
+            [activeQuiz.type]: updatedQuiz,
+            userAnswers: updatedUserAnswers
           });
-          addUserAnswer(questionId, answerId);
         },
         skipQuestion: () => {
-          const { getCurrentQuestion, skippedQuestions, addUserAnswer } = get();
+          const { getCurrentQuestion, userAnswers, getActiveQuiz } = get();
           const currentQuestion = getCurrentQuestion();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) return;
           if (currentQuestion) {
+            const activityId = activeQuiz.quiz.id;
+            const userId = get().getUserId();
+            const existingAnswerIndex = userAnswers.findIndex(
+              (answer) => answer.questionId === currentQuestion.id
+            );
+            const newUserAnswer = {
+              questionId: currentQuestion.id,
+              activityId,
+              userId,
+              answer: null,
+              optionId: null
+            };
+            let updatedUserAnswers;
+            if (existingAnswerIndex !== -1) {
+              updatedUserAnswers = [...userAnswers];
+              updatedUserAnswers[existingAnswerIndex] = newUserAnswer;
+            } else {
+              updatedUserAnswers = [...userAnswers, newUserAnswer];
+            }
             set({
-              skippedQuestions: [...skippedQuestions, currentQuestion.id]
+              userAnswers: updatedUserAnswers
             });
-            addUserAnswer(currentQuestion.id);
           }
         },
         addUserAnswer: (questionId, answerId) => {
-          const { userAnswers, bySimulado, byAtividade, byAula } = get();
-          const quiz = bySimulado || byAtividade || byAula;
-          const question = quiz?.questions.find((q) => q.id === questionId);
-          if (!question) return;
+          const { getActiveQuiz, userAnswers } = get();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) return;
+          const activityId = activeQuiz.quiz.id;
+          const userId = get().getUserId();
           const existingAnswerIndex = userAnswers.findIndex(
-            (answer) => answer.id === questionId
+            (answer) => answer.questionId === questionId
           );
+          const newUserAnswer = {
+            questionId,
+            activityId,
+            userId,
+            answer: answerId || null,
+            optionId: answerId || null
+          };
           if (existingAnswerIndex !== -1) {
-            const updatedAnswers = [...userAnswers];
-            updatedAnswers[existingAnswerIndex] = {
-              ...question,
-              answerKey: answerId || "",
-              isSkipped: !answerId
-            };
-            set({ userAnswers: updatedAnswers });
+            const updatedUserAnswers = [...userAnswers];
+            updatedUserAnswers[existingAnswerIndex] = newUserAnswer;
+            set({ userAnswers: updatedUserAnswers });
           } else {
-            set({
-              userAnswers: [
-                ...userAnswers,
-                {
-                  ...question,
-                  answerKey: answerId || "",
-                  isSkipped: !answerId
-                }
-              ]
-            });
+            set({ userAnswers: [...userAnswers, newUserAnswer] });
           }
         },
         startQuiz: () => {
@@ -1009,11 +1130,11 @@ var useQuizStore = (0, import_zustand2.create)()(
           set({
             currentQuestionIndex: 0,
             selectedAnswers: {},
-            skippedQuestions: [],
             userAnswers: [],
             timeElapsed: 0,
             isStarted: false,
-            isFinished: false
+            isFinished: false,
+            userId: ""
           });
         },
         // Timer
@@ -1022,36 +1143,33 @@ var useQuizStore = (0, import_zustand2.create)()(
         stopTimer,
         // Getters
         getCurrentQuestion: () => {
-          const { bySimulado, byAtividade, byAula, currentQuestionIndex } = get();
-          const quiz = bySimulado || byAtividade || byAula;
-          if (!quiz) {
+          const { currentQuestionIndex, getActiveQuiz } = get();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) {
             return null;
           }
-          return quiz.questions[currentQuestionIndex];
+          return activeQuiz.quiz.questions[currentQuestionIndex];
         },
         getTotalQuestions: () => {
-          const { bySimulado, byAtividade, byAula } = get();
-          const quiz = bySimulado || byAtividade || byAula;
-          return quiz?.questions?.length || 0;
+          const { getActiveQuiz } = get();
+          const activeQuiz = getActiveQuiz();
+          return activeQuiz?.quiz?.questions?.length || 0;
         },
         getAnsweredQuestions: () => {
-          const { selectedAnswers } = get();
-          return Object.keys(selectedAnswers).length;
+          const { userAnswers } = get();
+          return userAnswers.filter((answer) => answer.answer !== null).length;
         },
         getUnansweredQuestions: () => {
-          const {
-            bySimulado,
-            byAtividade,
-            byAula,
-            selectedAnswers,
-            skippedQuestions
-          } = get();
-          const quiz = bySimulado || byAtividade || byAula;
-          if (!quiz) return [];
+          const { getActiveQuiz, userAnswers } = get();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) return [];
           const unansweredQuestions = [];
-          quiz.questions.forEach((question, index) => {
-            const isAnswered = question.id in selectedAnswers;
-            const isSkipped = skippedQuestions.includes(question.id);
+          activeQuiz.quiz.questions.forEach((question, index) => {
+            const userAnswer = userAnswers.find(
+              (answer) => answer.questionId === question.id
+            );
+            const isAnswered = userAnswer && userAnswer.answer !== null;
+            const isSkipped = userAnswer && userAnswer.answer === null;
             if (!isAnswered && !isSkipped) {
               unansweredQuestions.push(index + 1);
             }
@@ -1059,8 +1177,8 @@ var useQuizStore = (0, import_zustand2.create)()(
           return unansweredQuestions;
         },
         getSkippedQuestions: () => {
-          const { skippedQuestions } = get();
-          return skippedQuestions.length;
+          const { userAnswers } = get();
+          return userAnswers.filter((answer) => answer.answer === null).length;
         },
         getProgress: () => {
           const { getTotalQuestions, getAnsweredQuestions } = get();
@@ -1069,22 +1187,32 @@ var useQuizStore = (0, import_zustand2.create)()(
           return total > 0 ? answered / total * 100 : 0;
         },
         isQuestionAnswered: (questionId) => {
-          const { selectedAnswers } = get();
-          return questionId in selectedAnswers;
+          const { userAnswers } = get();
+          const userAnswer = userAnswers.find(
+            (answer) => answer.questionId === questionId
+          );
+          return userAnswer ? userAnswer.answer !== null : false;
         },
         isQuestionSkipped: (questionId) => {
-          const { skippedQuestions } = get();
-          return skippedQuestions.includes(questionId);
+          const { userAnswers } = get();
+          const userAnswer = userAnswers.find(
+            (answer) => answer.questionId === questionId
+          );
+          return userAnswer ? userAnswer.answer === null : false;
         },
         getCurrentAnswer: () => {
-          const { getCurrentQuestion, selectedAnswers } = get();
+          const { getCurrentQuestion, userAnswers } = get();
           const currentQuestion = getCurrentQuestion();
-          return selectedAnswers[currentQuestion?.id || ""];
+          if (!currentQuestion) return void 0;
+          const userAnswer = userAnswers.find(
+            (answer) => answer.questionId === currentQuestion.id
+          );
+          return userAnswer?.answer;
         },
         getQuizTitle: () => {
-          const { bySimulado, byAtividade, byAula } = get();
-          const quiz = bySimulado || byAtividade || byAula;
-          return quiz?.title || "Quiz";
+          const { getActiveQuiz } = get();
+          const activeQuiz = getActiveQuiz();
+          return activeQuiz?.quiz?.title || "Quiz";
         },
         formatTime: (seconds) => {
           const minutes = Math.floor(seconds / 60);
@@ -1092,30 +1220,42 @@ var useQuizStore = (0, import_zustand2.create)()(
           return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
         },
         getUserAnswers: () => {
-          const { userAnswers } = get();
-          return userAnswers;
+          const { getActiveQuiz, userAnswers } = get();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) return [];
+          return activeQuiz.quiz.questions.map((question) => {
+            const userAnswer = userAnswers.find(
+              (answer) => answer.questionId === question.id
+            );
+            return {
+              ...question,
+              isSkipped: userAnswer ? userAnswer.answer === null : false
+            };
+          });
         },
         getUnansweredQuestionsFromUserAnswers: () => {
-          const { bySimulado, byAtividade, byAula, userAnswers } = get();
-          const quiz = bySimulado || byAtividade || byAula;
-          if (!quiz) return [];
+          const { getActiveQuiz, userAnswers } = get();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) return [];
           const unansweredQuestions = [];
-          quiz.questions.forEach((question, index) => {
+          activeQuiz.quiz.questions.forEach((question, index) => {
             const userAnswer = userAnswers.find(
-              (answer) => answer.id === question.id
+              (answer) => answer.questionId === question.id
             );
-            if (!userAnswer || userAnswer.isSkipped) {
+            const hasAnswer = userAnswer && userAnswer.answer !== null;
+            const isSkipped = userAnswer && userAnswer.answer === null;
+            if (!hasAnswer || isSkipped) {
               unansweredQuestions.push(index + 1);
             }
           });
           return unansweredQuestions;
         },
         getQuestionsGroupedBySubject: () => {
-          const { bySimulado, byAtividade, byAula } = get();
-          const quiz = bySimulado || byAtividade || byAula;
-          if (!quiz) return {};
+          const { getActiveQuiz } = get();
+          const activeQuiz = getActiveQuiz();
+          if (!activeQuiz) return {};
           const groupedQuestions = {};
-          quiz.questions.forEach((question) => {
+          activeQuiz.quiz.questions.forEach((question) => {
             const subjectId = question.knowledgeMatrix?.[0]?.subjectId || "Sem mat\xE9ria";
             if (!groupedQuestions[subjectId]) {
               groupedQuestions[subjectId] = [];
@@ -1123,6 +1263,31 @@ var useQuizStore = (0, import_zustand2.create)()(
             groupedQuestions[subjectId].push(question);
           });
           return groupedQuestions;
+        },
+        // New methods for userAnswers
+        getUserAnswerByQuestionId: (questionId) => {
+          const { userAnswers } = get();
+          return userAnswers.find((answer) => answer.questionId === questionId) || null;
+        },
+        isQuestionAnsweredByUserAnswers: (questionId) => {
+          const { userAnswers } = get();
+          const answer = userAnswers.find(
+            (answer2) => answer2.questionId === questionId
+          );
+          return answer ? answer.answer !== null : false;
+        },
+        getQuestionStatusFromUserAnswers: (questionId) => {
+          const { userAnswers } = get();
+          const answer = userAnswers.find(
+            (answer2) => answer2.questionId === questionId
+          );
+          if (!answer) return "unanswered";
+          if (answer.answer === null) return "skipped";
+          return "answered";
+        },
+        getUserAnswersForActivity: () => {
+          const { userAnswers } = get();
+          return userAnswers;
         }
       };
     },
@@ -1210,7 +1375,11 @@ var AlertDialog = (0, import_react4.forwardRef)(
           "div",
           {
             ref,
-            className: `bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3 ${sizeClasses} ${className}`,
+            className: cn(
+              "bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3",
+              sizeClasses,
+              className
+            ),
             ...props,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1309,7 +1478,12 @@ var Modal = ({
   const sizeClasses = SIZE_CLASSES5[size];
   const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
   const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
-  const modalClasses = `${baseClasses} ${sizeClasses} ${dialogResetClasses} ${className}`;
+  const modalClasses = cn(
+    baseClasses,
+    sizeClasses,
+    dialogResetClasses,
+    className
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
@@ -1522,11 +1696,11 @@ var Select = ({
       "label",
       {
         htmlFor: selectId,
-        className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+        className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore2(children, store, size, selectId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("relative", sizeClasses), ref: selectRef, children: injectStore2(children, store, size, selectId) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
       helperText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
       errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
@@ -1587,7 +1761,10 @@ var SelectTrigger = (0, import_react6.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_phosphor_react4.CaretDown,
             {
-              className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
+              className: cn(
+                "h-[1em] w-[1em] opacity-50 transition-transform",
+                open ? "rotate-180" : ""
+              )
             }
           )
         ]
@@ -1614,7 +1791,11 @@ var SelectContent = (0, import_react6.forwardRef)(
       {
         role: "menu",
         ref,
-        className: `bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`,
+        className: cn(
+          "bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100",
+          getPositionClasses(),
+          className
+        ),
         ...props,
         children
       }
@@ -1798,7 +1979,10 @@ var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue,
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
-      className: `text-xs font-medium leading-[14px] text-right ${percentageClassName}`,
+      className: cn(
+        "text-xs font-medium leading-[14px] text-right",
+        percentageClassName
+      ),
       children: displayPriority.type === "hitCount" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-success-200", children: Math.round(clampedValue) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-text-600", children: [
@@ -1823,7 +2007,11 @@ var ProgressBarBase = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
   "div",
   {
-    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    className: cn(
+      containerClassName,
+      variantClasses.background,
+      "overflow-hidden relative"
+    ),
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "progress",
@@ -1837,7 +2025,11 @@ var ProgressBarBase = ({
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
-          className: `${fillClassName} ${variantClasses.fill} transition-all duration-300 ease-out`,
+          className: cn(
+            fillClassName,
+            variantClasses.fill,
+            "transition-all duration-300 ease-out"
+          ),
           style: { width: `${percentage}%` }
         }
       )
@@ -1859,7 +2051,12 @@ var StackedLayout = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
   "div",
   {
-    className: `flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`,
+    className: cn(
+      "flex flex-col items-start gap-2",
+      dimensions.width,
+      dimensions.height,
+      className
+    ),
     children: [
       shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1868,7 +2065,7 @@ var StackedLayout = ({
             as: "div",
             size: "md",
             weight: "medium",
-            className: `text-text-600 leading-[19px] ${labelClassName}`,
+            className: cn("text-text-600 leading-[19px]", labelClassName),
             children: label
           }
         ),
@@ -1926,7 +2123,12 @@ var CompactLayout = ({
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
-      className: `flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`,
+      className: cn(
+        "flex flex-col items-start gap-1",
+        dimensions.width,
+        dimensions.height,
+        className
+      ),
       children: [
         shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Text_default,
@@ -1935,7 +2137,7 @@ var CompactLayout = ({
             size: "sm",
             weight: "medium",
             color,
-            className: `leading-4 w-full ${compactClassName}`,
+            className: cn("leading-4 w-full", compactClassName),
             children: content
           }
         ),
@@ -1975,7 +2177,7 @@ var DefaultLayout = ({
     label,
     showPercentage
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex", sizeClasses.layout, gapClass, className), children: [
     displayConfig.showHeader && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Text_default,
@@ -1983,7 +2185,10 @@ var DefaultLayout = ({
           as: "div",
           size: "xs",
           weight: "medium",
-          className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
+          className: cn(
+            "text-text-950 leading-none tracking-normal text-center",
+            labelClassName
+          ),
           children: label
         }
       ),
@@ -1992,7 +2197,10 @@ var DefaultLayout = ({
         {
           size: "xs",
           weight: "medium",
-          className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
+          className: cn(
+            "text-text-950 leading-none tracking-normal text-center",
+            percentageClassName
+          ),
           children: [
             Math.round(percentage),
             "%"
@@ -2008,8 +2216,16 @@ var DefaultLayout = ({
         percentage,
         label,
         variantClasses,
-        containerClassName: `${progressBarClass} ${sizeClasses.container} ${sizeClasses.borderRadius}`,
-        fillClassName: `${sizeClasses.bar} ${sizeClasses.borderRadius} shadow-hard-shadow-3`
+        containerClassName: cn(
+          progressBarClass,
+          sizeClasses.container,
+          sizeClasses.borderRadius
+        ),
+        fillClassName: cn(
+          sizeClasses.bar,
+          sizeClasses.borderRadius,
+          "shadow-hard-shadow-3"
+        )
       }
     ),
     displayConfig.showPercentage && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -2017,7 +2233,10 @@ var DefaultLayout = ({
       {
         size: "xs",
         weight: "medium",
-        className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
+        className: cn(
+          "text-text-950 leading-none tracking-normal text-center flex-none",
+          percentageClassName
+        ),
         children: [
           Math.round(percentage),
           "%"
@@ -2030,7 +2249,10 @@ var DefaultLayout = ({
         as: "div",
         size: "xs",
         weight: "medium",
-        className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
+        className: cn(
+          "text-text-950 leading-none tracking-normal text-center flex-none",
+          labelClassName
+        ),
         children: label
       }
     )
@@ -2216,21 +2438,28 @@ var CardActivitiesResults = (0, import_react7.forwardRef)(
       "div",
       {
         ref,
-        className: `w-full flex flex-col border border-border-50  bg-background rounded-xl ${className}`,
+        className: cn(
+          "w-full flex flex-col border border-border-50  bg-background rounded-xl",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
-              className: `
-          flex flex-col gap-1 items-center justify-center p-4 
-          ${actionCardClasses}
-          ${extended ? "rounded-t-xl" : "rounded-xl"}`,
+              className: cn(
+                "flex flex-col gap-1 items-center justify-center p-4",
+                actionCardClasses,
+                extended ? "rounded-t-xl" : "rounded-xl"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "span",
                   {
-                    className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
+                    className: cn(
+                      "size-7.5 rounded-full flex items-center justify-center",
+                      actionIconClasses
+                    ),
                     children: icon
                   }
                 ),
@@ -2243,7 +2472,13 @@ var CardActivitiesResults = (0, import_react7.forwardRef)(
                     children: title
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "p",
+                  {
+                    className: cn("text-lg font-bold truncate", actionSubTitleClasses),
+                    children: subTitle
+                  }
+                )
               ]
             }
           ),
@@ -2251,7 +2486,10 @@ var CardActivitiesResults = (0, import_react7.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "p",
               {
-                className: `text-2xs font-medium uppercase truncate ${actionHeaderClasses}`,
+                className: cn(
+                  "text-2xs font-medium uppercase truncate",
+                  actionHeaderClasses
+                ),
                 children: header
               }
             ),
@@ -2281,7 +2519,7 @@ var CardQuestions = (0, import_react7.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "medium",
-        className: `justify-between gap-4 ${className}`,
+        className: cn("justify-between gap-4", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
@@ -2359,7 +2597,9 @@ var CardProgress = (0, import_react7.forwardRef)(
             {
               size: "xs",
               weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+              className: cn(
+                "text-text-950 leading-none tracking-normal text-center flex-none"
+              ),
               children: [
                 Math.round(progress),
                 "%"
@@ -2378,17 +2618,17 @@ var CardProgress = (0, import_react7.forwardRef)(
         padding: "none",
         minHeight: "medium",
         cursor: "pointer",
-        className: `${isHorizontal ? "h-20" : ""} ${className}`,
+        className: cn(isHorizontal ? "h-20" : "", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
-              className: `
-            flex justify-center items-center [&>svg]:size-6 text-text-950
-            ${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
-            ${!color.startsWith("#") ? `bg-${color}` : ""}
-          `,
+              className: cn(
+                "flex justify-center items-center [&>svg]:size-6 text-text-950",
+                isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl",
+                !color.startsWith("#") ? `bg-${color}` : ""
+              ),
               style: color.startsWith("#") ? { backgroundColor: color } : void 0,
               "data-testid": "icon-container",
               children: icon
@@ -2397,10 +2637,10 @@ var CardProgress = (0, import_react7.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
-              className: `
-            p-4 flex flex-col justify-between w-full h-full
-            ${!isHorizontal && "gap-4"}
-          `,
+              className: cn(
+                "p-4 flex flex-col justify-between w-full h-full",
+                !isHorizontal && "gap-4"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
                 contentComponent[direction]
@@ -2430,7 +2670,7 @@ var CardTopic = (0, import_react7.forwardRef)(
         padding: "small",
         minHeight: "medium",
         cursor: "pointer",
-        className: `justify-center gap-2  py-2 px-4 ${className}`,
+        className: cn("justify-center gap-2  py-2 px-4", className),
         ...props,
         children: [
           subHead && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react7.Fragment, { children: [
@@ -2453,7 +2693,9 @@ var CardTopic = (0, import_react7.forwardRef)(
               {
                 size: "xs",
                 weight: "medium",
-                className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+                className: cn(
+                  "text-text-950 leading-none tracking-normal text-center flex-none"
+                ),
                 children: [
                   Math.round(progress),
                   "%"
@@ -2487,7 +2729,10 @@ var CardPerformance = (0, import_react7.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `justify-between gap-2 ${actionVariant == "caret" ? "cursor-pointer" : ""} ${className}`,
+        className: cn(
+          actionVariant == "caret" ? "cursor-pointer" : "",
+          className
+        ),
         onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
         ...props,
         children: [
@@ -2545,15 +2790,15 @@ var CardResults = (0, import_react7.forwardRef)(
         layout: "horizontal",
         padding: "none",
         minHeight: "medium",
-        className: `items-center cursor-pointer pr-4 ${className}`,
+        className: cn("items-center cursor-pointer pr-4", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
-              className: `
-              flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl
-            `,
+              className: cn(
+                "flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl"
+              ),
               style: {
                 backgroundColor: color
               },
@@ -2563,10 +2808,10 @@ var CardResults = (0, import_react7.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
-              className: `
-            p-4 flex justify-between w-full h-full
-            ${isRow ? "flex-row items-center gap-2" : "flex-col"}
-          `,
+              className: cn(
+                "p-4 flex justify-between w-full h-full",
+                isRow ? "flex-row items-center gap-2" : "flex-col"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
@@ -2615,7 +2860,7 @@ var CardStatus = (0, import_react7.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "medium",
-        className: `items-center cursor-pointer ${className}`,
+        className: cn("items-center cursor-pointer", className),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
@@ -2647,7 +2892,10 @@ var CardSettings = (0, import_react7.forwardRef)(
         layout: "horizontal",
         padding: "small",
         minHeight: "none",
-        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        className: cn(
+          "border-none items-center gap-2 text-text-700",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
@@ -2667,15 +2915,19 @@ var CardSupport = (0, import_react7.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        className: cn(
+          "border-none items-center gap-2 text-text-700",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
-              className: `
-              w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"}  gap-2
-          `,
+              className: cn(
+                "w-full flex",
+                direction == "col" ? "flex-col" : "flex-row items-center"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex flex-row gap-1", children })
@@ -2710,7 +2962,7 @@ var CardForum = (0, import_react7.forwardRef)(
         padding: "medium",
         minHeight: "none",
         variant: "minimal",
-        className: `w-auto h-auto gap-3 ${className}`,
+        className: cn("w-auto h-auto gap-3", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2843,7 +3095,7 @@ var CardAudio = (0, import_react7.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `w-auto h-14 items-center gap-2 ${className}`,
+        className: cn("w-auto h-14 items-center gap-2", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3012,7 +3264,10 @@ var CardSimulado = (0, import_react7.forwardRef)(
         padding: "medium",
         minHeight: "none",
         cursor: "pointer",
-        className: `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200 ${className}`,
+        className: cn(
+          `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200`,
+          className
+        ),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
@@ -3075,7 +3330,9 @@ var CardTest = (0, import_react7.forwardRef)(
         {
           ref,
           type: "button",
-          className: `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim(),
+          className: cn(
+            `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim()
+          ),
           onClick: handleClick,
           onKeyDown: handleKeyDown,
           "aria-pressed": selected,
@@ -3119,7 +3376,7 @@ var CardTest = (0, import_react7.forwardRef)(
       "div",
       {
         ref,
-        className: `${baseClasses} ${className}`.trim(),
+        className: cn(`${baseClasses} ${className}`.trim()),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3184,16 +3441,16 @@ var CardSimulationHistory = (0, import_react7.forwardRef)(({ data, onSimulationC
     "div",
     {
       ref,
-      className: `w-full max-w-[992px] h-auto ${className}`,
+      className: cn("w-full max-w-[992px] h-auto", className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-0", children: [
         data.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
-            className: `
-                  flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-white
-                  ${sectionIndex === 0 ? "rounded-t-3xl" : ""}
-                `,
+            className: cn(
+              "flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-white",
+              sectionIndex === 0 ? "rounded-t-3xl" : ""
+            ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Text_default,
@@ -3213,10 +3470,10 @@ var CardSimulationHistory = (0, import_react7.forwardRef)(({ data, onSimulationC
                     padding: "medium",
                     minHeight: "none",
                     cursor: "pointer",
-                    className: `
-                          ${typeStyles.background} rounded-xl hover:shadow-soft-shadow-2 
-                          transition-shadow duration-200 h-auto min-h-[61px]
-                        `,
+                    className: cn(
+                      `${typeStyles.background} rounded-xl hover:shadow-soft-shadow-2 
+                          transition-shadow duration-200 h-auto min-h-[61px]`
+                    ),
                     onClick: () => onSimulationClick?.(simulation),
                     children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between items-center w-full gap-2", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
@@ -3264,19 +3521,236 @@ var CardSimulationHistory = (0, import_react7.forwardRef)(({ data, onSimulationC
   );
 });
 
-// src/components/Quiz/Quiz.tsx
+// src/components/ProgressCircle/ProgressCircle.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var SIZE_CLASSES8 = {
+  small: {
+    container: "w-[90px] h-[90px]",
+    // 90px circle from design specs
+    strokeWidth: 4,
+    // 4px stroke width - matches ProgressBar small (h-1)
+    textSize: "2xl",
+    // 24px for percentage (font-size: 24px)
+    textWeight: "medium",
+    // font-weight: 500
+    labelSize: "2xs",
+    // Will be overridden with custom 8px in className
+    labelWeight: "bold",
+    // font-weight: 700
+    spacing: "gap-0",
+    // Reduced gap between percentage and label for better spacing
+    contentWidth: "max-w-[50px]"
+    // Reduced width to fit text inside circle
+  },
+  medium: {
+    container: "w-[152px] h-[152px]",
+    // 151.67px ≈ 152px circle from design specs
+    strokeWidth: 8,
+    // 8px stroke width - matches ProgressBar medium (h-2)
+    textSize: "2xl",
+    // 24px for percentage (font-size: 24px)
+    textWeight: "medium",
+    // font-weight: 500
+    labelSize: "xs",
+    // 12px for status label (font-size: 12px)
+    labelWeight: "medium",
+    // font-weight: 500 (changed from bold)
+    spacing: "gap-1",
+    // 4px gap between percentage and label
+    contentWidth: "max-w-[90px]"
+    // Reduced width to fit text inside circle
+  }
+};
+var VARIANT_CLASSES3 = {
+  blue: {
+    background: "stroke-primary-100",
+    // Light blue background (#BBDCF7)
+    fill: "stroke-primary-700",
+    // Blue for activity progress (#2271C4)
+    textColor: "text-primary-700",
+    // Blue text color (#2271C4)
+    labelColor: "text-text-700"
+    // Gray text for label (#525252)
+  },
+  green: {
+    background: "stroke-background-300",
+    // Gray background (#D5D4D4 - matches design)
+    fill: "stroke-success-200",
+    // Green for performance (#84D3A2 - matches design)
+    textColor: "text-text-800",
+    // Dark gray text (#404040 - matches design)
+    labelColor: "text-text-600"
+    // Medium gray text for label (#737373 - matches design)
+  }
+};
+var ProgressCircle = ({
+  value,
+  max = 100,
+  size = "small",
+  variant = "blue",
+  label,
+  showPercentage = true,
+  className = "",
+  labelClassName = "",
+  percentageClassName = ""
+}) => {
+  const safeValue = isNaN(value) ? 0 : value;
+  const clampedValue = Math.max(0, Math.min(safeValue, max));
+  const percentage = max === 0 ? 0 : clampedValue / max * 100;
+  const sizeClasses = SIZE_CLASSES8[size];
+  const variantClasses = VARIANT_CLASSES3[variant];
+  const radius = size === "small" ? 37 : 64;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const center = size === "small" ? 45 : 76;
+  const svgSize = size === "small" ? 90 : 152;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative flex flex-col items-center justify-center",
+        sizeClasses.container,
+        "rounded-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "svg",
+          {
+            className: "absolute inset-0 transform -rotate-90",
+            width: svgSize,
+            height: svgSize,
+            viewBox: `0 0 ${svgSize} ${svgSize}`,
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: sizeClasses.strokeWidth,
+                  className: cn(variantClasses.background, "rounded-lg")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: sizeClasses.strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset,
+                  className: cn(
+                    variantClasses.fill,
+                    "transition-all duration-500 ease-out shadow-soft-shadow-3 rounded-lg"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "progress",
+          {
+            value: clampedValue,
+            max,
+            "aria-label": typeof label === "string" ? label : "Progress",
+            className: "absolute opacity-0 w-0 h-0"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: cn(
+              "relative z-10 flex flex-col items-center justify-center",
+              sizeClasses.spacing,
+              sizeClasses.contentWidth
+            ),
+            children: [
+              showPercentage && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                Text_default,
+                {
+                  size: sizeClasses.textSize,
+                  weight: sizeClasses.textWeight,
+                  className: cn(
+                    "text-center w-full",
+                    variantClasses.textColor,
+                    percentageClassName
+                  ),
+                  children: [
+                    Math.round(percentage),
+                    "%"
+                  ]
+                }
+              ),
+              label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Text_default,
+                {
+                  as: "span",
+                  size: sizeClasses.labelSize,
+                  weight: sizeClasses.labelWeight,
+                  className: cn(
+                    variantClasses.labelColor,
+                    "text-center uppercase tracking-wide truncate w-full",
+                    labelClassName
+                  ),
+                  children: label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ProgressCircle_default = ProgressCircle;
+
+// src/components/Quiz/Quiz.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Quiz = (0, import_react8.forwardRef)(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ref,
-      className: `w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6 ${className}`,
+      className: cn(
+        "w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6",
+        className
+      ),
       ...props,
       children
     }
   );
 });
+var QuizHeaderResult = (0, import_react8.forwardRef)(
+  ({ className, ...props }, ref) => {
+    const { getCurrentQuestion, getCurrentAnswer } = useQuizStore();
+    const currentQuestion = getCurrentQuestion();
+    const userAnswer = getCurrentAnswer();
+    const isCorrect = userAnswer === currentQuestion?.correctOptionId;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-row items-center gap-10 p-3.5 rounded-xl",
+          isCorrect ? "bg-success-background" : "bg-error-background",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Resultado" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-700 text-md", children: isCorrect ? "\u{1F389} Parab\xE9ns!!" : "N\xE3o foi dessa vez..." })
+        ]
+      }
+    );
+  }
+);
 var QuizTitle = (0, import_react8.forwardRef)(
   ({ className, ...props }, ref) => {
     const {
@@ -3289,18 +3763,21 @@ var QuizTitle = (0, import_react8.forwardRef)(
     } = useQuizStore();
     const totalQuestions = getTotalQuestions();
     const quizTitle = getQuizTitle();
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         ref,
-        className: `flex flex-row justify-center items-center relative p-2 ${className}`,
+        className: cn(
+          "flex flex-row justify-center items-center relative p-2",
+          className
+        ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex flex-col gap-2 text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-text-950 font-bold text-md", children: quizTitle }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-text-600 text-xs", children: totalQuestions > 0 ? `${currentQuestionIndex + 1} de ${totalQuestions}` : "0 de 0" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex flex-col gap-2 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-950 font-bold text-md", children: quizTitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-600 text-xs", children: totalQuestions > 0 ? `${currentQuestionIndex + 1} de ${totalQuestions}` : "0 de 0" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute right-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge_default, { variant: "outlined", action: "info", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react6.Clock, {}), children: isStarted ? formatTime(timeElapsed) : "00:00" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "absolute right-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge_default, { variant: "outlined", action: "info", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react6.Clock, {}), children: isStarted ? formatTime(timeElapsed) : "00:00" }) })
         ]
       }
     );
@@ -3309,7 +3786,7 @@ var QuizTitle = (0, import_react8.forwardRef)(
 var QuizHeader = () => {
   const { getCurrentQuestion } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     HeaderAlternative,
     {
       title: currentQuestion ? `Quest\xE3o ${currentQuestion.id}` : "Quest\xE3o",
@@ -3319,36 +3796,52 @@ var QuizHeader = () => {
   );
 };
 var QuizContent = (0, import_react8.forwardRef)(({ type = "Alternativas", children, className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-4 pb-2 pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-bold text-lg text-text-950", children: type }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-4 pb-2 pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold text-lg text-text-950", children: type }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
-        className: `rounded-t-xl bg-background px-4 pt-4 pb-[80px] h-full flex flex-col gap-4 mb-auto ${className}`,
+        className: cn(
+          "rounded-t-xl px-4 pt-4 pb-[80px] h-full flex flex-col gap-4 mb-auto",
+          className
+        ),
         ...props,
         children
       }
     )
   ] });
 });
-var QuizAlternative = () => {
+var QuizAlternative = ({ variant = "default" }) => {
   const { getCurrentQuestion, selectAnswer, getCurrentAnswer } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
   const currentAnswer = getCurrentAnswer();
-  const alternatives = currentQuestion?.options?.map((option) => ({
-    label: option.option,
-    value: option.id
-  }));
+  const alternatives = currentQuestion?.options?.map((option) => {
+    let status = "neutral" /* NEUTRAL */;
+    if (variant === "result") {
+      if (option.id === currentQuestion.correctOptionId) {
+        status = "correct" /* CORRECT */;
+      } else if (currentAnswer === option.id && option.id !== currentQuestion.correctOptionId) {
+        status = "incorrect" /* INCORRECT */;
+      }
+    }
+    return {
+      label: option.option,
+      value: option.id,
+      status
+    };
+  });
   if (!alternatives)
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "N\xE3o h\xE1 Alternativas" }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: "N\xE3o h\xE1 Alternativas" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     AlternativesList,
     {
+      mode: variant === "default" ? "interactive" : "readonly",
       name: `question-${currentQuestion?.id || "1"}`,
-      layout: "default",
+      layout: "compact",
       alternatives,
       value: currentAnswer,
+      selectedValue: currentAnswer,
       onValueChange: (value) => {
         if (currentQuestion) {
           selectAnswer(currentQuestion.id, value);
@@ -3365,18 +3858,11 @@ var QuizQuestionList = ({
   const {
     getQuestionsGroupedBySubject,
     goToQuestion,
-    isQuestionAnswered,
-    isQuestionSkipped
+    getQuestionStatusFromUserAnswers
   } = useQuizStore();
   const groupedQuestions = getQuestionsGroupedBySubject();
   const getQuestionStatus = (questionId) => {
-    if (isQuestionSkipped(questionId)) {
-      return "skipped";
-    }
-    if (isQuestionAnswered(questionId)) {
-      return "answered";
-    }
-    return "unanswered";
+    return getQuestionStatusFromUserAnswers(questionId);
   };
   const filteredGroupedQuestions = Object.entries(groupedQuestions).reduce(
     (acc, [subjectId, questions]) => {
@@ -3400,8 +3886,8 @@ var QuizQuestionList = ({
     {}
   );
   const getQuestionIndex = (questionId) => {
-    const { bySimulado, byAtividade, byAula } = useQuizStore.getState();
-    const quiz = bySimulado ?? byAtividade ?? byAula;
+    const { bySimulated, byActivity, byQuestionary } = useQuizStore.getState();
+    const quiz = bySimulated ?? byActivity ?? byQuestionary;
     if (!quiz) return 0;
     const index = quiz.questions.findIndex((q) => q.id === questionId);
     return index + 1;
@@ -3411,21 +3897,21 @@ var QuizQuestionList = ({
       case "answered":
         return "Respondida";
       case "skipped":
-        return "Pulada";
+        return "N\xE3o respondida";
       default:
         return "Em branco";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-6 px-4", children: Object.entries(filteredGroupedQuestions).map(
-    ([subjectId, questions]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "pt-6 pb-4 flex flex-row gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-primary-500 p-1 rounded-sm flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react6.BookOpen, { size: 17, className: "text-white" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-text-800 font-bold text-lg", children: subjectId })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-6 px-4", children: Object.entries(filteredGroupedQuestions).map(
+    ([subjectId, questions]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "pt-6 pb-4 flex flex-row gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-primary-500 p-1 rounded-sm flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react6.BookOpen, { size: 17, className: "text-white" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-800 font-bold text-lg", children: subjectId })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "flex flex-col gap-2", children: questions.map((question) => {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex flex-col gap-2", children: questions.map((question) => {
         const status = getQuestionStatus(question.id);
         const questionNumber = getQuestionIndex(question.id);
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           CardStatus,
           {
             header: `Quest\xE3o ${questionNumber.toString().padStart(2, "0")}`,
@@ -3452,14 +3938,14 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
     getCurrentAnswer,
     skipQuestion,
     getCurrentQuestion,
-    isQuestionSkipped
+    getQuestionStatusFromUserAnswers
   } = useQuizStore();
   const totalQuestions = getTotalQuestions();
   const isFirstQuestion = currentQuestionIndex === 0;
   const isLastQuestion = currentQuestionIndex === totalQuestions - 1;
   const currentAnswer = getCurrentAnswer();
   const currentQuestion = getCurrentQuestion();
-  const isCurrentQuestionSkipped = currentQuestion ? isQuestionSkipped(currentQuestion.id) : false;
+  const isCurrentQuestionSkipped = currentQuestion ? getQuestionStatusFromUserAnswers(currentQuestion.id) === "skipped" : false;
   const [alertDialogOpen, setAlertDialogOpen] = (0, import_react8.useState)(false);
   const [modalResultOpen, setModalResultOpen] = (0, import_react8.useState)(false);
   const [modalNavigateOpen, setModalNavigateOpen] = (0, import_react8.useState)(false);
@@ -3467,24 +3953,27 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
   const unansweredQuestions = getUnansweredQuestionsFromUserAnswers();
   const userAnswers = getUserAnswers();
   const allQuestions = getTotalQuestions();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "footer",
       {
         ref,
-        className: `w-full px-2 bg-background lg:max-w-[1000px] not-lg:max-w-[calc(100vw-32px)] border-t border-border-50 fixed bottom-0 min-h-[80px] flex flex-row justify-between items-center ${className}`,
+        className: cn(
+          "w-full px-2 bg-background lg:max-w-[1000px] not-lg:max-w-[calc(100vw-32px)] border-t border-border-50 fixed bottom-0 min-h-[80px] flex flex-row justify-between items-center",
+          className
+        ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               IconButton_default,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react6.SquaresFour, { size: 24, className: "text-text-950" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react6.SquaresFour, { size: 24, className: "text-text-950" }),
                 size: "md",
                 onClick: () => setModalNavigateOpen(true)
               }
             ),
-            isFirstQuestion ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            isFirstQuestion ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Button_default,
               {
                 variant: "outline",
@@ -3495,13 +3984,13 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
                 },
                 children: "Pular"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Button_default,
               {
                 size: "medium",
                 variant: "link",
                 action: "primary",
-                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react6.CaretLeft, { size: 18 }),
+                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react6.CaretLeft, { size: 18 }),
                 onClick: () => {
                   goToPreviousQuestion();
                 },
@@ -3509,7 +3998,7 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
               }
             )
           ] }),
-          !isFirstQuestion && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          !isFirstQuestion && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Button_default,
             {
               size: "small",
@@ -3522,7 +4011,7 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
               children: "Pular"
             }
           ),
-          isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Button_default,
             {
               size: "medium",
@@ -3538,13 +4027,13 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
               },
               children: "Finalizar"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Button_default,
             {
               size: "medium",
               variant: "link",
               action: "primary",
-              iconRight: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react6.CaretRight, { size: 18 }),
+              iconRight: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react6.CaretRight, { size: 18 }),
               disabled: !currentAnswer && !isCurrentQuestionSkipped,
               onClick: () => {
                 goToNextQuestion();
@@ -3555,7 +4044,7 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       AlertDialog,
       {
         isOpen: alertDialogOpen,
@@ -3569,7 +4058,7 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Modal_default,
       {
         isOpen: modalResultOpen,
@@ -3579,8 +4068,8 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
         closeOnEscape: false,
         hideCloseButton: true,
         size: "md",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col w-full h-full items-center justify-center gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col w-full h-full items-center justify-center gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "img",
             {
               src: simulated_result_default,
@@ -3588,9 +4077,9 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
               className: "w-[282px] h-auto object-cover"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2 text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-text-950 font-bold text-lg", children: "Voc\xEA concluiu o simulado!" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-text-500 font-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-text-950 font-bold text-lg", children: "Voc\xEA concluiu o simulado!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "text-text-500 font-sm", children: [
               "Voc\xEA acertou",
               " ",
               userAnswers.filter(
@@ -3602,8 +4091,8 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
               " quest\xF5es."
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "px-6 flex flex-row items-center gap-2 w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "px-6 flex flex-row items-center gap-2 w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Button_default,
               {
                 variant: "outline",
@@ -3613,31 +4102,31 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
                 children: "Ir para simulados"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default, { className: "w-full", onClick: onDetailResult, children: "Detalhar resultado" })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button_default, { className: "w-full", onClick: onDetailResult, children: "Detalhar resultado" })
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Modal_default,
       {
         isOpen: modalNavigateOpen,
         onClose: () => setModalNavigateOpen(false),
         title: "Quest\xF5es",
         size: "lg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col w-full h-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-row justify-between items-center py-6 pt-6 pb-4 border-b border-border-200", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Filtrar por" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "max-w-[266px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Select_default, { value: filterType, onValueChange: setFilterType, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { variant: "rounded", className: "max-w-[266px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, { placeholder: "Selecione uma op\xE7\xE3o" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SelectContent, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: "all", children: "Todas" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: "unanswered", children: "Em branco" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: "answered", children: "Respondidas" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col w-full h-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-row justify-between items-center py-6 pt-6 pb-4 border-b border-border-200", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Filtrar por" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "max-w-[266px]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Select_default, { value: filterType, onValueChange: setFilterType, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectTrigger, { variant: "rounded", className: "max-w-[266px]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, { placeholder: "Selecione uma op\xE7\xE3o" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SelectContent, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value: "all", children: "Todas" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value: "unanswered", children: "Em branco" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value: "answered", children: "Respondidas" })
               ] })
             ] }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col gap-2 not-lg:h-[calc(100vh-200px)] lg:max-h-[687px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-2 not-lg:h-[calc(100vh-200px)] lg:max-h-[687px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             QuizQuestionList,
             {
               filterType,
@@ -3649,6 +4138,223 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
     )
   ] });
 });
+var QuizResultHeaderTitle = (0, import_react8.forwardRef)(({ className, ...props }, ref) => {
+  const { bySimulated } = useQuizStore();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-row pt-4 justify-between", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: "Resultado" }),
+        bySimulated && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge_default, { variant: "solid", action: "info", children: bySimulated.category })
+      ]
+    }
+  );
+});
+var QuizResultTitle = (0, import_react8.forwardRef)(({ className, ...props }, ref) => {
+  const { getQuizTitle } = useQuizStore();
+  const quizTitle = getQuizTitle();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "p",
+    {
+      className: cn("pt-6 pb-4 text-text-950 font-bold text-lg", className),
+      ref,
+      ...props,
+      children: quizTitle
+    }
+  );
+});
+var QuizResultPerformance = (0, import_react8.forwardRef)(
+  ({ ...props }, ref) => {
+    const {
+      getTotalQuestions,
+      timeElapsed,
+      formatTime,
+      bySimulated,
+      byActivity,
+      byQuestionary
+    } = useQuizStore();
+    const totalQuestions = getTotalQuestions();
+    const quiz = bySimulated || byActivity || byQuestionary;
+    let correctAnswers = 0;
+    let correctEasyAnswers = 0;
+    let correctMediumAnswers = 0;
+    let correctDifficultAnswers = 0;
+    let totalEasyQuestions = 0;
+    let totalMediumQuestions = 0;
+    let totalDifficultQuestions = 0;
+    if (quiz) {
+      quiz.questions.forEach((question) => {
+        const userAnswer = question.answerKey;
+        const isCorrect = userAnswer && userAnswer === question.correctOptionId;
+        if (isCorrect) {
+          correctAnswers++;
+        }
+        if (question.difficulty === "FACIL" /* FACIL */) {
+          totalEasyQuestions++;
+          if (isCorrect) {
+            correctEasyAnswers++;
+          }
+        } else if (question.difficulty === "MEDIO" /* MEDIO */) {
+          totalMediumQuestions++;
+          if (isCorrect) {
+            correctMediumAnswers++;
+          }
+        } else if (question.difficulty === "DIFICIL" /* DIFICIL */) {
+          totalDifficultQuestions++;
+          if (isCorrect) {
+            correctDifficultAnswers++;
+          }
+        }
+      });
+    }
+    const percentage = totalQuestions > 0 ? Math.round(correctAnswers / totalQuestions * 100) : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: "flex flex-row gap-6 p-6 rounded-xl bg-background justify-between",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ProgressCircle_default,
+              {
+                size: "medium",
+                variant: "green",
+                value: percentage,
+                showPercentage: false,
+                label: ""
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1 mb-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react6.Clock, { size: 12, weight: "regular", className: "text-text-800" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-2xs font-medium text-text-800", children: formatTime(timeElapsed) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-2xl font-medium text-text-800 leading-7", children: [
+                correctAnswers,
+                " de ",
+                totalQuestions
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-2xs font-medium text-text-600 mt-1", children: "Corretas" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4 w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ProgressBar_default,
+              {
+                className: "w-full",
+                layout: "stacked",
+                variant: "green",
+                value: correctEasyAnswers,
+                max: totalEasyQuestions,
+                label: "F\xE1ceis",
+                showHitCount: true,
+                labelClassName: "text-base font-medium text-text-800 leading-none",
+                percentageClassName: "text-xs font-medium leading-[14px] text-right"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ProgressBar_default,
+              {
+                className: "w-full",
+                layout: "stacked",
+                variant: "green",
+                value: correctMediumAnswers,
+                max: totalMediumQuestions,
+                label: "M\xE9dias",
+                showHitCount: true,
+                labelClassName: "text-base font-medium text-text-800 leading-none",
+                percentageClassName: "text-xs font-medium leading-[14px] text-right"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ProgressBar_default,
+              {
+                className: "w-full",
+                layout: "stacked",
+                variant: "green",
+                value: correctDifficultAnswers,
+                max: totalDifficultQuestions,
+                label: "Dif\xEDceis",
+                showHitCount: true,
+                labelClassName: "text-base font-medium text-text-800 leading-none",
+                percentageClassName: "text-xs font-medium leading-[14px] text-right"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var QuizListResult = (0, import_react8.forwardRef)(({ className, onSubjectClick, ...props }, ref) => {
+  const { getQuestionsGroupedBySubject, isQuestionAnswered } = useQuizStore();
+  const groupedQuestions = getQuestionsGroupedBySubject();
+  const subjectsStats = Object.entries(groupedQuestions).map(
+    ([subjectId, questions]) => {
+      let correct = 0;
+      let incorrect = 0;
+      questions.forEach((question) => {
+        if (isQuestionAnswered(question.id)) {
+          const userAnswer = question.answerKey;
+          if (userAnswer === question.correctOptionId) {
+            correct++;
+          } else {
+            incorrect++;
+          }
+        }
+      });
+      return {
+        subject: subjectId,
+        correct,
+        incorrect,
+        total: questions.length
+      };
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { ref, className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Mat\xE9rias" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex flex-col gap-2", children: subjectsStats.map((subject) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      CardResults,
+      {
+        onClick: () => onSubjectClick?.(subject.subject),
+        className: "max-w-full",
+        header: subject.subject,
+        correct_answers: subject.correct,
+        incorrect_answers: subject.incorrect,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react6.Book, { size: 20 }),
+        direction: "row"
+      }
+    ) }, subject.subject)) })
+  ] });
+});
+var QuizListResultByMateria = ({
+  subject,
+  onQuestionClick
+}) => {
+  const { getQuestionsGroupedBySubject } = useQuizStore();
+  const groupedQuestions = getQuestionsGroupedBySubject();
+  const answeredQuestions = groupedQuestions[subject] || [];
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-row pt-4 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: subject }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "flex flex-col ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Resultado das quest\xF5es" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex flex-col gap-2 pt-4", children: answeredQuestions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        CardStatus,
+        {
+          className: "max-w-full",
+          header: `Quest\xE3o ${question.id}`,
+          status: question.answerKey === question.correctOptionId ? "correct" : "incorrect",
+          onClick: () => onQuestionClick?.(question)
+        }
+      ) }, question.id)) })
+    ] })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Quiz,
@@ -3656,7 +4362,13 @@ var QuizFooter = (0, import_react8.forwardRef)(({ className, onGoToSimulated, on
   QuizContent,
   QuizFooter,
   QuizHeader,
+  QuizHeaderResult,
+  QuizListResult,
+  QuizListResultByMateria,
   QuizQuestionList,
+  QuizResultHeaderTitle,
+  QuizResultPerformance,
+  QuizResultTitle,
   QuizTitle
 });
 //# sourceMappingURL=index.js.map