function MainComponent() { const [questionIndex, setQuestionIndex] = React.useState(0); const [score, setScore] = React.useState(0); const [showAnswer, setShowAnswer] = React.useState(false); const questions = [ { question: "一番長い川はどれですか？", options: [ "ナイル川", "アマゾン川", "ヤンツェー川" ], answer: "ナイル川" }, { question: "一番高い山はどれですか？", options: [ "エベレスト", "キリマンジャロ", "コル・ギャシュヴルム" ], answer: "エベレスト" }, { question: "光の速度は何ですか？", options: [ "300,000 km/s", "150,000 km/s", "450,000 km/s" ], answer: "300,000 km/s" }, { question: "日本の首都はどこですか？", options: [ "東京", "大阪", "京都" ], answer: "東京" }, { question: "月はどれですか？", options: [ "太陽", "月", "星" ], answer: "月" }, { question: "地球の周りを回っているのは何ですか？", options: [ "月", "火星", "金星" ], answer: "月" }, { question: "二酸化炭素の化学式は何ですか？", options: [ "CO2", "O2", "CH4" ], answer: "CO2" }, { question: "水の沸点は何度ですか？", options: [ "100°C", "0°C", "50°C" ], answer: "100°C" }, { question: "体内で酸素を運ぶのはどれですか？", options: [ "赤血球", "白血球", "血小板" ], answer: "赤血球" }, { question: "世界で最も人口が多い国はどれですか？", options: [ "中国", "インド", "アメリカ" ], answer: "中国" } ]; const handleOptionClick = (option)=>{ if (option === questions[questionIndex].answer) { setScore(score + 1); setShowAnswer(false); setQuestionIndex(questionIndex + 1); } else { setShowAnswer(true); } }; const nextQuestion = ()=>{ setShowAnswer(false); setQuestionIndex(questionIndex + 1); }; if (questionIndex >= questions.length) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#a7d2cb] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center max-w-[500px] mx-auto", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#344966] mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "クイズ終了"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-crimson-text text-[#344966] mb-8", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "あなたのスコア: ", score, " / 10"), /*#__PURE__*/ React.createElement("p", { className: `text-xl font-crimson-text mb-8 ${score >= 8 ? 'text-green-500' : 'text-red-500'}`, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, score >= 8 ? '合格！' : '不合格。'))); } return /*#__PURE__*/ React.createElement("div", { className: "bg-[#a7d2cb] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center max-w-[500px] mx-auto", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#344966] mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "クイズ"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-crimson-text text-[#344966] mb-8", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, questions[questionIndex].question), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, questions[questionIndex].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, name: `option-${index}`, className: "bg-[#344966] text-white py-2 px-4 rounded-lg shadow-md", onClick: ()=>handleOptionClick(option), __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, option))), showAnswer && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg font-crimson-text text-[#FF0000]", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "正解: ", questions[questionIndex].answer), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#344966] text-white py-2 px-4 rounded-lg shadow-md", onClick: nextQuestion, __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "次の問題")), /*#__PURE__*/ React.createElement("p", { className: "mt-8 text-lg font-crimson-text text-[#344966]", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "スコア: ", score))); }