[{"_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","69d90548a5748191bf727ac49be7d1e1","versionInt","title","First Grade Kanji Reading Quiz App 1.1","type","code/react","content","import React, { useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { RotateCcw, Eraser, Delete, CheckCircle2, XCircle, BookOpen, Trophy } from \"lucide-react\";\n\nconst BASIC_KANA_ROWS = [\n [\"あ\", \"い\", \"う\", \"え\", \"お\"],\n [\"か\", \"き\", \"く\", \"け\", \"こ\"],\n [\"さ\", \"し\", \"す\", \"せ\", \"そ\"],\n [\"た\", \"ち\", \"つ\", \"て\", \"と\"],\n [\"な\", \"に\", \"ぬ\", \"ね\", \"の\"],\n [\"は\", \"ひ\", \"ふ\", \"へ\", \"ほ\"],\n [\"ま\", \"み\", \"む\", \"め\", \"も\"],\n [\"や\", \"\", \"ゆ\", \"\", \"よ\"],\n [\"ら\", \"り\", \"る\", \"れ\", \"ろ\"],\n [\"わ\", \"\", \"を\", \"\", \"ん\"],\n];\n\nconst DAKUTEN_KANA_ROWS = [\n [\"が\", \"ぎ\", \"ぐ\", \"げ\", \"ご\"],\n [\"ざ\", \"じ\", \"ず\", \"ぜ\", \"ぞ\"],\n [\"だ\", \"ぢ\", \"づ\", \"で\", \"ど\"],\n [\"ば\", \"び\", \"ぶ\", \"べ\", \"ぼ\"],\n [\"ぱ\", \"ぴ\", \"ぷ\", \"ぺ\", \"ぽ\"],\n [\"ゃ\", \"ゅ\", \"ょ\", \"っ\", \"ー\"],\n];\n\nconst QUIZ_DATA = [\n { kanji: \"一\", sentence: \"一年生になった。\", answer: \"いち\" },\n { kanji: \"右\", sentence: \"右のてをあげよう。\", answer: \"みぎ\" },\n { kanji: \"雨\", sentence: \"今日は雨がふっている。\", answer: \"あめ\" },\n { kanji: \"円\", sentence: \"このけしごむは百円です。\", answer: \"えん\" },\n { kanji: \"王\", sentence: \"ライオンはどうぶつの王だ。\", answer: \"おう\" },\n { kanji: \"音\", sentence: \"ピアノの音がきこえる。\", answer: \"おと\" },\n { kanji: \"下\", sentence: \"つくえの下にもぐる。\", answer: \"した\" },\n { kanji: \"火\", sentence: \"たきびの火があかるい。\", answer: \"ひ\" },\n { kanji: \"花\", sentence: \"にわにきれいな花がさいた。\", answer: \"はな\" },\n { kanji: \"貝\", sentence: \"うみで貝をひろった。\", answer: \"かい\" },\n { kanji: \"学\", sentence: \"学校でべんきょうをする。\", answer: \"がく\" },\n { kanji: \"気\", sentence: \"今日は元気がある。\", answer: \"き\" },\n { kanji: \"九\", sentence: \"九のつぎは十。\", answer: \"きゅう\" },\n { kanji: \"休\", sentence: \"こうえんのベンチで休む。\", answer: \"やす\" },\n { kanji: \"玉\", sentence: \"きらきらひかる玉をみつけた。\", answer: \"たま\" },\n { kanji: \"金\", sentence: \"金いろのほしがかがやく。\", answer: \"きん\" },\n { kanji: \"空\", sentence: \"空にひこうきがとんでいる。\", answer: \"そら\" },\n { kanji: \"月\", sentence: \"よるの月がまるい。\", answer: \"つき\" },\n { kanji: \"犬\", sentence: \"犬がしっぽをふっている。\", answer: \"いぬ\" },\n { kanji: \"見\", sentence: \"まどからそとを見る。\", answer: \"み\" },\n { kanji: \"五\", sentence: \"りんごが五こある。\", answer: \"ご\" },\n { kanji: \"口\", sentence: \"口をおおきくあける。\", answer: \"くち\" },\n { kanji: \"校\", sentence: \"学校のこうていであそぶ。\", answer: \"こう\" },\n { kanji: \"左\", sentence: \"左あしをまえにだす。\", answer: \"ひだり\" },\n { kanji: \"山\", sentence: \"山のうえまでのぼった。\", answer: \"やま\" },\n { kanji: \"子\", sentence: \"あの子はあしがはやい。\", answer: \"こ\" },\n { kanji: \"四\", sentence: \"クッキーが四まいある。\", answer: \"よん\" },\n { kanji: \"糸\", sentence: \"あかい糸をむすぶ。\", answer: \"いと\" },\n { kanji: \"字\", sentence: \"ノートに字をかく。\", answer: \"じ\" },\n { kanji: \"耳\", sentence: \"耳をすませてきく。\", answer: \"みみ\" },\n { kanji: \"七\", sentence: \"七つのほしがみえる。\", answer: \"なな\" },\n { kanji: \"車\", sentence: \"車でえきまでいく。\", answer: \"くるま\" },\n { kanji: \"手\", sentence: \"手をあらってからたべる。\", answer: \"て\" },\n { kanji: \"十\", sentence: \"十このおはじきがある。\", answer: \"じゅう\" },\n { kanji: \"出\", sentence: \"いえからそとへ出る。\", answer: \"で\" },\n { kanji: \"女\", sentence: \"女の子がわらっている。\", answer: \"おんな\" },\n { kanji: \"小\", sentence: \"小さいいぬがはしる。\", answer: \"ちい\" },\n { kanji: \"上\", sentence: \"つくえの上に本がある。\", answer: \"うえ\" },\n { kanji: \"森\", sentence: \"森のなかでことりがなく。\", answer: \"もり\" },\n { kanji: \"人\", sentence: \"人がたくさんならんでいる。\", answer: \"ひと\" },\n { kanji: \"水\", sentence: \"つめたい水をのむ。\", answer: \"みず\" },\n { kanji: \"正\", sentence: \"正かいするとまるがつく。\", answer: \"せい\" },\n { kanji: \"生\", sentence: \"先生がきょうしつにきた。\", answer: \"せい\" },\n { kanji: \"青\", sentence: \"青い空がひろがる。\", answer: \"あお\" },\n { kanji: \"夕\", sentence: \"夕やけがきれいだ。\", answer: \"ゆう\" },\n { kanji: \"石\", sentence: \"かわでまるい石をみつけた。\", answer: \"いし\" },\n { kanji: \"赤\", sentence: \"赤いぼうしをかぶる。\", answer: \"あか\" },\n { kanji: \"千\", sentence: \"千円さつをみた。\", answer: \"せん\" },\n { kanji: \"川\", sentence: \"川でさかなをみつけた。\", answer: \"かわ\" },\n { kanji: \"先\", sentence: \"先にいってまっていてね。\", answer: \"さき\" },\n { kanji: \"早\", sentence: \"今日は早くおきた。\", answer: \"はや\" },\n { kanji: \"草\", sentence: \"草のうえにむしがいる。\", answer: \"くさ\" },\n { kanji: \"足\", sentence: \"足がはやいね。\", answer: \"あし\" },\n { kanji: \"村\", sentence: \"村のおまつりにいく。\", answer: \"むら\" },\n { kanji: \"大\", sentence: \"大きなふうせんがとんだ。\", answer: \"おお\" },\n { kanji: \"男\", sentence: \"男の子がジャンプした。\", answer: \"おとこ\" },\n { kanji: \"竹\", sentence: \"竹がたかくのびている。\", answer: \"たけ\" },\n { kanji: \"中\", sentence: \"はこの中をみてみよう。\", answer: \"なか\" },\n { kanji: \"虫\", sentence: \"はっぱに虫がとまった。\", answer: \"むし\" },\n { kanji: \"町\", sentence: \"町へかいものにいく。\", answer: \"まち\" },\n { kanji: \"天\", sentence: \"天気がよくてうれしい。\", answer: \"てん\" },\n { kanji: \"田\", sentence: \"田んぼに水がある。\", answer: \"た\" },\n { kanji: \"土\", sentence: \"土でだんごをつくる。\", answer: \"つち\" },\n { kanji: \"二\", sentence: \"二つのたまごがある。\", answer: \"に\" },\n { kanji: \"日\", sentence: \"今日はいい天気の日だ。\", answer: \"ひ\" },\n { kanji: \"入\", sentence: \"へやに入るまえにノックする。\", answer: \"はい\" },\n { kanji: \"年\", sentence: \"来年は二年生だ。\", answer: \"ねん\" },\n { kanji: \"白\", sentence: \"白いねこがねている。\", answer: \"しろ\" },\n { kanji: \"八\", sentence: \"八このビー玉をならべた。\", answer: \"はち\" },\n { kanji: \"百\", sentence: \"百点まんてんだ。\", answer: \"ひゃく\" },\n { kanji: \"文\", sentence: \"文をよんでこたえよう。\", answer: \"ぶん\" },\n { kanji: \"木\", sentence: \"木の下でやすむ。\", answer: \"き\" },\n { kanji: \"本\", sentence: \"本をいっさつよんだ。\", answer: \"ほん\" },\n { kanji: \"名\", sentence: \"名前をここにかく。\", answer: \"な\" },\n { kanji: \"目\", sentence: \"目をたいせつにしよう。\", answer: \"め\" },\n { kanji: \"立\", sentence: \"いすから立ってあいさつする。\", answer: \"た\" },\n { kanji: \"力\", sentence: \"力いっぱいはしる。\", answer: \"ちから\" },\n { kanji: \"林\", sentence: \"林のこみちをあるく。\", answer: \"はやし\" },\n { kanji: \"六\", sentence: \"六このふうせんがある。\", answer: \"ろく\" },\n { kanji: \"学\", sentence: \"学しゃになりたい。\", answer: \"がく\" },\n { kanji: \"気\", sentence: \"あさの空気がすんでいる。\", answer: \"き\" },\n { kanji: \"生\", sentence: \"花が生まれるようにさく。\", answer: \"う\" },\n { kanji: \"上\", sentence: \"上ぎをきる。\", answer: \"うわ\" },\n];\n\nfunction shuffleArray(array) {\n const copied = [...array];\n for (let i = copied.length - 1; i > 0; i -= 1) {\n const j = Math.floor(Math.random() * (i + 1));\n [copied[i], copied[j]] = [copied[j], copied[i]];\n }\n return copied;\n}\n\nfunction highlightKanji(sentence, kanji) {\n const idx = sentence.indexOf(kanji);\n if (idx === -1) return sentence;\n return (\n <>\n {sentence.slice(0, idx)}\n {kanji}\n {sentence.slice(idx + kanji.length)}\n \n );\n}\n\nfunction KanaGrid({ rows, onSelect, disabled }) {\n return (\n

\n {rows.map((row, rowIndex) => (\n

\n {row.map((kana, colIndex) =>\n kana ? (\n onSelect(kana)}\n disabled={disabled}\n className=\"h-11 rounded-xl px-0 text-xl font-bold sm:h-12 sm:text-2xl\"\n >\n {kana}\n \n ) : (\n

\n )\n )}\n

\n ))}\n

\n );\n}\n\nexport default function FirstGradeKanjiReadingQuizApp() {\n const [questions, setQuestions] = useState(() => shuffleArray(QUIZ_DATA).slice(0, 10));\n const [currentIndex, setCurrentIndex] = useState(0);\n const [input, setInput] = useState(\"\");\n const [score, setScore] = useState(0);\n const [isAnswered, setIsAnswered] = useState(false);\n const [isCorrect, setIsCorrect] = useState(false);\n const [history, setHistory] = useState([]);\n const [finished, setFinished] = useState(false);\n const [showRewardOverlay, setShowRewardOverlay] = useState(false);\n const [kanaTab, setKanaTab] = useState(\"basic\");\n\n const current = questions[currentIndex];\n const progress = ((currentIndex + (finished ? 1 : 0)) / questions.length) * 100;\n\n const addKana = (kana) => {\n if (isAnswered || finished) return;\n setInput((prev) => prev + kana);\n };\n\n const handleDelete = () => {\n if (isAnswered || finished) return;\n setInput((prev) => prev.slice(0, -1));\n };\n\n const handleClear = () => {\n if (isAnswered || finished) return;\n setInput(\"\");\n };\n\n const handleCheck = () => {\n if (!input || isAnswered || finished) return;\n const normalizedInput = input.trim();\n const correct = normalizedInput === current.answer;\n setIsCorrect(correct);\n setIsAnswered(true);\n if (correct) {\n setScore((prev) => prev + 1);\n setShowRewardOverlay(true);\n }\n setHistory((prev) => [\n ...prev,\n {\n kanji: current.kanji,\n sentence: current.sentence,\n userAnswer: normalizedInput,\n correctAnswer: current.answer,\n result: correct,\n },\n ]);\n };\n\n const handleNext = () => {\n if (currentIndex === questions.length - 1) {\n setFinished(true);\n return;\n }\n setCurrentIndex((prev) => prev + 1);\n setInput(\"\");\n setIsAnswered(false);\n setIsCorrect(false);\n setShowRewardOverlay(false);\n };\n\n const handleRestart = () => {\n setQuestions(shuffleArray(QUIZ_DATA).slice(0, 10));\n setCurrentIndex(0);\n setInput(\"\");\n setScore(0);\n setIsAnswered(false);\n setIsCorrect(false);\n setShowRewardOverlay(false);\n setHistory([]);\n setFinished(false);\n setShowRewardOverlay(false);\n };\n\n if (finished) {\n return (\n

\n \n \n

\n \n

\n クイズしゅうりょう！\n \n \n

{questions.length}もんちゅう {score}もんせいかい！

\n {score === questions.length\n ? \"ぜんもんせいかい、すごい！\"\n : score >= 7\n ? \"とてもよくできました！\"\n : \"もういちどちょうせんしてみよう！\"}\n

\n {score === questions.length && (\n

ごほうびイラスト

🎒🌈🧸✨

やったね！ぜんぶせいかい！

にこにこえがおのしょうがくせいとたのしいごほうびタイム！

\n 👦🏻🎉📚
\n 🌟🐰🍭🌼\n

\n )}\n

\n \n

\n \n \n\n \n \n けっか\n \n \n {history.map((item, idx) => (\n

\n {item.result ? : }\n 第{idx + 1}問\n

{item.sentence}

あなたのこたえ：{item.userAnswer || \"-\"}

せいかい：{item.correctAnswer}

\n ))}\n \n \n

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

\n \n \n

\n \n 一年生かん字よみクイズ\n

\n {currentIndex + 1} / {questions.length}もん\n

\n \n \n \n

もんだい

\n {current ? highlightKanji(current.sentence, current.kanji) : null}\n

いろのついたかん字のよみをこたえよう。

\n\n

あなたのこたえ

\n {input || \"　\"}\n

ひらがなで入力

\n\n {isAnswered && (\n

\n {isCorrect ? \"せいかい！すばらしい！\" : `ざんねん。せいかいは「${current.answer}」だよ。`}\n

\n \n {isCorrect && showRewardOverlay && (\n \n \n \n 🐰\n \n \n せいかい！\n \n \n うさぎさんがおいわいしてるよ！\n \n \n setShowRewardOverlay(false)}\n className=\"rounded-2xl px-6 py-6 text-lg\"\n >\n とじる\n \n \n \n \n )}\n \n

\n )}\n\n

\n {!isAnswered ? (\n \n ) : (\n \n )}\n \n \n \n

\n \n \n\n \n \n 50おんひょう\n \n \n \n \n ふつう\n だくおん\n \n \n \n \n \n \n \n \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","9934078445934555461","traceTime",1778699169610]