analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
416 lines (414 loc) • 15.4 kB
JavaScript
import {
formatExamInfo
} from "./chunk-DDZDNGBU.mjs";
import {
CardResults,
CardStatus
} from "./chunk-R7FP73MH.mjs";
import {
ProgressCircle_default
} from "./chunk-5ZVOSDX4.mjs";
import {
ProgressBar_default
} from "./chunk-LDBWF6EA.mjs";
import {
Badge_default
} from "./chunk-OEW3ST4F.mjs";
import {
useTheme
} from "./chunk-HYVBZ5EV.mjs";
import {
Button_default
} from "./chunk-LAYB7IKW.mjs";
import {
cn,
getSubjectColorWithOpacity
} from "./chunk-53ICLDGS.mjs";
import {
useQuizStore
} from "./chunk-G7IP4VLI.mjs";
// src/components/Quiz/QuizResult.tsx
import { forwardRef, useEffect, useState } from "react";
import { ClockIcon } from "@phosphor-icons/react/dist/csr/Clock";
import { jsx, jsxs } from "react/jsx-runtime";
var QuizBadge = ({
subtype
}) => {
switch (subtype) {
case "PROVA" /* PROVA */:
return /* @__PURE__ */ jsx(Badge_default, { variant: "examsOutlined", action: "exam2", "data-testid": "quiz-badge", children: "Prova" });
case "ENEM_PROVA_1" /* ENEM_PROVA_1 */:
case "ENEM_PROVA_2" /* ENEM_PROVA_2 */:
return /* @__PURE__ */ jsx(Badge_default, { variant: "examsOutlined", action: "exam1", "data-testid": "quiz-badge", children: "Enem" });
case "VESTIBULAR" /* VESTIBULAR */:
return /* @__PURE__ */ jsx(Badge_default, { variant: "examsOutlined", action: "exam4", "data-testid": "quiz-badge", children: "Vestibular" });
case "SIMULADO" /* SIMULADO */:
case "SIMULADAO" /* SIMULADAO */:
case void 0:
return /* @__PURE__ */ jsx(Badge_default, { variant: "examsOutlined", action: "exam3", "data-testid": "quiz-badge", children: "Simulad\xE3o" });
default:
return /* @__PURE__ */ jsx(Badge_default, { variant: "solid", action: "info", "data-testid": "quiz-badge", children: subtype });
}
};
var QuizHeaderResult = forwardRef(
({ className, ...props }, ref) => {
const {
getQuestionResultByQuestionId,
getCurrentQuestion,
questionsResult
} = useQuizStore();
const [status, setStatus] = useState(void 0);
useEffect(() => {
const cq = getCurrentQuestion();
if (!cq) {
setStatus(void 0);
return;
}
const qr = getQuestionResultByQuestionId(cq.id);
setStatus(qr?.answerStatus);
}, [
getCurrentQuestion,
getQuestionResultByQuestionId,
getCurrentQuestion()?.id,
questionsResult
]);
const getClassesByAnswersStatus = () => {
if (status === void 0) {
return "bg-gray-100";
}
switch (status) {
case "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */:
return "bg-success-background";
case "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */:
return "bg-error-background";
case "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */:
return "bg-info-background";
default:
return "bg-error-background";
}
};
const getLabelByAnswersStatus = () => {
if (status === void 0) {
return "Carregando...";
}
switch (status) {
case "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */:
return "\u{1F389} Parab\xE9ns!!";
case "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */:
return "N\xE3o foi dessa vez...";
case "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */:
return "Avalia\xE7\xE3o pendente";
case "NAO_RESPONDIDO" /* NAO_RESPONDIDO */:
return "N\xE3o foi dessa vez...voc\xEA deixou a resposta em branco";
default:
return "N\xE3o foi dessa vez...voc\xEA deixou a resposta em branco";
}
};
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"flex flex-row items-center gap-10 p-3.5 rounded-xl mb-4",
getClassesByAnswersStatus(),
className
),
...props,
children: [
/* @__PURE__ */ jsx("p", { className: "text-text-950 font-bold text-lg", children: "Resultado" }),
/* @__PURE__ */ jsx("p", { className: "text-text-700 text-md", children: getLabelByAnswersStatus() })
]
}
);
}
);
var getRetryButtonLabel = (type) => {
switch (type) {
case "ATIVIDADE" /* ATIVIDADE */:
return "Refazer atividade";
case "QUESTIONARIO" /* QUESTIONARIO */:
return "Repetir question\xE1rio";
case "SIMULADO" /* SIMULADO */:
return "Repetir simulado";
default:
return "Refazer";
}
};
var QuizResultHeaderTitle = forwardRef(({ className, showBadge = true, onRepeat, canRetry, ...props }, ref) => {
const { quiz } = useQuizStore();
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"flex flex-row pt-4 justify-between items-center",
className
),
...props,
children: [
/* @__PURE__ */ jsx("p", { className: "text-text-950 font-bold text-2xl", children: "Resultado" }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-3 items-center", children: [
canRetry && onRepeat && /* @__PURE__ */ jsx(
Button_default,
{
variant: "solid",
action: "primary",
size: "medium",
onClick: onRepeat,
children: getRetryButtonLabel(quiz?.type)
}
),
showBadge && /* @__PURE__ */ jsx(QuizBadge, { subtype: quiz?.subtype || void 0 })
] })
]
}
);
});
var QuizResultTitle = forwardRef(({ className, ...props }, ref) => {
const { getQuizTitle } = useQuizStore();
const quizTitle = getQuizTitle();
return /* @__PURE__ */ jsx(
"p",
{
className: cn("pt-6 pb-4 text-text-950 font-bold text-lg", className),
ref,
...props,
children: quizTitle
}
);
});
var updateDifficultyStats = (stats, difficulty, isCorrect) => {
if (difficulty === "FACIL" /* FACIL */) {
stats.totalEasyQuestions++;
if (isCorrect) stats.correctEasyAnswers++;
} else if (difficulty === "MEDIO" /* MEDIO */) {
stats.totalMediumQuestions++;
if (isCorrect) stats.correctMediumAnswers++;
} else if (difficulty === "DIFICIL" /* DIFICIL */) {
stats.totalDifficultQuestions++;
if (isCorrect) stats.correctDifficultAnswers++;
}
};
var calculateAnswerStatistics = (answers) => {
const stats = {
correctAnswers: 0,
correctEasyAnswers: 0,
correctMediumAnswers: 0,
correctDifficultAnswers: 0,
totalEasyQuestions: 0,
totalMediumQuestions: 0,
totalDifficultQuestions: 0
};
for (const answer of answers) {
const isCorrect = answer.answerStatus === "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */;
if (isCorrect) {
stats.correctAnswers++;
}
updateDifficultyStats(stats, answer.difficultyLevel, isCorrect);
}
return stats;
};
var QuizResultPerformance = forwardRef(({ showDetails = true, ...props }, ref) => {
const {
getTotalQuestions,
formatTime,
getQuestionResultStatistics,
getQuestionResult
} = useQuizStore();
const totalQuestions = getTotalQuestions();
const questionResult = getQuestionResult();
const stats = questionResult ? calculateAnswerStatistics(questionResult.answers) : {
correctAnswers: 0,
correctEasyAnswers: 0,
correctMediumAnswers: 0,
correctDifficultAnswers: 0,
totalEasyQuestions: 0,
totalMediumQuestions: 0,
totalDifficultQuestions: 0
};
const percentage = totalQuestions > 0 ? Math.round(stats.correctAnswers / totalQuestions * 100) : 0;
const classesJustifyBetween = showDetails ? "justify-between" : "justify-center";
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"flex flex-row gap-6 p-6 rounded-xl bg-background",
classesJustifyBetween
),
ref,
...props,
children: [
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
ProgressCircle_default,
{
size: "medium",
variant: "green",
value: percentage,
showPercentage: false,
label: ""
}
),
/* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
showDetails && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
/* @__PURE__ */ jsx(ClockIcon, { size: 12, weight: "regular", className: "text-text-800" }),
/* @__PURE__ */ jsx("span", { className: "text-2xs font-medium text-text-800", children: formatTime(
(getQuestionResultStatistics()?.timeSpent ?? 0) * 60
) })
] }),
/* @__PURE__ */ jsxs("div", { className: "text-2xl font-medium text-text-800 leading-7", children: [
getQuestionResultStatistics()?.correctAnswers ?? "--",
" de",
" ",
totalQuestions
] }),
/* @__PURE__ */ jsx("div", { className: "text-2xs font-medium text-text-600 mt-1", children: "Corretas" })
] })
] }),
showDetails && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 w-full", children: [
/* @__PURE__ */ jsx(
ProgressBar_default,
{
className: "w-full",
layout: "stacked",
variant: "green",
value: stats.correctEasyAnswers,
max: stats.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__ */ jsx(
ProgressBar_default,
{
className: "w-full",
layout: "stacked",
variant: "green",
value: stats.correctMediumAnswers,
max: stats.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__ */ jsx(
ProgressBar_default,
{
className: "w-full",
layout: "stacked",
variant: "green",
value: stats.correctDifficultAnswers,
max: stats.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 = forwardRef(({ className, onSubjectClick, ...props }, ref) => {
const { getQuestionsGroupedBySubject } = useQuizStore();
const { isDark } = useTheme();
const groupedQuestions = getQuestionsGroupedBySubject();
const subjectsStats = Object.entries(groupedQuestions).map(
([subjectId, questions]) => {
let correct = 0;
let incorrect = 0;
for (const question of questions) {
if (question.answerStatus === "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */) {
correct++;
} else {
incorrect++;
}
}
return {
subject: {
name: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria",
id: subjectId,
color: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.color ?? "",
icon: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.icon ?? ""
},
correct,
incorrect,
total: questions.length
};
}
);
return /* @__PURE__ */ jsxs("section", { ref, className, ...props, children: [
/* @__PURE__ */ jsx("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Mat\xE9rias" }),
/* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: subjectsStats.map((subject) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
CardResults,
{
onClick: () => onSubjectClick?.(subject.subject.id),
className: "max-w-full",
header: subject.subject.name,
correct_answers: subject.correct,
incorrect_answers: subject.incorrect,
icon: subject.subject.icon || "Book",
color: getSubjectColorWithOpacity(subject.subject.color, isDark) || void 0,
direction: "row"
}
) }, subject.subject.id)) })
] });
});
var QuizListResultByMateria = ({
subject,
onQuestionClick,
subjectName
}) => {
const { getQuestionsGroupedBySubject, getQuestionIndex, quiz } = useQuizStore();
const groupedQuestions = getQuestionsGroupedBySubject();
const shouldShowExamInfo = quiz?.type === "SIMULADO" /* SIMULADO */;
const answeredQuestions = groupedQuestions[subject] || [];
const formattedQuestions = subject == "all" ? Object.values(groupedQuestions).flat() : answeredQuestions;
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx("div", { className: "flex flex-row pt-4 justify-between", children: /* @__PURE__ */ jsx("p", { className: "text-text-950 font-bold text-2xl", children: subjectName || formattedQuestions?.[0]?.knowledgeMatrix?.[0]?.subject?.name || "Sem mat\xE9ria" }) }),
/* @__PURE__ */ jsxs("section", { className: "flex flex-col ", children: [
/* @__PURE__ */ jsx("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Resultado das quest\xF5es" }),
/* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2 pt-4", children: formattedQuestions.map((question) => {
const questionId = "questionId" in question ? question.questionId : question.id;
const questionIndex = getQuestionIndex(questionId);
const examBoard = "examBoard" in question ? question.examBoard : null;
const examYear = "examYear" in question ? question.examYear : null;
const examInfo = shouldShowExamInfo ? formatExamInfo(examBoard, examYear) : "";
const questionTitle = `Quest\xE3o ${questionIndex.toString().padStart(2, "0")}`;
const header = examInfo ? `${questionTitle} ${examInfo}` : questionTitle;
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
CardStatus,
{
className: "max-w-full",
header,
status: (() => {
if (question.answerStatus === "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */)
return "correct";
if (question.answerStatus === "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */)
return "incorrect";
if (question.answerStatus === "NAO_RESPONDIDO" /* NAO_RESPONDIDO */)
return "unanswered";
if (question.answerStatus === "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */)
return "pending";
return void 0;
})(),
onClick: () => onQuestionClick?.(question)
}
) }, question.id);
}) })
] })
] });
};
export {
QuizHeaderResult,
QuizResultHeaderTitle,
QuizResultTitle,
QuizResultPerformance,
QuizListResult,
QuizListResultByMateria
};
//# sourceMappingURL=chunk-WOS6WBLO.mjs.map