[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":12,"_29":30,"_31":30,"_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","67bbf63f7d9881918f7551de162aa214","versionInt","title","Travel Phrase Quiz","type","code/react","content","import React, { useState, useEffect } from 'react';\nimport { Volume2 } from 'lucide-react';\n\n// 英語版(30問)\nconst TRAVEL_PHRASES_EN = [\n {\n question: \"Where is the nearest ATM?\",\n roman: \"\",\n options: [\n \"最寄りのATMはどこですか？\",\n \"クレジットカードは使えますか？\",\n \"これはいくらですか？\",\n \"トイレはどこですか？\"\n ],\n correctAnswer: \"最寄りのATMはどこですか？\"\n },\n {\n question: \"How much does this cost?\",\n roman: \"\",\n options: [\n \"これはいくらですか？\",\n \"いくら割り引いてくれますか？\",\n \"現金は必要ですか？\",\n \"いつ閉店しますか？\"\n ],\n correctAnswer: \"これはいくらですか？\"\n },\n {\n question: \"Where is the restroom?\",\n roman: \"\",\n options: [\n \"トイレはどこですか？\",\n \"喫煙所はどこですか？\",\n \"エレベーターはどこですか？\",\n \"ホテルはどこですか？\"\n ],\n correctAnswer: \"トイレはどこですか？\"\n },\n {\n question: \"Can I have a menu in English, please?\",\n roman: \"\",\n options: [\n \"英語のメニューをいただけますか？\",\n \"窓側の席にしてもらえますか？\",\n \"この料理は辛いですか？\",\n \"持ち帰りできますか？\"\n ],\n correctAnswer: \"英語のメニューをいただけますか？\"\n },\n {\n question: \"I have a reservation.\",\n roman: \"\",\n options: [\n \"予約しています。\",\n \"チケットをなくしました。\",\n \"乗り換えを教えてください。\",\n \"現金だけですか？\"\n ],\n correctAnswer: \"予約しています。\"\n },\n {\n question: \"Do you speak English?\",\n roman: \"\",\n options: [\n \"英語は話せますか？\",\n \"助けが必要ですか？\",\n \"チケット売り場はどこですか？\",\n \"現金を持っていません。\"\n ],\n correctAnswer: \"英語は話せますか？\"\n },\n {\n question: \"I've lost my passport.\",\n roman: \"\",\n options: [\n \"パスポートをなくしました。\",\n \"あなたのパスポートを見つけました。\",\n \"これは私のパスポートですか？\",\n \"日本で申請するにはどうすればいいですか？\"\n ],\n correctAnswer: \"パスポートをなくしました。\"\n },\n {\n question: \"Where can I find a taxi?\",\n roman: \"\",\n options: [\n \"タクシーはどこで拾えますか？\",\n \"ホテルまでいくらかかりますか？\",\n \"トイレは有料ですか？\",\n \"無料のWi-Fiはありますか？\"\n ],\n correctAnswer: \"タクシーはどこで拾えますか？\"\n },\n {\n question: \"Could you take a photo of me, please?\",\n roman: \"\",\n options: [\n \"写真を撮ってもらえますか？\",\n \"お水をいただけますか？\",\n \"席を交換してもらえますか？\",\n \"領収書をいただけますか？\"\n ],\n correctAnswer: \"写真を撮ってもらえますか？\"\n },\n {\n question: \"Where is the bus stop?\",\n roman: \"\",\n options: [\n \"バス停はどこですか？\",\n \"電車の時刻表はどこで見られますか？\",\n \"これは無料ですか？\",\n \"これはお土産ですか？\"\n ],\n correctAnswer: \"バス停はどこですか？\"\n },\n {\n question: \"Could you speak more slowly, please?\",\n roman: \"\",\n options: [\n \"もう少しゆっくり話してもらえますか？\",\n \"おかわりをいただけますか？\",\n \"これは辛い料理ですか？\",\n \"今日は何曜日ですか？\"\n ],\n correctAnswer: \"もう少しゆっくり話してもらえますか？\"\n },\n {\n question: \"I'd like a non-smoking seat, please.\",\n roman: \"\",\n options: [\n \"禁煙席をお願いします。\",\n \"喫煙所を教えてください。\",\n \"相席できますか？\",\n \"この席は空いていますか？\"\n ],\n correctAnswer: \"禁煙席をお願いします。\"\n },\n {\n question: \"Where can I buy a train ticket?\",\n roman: \"\",\n options: [\n \"電車の切符はどこで買えますか？\",\n \"チケットを交換してもらえますか？\",\n \"一番近い駅はどこですか？\",\n \"あと何分で出発しますか？\"\n ],\n correctAnswer: \"電車の切符はどこで買えますか？\"\n },\n {\n question: \"Where can I exchange currency?\",\n roman: \"\",\n options: [\n \"両替所はどこですか？\",\n \"これは有名な名所ですか？\",\n \"レシートはもらえますか？\",\n \"この料金にチップは含まれますか？\"\n ],\n correctAnswer: \"両替所はどこですか？\"\n },\n {\n question: \"Could you recommend a good restaurant nearby?\",\n roman: \"\",\n options: [\n \"近くにおすすめのレストランはありますか？\",\n \"レストランは何時に閉まりますか？\",\n \"この席は禁煙ですか？\",\n \"相席は可能ですか？\"\n ],\n correctAnswer: \"近くにおすすめのレストランはありますか？\"\n },\n {\n question: \"Where is the hotel front desk?\",\n roman: \"\",\n options: [\n \"ホテルのフロントはどこですか？\",\n \"タオルをもう一枚もらえますか？\",\n \"空港バスの乗り場はどこですか？\",\n \"この部屋はいつまで使えますか？\"\n ],\n correctAnswer: \"ホテルのフロントはどこですか？\"\n },\n {\n question: \"Is free Wi-Fi available here?\",\n roman: \"\",\n options: [\n \"ここでWi-Fiは無料で使えますか？\",\n \"ここに座っていいですか？\",\n \"これは持ち込みできますか？\",\n \"これはオーガニック食材ですか？\"\n ],\n correctAnswer: \"ここでWi-Fiは無料で使えますか？\"\n },\n {\n question: \"I'd like to order room service.\",\n roman: \"\",\n options: [\n \"ルームサービスをお願いしたいのですが。\",\n \"部屋をクリーニングしてもらえますか？\",\n \"新しい部屋に変えてください。\",\n \"ドライヤーはありますか？\"\n ],\n correctAnswer: \"ルームサービスをお願いしたいのですが。\"\n },\n {\n question: \"Can I pay by credit card?\",\n roman: \"\",\n options: [\n \"クレジットカードで支払えますか？\",\n \"両替はできますか？\",\n \"今は営業中ですか？\",\n \"荷物を預けてもいいですか？\"\n ],\n correctAnswer: \"クレジットカードで支払えますか？\"\n },\n {\n question: \"Could you call a taxi for me?\",\n roman: \"\",\n options: [\n \"タクシーを呼んでもらえますか？\",\n \"クレームを言いたいのですが。\",\n \"帰りはいつですか？\",\n \"現金払いのみですか？\"\n ],\n correctAnswer: \"タクシーを呼んでもらえますか？\"\n },\n {\n question: \"Can you show me on the map?\",\n roman: \"\",\n options: [\n \"地図で教えてもらえますか？\",\n \"これは持ち帰り用ですか？\",\n \"雨は降りますか？\",\n \"何時から開いていますか？\"\n ],\n correctAnswer: \"地図で教えてもらえますか？\"\n },\n {\n question: \"When does the museum open?\",\n roman: \"\",\n options: [\n \"美術館はいつ開館しますか？\",\n \"昼食はついていますか？\",\n \"いま何時ですか？\",\n \"一時停止できますか？\"\n ],\n correctAnswer: \"美術館はいつ開館しますか？\"\n },\n {\n question: \"I'd like a table for two.\",\n roman: \"\",\n options: [\n \"2人用のテーブルをお願いします。\",\n \"もう1人来ます。\",\n \"どこに座ればいいですか？\",\n \"合計金額はいくらですか？\"\n ],\n correctAnswer: \"2人用のテーブルをお願いします。\"\n },\n {\n question: \"Is breakfast included?\",\n roman: \"\",\n options: [\n \"朝食は含まれていますか？\",\n \"朝食は何時からですか？\",\n \"部屋は禁煙ですか？\",\n \"夕食も頼めますか？\"\n ],\n correctAnswer: \"朝食は含まれていますか？\"\n },\n {\n question: \"Where can I buy a SIM card?\",\n roman: \"\",\n options: [\n \"SIMカードはどこで買えますか？\",\n \"これはチップ込みですか？\",\n \"今は空いていますか？\",\n \"どの路線を使えばいいですか？\"\n ],\n correctAnswer: \"SIMカードはどこで買えますか？\"\n },\n {\n question: \"Is there a convenience store nearby?\",\n roman: \"\",\n options: [\n \"近くにコンビニはありますか？\",\n \"これは持って帰れますか？\",\n \"スーツケースを預けられますか？\",\n \"現金払いのみですか？\"\n ],\n correctAnswer: \"近くにコンビニはありますか？\"\n },\n {\n question: \"When is check-out time?\",\n roman: \"\",\n options: [\n \"チェックアウトは何時ですか？\",\n \"ここでタクシーを呼べますか？\",\n \"夕食は何時からですか？\",\n \"部屋にバスタブはありますか？\"\n ],\n correctAnswer: \"チェックアウトは何時ですか？\"\n },\n {\n question: \"Could I store my luggage here?\",\n roman: \"\",\n options: [\n \"ここに荷物を預けられますか？\",\n \"何時からチケットを買えますか？\",\n \"クレジットカードは必要ですか？\",\n \"予約の名前を教えてください。\"\n ],\n correctAnswer: \"ここに荷物を預けられますか？\"\n },\n {\n question: \"Where is the train station?\",\n roman: \"\",\n options: [\n \"駅はどこですか？\",\n \"これは座席指定ですか？\",\n \"何時に集合ですか？\",\n \"手数料はいくらですか？\"\n ],\n correctAnswer: \"駅はどこですか？\"\n },\n {\n question: \"Do you have any discounts?\",\n roman: \"\",\n options: [\n \"割引はありますか？\",\n \"予約は必要ですか？\",\n \"この席は禁煙ですか？\",\n \"写真を撮ってもいいですか？\"\n ],\n correctAnswer: \"割引はありますか？\"\n }\n];\n\n// 中国語版(30問)\nconst TRAVEL_PHRASES_ZH = [\n {\n question: \"最近的自动柜员机在哪里？\",\n roman: \"(Zuì jìn de zì dòng guì yuán jī zài nǎ lǐ?)\",\n options: [\n \"最寄りのATMはどこですか？\",\n \"クレジットカードは使えますか？\",\n \"これはいくらですか？\",\n \"トイレはどこですか？\"\n ],\n correctAnswer: \"最寄りのATMはどこですか？\"\n },\n {\n question: \"这个多少钱？\",\n roman: \"(Zhè gè duō shǎo qián?)\",\n options: [\n \"これはいくらですか？\",\n \"いくら割り引いてくれますか？\",\n \"現金は必要ですか？\",\n \"いつ閉店しますか？\"\n ],\n correctAnswer: \"これはいくらですか？\"\n },\n {\n question: \"洗手间在哪里？\",\n roman: \"(Xǐ shǒu jiān zài nǎ lǐ?)\",\n options: [\n \"トイレはどこですか？\",\n \"喫煙所はどこですか？\",\n \"エレベーターはどこですか？\",\n \"ホテルはどこですか？\"\n ],\n correctAnswer: \"トイレはどこですか？\"\n },\n {\n question: \"请给我一份英文菜单好吗？\",\n roman: \"(Qǐng gěi wǒ yī fèn yīng wén cài dān hǎo ma?)\",\n options: [\n \"英語のメニューをいただけますか？\",\n \"窓側の席にしてもらえますか？\",\n \"この料理は辛いですか？\",\n \"持ち帰りできますか？\"\n ],\n correctAnswer: \"英語のメニューをいただけますか？\"\n },\n {\n question: \"我有预订。\",\n roman: \"(Wǒ yǒu yù dìng.)\",\n options: [\n \"予約しています。\",\n \"チケットをなくしました。\",\n \"乗り換えを教えてください。\",\n \"現金だけですか？\"\n ],\n correctAnswer: \"予約しています。\"\n },\n {\n question: \"你会说英语吗？\",\n roman: \"(Nǐ huì shuō yīng yǔ ma?)\",\n options: [\n \"英語は話せますか？\",\n \"助けが必要ですか？\",\n \"チケット売り場はどこですか？\",\n \"現金を持っていません。\"\n ],\n correctAnswer: \"英語は話せますか？\"\n },\n {\n question: \"我护照丢了。\",\n roman: \"(Wǒ hù zhào diū le.)\",\n options: [\n \"パスポートをなくしました。\",\n \"日本の地図をもらえますか？\",\n \"両替所はどこですか？\",\n \"これは誰の荷物ですか？\"\n ],\n correctAnswer: \"パスポートをなくしました。\"\n },\n {\n question: \"在哪儿能打到出租车？\",\n roman: \"(Zài nǎ er néng dǎ dào chū zū chē?)\",\n options: [\n \"タクシーはどこで拾えますか？\",\n \"ホテルまでいくらかかりますか？\",\n \"トイレは有料ですか？\",\n \"無料のWi-Fiはありますか？\"\n ],\n correctAnswer: \"タクシーはどこで拾えますか？\"\n },\n {\n question: \"能帮我拍张照吗？\",\n roman: \"(Néng bāng wǒ pāi zhāng zhào ma?)\",\n options: [\n \"写真を撮ってもらえますか？\",\n \"お水をいただけますか？\",\n \"席を交換してもらえますか？\",\n \"領収書をいただけますか？\"\n ],\n correctAnswer: \"写真を撮ってもらえますか？\"\n },\n {\n question: \"公交车站在哪里？\",\n roman: \"(Gōng jiāo chē zhàn zài nǎ lǐ?)\",\n options: [\n \"バス停はどこですか？\",\n \"電車の時刻表はどこで見られますか？\",\n \"これは無料ですか？\",\n \"これはお土産ですか？\"\n ],\n correctAnswer: \"バス停はどこですか？\"\n },\n {\n question: \"你能说得再慢一点吗？\",\n roman: \"(Nǐ néng shuō dé zài màn yī diǎn ma?)\",\n options: [\n \"もう少しゆっくり話してもらえますか？\",\n \"これはテイクアウトできますか？\",\n \"どこで予約すればいいですか？\",\n \"大声で話してもいいですか？\"\n ],\n correctAnswer: \"もう少しゆっくり話してもらえますか？\"\n },\n {\n question: \"我想要一个无烟座位。\",\n roman: \"(Wǒ xiǎng yào yī gè wú yān zuò wèi.)\",\n options: [\n \"禁煙席をお願いします。\",\n \"すぐに行きます。\",\n \"外は寒いですか？\",\n \"相席してもいいですか？\"\n ],\n correctAnswer: \"禁煙席をお願いします。\"\n },\n {\n question: \"在哪里买火车票？\",\n roman: \"(Zài nǎ lǐ mǎi huǒ chē piào?)\",\n options: [\n \"電車の切符はどこで買えますか？\",\n \"これは予約制ですか？\",\n \"次のバス停はどこですか？\",\n \"どのレーンに並びますか？\"\n ],\n correctAnswer: \"電車の切符はどこで買えますか？\"\n },\n {\n question: \"哪里可以换钱？\",\n roman: \"(Nǎ lǐ kě yǐ huàn qián?)\",\n options: [\n \"両替所はどこですか？\",\n \"これは販売機ですか？\",\n \"忘れ物をしました。\",\n \"写真を撮ってもいいですか？\"\n ],\n correctAnswer: \"両替所はどこですか？\"\n },\n {\n question: \"附近有不错的餐厅吗？\",\n roman: \"(Fù jìn yǒu bú cuò de cān tīng ma?)\",\n options: [\n \"近くにおすすめのレストランはありますか？\",\n \"レストランは何時まで空いていますか？\",\n \"何時に出発しますか？\",\n \"無料の地図はありますか？\"\n ],\n correctAnswer: \"近くにおすすめのレストランはありますか？\"\n },\n {\n question: \"酒店前台在哪儿？\",\n roman: \"(Jiǔ diàn qián tái zài nǎ er?)\",\n options: [\n \"ホテルのフロントはどこですか？\",\n \"何時に出発しますか？\",\n \"喫煙所はどこですか？\",\n \"Wi-Fiは有料ですか？\"\n ],\n correctAnswer: \"ホテルのフロントはどこですか？\"\n },\n {\n question: \"这里有免费Wi-Fi吗？\",\n roman: \"(Zhè lǐ yǒu miǎn fèi Wi-Fi ma?)\",\n options: [\n \"ここでWi-Fiは無料で使えますか？\",\n \"これはお持ち帰りできますか？\",\n \"合計はいくらですか？\",\n \"税金は含まれていますか？\"\n ],\n correctAnswer: \"ここでWi-Fiは無料で使えますか？\"\n },\n {\n question: \"我想要客房服务。\",\n roman: \"(Wǒ xiǎng yào kè fáng fú wù.)\",\n options: [\n \"ルームサービスをお願いしたいのですが。\",\n \"エアコンをつけてもらえますか？\",\n \"レシートをください。\",\n \"あちらの席でいいですか？\"\n ],\n correctAnswer: \"ルームサービスをお願いしたいのですが。\"\n },\n {\n question: \"可以用信用卡吗？\",\n roman: \"(Kě yǐ yòng xìn yòng kǎ ma?)\",\n options: [\n \"クレジットカードで支払えますか？\",\n \"何時に閉まりますか？\",\n \"チケットの再発行はできますか？\",\n \"どこで並べばいいですか？\"\n ],\n correctAnswer: \"クレジットカードで支払えますか？\"\n },\n {\n question: \"能帮我叫一辆出租车吗？\",\n roman: \"(Néng bāng wǒ jiào yī liàng chū zū chē ma?)\",\n options: [\n \"タクシーを呼んでもらえますか？\",\n \"乗り換えは必要ですか？\",\n \"エレベーターはありますか？\",\n \"割り勘にできますか？\"\n ],\n correctAnswer: \"タクシーを呼んでもらえますか？\"\n },\n {\n question: \"能在地图上告诉我吗？\",\n roman: \"(Néng zài dì tú shàng gào sù wǒ ma?)\",\n options: [\n \"地図で教えてもらえますか？\",\n \"郵便局はどこですか？\",\n \"これはサービス料込みですか？\",\n \"有名な観光地はどこですか？\"\n ],\n correctAnswer: \"地図で教えてもらえますか？\"\n },\n {\n question: \"博物馆什么时候开门？\",\n roman: \"(Bó wù guǎn shén me shí hòu kāi mén?)\",\n options: [\n \"美術館はいつ開館しますか？\",\n \"これは無料ですか？\",\n \"フロントは何階ですか？\",\n \"待ち時間はどのくらいですか？\"\n ],\n correctAnswer: \"美術館はいつ開館しますか？\"\n },\n {\n question: \"我要一个两人座位。\",\n roman: \"(Wǒ yào yī gè liǎng rén zuò wèi.)\",\n options: [\n \"2人用のテーブルをお願いします。\",\n \"すぐ出発できますか？\",\n \"もっとうるさい席ですか？\",\n \"現金しか持っていません。\"\n ],\n correctAnswer: \"2人用のテーブルをお願いします。\"\n },\n {\n question: \"包含早餐吗？\",\n roman: \"(Bāo hán zǎo cān ma?)\",\n options: [\n \"朝食は含まれていますか？\",\n \"これはサービス料ですか？\",\n \"明日の予定を教えてください。\",\n \"連絡先はどこですか？\"\n ],\n correctAnswer: \"朝食は含まれていますか？\"\n },\n {\n question: \"在哪里能买到SIM卡？\",\n roman: \"(Zài nǎ lǐ néng mǎi dào SIM kǎ?)\",\n options: [\n \"SIMカードはどこで買えますか？\",\n \"これは何人分ですか？\",\n \"代理店はどこにありますか？\",\n \"何時に開店しますか？\"\n ],\n correctAnswer: \"SIMカードはどこで買えますか？\"\n },\n {\n question: \"附近有便利店吗？\",\n roman: \"(Fù jìn yǒu biàn lì diàn ma?)\",\n options: [\n \"近くにコンビニはありますか？\",\n \"駅まではどれくらいですか？\",\n \"ピックアップサービスはありますか？\",\n \"チェックアウトは何時ですか？\"\n ],\n correctAnswer: \"近くにコンビニはありますか？\"\n },\n {\n question: \"几点退房？\",\n roman: \"(Jǐ diǎn tuì fáng?)\",\n options: [\n \"チェックアウトは何時ですか？\",\n \"買い物できますか？\",\n \"カードキーは使えますか？\",\n \"朝食はビュッフェですか？\"\n ],\n correctAnswer: \"チェックアウトは何時ですか？\"\n },\n {\n question: \"可以把行李寄存在这里吗？\",\n roman: \"(Kě yǐ bǎ xíng lǐ jì cún zài zhè lǐ ma?)\",\n options: [\n \"ここに荷物を預けられますか？\",\n \"ここは禁煙席ですか？\",\n \"ホテルまではどのくらいかかりますか？\",\n \"手数料はいくらですか？\"\n ],\n correctAnswer: \"ここに荷物を預けられますか？\"\n },\n {\n question: \"火车站在哪里？\",\n roman: \"(Huǒ chē zhàn zài nǎ lǐ?)\",\n options: [\n \"駅はどこですか？\",\n \"改札はどこですか？\",\n \"次の列車は何時ですか？\",\n \"出口はあちらですか？\"\n ],\n correctAnswer: \"駅はどこですか？\"\n },\n {\n question: \"有折扣吗？\",\n roman: \"(Yǒu zhé kòu ma?)\",\n options: [\n \"割引はありますか？\",\n \"これはどれくらいの量ですか？\",\n \"ツアーガイドはいますか？\",\n \"いつまでに申し込めますか？\"\n ],\n correctAnswer: \"割引はありますか？\"\n }\n];\n\n// 韓国語版(30問)\nconst TRAVEL_PHRASES_KO = [\n {\n question: \"가장 가까운 ATM은 어디에 있나요?\",\n roman: \"(gajang gakkaun ATM-eun eodie itnayo?)\",\n options: [\n \"最寄りのATMはどこですか？\",\n \"クレジットカードは使えますか？\",\n \"これはいくらですか？\",\n \"トイレはどこですか？\"\n ],\n correctAnswer: \"最寄りのATMはどこですか？\"\n },\n {\n question: \"이것은 얼마입니까?\",\n roman: \"(igeoseun eolmaimnikka?)\",\n options: [\n \"これはいくらですか？\",\n \"いくら割り引いてくれますか？\",\n \"現金は必要ですか？\",\n \"いつ閉店しますか？\"\n ],\n correctAnswer: \"これはいくらですか？\"\n },\n {\n question: \"화장실은 어디에 있나요?\",\n roman: \"(hwajangsil-eun eodie itnayo?)\",\n options: [\n \"トイレはどこですか？\",\n \"喫煙所はどこですか？\",\n \"エレベーターはどこですか？\",\n \"ホテルはどこですか？\"\n ],\n correctAnswer: \"トイレはどこですか？\"\n },\n {\n question: \"영어 메뉴가 있나요?\",\n roman: \"(yeongeo menyuga innayo?)\",\n options: [\n \"英語のメニューをいただけますか？\",\n \"窓側の席にしてもらえますか？\",\n \"この料理は辛いですか？\",\n \"持ち帰りできますか？\"\n ],\n correctAnswer: \"英語のメニューをいただけますか？\"\n },\n {\n question: \"예약을 했습니다.\",\n roman: \"(yeyageul haetseumnida.)\",\n options: [\n \"予約しています。\",\n \"チケットをなくしました。\",\n \"乗り換えを教えてください。\",\n \"現金だけですか？\"\n ],\n correctAnswer: \"予約しています。\"\n },\n {\n question: \"영어를 할 줄 아시나요?\",\n roman: \"(yeongeoreul hal jul ashinayo?)\",\n options: [\n \"英語は話せますか？\",\n \"助けが必要ですか？\",\n \"チケット売り場はどこですか？\",\n \"現金を持っていません。\"\n ],\n correctAnswer: \"英語は話せますか？\"\n },\n {\n question: \"여권을 잃어버렸습니다.\",\n roman: \"(yeogwon-eul ireobeoryeotseumnida.)\",\n options: [\n \"パスポートをなくしました。\",\n \"日本の地図をもらえますか？\",\n \"両替所はどこですか？\",\n \"これは誰の荷物ですか？\"\n ],\n correctAnswer: \"パスポートをなくしました。\"\n },\n {\n question: \"택시는 어디서 잡을 수 있나요?\",\n roman: \"(taegsineun eodiseo jabeul su innayo?)\",\n options: [\n \"タクシーはどこで拾えますか？\",\n \"ホテルまでいくらかかりますか？\",\n \"トイレは有料ですか？\",\n \"無料のWi-Fiはありますか？\"\n ],\n correctAnswer: \"タクシーはどこで拾えますか？\"\n },\n {\n question: \"사진 좀 찍어주시겠어요?\",\n roman: \"(sajin jom jjigeojusigesseoyo?)\",\n options: [\n \"写真を撮ってもらえますか？\",\n \"お水をいただけますか？\",\n \"席を交換してもらえますか？\",\n \"領収書をいただけますか？\"\n ],\n correctAnswer: \"写真を撮ってもらえますか？\"\n },\n {\n question: \"버스 정류장은 어디인가요?\",\n roman: \"(beoseu jeongryujangeun eodiingayo?)\",\n options: [\n \"バス停はどこですか？\",\n \"電車の時刻表はどこで見られますか？\",\n \"これは無料ですか？\",\n \"これはお土産ですか？\"\n ],\n correctAnswer: \"バス停はどこですか？\"\n },\n {\n question: \"좀 더 천천히 말씀해 주시겠어요?\",\n roman: \"(jom deo cheoncheonhi malsseumhae jusigesseoyo?)\",\n options: [\n \"もう少しゆっくり話してもらえますか？\",\n \"これはテイクアウトできますか？\",\n \"道に迷いました。\",\n \"大声で話してもいいですか？\"\n ],\n correctAnswer: \"もう少しゆっくり話してもらえますか？\"\n },\n {\n question: \"금연석으로 부탁드립니다.\",\n roman: \"(geumyeonseogeuro butakdeurimnida.)\",\n options: [\n \"禁煙席をお願いします。\",\n \"喫煙できますか？\",\n \"外は暑いですか？\",\n \"クーポンはありますか？\"\n ],\n correctAnswer: \"禁煙席をお願いします。\"\n },\n {\n question: \"기차 표는 어디에서 살 수 있나요?\",\n roman: \"(gicha pyoneun eodieseo sal su innayo?)\",\n options: [\n \"電車の切符はどこで買えますか？\",\n \"指定席はありますか？\",\n \"あと何分で発車しますか？\",\n \"次の乗り換えはどこですか？\"\n ],\n correctAnswer: \"電車の切符はどこで買えますか？\"\n },\n {\n question: \"환전은 어디에서 할 수 있나요?\",\n roman: \"(hwanjeoneun eodieseo hal su innayo?)\",\n options: [\n \"両替所はどこですか？\",\n \"これは何人分ですか？\",\n \"出口はあちらですか？\",\n \"チケットはどこで確認できますか？\"\n ],\n correctAnswer: \"両替所はどこですか？\"\n },\n {\n question: \"근처에 괜찮은 식당이 있나요?\",\n roman: \"(geuncheoe gwaenchanheun sikdang-i innayo?)\",\n options: [\n \"近くにおすすめのレストランはありますか？\",\n \"これはお土産ですか？\",\n \"エレベーターはどこですか？\",\n \"朝食は何時からですか？\"\n ],\n correctAnswer: \"近くにおすすめのレストランはありますか？\"\n },\n {\n question: \"호텔 프런트는 어디인가요?\",\n roman: \"(hotel peureonteuneun eodiingayo?)\",\n options: [\n \"ホテルのフロントはどこですか？\",\n \"レシートをください。\",\n \"換金できますか？\",\n \"この席は空いていますか？\"\n ],\n correctAnswer: \"ホテルのフロントはどこですか？\"\n },\n {\n question: \"여기 무료 와이파이가 되나요?\",\n roman: \"(yeogi muryo waipaiga doinayo?)\",\n options: [\n \"ここでWi-Fiは無料で使えますか？\",\n \"これは有料ですか？\",\n \"いま何時ですか？\",\n \"近くに美術館はありますか？\"\n ],\n correctAnswer: \"ここでWi-Fiは無料で使えますか？\"\n },\n {\n question: \"룸서비스를 주문하고 싶습니다.\",\n roman: \"(rumseobiseureul jumunhago sipseumnida.)\",\n options: [\n \"ルームサービスをお願いしたいのですが。\",\n \"あちらの席に移っていいですか？\",\n \"掃除をお願いできますか？\",\n \"これを返品できますか？\"\n ],\n correctAnswer: \"ルームサービスをお願いしたいのですが。\"\n },\n {\n question: \"신용카드로 계산할 수 있나요?\",\n roman: \"(sinyongkadeuro gyesanhal su innayo?)\",\n options: [\n \"クレジットカードで支払えますか？\",\n \"現金のみですか？\",\n \"営業時間は何時ですか？\",\n \"パスポートは必要ですか？\"\n ],\n correctAnswer: \"クレジットカードで支払えますか？\"\n },\n {\n question: \"택시를 불러 주실 수 있나요?\",\n roman: \"(taegsireul bulleo jusil su innayo?)\",\n options: [\n \"タクシーを呼んでもらえますか？\",\n \"飛行機のチケットは予約できますか？\",\n \"今は乗れませんか？\",\n \"到着は何時ですか？\"\n ],\n correctAnswer: \"タクシーを呼んでもらえますか？\"\n },\n {\n question: \"지도에서 알려주시겠어요?\",\n roman: \"(jidoeseo allyeojusigesseoyo?)\",\n options: [\n \"地図で教えてもらえますか？\",\n \"撮影禁止ですか？\",\n \"これは免税ですか？\",\n \"クレームはこちらですか？\"\n ],\n correctAnswer: \"地図で教えてもらえますか？\"\n },\n {\n question: \"박물관은 언제 열어요?\",\n roman: \"(bakmulgwaneun eonje yeoleoyo?)\",\n options: [\n \"美術館はいつ開館しますか？\",\n \"朝食は含まれていますか？\",\n \"今日は定休日ですか？\",\n \"チェックアウトは何時ですか？\"\n ],\n correctAnswer: \"美術館はいつ開館しますか？\"\n },\n {\n question: \"2인용 테이블 부탁드려요.\",\n roman: \"(i-inyong teibeul butakdeuryeoyo?)\",\n options: [\n \"2人用のテーブルをお願いします。\",\n \"いま何時ですか？\",\n \"おかわりはできますか？\",\n \"飛行機は何時に到着しますか？\"\n ],\n correctAnswer: \"2人用のテーブルをお願いします。\"\n },\n {\n question: \"조식은 포함되어 있나요?\",\n roman: \"(josigeun pohamdoe-e innayo?)\",\n options: [\n \"朝食は含まれていますか？\",\n \"部屋は禁煙ですか？\",\n \"すぐにチェックアウトできますか？\",\n \"ゲートはどこですか？\"\n ],\n correctAnswer: \"朝食は含まれていますか？\"\n },\n {\n question: \"SIM 카드는 어디에서 살 수 있나요?\",\n roman: \"(SIM kadeuneun eodieseo sal su innayo?)\",\n options: [\n \"SIMカードはどこで買えますか？\",\n \"チケットはどこで予約できますか？\",\n \"どこで休憩できますか？\",\n \"朝食は何時からですか？\"\n ],\n correctAnswer: \"SIMカードはどこで買えますか？\"\n },\n {\n question: \"근처에 편의점이 있나요?\",\n roman: \"(geuncheoe pyeonuijeomi innayo?)\",\n options: [\n \"近くにコンビニはありますか？\",\n \"トイレは有料ですか？\",\n \"キャンセルはできますか？\",\n \"夜は安全ですか？\"\n ],\n correctAnswer: \"近くにコンビニはありますか？\"\n },\n {\n question: \"체크아웃은 몇 시인가요?\",\n roman: \"(chekeuauseun myeo siingayo?)\",\n options: [\n \"チェックアウトは何時ですか？\",\n \"どの路線がおすすめですか？\",\n \"席の予約はできますか？\",\n \"パスポートが要りますか？\"\n ],\n correctAnswer: \"チェックアウトは何時ですか？\"\n },\n {\n question: \"여기에 짐을 맡길 수 있을까요?\",\n roman: \"(yeogie jimeul matgil su isseulkkayo?)\",\n options: [\n \"ここに荷物を預けられますか？\",\n \"ここは座席指定ですか？\",\n \"レシートをください。\",\n \"クレジットカードはありますか？\"\n ],\n correctAnswer: \"ここに荷物を預けられますか？\"\n },\n {\n question: \"기차역은 어디에 있나요?\",\n roman: \"(gichayeogeun eodie innayo?)\",\n options: [\n \"駅はどこですか？\",\n \"空港はどこですか？\",\n \"次の電車は何時ですか？\",\n \"これはお土産ですか？\"\n ],\n correctAnswer: \"駅はどこですか？\"\n },\n {\n question: \"할인해 주시나요?\",\n roman: \"(halinhae jusinayo?)\",\n options: [\n \"割引はありますか？\",\n \"いつまで営業していますか？\",\n \"ほかに方法はありますか？\",\n \"これは予約制ですか？\"\n ],\n correctAnswer: \"割引はありますか？\"\n }\n];\n\n// タイ語版(入門10問)\nconst TRAVEL_PHRASES_TH = [\n {\n question: \"สวัสดีค่ะ / ครับ\",\n roman: \"(sà-wàt-dii khâ / khráp)\",\n options: [\n \"こんにちは\",\n \"トイレはどこですか？\",\n \"これはいくらですか？\",\n \"ありがとう\"\n ],\n correctAnswer: \"こんにちは\"\n },\n {\n question: \"ขอบคุณค่ะ / ครับ\",\n roman: \"(khàawp-khun khâ / khráp)\",\n options: [\n \"ありがとう\",\n \"すみません\",\n \"はい\",\n \"いいえ\"\n ],\n correctAnswer: \"ありがとう\"\n },\n {\n question: \"ช่วยด้วย!\",\n roman: \"(chûay dûay!)\",\n options: [\n \"助けてください！\",\n \"はい、どうぞ\",\n \"また会いましょう\",\n \"現金しかありません\"\n ],\n correctAnswer: \"助けてください！\"\n },\n {\n question: \"ฉันไม่พูดภาษาไทย\",\n roman: \"(chǎn mâi phûut phaasǎa thai)\",\n options: [\n \"私はタイ語が話せません\",\n \"現金払いのみですか？\",\n \"少しお待ちください\",\n \"これをください\"\n ],\n correctAnswer: \"私はタイ語が話せません\"\n },\n {\n question: \"ห้องน้ำอยู่ที่ไหน?\",\n roman: \"(hông-nám yùu thîi nǎi?)\",\n options: [\n \"トイレはどこですか？\",\n \"ホテルはどこですか？\",\n \"空港へはどうやって行きますか？\",\n \"予約はしていますか？\"\n ],\n correctAnswer: \"トイレはどこですか？\"\n },\n {\n question: \"นี่ราคาเท่าไหร่?\",\n roman: \"(nîi raa-khaa thâo-rài?)\",\n options: [\n \"これはいくらですか？\",\n \"これは辛いですか？\",\n \"いつオープンしますか？\",\n \"席を交換できますか？\"\n ],\n correctAnswer: \"これはいくらですか？\"\n },\n {\n question: \"ฉันอยากได้อันนี้\",\n roman: \"(chǎn yàak dâi an níi)\",\n options: [\n \"これが欲しいです\",\n \"これはおいしいです\",\n \"私は眠いです\",\n \"両替所はどこですか？\"\n ],\n correctAnswer: \"これが欲しいです\"\n },\n {\n question: \"พูดภาษาอังกฤษได้ไหม?\",\n roman: \"(phûut phaasǎa ang-grìt dâi mǎi?)\",\n options: [\n \"英語は話せますか？\",\n \"日本語は話せますか？\",\n \"少ししか話せません\",\n \"写真を撮ってもらえますか？\"\n ],\n correctAnswer: \"英語は話せますか？\"\n },\n {\n question: \"ช่วยถ่ายรูปให้หน่อยได้ไหม?\",\n roman: \"(chûay thàai rûup hâi nɔ̀i dâi mǎi?)\",\n options: [\n \"写真を撮ってもらえますか？\",\n \"私はタイ人ではありません\",\n \"辛くしないでください\",\n \"英語のメニューをください\"\n ],\n correctAnswer: \"写真を撮ってもらえますか？\"\n },\n {\n question: \"ขอจ่ายด้วยบัตรเครดิตได้ไหม?\",\n roman: \"(khɔ̌ɔ càai dûay bàt khre-dìt dâi mǎi?)\",\n options: [\n \"クレジットカードで支払えますか？\",\n \"携帯を充電できますか？\",\n \"トイレは有料ですか？\",\n \"タクシーを呼んでもらえますか？\"\n ],\n correctAnswer: \"クレジットカードで支払えますか？\"\n }\n];\n\nconst TRAVEL_PHRASES_ID = [\n {\n question: \"Halo\",\n roman: \"(Halo)\",\n options: [\n \"こんにちは\",\n \"ありがとう\",\n \"トイレはどこですか？\",\n \"はい / いいえ\"\n ],\n correctAnswer: \"こんにちは\"\n },\n {\n question: \"Terima kasih\",\n roman: \"(Te-ri-ma ka-sih)\",\n options: [\n \"ありがとう\",\n \"すみません\",\n \"さようなら\",\n \"おはよう\"\n ],\n correctAnswer: \"ありがとう\"\n },\n {\n question: \"Tolong!\",\n roman: \"(To-long!)\",\n options: [\n \"助けてください！\",\n \"はじめまして\",\n \"お会計お願いします\",\n \"英語のメニューをください\"\n ],\n correctAnswer: \"助けてください！\"\n },\n {\n question: \"Saya tidak bisa bahasa Indonesia\",\n roman: \"(Sa-ya ti-dak bi-sa ba-ha-sa In-do-ne-sia)\",\n options: [\n \"私はインドネシア語が話せません\",\n \"これはいくらですか？\",\n \"現金は持っていません\",\n \"クレジットカードは使えますか？\"\n ],\n correctAnswer: \"私はインドネシア語が話せません\"\n },\n {\n question: \"Di mana toiletnya?\",\n roman: \"(Di ma-na toi-let-nya?)\",\n options: [\n \"トイレはどこですか？\",\n \"ホテルはどこですか？\",\n \"これは無料ですか？\",\n \"席を交換できますか？\"\n ],\n correctAnswer: \"トイレはどこですか？\"\n },\n {\n question: \"Berapa harganya?\",\n roman: \"(Be-ra-pa har-ga-nya?)\",\n options: [\n \"これはいくらですか？\",\n \"これは辛いですか？\",\n \"すみません、手伝ってください\",\n \"何時からですか？\"\n ],\n correctAnswer: \"これはいくらですか？\"\n },\n {\n question: \"Saya mau ini\",\n roman: \"(Sa-ya ma-u i-ni)\",\n options: [\n \"これが欲しいです\",\n \"これが嫌いです\",\n \"これはおいしいです\",\n \"道に迷いました\"\n ],\n correctAnswer: \"これが欲しいです\"\n },\n {\n question: \"Bisa bicara bahasa Inggris?\",\n roman: \"(Bi-sa bi-cha-ra ba-ha-sa Ing-gris?)\",\n options: [\n \"英語は話せますか？\",\n \"日本語で話せますか？\",\n \"両替はできますか？\",\n \"これは持ち帰りできますか？\"\n ],\n correctAnswer: \"英語は話せますか？\"\n },\n {\n question: \"Boleh minta tolong foto?\",\n roman: \"(Bo-leh min-ta to-long fo-to?)\",\n options: [\n \"写真を撮ってもらえますか？\",\n \"いつ営業していますか？\",\n \"これは辛い料理ですか？\",\n \"食事は含まれていますか？\"\n ],\n correctAnswer: \"写真を撮ってもらえますか？\"\n },\n {\n question: \"Bisa bayar pakai kartu kredit?\",\n roman: \"(Bi-sa ba-yar pa-kai kar-tu kre-dit?)\",\n options: [\n \"クレジットカードで支払えますか？\",\n \"Wi-Fiは無料ですか？\",\n \"これは予約制ですか？\",\n \"ここに荷物を預けられますか？\"\n ],\n correctAnswer: \"クレジットカードで支払えますか？\"\n }\n];\n\nconst TRAVEL_PHRASES_FR = [\n {\n question: \"Bonjour\",\n roman: \"(bohn-zhoor)\",\n options: [\n \"こんにちは\",\n \"ありがとう\",\n \"ごめんなさい\",\n \"さようなら\"\n ],\n correctAnswer: \"こんにちは\"\n },\n {\n question: \"Merci\",\n roman: \"(mehr-see)\",\n options: [\n \"ありがとう\",\n \"はい\",\n \"いいえ\",\n \"おいしい\"\n ],\n correctAnswer: \"ありがとう\"\n },\n {\n question: \"Au secours!\",\n roman: \"(oh suh-koor!)\",\n options: [\n \"助けてください！\",\n \"ゆっくりお願いします\",\n \"予約しています\",\n \"お会計をお願いします\"\n ],\n correctAnswer: \"助けてください！\"\n },\n {\n question: \"Je ne parle pas français\",\n roman: \"(zhuh nuh pahrl pah frahn-seh)\",\n options: [\n \"私はフランス語が話せません\",\n \"私は日本語が話せません\",\n \"これはいくらですか？\",\n \"英語で話せますか？\"\n ],\n correctAnswer: \"私はフランス語が話せません\"\n },\n {\n question: \"Où sont les toilettes?\",\n roman: \"(oo sohn leh twah-let?)\",\n options: [\n \"トイレはどこですか？\",\n \"ここは禁煙ですか？\",\n \"これは無料ですか？\",\n \"チップは含まれていますか？\"\n ],\n correctAnswer: \"トイレはどこですか？\"\n },\n {\n question: \"C'est combien?\",\n roman: \"(say kohm-byehn?)\",\n options: [\n \"これはいくらですか？\",\n \"ここに荷物を預けられますか？\",\n \"これはお土産ですか？\",\n \"いつ閉店しますか？\"\n ],\n correctAnswer: \"これはいくらですか？\"\n },\n {\n question: \"Je voudrais ceci\",\n roman: \"(zhuh vooh-dreh suh-see)\",\n options: [\n \"これが欲しいです\",\n \"これを捨ててもいいですか？\",\n \"宿はどこですか？\",\n \"辛くしないでください\"\n ],\n correctAnswer: \"これが欲しいです\"\n },\n {\n question: \"Parlez-vous anglais?\",\n roman: \"(par-lay-voo ahn-glay?)\",\n options: [\n \"英語は話せますか？\",\n \"日本語は話せますか？\",\n \"これはおいくらですか？\",\n \"いつオープンですか？\"\n ],\n correctAnswer: \"英語は話せますか？\"\n },\n {\n question: \"Pouvez-vous me prendre en photo?\",\n roman: \"(poo-vay voo muh prahndr ahn foh-to?)\",\n options: [\n \"写真を撮ってもらえますか？\",\n \"通貨を両替できますか？\",\n \"クレジットカードは使えますか？\",\n \"辛い料理ですか？\"\n ],\n correctAnswer: \"写真を撮ってもらえますか？\"\n },\n {\n question: \"Est-ce que je peux payer par carte de crédit?\",\n roman: \"(ess-kuh zhuh puh pay-yay pahr kart duh kray-dee?)\",\n options: [\n \"クレジットカードで支払えますか？\",\n \"これはお持ち帰りできますか？\",\n \"乗り換えは必要ですか？\",\n \"これはお酒ですか？\"\n ],\n correctAnswer: \"クレジットカードで支払えますか？\"\n }\n];\n\nconst QUIZ_DATA = {\n en: TRAVEL_PHRASES_EN,\n zh: TRAVEL_PHRASES_ZH,\n ko: TRAVEL_PHRASES_KO,\n th: TRAVEL_PHRASES_TH,\n id: TRAVEL_PHRASES_ID,\n fr: TRAVEL_PHRASES_FR,\n};\n\nexport default function TravelQuiz() {\n const [hasStarted, setHasStarted] = useState(false);\n const [selectedLanguage, setSelectedLanguage] = useState(null); // 'en' | 'zh' | 'ko' | 'th'\n\n // アルファベット(ピンイン/ローマ字)表示のON/OFF\n const [showRomanization, setShowRomanization] = useState(false);\n\n // クイズ関連\n const [questions, setQuestions] = useState([]);\n const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);\n const [score, setScore] = useState(0);\n const [showResult, setShowResult] = useState(false);\n // 回答の履歴\n const [answerHistory, setAnswerHistory] = useState([]);\n\n // 選択された選択肢\n const [selectedOption, setSelectedOption] = useState(null);\n // 回答後の状態(正誤など)\n const [isRevealed, setIsRevealed] = useState(false);\n const [isCorrect, setIsCorrect] = useState(null);\n\n // 時間計測\n const [startTime, setStartTime] = useState(null);\n const [endTime, setEndTime] = useState(null);\n\n // 言語選択後にクイズ開始\n const startQuiz = (lang) => {\n setSelectedLanguage(lang);\n initializeQuiz(lang);\n setHasStarted(true);\n };\n\n // クイズを初期化\n const initializeQuiz = (lang) => {\n const source = QUIZ_DATA[lang] || TRAVEL_PHRASES_EN;\n // 十分ある場合、slice(0,10)で問題を取り出し\n const shuffled = shuffleArray([...source]);\n const selected = shuffled.slice(0, 10);\n // 選択肢シャッフル\n const finalQuestions = selected.map((q) => ({\n ...q,\n options: shuffleArray([...q.options]),\n }));\n\n setQuestions(finalQuestions);\n setCurrentQuestionIndex(0);\n setScore(0);\n setShowResult(false);\n setAnswerHistory([]);\n setSelectedOption(null);\n setIsRevealed(false);\n setIsCorrect(null);\n setStartTime(Date.now());\n setEndTime(null);\n setShowRomanization(false); // リセット\n };\n\n // リスタート\n const restartQuiz = () => {\n if (!selectedLanguage) return;\n initializeQuiz(selectedLanguage);\n };\n\n // スタートメニューへ\n const backToStartMenu = () => {\n setHasStarted(false);\n setSelectedLanguage(null);\n setQuestions([]);\n setScore(0);\n setShowResult(false);\n setAnswerHistory([]);\n setSelectedOption(null);\n setIsRevealed(false);\n setIsCorrect(null);\n setStartTime(null);\n setEndTime(null);\n setShowRomanization(false);\n };\n\n // 音声読み上げ\n const handleSpeak = (text) => {\n if (!('speechSynthesis' in window)) {\n alert('音声読み上げがサポートされていません');\n return;\n }\n // 前回の発話をキャンセル\n window.speechSynthesis.cancel();\n\n const utter = new SpeechSynthesisUtterance(text);\n if (selectedLanguage === 'zh') {\n utter.lang = 'zh-CN';\n } else if (selectedLanguage === 'ko') {\n utter.lang = 'ko-KR';\n } else if (selectedLanguage === 'th') {\n // タイ語\n utter.lang = 'th-TH';\n } else if (selectedLanguage === 'id') {\n //　インドネシア語\n utter.lang = 'id-ID';\n } else if (selectedLanguage === 'fr') {\n //　フランス語\n utter.lang = 'fr-FR';\n } else {\n // 英語\n utter.lang = 'en-US';\n }\n window.speechSynthesis.speak(utter);\n };\n\n // キー操作\n useEffect(() => {\n const handleKeyDown = (e) => {\n if (!isRevealed && hasStarted && !showResult && questions.length) {\n if ([\"1\", \"2\", \"3\", \"4\"].includes(e.key)) {\n const index = parseInt(e.key) - 1;\n const currentQ = questions[currentQuestionIndex];\n if (currentQ) {\n const option = currentQ.options[index];\n if (option) setSelectedOption(option);\n }\n } else if (e.key === 'Enter') {\n handleCheckAnswer();\n }\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n };\n }, [questions, currentQuestionIndex, isRevealed, selectedOption, hasStarted, showResult]);\n\n // 選択肢クリック\n const handleOptionClick = (option) => {\n if (!isRevealed) {\n setSelectedOption(option);\n }\n };\n\n // 回答\n const handleCheckAnswer = () => {\n if (selectedOption === null) return;\n\n const currentQ = questions[currentQuestionIndex];\n const correct = selectedOption === currentQ.correctAnswer;\n setIsCorrect(correct);\n setIsRevealed(true);\n\n setAnswerHistory((prev) => [\n ...prev,\n {\n question: currentQ.question,\n roman: currentQ.roman,\n selected: selectedOption,\n correctAnswer: currentQ.correctAnswer,\n isCorrect: correct,\n },\n ]);\n\n if (correct) {\n setScore((s) => s + 1);\n // 1秒後次へ\n setTimeout(() => {\n goToNextQuestion();\n }, 1000);\n }\n };\n\n const handleNext = () => {\n goToNextQuestion();\n };\n\n const goToNextQuestion = () => {\n const nextIndex = currentQuestionIndex + 1;\n if (nextIndex < questions.length) {\n setCurrentQuestionIndex(nextIndex);\n setSelectedOption(null);\n setIsRevealed(false);\n setIsCorrect(null);\n } else {\n setShowResult(true);\n setEndTime(Date.now());\n }\n };\n\n // ローマ字/ピンインボタン\n const handleToggleRomanization = () => {\n setShowRomanization((prev) => !prev);\n };\n\n if (!hasStarted) {\n return (\n

旅行フレーズクイズ

【操作説明】

1〜4キー、または選択肢をクリックして回答を選択
Enterキーで回答を確定(回答ボタンと同じ)
不正解の場合、正解を確認後「次へ」ボタンで次の問題へ

\n startQuiz('en')}\n className=\"bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-xl\"\n >\n English\n \n startQuiz('zh')}\n className=\"bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-xl\"\n >\n 中文\n \n startQuiz('ko')}\n className=\"bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-xl\"\n >\n 한국어\n \n startQuiz('th')}\n className=\"bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-xl\"\n >\n ไทย\n \n startQuiz('id')}\n className=\"bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-xl\"\n >\n Indonesia\n \n startQuiz('fr')}\n className=\"bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-xl\"\n >\n Français\n \n

