[{"_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","69d8f4df9194819183beb2529d047259","versionInt","title","World-flag-quiz-app","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { RotateCcw, Lightbulb, Globe2, Trophy, CheckCircle2, XCircle, Volume2 } from \"lucide-react\";\n\nconst FLAG_DATA = {\n asia: [\n { country: \"日本\", code: \"jp\", hello: \"こんにちは\", thanks: \"ありがとう\", helloLang: \"ja-JP\", thanksLang: \"ja-JP\" },\n { country: \"韓国\", code: \"kr\", hello: \"안녕하세요\", thanks: \"감사합니다\", helloLang: \"ko-KR\", thanksLang: \"ko-KR\" },\n { country: \"中国\", code: \"cn\", hello: \"你好\", thanks: \"谢谢\", helloLang: \"zh-CN\", thanksLang: \"zh-CN\" },\n { country: \"タイ\", code: \"th\", hello: \"สวัสดี\", thanks: \"ขอบคุณ\", helloLang: \"th-TH\", thanksLang: \"th-TH\" },\n { country: \"ベトナム\", code: \"vn\", hello: \"Xin chào\", thanks: \"Cảm ơn\", helloLang: \"vi-VN\", thanksLang: \"vi-VN\" },\n { country: \"インド\", code: \"in\", hello: \"नमस्ते\", thanks: \"धन्यवाद\", helloLang: \"hi-IN\", thanksLang: \"hi-IN\" },\n { country: \"インドネシア\", code: \"id\", hello: \"Halo\", thanks: \"Terima kasih\", helloLang: \"id-ID\", thanksLang: \"id-ID\" },\n { country: \"マレーシア\", code: \"my\", hello: \"Halo\", thanks: \"Terima kasih\", helloLang: \"ms-MY\", thanksLang: \"ms-MY\" },\n { country: \"フィリピン\", code: \"ph\", hello: \"Kamusta\", thanks: \"Salamat\", helloLang: \"fil-PH\", thanksLang: \"fil-PH\" },\n { country: \"シンガポール\", code: \"sg\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-SG\", thanksLang: \"en-SG\" },\n { country: \"モンゴル\", code: \"mn\", hello: \"Сайн байна уу\", thanks: \"Баярлалаа\", helloLang: \"mn-MN\", thanksLang: \"mn-MN\" },\n { country: \"ネパール\", code: \"np\", hello: \"नमस्ते\", thanks: \"धन्यवाद\", helloLang: \"ne-NP\", thanksLang: \"ne-NP\" },\n ],\n europe: [\n { country: \"フランス\", code: \"fr\", hello: \"Bonjour\", thanks: \"Merci\", helloLang: \"fr-FR\", thanksLang: \"fr-FR\" },\n { country: \"ドイツ\", code: \"de\", hello: \"Hallo\", thanks: \"Danke\", helloLang: \"de-DE\", thanksLang: \"de-DE\" },\n { country: \"イタリア\", code: \"it\", hello: \"Ciao\", thanks: \"Grazie\", helloLang: \"it-IT\", thanksLang: \"it-IT\" },\n { country: \"スペイン\", code: \"es\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-ES\", thanksLang: \"es-ES\" },\n { country: \"ポルトガル\", code: \"pt\", hello: \"Olá\", thanks: \"Obrigado\", helloLang: \"pt-PT\", thanksLang: \"pt-PT\" },\n { country: \"オランダ\", code: \"nl\", hello: \"Hallo\", thanks: \"Dank je\", helloLang: \"nl-NL\", thanksLang: \"nl-NL\" },\n { country: \"ベルギー\", code: \"be\", hello: \"Bonjour\", thanks: \"Merci\", helloLang: \"fr-BE\", thanksLang: \"fr-BE\" },\n { country: \"スウェーデン\", code: \"se\", hello: \"Hej\", thanks: \"Tack\", helloLang: \"sv-SE\", thanksLang: \"sv-SE\" },\n { country: \"ノルウェー\", code: \"no\", hello: \"Hei\", thanks: \"Takk\", helloLang: \"nb-NO\", thanksLang: \"nb-NO\" },\n { country: \"フィンランド\", code: \"fi\", hello: \"Hei\", thanks: \"Kiitos\", helloLang: \"fi-FI\", thanksLang: \"fi-FI\" },\n { country: \"ギリシャ\", code: \"gr\", hello: \"Γειά σου\", thanks: \"Ευχαριστώ\", helloLang: \"el-GR\", thanksLang: \"el-GR\" },\n { country: \"ポーランド\", code: \"pl\", hello: \"Cześć\", thanks: \"Dziękuję\", helloLang: \"pl-PL\", thanksLang: \"pl-PL\" },\n ],\n africa: [\n { country: \"エジプト\", code: \"eg\", hello: \"مرحبا\", thanks: \"شكرا\", helloLang: \"ar-EG\", thanksLang: \"ar-EG\" },\n { country: \"モロッコ\", code: \"ma\", hello: \"مرحبا\", thanks: \"شكرا\", helloLang: \"ar-MA\", thanksLang: \"ar-MA\" },\n { country: \"ケニア\", code: \"ke\", hello: \"Hujambo\", thanks: \"Asante\", helloLang: \"sw-KE\", thanksLang: \"sw-KE\" },\n { country: \"タンザニア\", code: \"tz\", hello: \"Hujambo\", thanks: \"Asante\", helloLang: \"sw-TZ\", thanksLang: \"sw-TZ\" },\n { country: \"エチオピア\", code: \"et\", hello: \"ሰላም\", thanks: \"አመሰግናለሁ\", helloLang: \"am-ET\", thanksLang: \"am-ET\" },\n { country: \"南アフリカ\", code: \"za\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-ZA\", thanksLang: \"en-ZA\" },\n { country: \"ナイジェリア\", code: \"ng\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-NG\", thanksLang: \"en-NG\" },\n { country: \"ガーナ\", code: \"gh\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-GH\", thanksLang: \"en-GH\" },\n { country: \"チュニジア\", code: \"tn\", hello: \"مرحبا\", thanks: \"شكرا\", helloLang: \"ar-TN\", thanksLang: \"ar-TN\" },\n { country: \"アルジェリア\", code: \"dz\", hello: \"مرحبا\", thanks: \"شكرا\", helloLang: \"ar-DZ\", thanksLang: \"ar-DZ\" },\n { country: \"セネガル\", code: \"sn\", hello: \"Bonjour\", thanks: \"Merci\", helloLang: \"fr-SN\", thanksLang: \"fr-SN\" },\n { country: \"ウガンダ\", code: \"ug\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-UG\", thanksLang: \"en-UG\" },\n ],\n northAmerica: [\n { country: \"アメリカ\", code: \"us\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-US\", thanksLang: \"en-US\" },\n { country: \"カナダ\", code: \"ca\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-CA\", thanksLang: \"en-CA\" },\n { country: \"メキシコ\", code: \"mx\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-MX\", thanksLang: \"es-MX\" },\n { country: \"キューバ\", code: \"cu\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-CU\", thanksLang: \"es-CU\" },\n { country: \"ジャマイカ\", code: \"jm\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-JM\", thanksLang: \"en-JM\" },\n { country: \"グアテマラ\", code: \"gt\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-GT\", thanksLang: \"es-GT\" },\n { country: \"コスタリカ\", code: \"cr\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-CR\", thanksLang: \"es-CR\" },\n { country: \"パナマ\", code: \"pa\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-PA\", thanksLang: \"es-PA\" },\n { country: \"ドミニカ共和国\", code: \"do\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-DO\", thanksLang: \"es-DO\" },\n { country: \"ホンジュラス\", code: \"hn\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-HN\", thanksLang: \"es-HN\" },\n { country: \"エルサルバドル\", code: \"sv\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-SV\", thanksLang: \"es-SV\" },\n { country: \"ハイチ\", code: \"ht\", hello: \"Bonjour\", thanks: \"Merci\", helloLang: \"fr-HT\", thanksLang: \"fr-HT\" },\n ],\n southAmerica: [\n { country: \"ブラジル\", code: \"br\", hello: \"Olá\", thanks: \"Obrigado\", helloLang: \"pt-BR\", thanksLang: \"pt-BR\" },\n { country: \"アルゼンチン\", code: \"ar\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-AR\", thanksLang: \"es-AR\" },\n { country: \"チリ\", code: \"cl\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-CL\", thanksLang: \"es-CL\" },\n { country: \"ペルー\", code: \"pe\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-PE\", thanksLang: \"es-PE\" },\n { country: \"コロンビア\", code: \"co\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-CO\", thanksLang: \"es-CO\" },\n { country: \"ベネズエラ\", code: \"ve\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-VE\", thanksLang: \"es-VE\" },\n { country: \"エクアドル\", code: \"ec\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-EC\", thanksLang: \"es-EC\" },\n { country: \"ボリビア\", code: \"bo\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-BO\", thanksLang: \"es-BO\" },\n { country: \"ウルグアイ\", code: \"uy\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-UY\", thanksLang: \"es-UY\" },\n { country: \"パラグアイ\", code: \"py\", hello: \"Hola\", thanks: \"Gracias\", helloLang: \"es-PY\", thanksLang: \"es-PY\" },\n { country: \"ガイアナ\", code: \"gy\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-GY\", thanksLang: \"en-GY\" },\n { country: \"スリナム\", code: \"sr\", hello: \"Hallo\", thanks: \"Dank u\", helloLang: \"nl-SR\", thanksLang: \"nl-SR\" },\n ],\n oceania: [\n { country: \"オーストラリア\", code: \"au\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-AU\", thanksLang: \"en-AU\" },\n { country: \"ニュージーランド\", code: \"nz\", hello: \"Hello\", thanks: \"Thank you\", helloLang: \"en-NZ\", thanksLang: \"en-NZ\" },\n { country: \"フィジー\", code: \"fj\", hello: \"Bula\", thanks: \"Vinaka\", helloLang: \"en-FJ\", thanksLang: \"en-FJ\" },\n { country: \"パプアニューギニア\", code: \"pg\", hello: \"Halo\", thanks: \"Tenkyu\", helloLang: \"en-PG\", thanksLang: \"en-PG\" },\n { country: \"サモア\", code: \"ws\", hello: \"Talofa\", thanks: \"Faafetai\", helloLang: \"sm-WS\", thanksLang: \"sm-WS\" },\n { country: \"トンガ\", code: \"to\", hello: \"Mālō e lelei\", thanks: \"Mālō\", helloLang: \"to-TO\", thanksLang: \"to-TO\" },\n { country: \"バヌアツ\", code: \"vu\", hello: \"Halo\", thanks: \"Tangkyu\", helloLang: \"en-VU\", thanksLang: \"en-VU\" },\n { country: \"ソロモン諸島\", code: \"sb\", hello: \"Halo\", thanks: \"Tagio tumas\", helloLang: \"en-SB\", thanksLang: \"en-SB\" },\n { country: \"ミクロネシア\", code: \"fm\", hello: \"Kaselehlie\", thanks: \"Kalahngan\", helloLang: \"en-FM\", thanksLang: \"en-FM\" },\n { country: \"パラオ\", code: \"pw\", hello: \"Alii\", thanks: \"Mesulang\", helloLang: \"en-PW\", thanksLang: \"en-PW\" },\n { country: \"キリバス\", code: \"ki\", hello: \"Mauri\", thanks: \"Ko rabwa\", helloLang: \"en-KI\", thanksLang: \"en-KI\" },\n { country: \"ナウル\", code: \"nr\", hello: \"Ekamawir omo\", thanks: \"Tubwa kor\", helloLang: \"en-NR\", thanksLang: \"en-NR\" },\n ],\n};\n\nconst REGION_LABELS = {\n asia: \"アジア\",\n europe: \"ヨーロッパ\",\n africa: \"アフリカ\",\n northAmerica: \"北アメリカ\",\n southAmerica: \"南アメリカ\",\n oceania: \"オセアニア\",\n};\n\nfunction shuffle(array) {\n const copy = [...array];\n for (let i = copy.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [copy[i], copy[j]] = [copy[j], copy[i]];\n }\n return copy;\n}\n\nfunction buildQuestions(regionKey, count = 10) {\n const pool = shuffle(FLAG_DATA[regionKey]);\n const selected = pool.slice(0, count);\n\n return selected.map((item) => {\n const wrongChoices = shuffle(\n FLAG_DATA[regionKey].filter((c) => c.country !== item.country)\n )\n .slice(0, 3)\n .map((c) => c.country);\n\n const choices = shuffle([item.country, ...wrongChoices]);\n return {\n ...item,\n choices,\n };\n });\n}\n\nfunction getFlagUrl(code) {\n return `https://flagcdn.com/w320/${code}.png`;\n}\n\nfunction speakText(text, lang) {\n if (typeof window === \"undefined\" || !(\"speechSynthesis\" in window)) return;\n const synth = window.speechSynthesis;\n synth.cancel();\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.rate = 0.9;\n utterance.pitch = 1;\n utterance.volume = 1;\n if (lang) utterance.lang = lang;\n\n const voices = synth.getVoices();\n const exactVoice = voices.find((voice) => voice.lang?.toLowerCase() === lang?.toLowerCase());\n const familyVoice = voices.find((voice) => lang && voice.lang?.toLowerCase().startsWith(lang.toLowerCase().split(\"-\")[0]));\n if (exactVoice) utterance.voice = exactVoice;\n else if (familyVoice) utterance.voice = familyVoice;\n\n synth.speak(utterance);\n}\n\nexport default function WorldFlagQuizApp() {\n const [screen, setScreen] = useState(\"region\");\n const [region, setRegion] = useState(null);\n const [questions, setQuestions] = useState([]);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [selected, setSelected] = useState(null);\n const [wrongChoice, setWrongChoice] = useState(null);\n const [showResult, setShowResult] = useState(false);\n const [score, setScore] = useState(0);\n const [showHelloHint, setShowHelloHint] = useState(false);\n const [showThanksHint, setShowThanksHint] = useState(false);\n const [mistakes, setMistakes] = useState([]);\n\n const currentQuestion = questions[currentIndex];\n const progress = questions.length ? ((currentIndex + (showResult ? 1 : 0)) / questions.length) * 100 : 0;\n const regionCards = useMemo(() => Object.entries(REGION_LABELS), []);\n\n useEffect(() => {\n return () => {\n if (typeof window !== \"undefined\" && \"speechSynthesis\" in window) {\n window.speechSynthesis.cancel();\n }\n };\n }, []);\n\n const startQuiz = (regionKey) => {\n setRegion(regionKey);\n setQuestions(buildQuestions(regionKey, 10));\n setCurrentIndex(0);\n setSelected(null);\n setWrongChoice(null);\n setShowResult(false);\n setScore(0);\n setShowHelloHint(false);\n setShowThanksHint(false);\n setMistakes([]);\n if (typeof window !== \"undefined\" && \"speechSynthesis\" in window) {\n window.speechSynthesis.cancel();\n }\n setScreen(\"quiz\");\n };\n\n const handleAnswer = (choice) => {\n if (showResult) return;\n\n const isCorrect = choice === currentQuestion.country;\n\n if (isCorrect) {\n setSelected(choice);\n setWrongChoice(null);\n setShowResult(true);\n setScore((prev) => prev + 1);\n\n setTimeout(() => {\n nextQuestion();\n }, 900);\n } else {\n setWrongChoice(choice);\n setMistakes((prev) => [\n ...prev,\n {\n code: currentQuestion.code,\n country: currentQuestion.country,\n selected: choice,\n hello: currentQuestion.hello,\n thanks: currentQuestion.thanks,\n helloLang: currentQuestion.helloLang,\n thanksLang: currentQuestion.thanksLang,\n },\n ]);\n }\n };\n\n const toggleHelloHint = () => {\n setShowHelloHint((prev) => !prev);\n if (currentQuestion) {\n speakText(currentQuestion.hello, currentQuestion.helloLang);\n }\n };\n\n const toggleThanksHint = () => {\n setShowThanksHint((prev) => !prev);\n if (currentQuestion) {\n speakText(currentQuestion.thanks, currentQuestion.thanksLang);\n }\n };\n\n const nextQuestion = () => {\n const isLast = currentIndex >= questions.length - 1;\n if (typeof window !== \"undefined\" && \"speechSynthesis\" in window) {\n window.speechSynthesis.cancel();\n }\n if (isLast) {\n setScreen(\"result\");\n return;\n }\n setCurrentIndex((prev) => prev + 1);\n setSelected(null);\n setWrongChoice(null);\n setShowResult(false);\n setShowHelloHint(false);\n setShowThanksHint(false);\n };\n\n const resetToMenu = () => {\n if (typeof window !== \"undefined\" && \"speechSynthesis\" in window) {\n window.speechSynthesis.cancel();\n }\n setScreen(\"region\");\n setRegion(null);\n setQuestions([]);\n setCurrentIndex(0);\n setSelected(null);\n setWrongChoice(null);\n setShowResult(false);\n setScore(0);\n setShowHelloHint(false);\n setShowThanksHint(false);\n setMistakes([]);\n };\n\n if (screen === \"region\") {\n return (\n

\n \n 世界の国旗クイズ\n

地域をえらんで国旗にチャレンジ

\n 1回10問。4つの選択肢は同じ地域の国どうし。ヒントは「こんにちは」と「ありがとう」を音で聞けます。\n

\n\n

\n {regionCards.map(([key, label]) => (\n \n \n

\n {label}\n 🌍\n

{label}

同じ地域の国から4択で出題されます。

\n \n \n \n ))}\n

\n );\n }\n\n if (screen === \"quiz\" && currentQuestion) {\n return (\n

\n \n {REGION_LABELS[region]}\n

\n {currentIndex + 1} / {questions.length} 問\n

\n\n \n\n \n \n この国旗はどこの国？\n \n \n

\n \n

\n\n

\n \n \n \n こんにちはヒント\n \n \n \n \n ありがとうヒント\n \n

\n\n {(showHelloHint || showThanksHint) && (\n

\n {showHelloHint && (\n

こんにちは

{currentQuestion.hello}

\n \n

\n )}\n {showThanksHint && (\n

ありがとう

{currentQuestion.thanks}

\n \n

\n )}\n

\n )}\n\n

\n {currentQuestion.choices.map((choice) => {\n const isCorrect = choice === currentQuestion.country;\n const isSelected = selected === choice;\n const isWrongChoice = wrongChoice === choice;\n\n let className = \"w-full rounded-3xl border-2 border-white bg-white py-6 text-lg text-slate-900 shadow-md hover:bg-slate-50\";\n if (showResult && isCorrect) className = \"w-full rounded-3xl border-2 border-emerald-500 bg-emerald-50 py-6 text-lg text-emerald-800 shadow-md\";\n if (isWrongChoice) className = \"w-full rounded-3xl border-2 border-rose-500 bg-rose-50 py-6 text-lg text-rose-800 shadow-md animate-pulse\";\n\n return (\n handleAnswer(choice)}\n className={className}\n >\n {choice}\n \n );\n })}\n

\n\n {showResult && (\n

\n \n

せいかい！

{currentQuestion.country} の国旗です。

\n )}\n\n {!showResult && wrongChoice && (\n

\n \n

ちがうよ

もういちどえらんでね。

\n )}\n \n \n

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

\n \n \n

\n \n

けっか発表

{score} / {questions.length}

{REGION_LABELS[region]}の国旗クイズ、おつかれさまでした。

\n\n

正解数

{score}

不正解数

{questions.length - score}

正答率

{Math.round((score / questions.length) * 100)}%

\n\n {mistakes.length > 0 && (\n

ふくしゅう

\n {mistakes.map((item, index) => (\n

\n \n

{item.country}

あなたの回答: {item.selected}

こんにちは

{item.hello}

\n \n

ありがとう

{item.thanks}

\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","17763153970685537380","traceTime",1778689471741]