[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","67bbdd4c89988191bea82b1c7d58dff0","versionInt","title","Arithmetic Practice App","type","code/react","content","import React, { useState, useEffect, useRef } from 'react';\n\n// Test Cases (High-level Behavior):\n// 1. Start the app => The first random question should appear.\n// 2. Answer a question incorrectly => The result displays \"不正解です。正解は...\" and \"次の問題へ\" button, no \"回答\" button.\n// 3. Answer a question correctly => The result displays \"正解\" and automatically moves on after 1.5 seconds.\n// 4. After 10 questions, show end screen => Display correct count, correct rate, and time.\n// 5. Clicking \"リスタート\" => Goes back to quiz mode.\n// 6. Multiplication uses '×' instead of '*'.\n// 7. After question loads, focus automatically on the input field.\n// 8. \"回答\" button is disabled if there's no input.\n// 9. After an incorrect answer, the input fields become disabled.\n\nexport default function ArithmeticPracticeApp() {\n const [screen, setScreen] = useState('start');\n const [num1, setNum1] = useState(0);\n const [num2, setNum2] = useState(0);\n const [operation, setOperation] = useState('+');\n const [userAnswer, setUserAnswer] = useState('');\n const [userAnswerQuotient, setUserAnswerQuotient] = useState('');\n const [userAnswerRemainder, setUserAnswerRemainder] = useState('');\n const [resultMessage, setResultMessage] = useState('');\n\n const [questionIndex, setQuestionIndex] = useState(0);\n const [correctCount, setCorrectCount] = useState(0);\n const [startTime, setStartTime] = useState(null);\n const [finalTime, setFinalTime] = useState(0);\n\n // Each question's record: { questionIndex, questionText, userAnswer, correctAnswer, correct }\n const [history, setHistory] = useState([]);\n\n // Whether the question has been answered\n const [answerSubmitted, setAnswerSubmitted] = useState(false);\n // Whether the last answer was correct\n const [lastAnswerCorrect, setLastAnswerCorrect] = useState(false);\n\n // Refs for focusing\n const singleInputRef = useRef(null);\n const quotientRef = useRef(null);\n\n // Use '×' in place of '*'\n const operations = ['+', '-', '*', '/'];\n\n function generateQuestion() {\n const op = operations[Math.floor(Math.random() * operations.length)];\n let a = Math.floor(Math.random() * 9) + 1; // 1..9\n let b = Math.floor(Math.random() * 9) + 1; // 1..9\n\n if (op === '-' && b > a) {\n // Avoid negative results\n [a, b] = [b, a];\n }\n\n setOperation(op);\n setNum1(a);\n setNum2(b);\n setUserAnswer('');\n setUserAnswerQuotient('');\n setUserAnswerRemainder('');\n setResultMessage('');\n setAnswerSubmitted(false);\n setLastAnswerCorrect(false);\n }\n\n useEffect(() => {\n if (screen === 'quiz') {\n generateQuestion();\n }\n }, [screen]);\n\n // Focus the correct input after each question is generated.\n // We'll use a separate effect that triggers whenever questionIndex changes.\n useEffect(() => {\n if (screen === 'quiz') {\n // Delay a tick to ensure the DOM is updated.\n setTimeout(() => {\n if (operation !== '/') {\n singleInputRef.current?.focus();\n } else {\n quotientRef.current?.focus();\n }\n }, 0);\n }\n }, [questionIndex, operation, screen]);\n\n const handleStart = () => {\n setScreen('quiz');\n setQuestionIndex(0);\n setCorrectCount(0);\n setHistory([]);\n setStartTime(new Date());\n };\n\n const checkAnswer = () => {\n if (answerSubmitted) return;\n\n let isCorrect = false;\n let correctAnswer = '';\n let questionText = '';\n\n setAnswerSubmitted(true);\n\n if (operation === '/') {\n const q = parseInt(userAnswerQuotient);\n const r = parseInt(userAnswerRemainder);\n if (isNaN(q) || isNaN(r)) {\n setResultMessage('整数で解答してください！');\n return;\n }\n questionText = `${num1} ÷ ${num2}`;\n correctAnswer = `商: ${Math.floor(num1 / num2)}, 余り: ${num1 % num2}`;\n if (num1 === num2 * q + r) {\n isCorrect = true;\n setResultMessage('正解です！');\n } else {\n setResultMessage(`不正解です。正解は ${correctAnswer} です。`);\n }\n } else {\n // +, -, * => * displayed as ×\n const ans = parseInt(userAnswer);\n if (isNaN(ans)) {\n setResultMessage('整数で解答してください！');\n return;\n }\n let displayOp = operation === '*' ? '×' : operation;\n questionText = `${num1} ${displayOp} ${num2}`;\n let correctVal = 0;\n switch (operation) {\n case '+':\n correctVal = num1 + num2;\n break;\n case '-':\n correctVal = num1 - num2;\n break;\n case '*':\n correctVal = num1 * num2;\n break;\n default:\n break;\n }\n correctAnswer = `${correctVal}`;\n if (ans === correctVal) {\n isCorrect = true;\n setResultMessage('正解です！');\n } else {\n setResultMessage(`不正解です。正解は ${correctAnswer} です。`);\n }\n }\n\n // Record history\n const userAns =\n operation === '/'\n ? `商: ${userAnswerQuotient}, 余り: ${userAnswerRemainder}`\n : userAnswer;\n\n const newHistoryEntry = {\n questionIndex,\n questionText,\n userAnswer: userAns,\n correctAnswer,\n correct: isCorrect,\n };\n setHistory((prev) => [...prev, newHistoryEntry]);\n\n if (isCorrect) {\n setCorrectCount((prev) => prev + 1);\n setLastAnswerCorrect(true);\n setTimeout(() => {\n nextQuestion();\n }, 1500);\n }\n };\n\n const nextQuestion = () => {\n if (questionIndex >= 9) {\n const end = new Date();\n setFinalTime(((end - startTime) / 1000).toFixed(2));\n setScreen('end');\n } else {\n setQuestionIndex(questionIndex + 1);\n generateQuestion();\n }\n };\n\n if (screen === 'start') {\n return (\n

四則演算練習アプリ

\n \n 開始\n \n

\n );\n }\n\n if (screen === 'end') {\n const correctRate = ((correctCount / 10) * 100).toFixed(0);\n\n const handleRestart = () => {\n handleStart();\n };\n\n return (\n

結果

10問中 {correctCount} 問正解

正解率: {correctRate}%

タイム: {finalTime} 秒

\n\n

履歴

\n {history.map((entry, idx) => (\n

問題 {entry.questionIndex + 1}: {entry.questionText}

あなたの答え: {entry.userAnswer}

正解: {entry.correctAnswer}

\n {entry.correct ? (\n 正解\n ) : (\n 不正解\n )}\n

\n ))}\n

\n \n リスタート\n \n

\n );\n }\n\n // Quiz Screen\n // For multiplication, display '×' in question. Inputs are auto-focused on mount/ question change.\n // The button is disabled if user hasn't provided input.\n // After an incorrect answer, inputs are disabled.\n\n // We'll define a helper to see if the user typed anything.\n function isInputFilled() {\n if (operation === '/') {\n return userAnswerQuotient !== '' && userAnswerRemainder !== '';\n } else {\n return userAnswer !== '';\n }\n }\n\n const disabledInput = answerSubmitted;\n\n return (\n

