[{"_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","69595f503a988191b7f525d4964657c4","versionInt","title","Grade2 Multiplication Quiz Game","type","code/react","content","import React, { useState, useEffect } from \"react\";\n\nfunction generateQuestions(count = 25) {\n const allPairs = [];\n for (let a = 2; a <= 10; a++) { // exclude 1\n for (let b = 2; b <= 10; b++) { // exclude 1\n allPairs.push({ a, b, answer: a * b });\n }\n }\n for (let i = allPairs.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [allPairs[i], allPairs[j]] = [allPairs[j], allPairs[i]];\n }\n return allPairs.slice(0, count).map((q, index) => ({ id: index + 1, ...q }));\n}\n\nfunction generateOptions(correct) {\n const options = new Set([correct]);\n const min = Math.max(2, correct - 10);\n const max = correct + 10;\n\n while (options.size < 3) {\n const candidate = Math.floor(Math.random() * (max - min + 1)) + min;\n if (candidate > 0) options.add(candidate);\n }\n\n const arr = Array.from(options);\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n}\n\nconst TOTAL_QUESTIONS = 25;\nconst TIMER_SECONDS = 5;\n\nexport default function Grade2MultiplicationGame() {\n const [questions, setQuestions] = useState([]);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [options, setOptions] = useState([]);\n const [timeLeft, setTimeLeft] = useState(TIMER_SECONDS);\n const [score, setScore] = useState(0);\n const [isFinished, setIsFinished] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [hasAnswered, setHasAnswered] = useState(false);\n const [started, setStarted] = useState(false);\n const [results, setResults] = useState([]);\n\n const currentQuestion = questions[currentIndex];\n\n useEffect(() => {\n if (started && currentQuestion) {\n setOptions(generateOptions(currentQuestion.answer));\n setTimeLeft(TIMER_SECONDS);\n setHasAnswered(false);\n setMessage(\"\");\n }\n }, [currentIndex, currentQuestion, started]);\n\n useEffect(() => {\n if (!started || isFinished || !currentQuestion || hasAnswered) return;\n\n if (timeLeft <= 0) {\n recordResult(false, null);\n setMessage(\"Time's up! Let's try the next one.\");\n const timeout = setTimeout(() => goToNextQuestion(), 800);\n return () => clearTimeout(timeout);\n }\n\n const interval = setInterval(() => setTimeLeft((prev) => prev - 1), 1000);\n return () => clearInterval(interval);\n }, [timeLeft, isFinished, hasAnswered, currentQuestion, started]);\n\n const startGame = () => {\n setQuestions(generateQuestions(TOTAL_QUESTIONS));\n setCurrentIndex(0);\n setScore(0);\n setIsFinished(false);\n setStarted(true);\n setMessage(\"\");\n setResults([]);\n };\n\n const goToNextQuestion = () => {\n if (currentIndex + 1 >= questions.length) {\n setIsFinished(true);\n } else {\n setCurrentIndex((prev) => prev + 1);\n }\n };\n\n const recordResult = (isCorrect, selected) => {\n if (!currentQuestion) return;\n\n setResults((prev) => {\n const existingIndex = prev.findIndex((r) => r.id === currentQuestion.id);\n const newEntry = {\n ...currentQuestion,\n selected,\n correct: isCorrect,\n };\n\n if (existingIndex === -1) {\n return [...prev, newEntry];\n }\n\n const updated = [...prev];\n const existing = updated[existingIndex];\n const shouldReplace =\n selected !== null || (!existing.correct && isCorrect);\n\n if (shouldReplace) {\n updated[existingIndex] = newEntry;\n }\n return updated;\n });\n };\n\n const handleAnswer = (choice) => {\n if (!currentQuestion || hasAnswered || isFinished) return;\n\n const isCorrect = choice === currentQuestion.answer;\n let points = 0;\n\n if (isCorrect) {\n if (timeLeft >= 3) {\n points = 10;\n setMessage(\"Super fast and correct! +10 points\");\n } else if (timeLeft > 0) {\n points = 5;\n setMessage(\"Correct! Just in time. +5 points\");\n }\n } else {\n setMessage(\"Oops, that's not right. 0 points this time.\");\n }\n\n recordResult(isCorrect, choice);\n setScore((prev) => prev + points);\n setHasAnswered(true);\n setTimeout(() => goToNextQuestion(), 900);\n };\n\n const handleReset = () => {\n setStarted(false);\n setQuestions([]);\n setCurrentIndex(0);\n setScore(0);\n setIsFinished(false);\n setMessage(\"\");\n setHasAnswered(false);\n setResults([]);\n };\n\n const timerColor = timeLeft <= 2 ? \"text-red-600 border-red-400\" : \"text-sky-700 border-sky-300\";\n\n if (!started) {\n return (\n

Times Table Challenge

Practice multiplication with fun and speed!

\n \n Start Game\n \n

\n );\n }\n\n if (!currentQuestion && !isFinished) {\n return (\n

Loading questions...

\n );\n }\n\n return (\n

\n \n\n

Times Table Challenge

Multiplication practice for 2nd graders

\n Score\n {score}\n

\n {!isFinished && (\n

\n Time left\n

\n {timeLeft}\n

\n )}\n

\n\n {!isFinished && currentQuestion && (\n <>\n

\n Question {currentIndex + 1} of {questions.length}\n

\n\n

Solve this:

\n {currentQuestion.a} × {currentQuestion.b} = ?\n

\n\n

\n {options.map((opt) => (\n handleAnswer(opt)}\n disabled={hasAnswered}\n className={`py-3 rounded-2xl border text-lg font-semibold transition transform active:scale-95\n ${hasAnswered\n ? \"bg-slate-100 border-slate-200 text-slate-400 cursor-not-allowed\"\n : \"bg-white border-sky-200 hover:border-sky-400 hover:bg-sky-50 text-sky-700\"}`}\n >\n {opt}\n \n ))}\n

\n\n

\n {message || \"\\u00A0\"}\n

\n \n )}\n\n {isFinished && (\n

Great job!

\n You answered {questions.length} questions.\n
Your final score is {score} points.\n

\n {results.map((res, idx) => (\n \n \n {res.a} × {res.b} = {res.answer}\n \n \n {res.correct ? \"✓\" : `✗ (You chose ${res.selected ?? \"none\"})`}\n \n

\n ))}\n

\n \n Play again\n \n \n Reset Game\n \n

\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","10583625949053310835","traceTime",1777965749385]