diff --git a/app/(game)/play/PlayClient.tsx b/app/(game)/play/PlayClient.tsx
index e660acf..7af82aa 100644
--- a/app/(game)/play/PlayClient.tsx
+++ b/app/(game)/play/PlayClient.tsx
@@ -221,6 +221,8 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
);
diff --git a/components/game/AnswerResultLine.tsx b/components/game/AnswerResultLine.tsx
new file mode 100644
index 0000000..8e39e7f
--- /dev/null
+++ b/components/game/AnswerResultLine.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import KatexRenderer from "@/components/math/KatexRenderer";
+
+interface AnswerResultLineProps {
+ expressionLatex: string;
+ userAnswerLatex: string;
+ correctAnswerLatex: string;
+ correct: boolean;
+ prefix?: ReactNode;
+}
+
+export default function AnswerResultLine({
+ expressionLatex,
+ userAnswerLatex,
+ correctAnswerLatex,
+ correct,
+ prefix,
+}: AnswerResultLineProps) {
+ return (
+
+ {prefix}
+
+ =
+
+
+
+ {correct ? (
+
+ ○
+
+ ) : (
+ <>
+
+ ×
+
+
+ (
+
+
+
+ )
+
+ >
+ )}
+
+ );
+}
diff --git a/components/game/FeedbackPanel.tsx b/components/game/FeedbackPanel.tsx
index 63e2186..43578b6 100644
--- a/components/game/FeedbackPanel.tsx
+++ b/components/game/FeedbackPanel.tsx
@@ -2,7 +2,7 @@
import { useEffect, useRef } from "react";
-import KatexRenderer from "@/components/math/KatexRenderer";
+import AnswerResultLine from "@/components/game/AnswerResultLine";
import type { GradeResult, ParenthesisSignProblem } from "@/lib/engine/types";
interface FeedbackPanelProps {
@@ -53,49 +53,13 @@ export default function FeedbackPanel({
{feedbackItems.map((item, index) => (
- -
-
- =
-
-
-
- {item.correct ? (
-
- ○
-
- ) : (
- <>
-
- ×
-
-
- (
-
-
-
- )
-
- >
- )}
-
+ expressionLatex={item.formulaLatex}
+ userAnswerLatex={`${item.userAnswer}`}
+ correctAnswerLatex={`${item.correctAnswer}`}
+ correct={item.correct}
+ />
))}