四則演算練習アプリ

問題 {questionIndex + 1} / 10

\n {/* If operation is '*', show '×', else the operation. If '/', show '÷' as is. */}\n {operation !== '/' ? (\n

\n {operation === '*'\n ? `${num1} × ${num2} = ?`\n : `${num1} ${operation} ${num2} = ?`}\n

\n ) : (\n

{`${num1} ÷ ${num2} = ? あまり ?`}

\n )}\n\n {operation !== '/' ? (\n setUserAnswer(e.target.value)}\n disabled={disabledInput}\n ref={singleInputRef}\n />\n ) : (\n

\n setUserAnswerQuotient(e.target.value)}\n disabled={disabledInput}\n ref={quotientRef}\n />\n setUserAnswerRemainder(e.target.value)}\n disabled={disabledInput}\n />\n

\n )}\n\n {/* Only show \"回答\" button if not submitted yet. Also disable it if input is empty. */}\n {!answerSubmitted && (\n \n 回答\n \n )}\n\n {resultMessage && (\n

\n {resultMessage}\n

\n )}\n\n {/* If answered and incorrect, show next button */}\n {answerSubmitted && !lastAnswerCorrect && (\n \n 次の問題へ\n \n )}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","8947973178751487577","traceTime",1780609931921]

四則演算 練習アプリ

結果

履歴

四則演算 練習アプリ

四則演算練習アプリ

四則演算練習アプリ