function MainComponent() { const [currentQuestion, setCurrentQuestion] = React.useState(0); const [showExplanation, setShowExplanation] = React.useState(false); const [selectedAnswer, setSelectedAnswer] = React.useState(''); const questions = [ { question: '看護国家試験の最初の実施年は？', answers: [ '1947年', '1950年', '1965年', '1975年' ], correct: '1947年', explanation: '看護国家試験は1947年に最初に実施されました。' } ]; function handleAnswer(answer) { setSelectedAnswer(answer); setShowExplanation(true); } function handleNextQuestion() { if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setCurrentQuestion(0); // Reset to first question or implement a finished state } setShowExplanation(false); setSelectedAnswer(''); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "看護国家試験クイズ"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, questions[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, questions[currentQuestion].answers.map((answer, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(answer), className: `bg-white border-2 ${selectedAnswer === answer ? 'border-green-500' : 'border-[#121212]'} rounded-lg py-2 px-4 font-roboto`, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, answer))), showExplanation && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "正解: ", questions[currentQuestion].correct), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, questions[currentQuestion].explanation), /*#__PURE__*/ React.createElement("button", { onClick: handleNextQuestion, className: "mt-4 bg-[#607D8B] text-white font-roboto py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "次の問題へ")))); }