function MainComponent() { const questions = [ { question: 'ドーパミンは主にどこで生成されますか？', options: [ '大脳皮質', '小脳', '中脳', '海馬' ], correctAnswer: '中脳' }, { question: 'ドーパミンは主にどのような機能に関与していますか？', options: [ '睡眠', '記憶', '報酬系', '痛覚' ], correctAnswer: '報酬系' }, { question: 'ドーパミンの不足は、どの疾患と関連していますか？', options: [ '統合失調症', 'パーキンソン病', '糖尿病', '高血圧' ], correctAnswer: 'パーキンソン病' } ]; const [currentQuestion, setCurrentQuestion] = React.useState(0); const [selectedAnswer, setSelectedAnswer] = React.useState(''); const [showResult, setShowResult] = React.useState(false); const [score, setScore] = React.useState(0); const handleAnswerSelect = (answer)=>{ setSelectedAnswer(answer); }; const handleNextQuestion = ()=>{ if (selectedAnswer === questions[currentQuestion].correctAnswer) { setScore(score + 1); } if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(''); setShowResult(false); } else { setShowResult(true); } }; const resetQuiz = ()=>{ setCurrentQuestion(0); setSelectedAnswer(''); setShowResult(false); setScore(0); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-center py-4 bg-blue-500 text-white rounded-t-lg font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "ドーパミンクイズ"), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, !showResult ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, questions[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswerSelect(option), className: `w-full p-2 border border-gray-300 rounded-md ${selectedAnswer === option ? 'bg-blue-500 text-white' : 'bg-white'}`, __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, option)))) : /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "クイズ終了！"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "スコア: ", score, " / ", questions.length), score === questions.length ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center text-green-500", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "素晴らしい！全問正解です！")) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center text-yellow-500", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, "もう一度チャレンジしてみましょう！")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center p-4 bg-gray-100 rounded-b-lg", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, !showResult ? /*#__PURE__*/ React.createElement("button", { onClick: handleNextQuestion, disabled: !selectedAnswer, className: "bg-blue-500 text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, currentQuestion < questions.length - 1 ? '次の問題' : '結果を見る') : /*#__PURE__*/ React.createElement("button", { onClick: resetQuiz, className: "bg-blue-500 text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "もう一度挑戦"))); }