[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68ddd0b02b3081919be0543077c757fb","versionInt","title","Divisibility By 3 — Mini Web Game","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { RefreshCw, Trophy, Play, Check, X } from \"lucide-react\";\n\n// ------------------------------------------------------------\n// Divisible-by-3 Detective — 2-Level Mini Game\n// Level 1: \"Open or Locked?\" (Classify numbers as divisible by 3)\n// Level 2: \"Find the Missing Digit\" (Choose the digit ★ to make the number divisible by 3)\n// Built for an 8-year-old: snappy rounds, clear feedback, celebratory finish.\n// ------------------------------------------------------------\n\n// ---------- Utilities ----------\nconst randInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;\nconst digits = (n: number | string) => `${n}`.replace(/[^0-9]/g, \"\").split(\"\").map(Number);\nconst sumDigits = (n: number | string) => digits(n).reduce((a, b) => a + b, 0);\nconst isDivBy3 = (n: number | string) => sumDigits(n) % 3 === 0;\n\n// Format number with optional comma grouping for readability\nconst formatNumber = (n: number) => n.toLocaleString();\n\n// Generate a random whole number within a difficulty band\nfunction generateNumber(level: 1 | 2) {\n // Level 1 uses 2- to 5-digit numbers; Level 2 uses 2- to 4-digit shells\n const len = level === 1 ? randInt(2, 5) : randInt(2, 4);\n const lower = 10 ** (len - 1);\n const upper = 10 ** len - 1;\n return randInt(lower, upper);\n}\n\n// Build a pattern like \"42★\" or \"7★8\" or \"★56\"\nfunction buildMissingDigitPattern(baseNumber: number) {\n const s = `${baseNumber}`;\n const starIndex = randInt(0, s.length - 1);\n return s\n .split(\"\")\n .map((ch, i) => (i === starIndex ? \"★\" : ch))\n .join(\"\");\n}\n\n// Compute which digits (0-9) make the pattern divisible by 3\nfunction validDigitsForPattern(pattern: string): number[] {\n const sumKnown = pattern\n .split(\"\")\n .filter((ch) => ch !== \"★\")\n .map(Number)\n .reduce((a, b) => a + b, 0);\n // We need (sumKnown + d) % 3 === 0 -> d % 3 === (-sumKnown) % 3\n const need = ((3 - (sumKnown % 3)) % 3);\n const answers: number[] = [];\n for (let d = 0; d <= 9; d++) {\n if (d % 3 === need) answers.push(d);\n }\n return answers;\n}\n\n// ---------- Game Config ----------\nconst ROUNDS_L1 = 8; // quick but meaningful practice\nconst ROUNDS_L2 = 8;\n\n// ---------- UI Bits ----------\nfunction Header() {\n return (\n

\n 🔢\n

Divisible-by-3 Detective

\n Ages 8+\n

\n );\n}\n\nfunction RuleCard() {\n return (\n \n \n The Golden Rule\n Add the digits. If that sum is divisible by 3, the whole number is divisible by 3.\n \n \n

\n Example: 1,2,3 → 1+2+3 = 6. Since 6 is divisible by 3, 123 is divisible by 3.\n

\n \n \n );\n}\n\n// ---------- Level One Component ----------\nfunction LevelOne({ onComplete }: { onComplete: (score: number) => void }) {\n const [round, setRound] = useState(1);\n const [score, setScore] = useState(0);\n const [current, setCurrent] = useState(() => generateNumber(1));\n const [feedback, setFeedback] = useState<\"\" | \"correct\" | \"wrong\">(\"\");\n\n const progress = (round - 1) / ROUNDS_L1 * 100;\n\n const handleGuess = (guessOpen: boolean) => {\n const correct = isDivBy3(current) === guessOpen;\n setFeedback(correct ? \"correct\" : \"wrong\");\n\n setTimeout(() => {\n if (correct) setScore((s) => s + 1);\n if (round >= ROUNDS_L1) {\n onComplete(correct ? score + 1 : score);\n } else {\n setRound((r) => r + 1);\n setCurrent(generateNumber(1));\n setFeedback(\"\");\n }\n }, 600);\n };\n\n return (\n \n \n Level 1: Open or Locked? 🔓🗝️\n Decide if the treasure opens! (Is the number divisible by 3?)\n \n \n

