[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":21,"_26":27,"_28":27,"_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","68cca8137cbc819198a1cc36615f1d31","versionInt","title","太空探險-加法學習網站 (react Single-file)","type","code/react","content","import React, { useEffect, useState, useRef } from \"react\";\n\n// SpaceMathApp.jsx\n// 單檔 React 應用（使用 TailwindCSS 風格類別）\n// 使用說明：將此檔案放入 React 專案（Vite / CRA），Tailwind 已設定則樣式會生效。\n// 特色：太空主題、分級關卡、角色夥伴提示、音效（WebAudio）、積分/徽章、題庫產生器、教師控制面板\n\nexport default function SpaceMathApp() {\n // --- App state ---\n const [stage, setStage] = useState(\"home\"); // home, level, play, result, teacher\n const [level, setLevel] = useState(null);\n const [score, setScore] = useState(0);\n const [lives, setLives] = useState(3);\n const [currentQuestion, setCurrentQuestion] = useState(null);\n const [feedback, setFeedback] = useState(null); // correct/incorrect message\n const [history, setHistory] = useState([]);\n const [badges, setBadges] = useState([]);\n const [settings, setSettings] = useState({\n sound: true,\n voiceHints: true,\n questionsPerRound: 8,\n });\n const audioCtxRef = useRef(null);\n\n useEffect(() => {\n // init audio context\n audioCtxRef.current = null;\n try {\n audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();\n } catch (e) {\n audioCtxRef.current = null;\n }\n // load progress from localStorage\n const saved = localStorage.getItem(\"spaceMathProgress\");\n if (saved) {\n const p = JSON.parse(saved);\n setScore(p.score || 0);\n setBadges(p.badges || []);\n }\n }, []);\n\n useEffect(() => {\n localStorage.setItem(\"spaceMathProgress\", JSON.stringify({ score, badges }));\n }, [score, badges]);\n\n // --- Levels definition ---\n const LEVELS = [\n {\n id: \"intro\",\n title: \"什麼是加法？\",\n subtitle: \"認識 + 符號與合併數量\",\n difficulty: 0,\n generator: () => {\n // very easy: visual/objects based\n const a = Math.floor(Math.random() * 5) + 1;\n const b = Math.floor(Math.random() * 5) + 1;\n return { a, b, answer: a + b, hint: `把 ${a} 顆星星和 ${b} 顆星星放在一起` };\n },\n },\n {\n id: \"basic\",\n title: \"1+1、小於20 的加法\",\n subtitle: \"熟練 1-20 範圍內的加法\",\n difficulty: 1,\n generator: () => {\n const a = Math.floor(Math.random() * 19) + 1; // 1..19\n const b = Math.floor(Math.random() * (20 - a)) + 1; // keep < =20\n return { a, b, answer: a + b, hint: `試著用手指或小石頭數一數` };\n },\n },\n {\n id: \"carry\",\n title: \"100 以內進位加法\",\n subtitle: \"學會十位進位（例如 47 + 38）\",\n difficulty: 2,\n generator: () => {\n const a = Math.floor(Math.random() * 90) + 10; // 10..99\n const b = Math.floor(Math.random() * 90) + 10;\n return { a, b, answer: a + b, hint: \"先加個位，再看要不要進位到十位\" };\n },\n },\n {\n id: \"decompose\",\n title: \"用十進位拆解心算\",\n subtitle: \"拆成 10 + 剩下，像 17+5 => 10 + 7 + 5\",\n difficulty: 2,\n generator: () => {\n // pick numbers where decomposition is helpful\n const a = Math.floor(Math.random() * 80) + 10; // 10..89\n const b = Math.floor(Math.random() * 10) + 1; // 1..10\n return {\n a,\n b,\n answer: a + b,\n hint: `把 ${a} 拆成 10 + ${a - 10}（或拆成最接近的 10），再加 ${b}`,\n };\n },\n },\n {\n id: \"commute\",\n title: \"交換律\",\n subtitle: \"理解 a + b = b + a\",\n difficulty: 1,\n generator: () => {\n const a = Math.floor(Math.random() * 20) + 1;\n const b = Math.floor(Math.random() * 20) + 1;\n return { a, b, answer: a + b, hint: `交換順序也一樣喔：${a} + ${b} = ${b} + ${a}` };\n },\n },\n {\n id: \"word\",\n title: \"生活應用題\",\n subtitle: \"把故事變成數字問題\",\n difficulty: 2,\n generator: () => {\n const scenarios = [\n { s: \"小小太空人有\", extra: \"蘋果\" },\n { s: \"機器狗找到了\", extra: \"星星糖\" },\n { s: \"星際導遊在路上看見\", extra: \"隕石\" },\n ];\n const sc = scenarios[Math.floor(Math.random() * scenarios.length)];\n const a = Math.floor(Math.random() * 12) + 1;\n const b = Math.floor(Math.random() * 12) + 1;\n const text = `${sc.s} ${a} 個 ${sc.extra}，後來又得到 ${b} 個，現在共有幾個？`;\n return { a, b, answer: a + b, hint: `把兩個數字加起來就可以了：${a} + ${b}` , text };\n },\n },\n ];\n\n // helper: pick level by id\n const pickLevel = (id) => LEVELS.find((l) => l.id === id);\n\n // generate a new question\n const newQuestion = (lvl) => {\n const obj = lvl.generator();\n setCurrentQuestion({ ...obj, levelId: lvl.id });\n setFeedback(null);\n };\n\n // play tone via WebAudio\n function playTone(freq = 440, duration = 0.12) {\n if (!settings.sound || !audioCtxRef.current) return;\n try {\n const ctx = audioCtxRef.current;\n const o = ctx.createOscillator();\n const g = ctx.createGain();\n o.type = \"sine\";\n o.frequency.value = freq;\n o.connect(g);\n g.connect(ctx.destination);\n g.gain.setValueAtTime(0.001, ctx.currentTime);\n g.gain.exponentialRampToValueAtTime(0.2, ctx.currentTime + 0.01);\n o.start();\n g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);\n o.stop(ctx.currentTime + duration + 0.02);\n } catch (e) {\n // ignore\n }\n }\n\n // handle an answer\n const handleAnswer = (value) => {\n if (!currentQuestion) return;\n const correct = Number(value) === Number(currentQuestion.answer);\n if (correct) {\n setFeedback({ ok: true, text: \"答對了！太棒了！\" });\n setScore((s) => s + 10);\n playTone(880, 0.12);\n setHistory((h) => [...h, { q: currentQuestion, correct: true }]);\n } else {\n setFeedback({ ok: false, text: `錯誤，答案是 ${currentQuestion.answer}` });\n setLives((l) => l - 1);\n playTone(220, 0.18);\n setHistory((h) => [...h, { q: currentQuestion, correct: false }]);\n }\n\n // award badge example\n if (score + 10 >= 100 && !badges.includes(\"銀星勳章\")) {\n setBadges((b) => [...b, \"銀星勳章\"]);\n }\n\n // next question after short delay\n setTimeout(() => {\n if (settings.questionsPerRound <= history.length + 1 || lives - (feedback && !feedback.ok ? 1 : 0) <= 0) {\n setStage(\"result\");\n } else {\n newQuestion(pickLevel(level));\n }\n }, 900);\n };\n\n // start level\n const startLevel = (lvlId) => {\n const lvl = pickLevel(lvlId);\n setLevel(lvlId);\n setLives(3);\n setHistory([]);\n setStage(\"play\");\n setScore((s) => s); // keep overall score\n setTimeout(() => newQuestion(lvl), 200);\n };\n\n // UI small components\n function Header() {\n return (\n

🚀

太空探險：加法任務

跟小小太空人一起學會加法！

分數: {score}

生命: {lives}

\n \n

\n );\n }\n\n function Home() {\n return (\n

跟小小太空人出發！

通過有趣的太空關卡，學會加法的各種技巧：從 1+1 到 100 以內的進位，還有心算拆解與生活應用題。

\n \n \n

角色：小小太空人 👩‍🚀、機器狗 🤖、星際導遊 🌟 會在題目提示與故事中出現。

🏅 關卡、獎盃

✨ 可愛角色

🔊 音效與回饋

\n\n

關卡

\n {LEVELS.map((l) => (\n

{l.title}

{l.subtitle}

\n \n \n

\n ))}\n

\n\n

徽章櫃

\n {badges.length === 0 &&

還沒有徽章，完成任務會獲得喔！

}\n {badges.map((b, i) => (\n

🏅 {b}

\n ))}\n

\n );\n }\n\n function TeacherPanel() {\n return (\n

教師面板（示範）

您可以在這設定題目數量、是否開啟語音提示、調整難度，或直接匯出題庫（範例）。

\n\n

\n 每輪題數\n setSettings({...settings, questionsPerRound: Number(e.target.value)})} />\n

{settings.questionsPerRound} 題

\n\n 音效\n setSettings({...settings, sound:e.target.checked})}/> 開啟音效\n\n 語音提示\n setSettings({...settings, voiceHints:e.target.checked})}/> 開啟語音提示（若瀏覽器支援）\n

