function MainComponent() { const questions = [ { question: "ソフトボールはどこの国発祥？", options: [ "アメリカ", "日本", "イギリス", "オーストラリア" ], answer: "アメリカ" }, { question: "ソフトボールのピッチャープレートまでの距離は？", options: [ "43フィート", "60フィート", "50フィート", "55フィート" ], answer: "43フィート" } ]; const [currentQuestion, setCurrentQuestion] = React.useState(0); const [selectedOption, setSelectedOption] = React.useState(null); const [showCorrectAnswer, setShowCorrectAnswer] = React.useState(false); const checkAnswer = ()=>{ if (questions[currentQuestion].options[selectedOption] === questions[currentQuestion].answer) { handleNextQuestion(); } else { setShowCorrectAnswer(true); } }; const handleNextQuestion = ()=>{ if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { alert("クイズが終了しました！"); } setSelectedOption(null); setShowCorrectAnswer(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ffebcd] p-6", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-[#d2691e]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "簡単なソフトボールクイズ")), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#8b4513]", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, questions[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, name: `option-${index}`, onClick: ()=>setSelectedOption(index), className: `p-2 bg-[#ffe4c4] rounded border-solid border-2 border-[#d2b48c] text-[#8b4513] ${selectedOption === index ? 'bg-[#d2b48c]' : ''}`, __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, option))), showCorrectAnswer && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "正解は: ", questions[currentQuestion].answer), selectedOption !== null && /*#__PURE__*/ React.createElement("button", { name: "check-answer", onClick: checkAnswer, className: "p-2 mt-4 bg-[#ffe4c4] rounded text-[#8b4513] border-solid border-2 border-[#d2b48c]", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "確認")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#ffebcd] p-4 text-center", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#8b4513]", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "© 2023 簡単なソフトボールクイズ"))); }