[{"_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","69d9085347888191abf0aa52938be83c","versionInt","title","Katakana Picture Quiz App 1.1","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Volume2, Lightbulb, RefreshCw, CheckCircle2 } from \"lucide-react\";\n\nconst CATEGORIES = {\n どうぶつ: [\n { word: \"ネコ\", emoji: \"🐱\", en: \"cat\", hint: \"ニャーニャー\" },\n { word: \"イヌ\", emoji: \"🐶\", en: \"dog\", hint: \"ワンワン\" },\n { word: \"ウマ\", emoji: \"🐴\", en: \"horse\", hint: \"パカパカ\" },\n { word: \"ゾウ\", emoji: \"🐘\", en: \"elephant\", hint: \"おはながながい\" },\n { word: \"サル\", emoji: \"🐵\", en: \"monkey\", hint: \"キーキー\" },\n { word: \"トラ\", emoji: \"🐯\", en: \"tiger\", hint: \"しましま\" },\n { word: \"パンダ\", emoji: \"🐼\", en: \"panda\", hint: \"しろとくろ\" },\n { word: \"ウサギ\", emoji: \"🐰\", en: \"rabbit\", hint: \"みみがながい\" },\n ],\n はな: [\n { word: \"サクラ\", emoji: \"🌸\", en: \"cherry blossom\", hint: \"はる\" },\n { word: \"ヒマワリ\", emoji: \"🌻\", en: \"sunflower\", hint: \"なつ\" },\n { word: \"バラ\", emoji: \"🌹\", en: \"rose\", hint: \"はなやさん\" },\n { word: \"チューリップ\", emoji: \"🌷\", en: \"tulip\", hint: \"はる\" },\n { word: \"ユリ\", emoji: \"💮\", en: \"lily\", hint: \"しろいはながにんき\" },\n { word: \"アジサイ\", emoji: \"🪻\", en: \"hydrangea\", hint: \"つゆのころ\" },\n ],\n くだもの: [\n { word: \"リンゴ\", emoji: \"🍎\", en: \"apple\", hint: \"あかいくだもの\" },\n { word: \"バナナ\", emoji: \"🍌\", en: \"banana\", hint: \"きいろ\" },\n { word: \"メロン\", emoji: \"🍈\", en: \"melon\", hint: \"まるい\" },\n { word: \"モモ\", emoji: \"🍑\", en: \"peach\", hint: \"もものせつ\" },\n { word: \"ブドウ\", emoji: \"🍇\", en: \"grape\", hint: \"つぶつぶ\" },\n { word: \"レモン\", emoji: \"🍋\", en: \"lemon\", hint: \"すっぱい\" },\n { word: \"イチゴ\", emoji: \"🍓\", en: \"strawberry\", hint: \"あかくてつぶつぶ\" },\n ],\n いろ: [\n { word: \"アカ\", emoji: \"🟥\", en: \"red\", hint: \"りんごのいろ\" },\n { word: \"アオ\", emoji: \"🟦\", en: \"blue\", hint: \"そらのいろ\" },\n { word: \"キイロ\", emoji: \"🟨\", en: \"yellow\", hint: \"たいようみたい\" },\n { word: \"ミドリ\", emoji: \"🟩\", en: \"green\", hint: \"くさのいろ\" },\n { word: \"シロ\", emoji: \"⬜\", en: \"white\", hint: \"ゆきのいろ\" },\n { word: \"クロ\", emoji: \"⬛\", en: \"black\", hint: \"よるみたい\" },\n ],\n スポーツ: [\n { word: \"サッカー\", emoji: \"⚽\", en: \"soccer\", hint: \"ボールをける\" },\n { word: \"テニス\", emoji: \"🎾\", en: \"tennis\", hint: \"ラケット\" },\n { word: \"ヤキュウ\", emoji: \"⚾\", en: \"baseball\", hint: \"バット\" },\n { word: \"スイエイ\", emoji: \"🏊\", en: \"swimming\", hint: \"みずのなか\" },\n { word: \"スキー\", emoji: \"🎿\", en: \"skiing\", hint: \"ゆきやま\" },\n { word: \"ゴルフ\", emoji: \"⛳\", en: \"golf\", hint: \"カップにいれる\" },\n ],\n のりもの: [\n { word: \"クルマ\", emoji: \"🚗\", en: \"car\", hint: \"みちをはしる\" },\n { word: \"バス\", emoji: \"🚌\", en: \"bus\", hint: \"みんなでのる\" },\n { word: \"デンシャ\", emoji: \"🚃\", en: \"train\", hint: \"せんろをはしる\" },\n { word: \"フネ\", emoji: \"🚢\", en: \"ship\", hint: \"うみをすすむ\" },\n { word: \"ヒコウキ\", emoji: \"✈️\", en: \"airplane\", hint: \"そらをとぶ\" },\n { word: \"ショウボウシャ\", emoji: \"🚒\", en: \"fire truck\", hint: \"ひをけす\" },\n ],\n たべもの: [\n { word: \"カレー\", emoji: \"🍛\", en: \"curry\", hint: \"ごはんといっしょ\" },\n { word: \"スシ\", emoji: \"🍣\", en: \"sushi\", hint: \"さかなとしゃり\" },\n { word: \"ピザ\", emoji: \"🍕\", en: \"pizza\", hint: \"チーズたっぷり\" },\n { word: \"パン\", emoji: \"🍞\", en: \"bread\", hint: \"あさごはん\" },\n { word: \"ラーメン\", emoji: \"🍜\", en: \"ramen\", hint: \"めんをすする\" },\n { word: \"オニギリ\", emoji: \"🍙\", en: \"rice ball\", hint: \"さんかくのごはん\" },\n ],\n やさい: [\n { word: \"トマト\", emoji: \"🍅\", en: \"tomato\", hint: \"あかいやさい\" },\n { word: \"ニンジン\", emoji: \"🥕\", en: \"carrot\", hint: \"オレンジいろ\" },\n { word: \"ナス\", emoji: \"🍆\", en: \"eggplant\", hint: \"むらさき\" },\n { word: \"キャベツ\", emoji: \"🥬\", en: \"cabbage\", hint: \"まるいはっぱ\" },\n { word: \"タマネギ\", emoji: \"🧅\", en: \"onion\", hint: \"きるとめがしみる\" },\n { word: \"トウモロコシ\", emoji: \"🌽\", en: \"corn\", hint: \"つぶつぶ\" },\n ],\n むし: [\n { word: \"チョウ\", emoji: \"🦋\", en: \"butterfly\", hint: \"ひらひらとぶ\" },\n { word: \"テントウムシ\", emoji: \"🐞\", en: \"ladybug\", hint: \"あかにくろのもよう\" },\n { word: \"カブトムシ\", emoji: \"🪲\", en: \"beetle\", hint: \"つのがある\" },\n { word: \"ハチ\", emoji: \"🐝\", en: \"bee\", hint: \"ブンブン\" },\n { word: \"アリ\", emoji: \"🐜\", en: \"ant\", hint: \"ちいさいむし\" },\n { word: \"セミ\", emoji: \"🎐\", en: \"cicada\", hint: \"なつになく\" },\n ],\n うみのいきもの: [\n { word: \"イルカ\", emoji: \"🐬\", en: \"dolphin\", hint: \"うみにすむ\" },\n { word: \"カメ\", emoji: \"🐢\", en: \"turtle\", hint: \"こうらがある\" },\n { word: \"クラゲ\", emoji: \"🪼\", en: \"jellyfish\", hint: \"ぷかぷかうく\" },\n { word: \"サカナ\", emoji: \"🐟\", en: \"fish\", hint: \"ひれがある\" },\n { word: \"タコ\", emoji: \"🐙\", en: \"octopus\", hint: \"あしがたくさん\" },\n { word: \"カニ\", emoji: \"🦀\", en: \"crab\", hint: \"よこあるき\" },\n ],\n からだ: [\n { word: \"メ\", emoji: \"👀\", en: \"eyes\", hint: \"みるところ\" },\n { word: \"ミミ\", emoji: \"👂\", en: \"ears\", hint: \"きくところ\" },\n { word: \"ハナ\", emoji: \"👃\", en: \"nose\", hint: \"においをかぐ\" },\n { word: \"クチ\", emoji: \"👄\", en: \"mouth\", hint: \"たべるところ\" },\n { word: \"テ\", emoji: \"✋\", en: \"hand\", hint: \"さわるところ\" },\n { word: \"アシ\", emoji: \"🦵\", en: \"leg\", hint: \"あるくところ\" },\n ],\n いえのなかのもの: [\n { word: \"イス\", emoji: \"🪑\", en: \"chair\", hint: \"すわる\" },\n { word: \"ツクエ\", emoji: \"🪵\", en: \"desk\", hint: \"べんきょうする\" },\n { word: \"ベッド\", emoji: \"🛏️\", en: \"bed\", hint: \"ねるところ\" },\n { word: \"カガミ\", emoji: \"🪞\", en: \"mirror\", hint: \"うつる\" },\n { word: \"ドア\", emoji: \"🚪\", en: \"door\", hint: \"あけしめする\" },\n { word: \"トケイ\", emoji: \"🕰️\", en: \"clock\", hint: \"じかんがわかる\" },\n ],\n てんき: [\n { word: \"ハレ\", emoji: \"☀️\", en: \"sunny\", hint: \"たいよう\" },\n { word: \"クモリ\", emoji: \"☁️\", en: \"cloudy\", hint: \"くもがいっぱい\" },\n { word: \"アメ\", emoji: \"🌧️\", en: \"rainy\", hint: \"かさ\" },\n { word: \"ユキ\", emoji: \"❄️\", en: \"snowy\", hint: \"しろくてつめたい\" },\n { word: \"カミナリ\", emoji: \"⚡\", en: \"thunder\", hint: \"ピカッ\" },\n { word: \"ニジ\", emoji: \"🌈\", en: \"rainbow\", hint: \"いろがいっぱい\" },\n ],\n しごと: [\n { word: \"イシャ\", emoji: \"🧑‍⚕️\", en: \"doctor\", hint: \"びょうきをみる\" },\n { word: \"コック\", emoji: \"👨‍🍳\", en: \"cook\", hint: \"りょうりをつくる\" },\n { word: \"ケイサツ\", emoji: \"👮\", en: \"police officer\", hint: \"まちをまもる\" },\n { word: \"パイロット\", emoji: \"🧑‍✈️\", en: \"pilot\", hint: \"ひこうきをうごかす\" },\n { word: \"センセイ\", emoji: \"👩‍🏫\", en: \"teacher\", hint: \"べんきょうをおしえる\" },\n { word: \"カシュー\", emoji: \"🧑‍🎤\", en: \"singer\", hint: \"うたをうたう\" },\n ],\n おかし: [\n { word: \"アメ\", emoji: \"🍬\", en: \"candy\", hint: \"あまい\" },\n { word: \"プリン\", emoji: \"🍮\", en: \"pudding\", hint: \"ぷるぷる\" },\n { word: \"ゼリー\", emoji: \"🧁\", en: \"jelly\", hint: \"ひんやり\" },\n { word: \"クッキー\", emoji: \"🍪\", en: \"cookie\", hint: \"サクサク\" },\n { word: \"ケーキ\", emoji: \"🍰\", en: \"cake\", hint: \"おたんじょうび\" },\n { word: \"ドーナツ\", emoji: \"🍩\", en: \"doughnut\", hint: \"まんなかにあながある\" },\n ],\n};\n\nconst KATAKANA_ROWS = [\n [\"ア\", \"イ\", \"ウ\", \"エ\", \"オ\"],\n [\"カ\", \"キ\", \"ク\", \"ケ\", \"コ\"],\n [\"サ\", \"シ\", \"ス\", \"セ\", \"ソ\"],\n [\"タ\", \"チ\", \"ツ\", \"テ\", \"ト\"],\n [\"ナ\", \"ニ\", \"ヌ\", \"ネ\", \"ノ\"],\n [\"ハ\", \"ヒ\", \"フ\", \"ヘ\", \"ホ\"],\n [\"マ\", \"ミ\", \"ム\", \"メ\", \"モ\"],\n [\"ヤ\", \"ユ\", \"ヨ\"],\n [\"ラ\", \"リ\", \"ル\", \"レ\", \"ロ\"],\n [\"ワ\", \"ヲ\", \"ン\"],\n];\n\nconst VOICED_ROWS = [\n [\"ガ\", \"ギ\", \"グ\", \"ゲ\", \"ゴ\"],\n [\"ザ\", \"ジ\", \"ズ\", \"ゼ\", \"ゾ\"],\n [\"ダ\", \"ヂ\", \"ヅ\", \"デ\", \"ド\"],\n [\"バ\", \"ビ\", \"ブ\", \"ベ\", \"ボ\"],\n [\"パ\", \"ピ\", \"プ\", \"ペ\", \"ポ\"],\n [\"ァ\", \"ィ\", \"ゥ\", \"ェ\", \"ォ\", \"ャ\", \"ュ\", \"ョ\", \"ッ\", \"ー\"],\n];\n\nfunction shuffle(arr) {\n return [...arr].sort(() => Math.random() - 0.5);\n}\n\nfunction pickQuestions(categoryName, count = 10) {\n const pool = CATEGORIES[categoryName] || [];\n return shuffle(pool).slice(0, Math.min(count, pool.length));\n}\n\nfunction speakEnglish(text) {\n if (typeof window === \"undefined\" || !(\"speechSynthesis\" in window)) return;\n window.speechSynthesis.cancel();\n const utter = new SpeechSynthesisUtterance(text);\n utter.lang = \"en-US\";\n utter.rate = 0.9;\n utter.pitch = 1.0;\n\n const voices = window.speechSynthesis.getVoices();\n const englishVoice = voices.find((v) => v.lang?.startsWith(\"en\"));\n if (englishVoice) utter.voice = englishVoice;\n window.speechSynthesis.speak(utter);\n}\n\nexport default function KatakanaPictureQuizApp() {\n const categoryNames = useMemo(() => Object.keys(CATEGORIES), []);\n const [selectedCategory, setSelectedCategory] = useState(\"\");\n const [questions, setQuestions] = useState([]);\n const [index, setIndex] = useState(0);\n const [answer, setAnswer] = useState(\"\");\n const [showHint, setShowHint] = useState(false);\n const [activeTab, setActiveTab] = useState(\"basic\");\n const [showCorrect, setShowCorrect] = useState(false);\n const [finished, setFinished] = useState(false);\n const [score, setScore] = useState(0);\n const [message, setMessage] = useState(\"\");\n const hasSpokenRef = useRef(false);\n\n const current = questions[index];\n\n useEffect(() => {\n if (typeof window !== \"undefined\" && \"speechSynthesis\" in window) {\n window.speechSynthesis.getVoices();\n window.speechSynthesis.onvoiceschanged = () => {\n window.speechSynthesis.getVoices();\n };\n }\n }, []);\n\n useEffect(() => {\n hasSpokenRef.current = false;\n }, [index, selectedCategory]);\n\n useEffect(() => {\n if (showCorrect && current && !hasSpokenRef.current) {\n hasSpokenRef.current = true;\n speakEnglish(current.en);\n }\n }, [showCorrect, current]);\n\n const startCategory = (name) => {\n const qs = pickQuestions(name, 10);\n setSelectedCategory(name);\n setQuestions(qs);\n setIndex(0);\n setAnswer(\"\");\n setShowHint(false);\n setShowCorrect(false);\n setFinished(false);\n setScore(0);\n setMessage(\"\");\n };\n\n const resetAll = () => {\n setSelectedCategory(\"\");\n setQuestions([]);\n setIndex(0);\n setAnswer(\"\");\n setShowHint(false);\n setShowCorrect(false);\n setFinished(false);\n setScore(0);\n setMessage(\"\");\n };\n\n const addChar = (char) => {\n if (showCorrect || finished) return;\n setAnswer((prev) => prev + char);\n setMessage(\"\");\n };\n\n const backspace = () => {\n if (showCorrect || finished) return;\n setAnswer((prev) => prev.slice(0, -1));\n };\n\n const clearAnswer = () => {\n if (showCorrect || finished) return;\n setAnswer(\"\");\n setMessage(\"\");\n };\n\n const submit = () => {\n if (!current || !answer) return;\n if (answer === current.word) {\n setScore((s) => s + 1);\n setShowCorrect(true);\n setMessage(\"\");\n } else {\n setMessage(\"ちがうよ。もういちど！\");\n }\n };\n\n const nextQuestion = () => {\n const isLast = index >= questions.length - 1;\n setShowCorrect(false);\n setShowHint(false);\n setAnswer(\"\");\n setMessage(\"\");\n\n if (isLast) {\n setFinished(true);\n } else {\n setIndex((i) => i + 1);\n }\n };\n\n const renderRows = (rows) => (\n

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

\n {row.map((char) => (\n addChar(char)}\n >\n {char}\n \n ))}\n

\n ))}\n