\n\n

匯出題庫（CSV 範例）

\n \n

匯出後可用 Excel 調整並上傳到 LMS 或列印。

\n\n

\n \n

\n );\n }\n\n const exportSampleCSV = () => {\n let rows = [\"題目,答案,關卡\"];\n for (let i = 0; i < 20; i++) {\n const lvl = LEVELS[Math.floor(Math.random() * LEVELS.length)];\n const q = lvl.generator();\n const text = q.text ?? `${q.a} + ${q.b}`;\n rows.push(`${text},${q.answer},${lvl.id}`);\n }\n const csv = rows.join('\\n');\n const blob = new Blob([csv], { type: 'text/csv' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'space_math_sample.csv';\n a.click();\n URL.revokeObjectURL(url);\n };\n\n function Play() {\n if (!currentQuestion) return

載入中…

;\n\n // show visual hint for small numbers\n const showVisual = currentQuestion.a <= 10 && currentQuestion.b <= 10 && pickLevel(currentQuestion.levelId).id !== 'carry';\n\n return (\n

任務：{pickLevel(currentQuestion.levelId).title}

{pickLevel(currentQuestion.levelId).subtitle}

剩餘題數: {Math.max(0, settings.questionsPerRound - history.length - 1)}

夥伴：小小太空人會在旁協助

\n\n

\n {currentQuestion.text ? (\n

{currentQuestion.text}

\n ) : (\n

{currentQuestion.a} + {currentQuestion.b} = ?

\n )}\n\n

\n {showVisual && (\n

\n {Array.from({ length: currentQuestion.a }).map((_, i) =>

⭐

)}\n

\n {Array.from({ length: currentQuestion.b }).map((_, i) =>

🌟

)}\n

\n )}\n

\n\n \n\n

提示：{currentQuestion.hint}

\n\n {feedback && (\n

{feedback.text}

\n )}\n

\n\n

\n \n

紀錄

答對次數: {history.filter(h=>h.correct).length}

答錯次數: {history.filter(h=>!h.correct).length}

\n\n

小獎勵

完成一輪會得到星星和徽章！

\n );\n }\n\n function CompanionBox() {\n return (\n

👩‍🚀

小小太空人

「試著把數字分成 10 與剩下的部分」

\n\n

提示語音：\n \n

\n );\n }\n\n function AnswerPad({ onAnswer }) {\n const [input, setInput] = useState(\"\");\n useEffect(()=> setInput(''), [currentQuestion]);\n\n const submit = () => {\n if (input.trim() === \"\") return;\n onAnswer(input.trim());\n setInput(\"\");\n };\n\n return (\n

\n setInput(e.target.value)} className=\"flex-1 p-2 rounded border\" inputMode=\"numeric\" placeholder=\"輸入答案\" />\n \n

\n\n

\n {Array.from({ length: 10 }).map((_, i) => (\n \n ))}\n

\n );\n }\n\n function Result() {\n const correct = history.filter(h=>h.correct).length;\n const total = history.length;\n const completedLevel = pickLevel(level);\n\n const award = () => {\n if (correct / Math.max(total,1) > 0.8) {\n if (!badges.includes('金星勳章')) setBadges((b)=>[...b,'金星勳章']);\n setScore((s)=>s+30);\n } else if (correct / Math.max(total,1) > 0.5) {\n if (!badges.includes('銀星勳章')) setBadges((b)=>[...b,'銀星勳章']);\n setScore((s)=>s+15);\n } else {\n setScore((s)=>s+5);\n }\n };\n\n useEffect(()=>{ award(); }, []);\n\n return (\n

關卡完成！

關卡：{completedLevel?.title}

答對 {correct} / {total}

獲得分數：{score}

\n\n

\n \n \n

\n );\n }\n\n function speak(text) {\n if (!settings.voiceHints || !('speechSynthesis' in window)) return;\n const ut = new SpeechSynthesisUtterance(text);\n ut.lang = 'zh-TW';\n speechSynthesis.cancel();\n speechSynthesis.speak(ut);\n }\n\n return (\n

\n {stage === 'home' && }\n {stage === 'level' && (\n

\n \n

選擇任務關卡

\n {LEVELS.map(l=> (\n

{l.title}

{l.subtitle}

\n \n \n

\n ))}\n

\n )}\n {stage === 'play' && }\n {stage === 'result' && }\n {stage === 'teacher' && }\n

\n\n \n

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