\n \n

Round {round} / {ROUNDS_L1} • Score {score}

\n\n \n \n

Number

{formatNumber(current)}

\n \n \n\n

\n \n \n

\n\n

\n {feedback === \"correct\" && (\n \n ✅ Nice! You spotted it.\n \n )}\n {feedback === \"wrong\" && (\n \n ❌ Not this time — remember, check the digit sum!\n \n )}\n

\n \n \n );\n}\n\n// ---------- Level Two Component ----------\nfunction LevelTwo({ onComplete }: { onComplete: (score: number) => void }) {\n const [round, setRound] = useState(1);\n const [score, setScore] = useState(0);\n const [pattern, setPattern] = useState(() => buildMissingDigitPattern(generateNumber(2)));\n const [answers, setAnswers] = useState(() => validDigitsForPattern(pattern));\n const [feedback, setFeedback] = useState<\"\" | \"correct\" | \"wrong\">(\"\");\n\n const progress = (round - 1) / ROUNDS_L2 * 100;\n\n const chooseDigit = (d: number) => {\n const ok = answers.includes(d);\n setFeedback(ok ? \"correct\" : \"wrong\");\n setTimeout(() => {\n if (ok) setScore((s) => s + 1);\n if (round >= ROUNDS_L2) {\n onComplete(ok ? score + 1 : score);\n } else {\n const next = buildMissingDigitPattern(generateNumber(2));\n setPattern(next);\n setAnswers(validDigitsForPattern(next));\n setRound((r) => r + 1);\n setFeedback(\"\");\n }\n }, 600);\n };\n\n const revealExamples = useMemo(() => answers.map((d) => pattern.replace(\"★\", `${d}`)).slice(0, 3), [answers, pattern]);\n\n return (\n \n \n Level 2: Find the Missing Digit ⭐\n Pick the digit that makes the number divisible by 3.\n \n \n

\n \n

Round {round} / {ROUNDS_L2} • Score {score}

\n\n \n \n

Complete this number

{pattern}

Tip: only certain digits work each time.

\n \n \n\n

\n {[0,1,2,3,4,5,6,7,8,9].map((d) => (\n \n ))}\n

\n\n

\n {feedback === \"correct\" && (\n \n ✅ Correct! Examples: {revealExamples.join(\", \")}\n \n )}\n {feedback === \"wrong\" && (\n \n ❌ Try again — remember the digit-sum rule.\n \n )}\n

\n \n \n );\n}\n\n// ---------- Summary Card ----------\nfunction FinishCard({ l1, l2, onRestart }: { l1: number; l2: number; onRestart: () => void }) {\n const total = l1 + l2;\n const message = total >= 14 ? \"Math Master!\" : total >= 10 ? \"Great Work!\" : \"Keep Practicing!\";\n\n return (\n \n \n Finished!\n Level 1 Score: {l1} / {ROUNDS_L1} • Level 2 Score: {l2} / {ROUNDS_L2}\n \n \n

{message}

\n \n

\n \n \n );\n}\n\n// ---------- Main App ----------\nexport default function DivisibleBy3Game() {\n const [screen, setScreen] = useState<\"start\" | \"l1\" | \"l2\" | \"finish\">(\"start\");\n const [l1Score, setL1Score] = useState(0);\n const [l2Score, setL2Score] = useState(0);\n\n const restart = () => {\n setL1Score(0);\n setL2Score(0);\n setScreen(\"start\");\n };\n\n return (\n

\n \n\n {screen === \"start\" && (\n \n \n Two-Level Challenge\n Level 1: Open or Locked? • Level 2: Find the Missing Digit\n \n \n

\n \n \n

\n \n \n )}\n\n {screen === \"l1\" && (\n {\n setL1Score(score);\n setScreen(\"l2\");\n }}\n />\n )}\n\n {screen === \"l2\" && (\n {\n setL2Score(score);\n setScreen(\"finish\");\n }}\n />\n )}\n\n {screen === \"finish\" && (\n \n )}\n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","7400977947832538686","traceTime",1776404206964]