\n );\n\n if (!selectedCategory) {\n return (\n

\n \n \n

🧩

カタカナえあわせクイズ

ジャンルをえらんではじめよう！

\n\n

\n {categoryNames.map((name) => (\n startCategory(name)}\n className=\"h-16 rounded-2xl text-lg font-bold\"\n >\n {name}\n \n ))}\n

\n \n \n

\n );\n }\n\n if (finished) {\n const perfect = score === questions.length;\n return (\n

\n \n \n

{perfect ? \"🎉\" : \"👏\"}

おつかれさま！

{score} / {questions.length} てん

\n {perfect ? \"ぜんぶせいかい！すごい！\" : \"たのしくがんばれたね！\"}\n

\n \n \n

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

\n {selectedCategory}\n \n {index + 1} / {questions.length}\n \n

\n \n \n

\n\n

\n \n \n

{current?.emoji}

このえのなまえをカタカナでこたえよう

\n\n

にゅうりょく

\n {answer || \"　\"}\n

\n\n

\n \n \n \n setShowHint((v) => !v)}\n className=\"rounded-2xl border-amber-300 bg-amber-50\"\n >\n \n ヒント\n \n

\n\n {showHint && (\n

\n ヒント：{current?.hint}\n

\n )}\n\n {message && (\n

\n {message}\n

\n )}\n

\n \n \n\n \n \n

\n setActiveTab(\"basic\")}\n variant={activeTab === \"basic\" ? \"default\" : \"outline\"}\n className=\"rounded-2xl\"\n >\n 50おん\n \n setActiveTab(\"voiced\")}\n variant={activeTab === \"voiced\" ? \"default\" : \"outline\"}\n className=\"rounded-2xl\"\n >\n だくおんなど\n \n

\n\n {activeTab === \"basic\" ? renderRows(KATAKANA_ROWS) : renderRows(VOICED_ROWS)}\n \n \n

\n\n \n {showCorrect && current && (\n \n \n \n \n {current.emoji}\n \n

\n \n せいかい！\n

{current.word}

{current.en}

\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","14624638439189019089","traceTime",1778695665929]

カタカナ えあわせ クイズ

おつかれさま！

カタカナえあわせクイズ