91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import AnswerResultLine from "@/components/game/AnswerResultLine";
|
|
import type {
|
|
VariableGradeResult,
|
|
VariableParenthesisProblem,
|
|
VariableParenthesisTerm,
|
|
} from "@/lib/engine/variable-types";
|
|
import { formatVariableTermLatex } from "@/lib/engine/variable-parenthesis";
|
|
|
|
interface VariableFeedbackPanelProps {
|
|
result: VariableGradeResult;
|
|
problem: VariableParenthesisProblem;
|
|
isLastProblem: boolean;
|
|
onNext: () => void;
|
|
}
|
|
|
|
function formatSignedNumber(value: number) {
|
|
return value < 0 ? `(${value})` : `${value}`;
|
|
}
|
|
|
|
function formatSignedTerm(term: VariableParenthesisTerm, sign: 1 | -1) {
|
|
const coefficient = term.coefficient * sign;
|
|
|
|
return formatVariableTermLatex({ ...term, coefficient });
|
|
}
|
|
|
|
export default function VariableFeedbackPanel({
|
|
result,
|
|
problem,
|
|
isLastProblem,
|
|
onNext,
|
|
}: VariableFeedbackPanelProps) {
|
|
const nextButtonRef = useRef<HTMLButtonElement>(null);
|
|
const signedTerms = [
|
|
formatSignedTerm(problem.firstTerm, 1),
|
|
formatSignedTerm(problem.secondTerm, problem.operator === "-" ? -1 : 1),
|
|
] as const;
|
|
const feedbackItems = signedTerms.map((termLatex, index) => {
|
|
const termIndex = index as 0 | 1;
|
|
const userAnswer = result.userAnswer[termIndex];
|
|
const correctAnswer = result.correctAnswer[termIndex];
|
|
|
|
return {
|
|
formulaLatex: `${formatSignedNumber(problem.multiplier)}\\times ${termLatex}`,
|
|
userAnswerLatex: userAnswer?.latex ?? "?",
|
|
correctAnswerLatex: correctAnswer.latex,
|
|
correct: userAnswer?.coefficient === correctAnswer.coefficient,
|
|
};
|
|
});
|
|
|
|
useEffect(() => {
|
|
nextButtonRef.current?.focus();
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={`rounded-md p-6 shadow-sm ring-1 ${
|
|
result.correct
|
|
? "bg-emerald-50 text-emerald-950 ring-emerald-200"
|
|
: "bg-red-50 text-red-950 ring-red-200"
|
|
}`}
|
|
>
|
|
<p className="text-lg font-bold">
|
|
{result.correct ? "정답입니다." : "오답입니다."}
|
|
</p>
|
|
<ul className="mt-5 space-y-3">
|
|
{feedbackItems.map((item, index) => (
|
|
<AnswerResultLine
|
|
key={index}
|
|
expressionLatex={item.formulaLatex}
|
|
userAnswerLatex={item.userAnswerLatex}
|
|
correctAnswerLatex={item.correctAnswerLatex}
|
|
correct={item.correct}
|
|
/>
|
|
))}
|
|
</ul>
|
|
<button
|
|
ref={nextButtonRef}
|
|
type="button"
|
|
onClick={onNext}
|
|
className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
|
|
>
|
|
{isLastProblem ? "결과 보기" : "다음 문제"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|