\n );\n }\n\n if (!questions.length && hasStarted && !showResult) {\n return (\n

Loading Quiz...

\n );\n }\n\n if (showResult) {\n const timeTaken = endTime && startTime ? ((endTime - startTime) / 1000).toFixed(2) : 0;\n\n return (\n

結果

\n あなたの正解数は {score} / {questions.length} です！\n

所要時間: {timeTaken} 秒

回答履歴

\n
\n Q{idx + 1}. {item.question}\n {item.roman && (\n {item.roman}\n )}\n
\n
\n あなたの回答: {\" \"}\n \n {item.selected}\n \n
\n {!item.isCorrect && (\n
\n 正解: {\" \"}\n {item.correctAnswer}\n
\n )}\n

\n \n リスタート\n \n \n スタートメニューへ\n \n

\n );\n }\n\n const currentQ = questions[currentQuestionIndex];\n\n // show romanization if selectedLanguage is zh / ko / th\n const showRomanToggle = (selectedLanguage === 'zh' || selectedLanguage === 'ko' || selectedLanguage === 'th');\n\n return (\n

\n {selectedLanguage === 'en' && 'English Travel Phrases Quiz'}\n {selectedLanguage === 'zh' && '中文旅行短语测验'}\n {selectedLanguage === 'ko' && '한국어 여행 표현 퀴즈'}\n {selectedLanguage === 'th' && 'タイ語入門'}\n {selectedLanguage === 'id' && 'インドネシア語入門'}\n {selectedLanguage === 'fr' && 'フランス語入門'}\n

\n\n {/* ローマ字/ピンイン表示トグル */}\n {showRomanToggle && (\n \n {showRomanization ? 'アルファベット非表示' : 'アルファベット表示'}\n \n )}\n\n

\n {currentQ.question}\n {/* ローマ字表示 */}\n {showRomanization && currentQ.roman && (\n {currentQ.roman}\n )}\n

\n handleSpeak(currentQ.question)}\n className=\"bg-gray-200 p-2 rounded-full hover:bg-gray-300 transition-colors\"\n >\n \n \n

\n\n

\n {currentQ.options.map((option, idx) => {\n const isSelected = option === selectedOption;\n return (\n handleOptionClick(option)}\n className={`rounded-xl px-4 py-2 transition-colors border text-left ${\n isSelected\n ? 'bg-blue-500 text-white border-blue-500'\n : 'bg-blue-50 border-blue-200 text-blue-700'\n }`}\n >\n {idx + 1}. {option}\n \n );\n })}\n

\n\n {!isRevealed && (\n \n 回答\n \n )}\n\n {isRevealed && (\n

\n {isCorrect ? (\n

正解です！

\n ) : (\n

不正解です...

正解は「{currentQ.correctAnswer}」です。

\n \n 次へ\n \n

\n )}\n

\n )}\n\n

\n Question {currentQuestionIndex + 1} / {questions.length}\n

\n );\n}\n\nfunction shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17682448437303811431","traceTime",1780592023229]

旅行フレーズ クイズ

Loading Quiz...

結果

回答履歴

旅行フレーズクイズ