jisangs/math-quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

문제 풀이 화면의 입력 항 진행 상태 표시 방법 개선

Browse Source
This commit is contained in:
Jisang Park
2026-05-30 18:39:22 +09:00
parent 282e4d64cf
commit 33e065301f
4 changed files with 151 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(game)/number-parentheses/play/NumberPlayClient.tsx
+10 -5
View File
@@ -5,11 +5,11 @@ import { useCallback, useEffect, useRef, useState } from "react";
import type { FormEvent } from "react";
import { flushSync } from "react-dom";
import AnswerForm from "@/components/game/AnswerForm";
import NumberAnswerForm from "@/components/game/NumberAnswerForm";
import type {
ActiveAnswerInput,
AnswerFormHandle,
} from "@/components/game/AnswerForm";
NumberAnswerFormHandle,
} from "@/components/game/NumberAnswerForm";
import FeedbackPanel from "@/components/game/FeedbackPanel";
import ScoreSummary from "@/components/game/ScoreSummary";
import StageIndicator from "@/components/game/StageIndicator";
@@ -46,7 +46,7 @@ export default function NumberPlayClient({
const resetSession = useGameStore((state) => state.resetSession);
const problemCardRef = useRef<HTMLDivElement>(null);
const answerFormRef = useRef<AnswerFormHandle>(null);
const answerFormRef = useRef<NumberAnswerFormHandle>(null);
const [answerA, setAnswerA] = useState("");
const [answerB, setAnswerB] = useState("");
@@ -184,6 +184,10 @@ export default function NumberPlayClient({
const submitted = currentResult !== null;
const isLastProblem = session.currentIndex === session.problems.length - 1;
const pendingAnswerLabels: [string, string] = [
String(currentProblem.a),
String(currentProblem.operator === "-" ? -currentProblem.b : currentProblem.b),
];
return (
<main className="min-h-screen bg-slate-50 px-6 py-10 text-slate-950">
@@ -225,12 +229,13 @@ export default function NumberPlayClient({
</div>
{!submitted ? (
<AnswerForm
<NumberAnswerForm
ref={answerFormRef}
answerA={answerA}
answerB={answerB}
activeInput={activeInput}
error={inputError}
pendingAnswerLabels={pendingAnswerLabels}
onActiveInputChange={setActiveInput}
onAnswerAChange={setAnswerA}
onAnswerBChange={setAnswerB}
app/(game)/variable-parentheses/play/VariablePlayClient.tsx
+26 -10
View File
@@ -9,6 +9,7 @@ import VariableChoiceAnswerForm from "@/components/game/VariableChoiceAnswerForm
import VariableFeedbackPanel from "@/components/game/VariableFeedbackPanel";
import VariableScoreSummary from "@/components/game/VariableScoreSummary";
import KatexRenderer from "@/components/math/KatexRenderer";
import { formatVariableTermLatex } from "@/lib/engine/variable-parenthesis";
import {
useVariableGameStore,
type VariableProblemCount,
@@ -72,22 +73,27 @@ export default function VariablePlayClient({
}, [currentProblem?.key]);
function handleSelectChoice(termIndex: 0 | 1, choiceId: string) {
setSelectedChoiceIds((current) => {
const next: [string | null, string | null] = [...current];
next[termIndex] = choiceId;
return next;
});
const nextSelectedChoiceIds: [string | null, string | null] = [
...selectedChoiceIds,
];
nextSelectedChoiceIds[termIndex] = choiceId;
setSelectedChoiceIds(nextSelectedChoiceIds);
if (termIndex === 0) {
setActiveTermIndex(1);
}
return;
}
function handleSubmit() {
if (currentResult || !currentProblem) return;
if (selectedChoiceIds[0] === null || selectedChoiceIds[1] === null) return;
if (
nextSelectedChoiceIds[0] === null ||
nextSelectedChoiceIds[1] === null
) {
return;
}
submitAnswer({ selectedChoiceIds });
submitAnswer({ selectedChoiceIds: nextSelectedChoiceIds });
}
function handleNextProblem() {
@@ -134,6 +140,16 @@ export default function VariablePlayClient({
const submitted = currentResult !== null;
const isLastProblem = session.currentIndex === session.problems.length - 1;
const pendingChoiceLabels: [string, string] = [
formatVariableTermLatex(currentProblem.firstTerm),
formatVariableTermLatex({
...currentProblem.secondTerm,
coefficient:
currentProblem.operator === "-"
? -currentProblem.secondTerm.coefficient
: currentProblem.secondTerm.coefficient,
}),
];
return (
<main className="min-h-screen bg-slate-50 px-6 py-10 text-slate-950">
@@ -176,8 +192,8 @@ export default function VariablePlayClient({
choices={currentProblem.choices}
selectedChoiceIds={selectedChoiceIds}
activeTermIndex={activeTermIndex}
pendingChoiceLabels={pendingChoiceLabels}
onSelectChoice={handleSelectChoice}
onSubmit={handleSubmit}
/>
) : null}
components/game/AnswerForm.tsx → components/game/NumberAnswerForm.tsx
+54 -36
View File
@@ -12,6 +12,7 @@ import {
import type { FocusEvent, FormEvent } from "react";
import { DESKTOP_INPUT_DEVICE_QUERY } from "@/lib/input-device";
import KatexRenderer from "@/components/math/KatexRenderer";
export type ActiveAnswerInput = 0 | 1;
@@ -30,15 +31,16 @@ const KEYPAD_KEYS = [
"0",
];
export interface AnswerFormHandle {
export interface NumberAnswerFormHandle {
focusInput: () => void;
}
interface AnswerFormProps {
interface NumberAnswerFormProps {
answerA: string;
answerB: string;
activeInput: ActiveAnswerInput;
error: string;
pendingAnswerLabels: [string, string];
onAnswerAChange: (value: string) => void;
onAnswerBChange: (value: string) => void;
onActiveInputChange: (input: ActiveAnswerInput) => void;
@@ -47,12 +49,16 @@ interface AnswerFormProps {
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
}
const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function AnswerForm(
const NumberAnswerForm = forwardRef<
NumberAnswerFormHandle,
NumberAnswerFormProps
>(function NumberAnswerForm(
{
answerA,
answerB,
activeInput,
error,
pendingAnswerLabels,
onAnswerAChange,
onAnswerBChange,
onActiveInputChange,
@@ -71,6 +77,7 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
const activeAnswer = activeInput === 0 ? answerA : answerB;
const activeLabel = activeInput === 0 ? "첫째 항" : "둘째 항";
const activeDescription = `${activeLabel}의 답을 입력하세요.`;
const activeEnterKeyHint = activeInput === 0 ? "next" : "done";
const activeAnswerChange =
activeInput === 0 ? onAnswerAChange : onAnswerBChange;
@@ -210,13 +217,53 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8"
>
<div className="flex flex-col gap-4">
<div>
<div className="flex flex-wrap items-center justify-between gap-3">
<label
htmlFor={inputId}
className="mb-2 block text-sm font-semibold text-slate-700"
className="text-sm font-semibold text-slate-500"
>
{activeLabel}
{activeDescription}
</label>
<ol
className="flex min-w-40 items-center gap-1"
aria-label="입력 항 진행 상태"
>
{answerButtons.map((button) => {
const selected = activeInput === button.index;
const completed = button.value !== "";
const displayValue =
button.value || pendingAnswerLabels[button.index];
return (
<li
key={button.index}
className="min-w-0 flex-1"
aria-label={`${button.label} ${
completed ? `입력값 ${button.value}` : "미입력"
}${selected ? ", 현재 입력 중" : ""}`}
>
<span
className={`block truncate text-center text-xs font-bold ${
selected || completed ? "text-emerald-800" : "text-slate-500"
}`}
>
<KatexRenderer latex={displayValue} />
</span>
<span
className={`mt-1 block h-1.5 rounded-full ${
completed
? "bg-emerald-700"
: selected
? "bg-emerald-300 ring-1 ring-emerald-700"
: "bg-slate-200"
}`}
/>
</li>
);
})}
</ol>
</div>
<input
id={inputId}
ref={inputRef}
@@ -237,35 +284,6 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
pattern="-?[0-9]*(\.[0-9]*)?"
className="h-12 w-full min-w-0 rounded-md border border-slate-300 bg-white px-3 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 sm:px-4"
/>
</div>
<div
className="inline-flex w-fit max-w-full gap-1 rounded-md border border-slate-300 bg-white p-1 shadow-sm"
role="group"
aria-label="입력 항 선택"
>
{answerButtons.map((button) => {
const selected = activeInput === button.index;
return (
<button
key={button.index}
type="button"
onPointerDown={(event) => event.preventDefault()}
onClick={() => moveToInput(button.index, true)}
aria-pressed={selected}
aria-label={`${button.label} 다시 입력`}
className={`inline-flex h-10 min-w-20 items-center justify-center rounded px-3 text-base font-semibold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 ${
selected
? "bg-emerald-700 text-white"
: "text-slate-700 hover:bg-slate-100"
}`}
>
{button.value || "?"}
</button>
);
})}
</div>
{keypadOpen && !desktopInputDevice ? (
<div
@@ -333,4 +351,4 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
);
});
export default AnswerForm;
export default NumberAnswerForm;
components/game/VariableChoiceAnswerForm.tsx
+40 -32
View File
@@ -9,31 +9,33 @@ interface VariableChoiceAnswerFormProps {
choices: [VariableTermChoice[], VariableTermChoice[]];
selectedChoiceIds: [string | null, string | null];
activeTermIndex: 0 | 1;
pendingChoiceLabels: [string, string];
onSelectChoice: (termIndex: 0 | 1, choiceId: string) => void;
onSubmit: () => void;
}
export default function VariableChoiceAnswerForm({
choices,
selectedChoiceIds,
activeTermIndex,
pendingChoiceLabels,
onSelectChoice,
onSubmit,
}: VariableChoiceAnswerFormProps) {
const firstChoiceRef = useRef<HTMLButtonElement>(null);
const submitButtonRef = useRef<HTMLButtonElement>(null);
const canSubmit = selectedChoiceIds[0] !== null && selectedChoiceIds[1] !== null;
const activeChoices = choices[activeTermIndex];
const activeChoices = [...choices[activeTermIndex]].sort(
(a, b) => a.coefficient - b.coefficient,
);
useEffect(() => {
firstChoiceRef.current?.focus();
}, [activeTermIndex]);
useEffect(() => {
if (canSubmit) {
submitButtonRef.current?.focus();
function getSelectedChoice(index: 0 | 1) {
const selectedChoiceId = selectedChoiceIds[index];
if (!selectedChoiceId) return null;
return choices[index].find((choice) => choice.id === selectedChoiceId) ?? null;
}
}, [canSubmit]);
return (
<div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200">
@@ -42,32 +44,48 @@ export default function VariableChoiceAnswerForm({
<p className="text-sm font-semibold text-slate-500">
{activeTermIndex === 0 ? "첫째 항" : "둘째 항"}을 고르세요.
</p>
<p className="mt-1 text-base text-slate-700">
괄호를 풀었을 때의 부호를 선택합니다.
</p>
</div>
<div
className="inline-flex gap-1 rounded-md border border-slate-300 bg-slate-50 p-1"
role="group"
<ol
className="flex min-w-40 items-center gap-1"
aria-label="입력 항 진행 상태"
>
{selectedChoiceIds.map((choiceId, index) => {
const selected = activeTermIndex === index;
const selectedChoice = getSelectedChoice(index as 0 | 1);
const completed = choiceId !== null && selectedChoice !== null;
return (
<span
<li
key={index}
className={`inline-flex h-9 min-w-16 items-center justify-center rounded px-3 text-sm font-bold ${
selected
? "bg-emerald-700 text-white"
: "bg-white text-slate-700"
className="min-w-0 flex-1"
aria-label={`${index + 1}항 ${
completed ? "선택 완료" : "미선택"
}${selected ? ", 현재 선택 중" : ""}`}
>
<span
className={`block truncate text-center text-xs font-bold ${
selected || completed ? "text-emerald-800" : "text-slate-500"
}`}
>
{choiceId ? `${index + 1}항 완료` : `${index + 1}항`}
{completed ? (
<KatexRenderer latex={selectedChoice.latex} />
) : (
<KatexRenderer latex={pendingChoiceLabels[index]} />
)}
</span>
<span
className={`mt-1 block h-1.5 rounded-full ${
completed
? "bg-emerald-700"
: selected
? "bg-emerald-300 ring-1 ring-emerald-700"
: "bg-slate-200"
}`}
/>
</li>
);
})}
</div>
</ol>
</div>
<div
@@ -96,16 +114,6 @@ export default function VariableChoiceAnswerForm({
);
})}
</div>
<button
ref={submitButtonRef}
type="button"
onClick={onSubmit}
disabled={!canSubmit}
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 disabled:cursor-not-allowed disabled:bg-slate-300"
>
정답 확인
</button>
</div>
);
}