function MainComponent() { const questions = [ { question: 'なるべく税金を低く抑えるべきか？', answers: [ '賛成', '反対', 'どちらでもない' ] }, { question: '移民を受け入れるべきか？', answers: [ '賛成', '反対', 'どちらでもない' ] }, { question: '環境保護をもっと重視すべきか？', answers: [ '賛成', '反対', 'どちらでもない' ] } ]; const [currentQuestion, setCurrentQuestion] = React.useState(0); const [answers, setAnswers] = React.useState([]); const [showResults, setShowResults] = React.useState(false); const handleAnswerChange = (e, idx)=>{ const newAnswers = [ ...answers ]; newAnswers[idx] = e.target.value; setAnswers(newAnswers); }; const handleSubmit = ()=>{ setShowResults(true); }; const handleReplay = ()=>{ setShowResults(false); setAnswers([]); setCurrentQuestion(0); }; const results = "あなたの政治的傾向は、A党と親和性が高いです。"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 font-sans", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "政治クイズ"), !showResults ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, questions.map((q, idx)=>{ const isVisible = currentQuestion === idx; return /*#__PURE__*/ React.createElement("div", { key: idx, className: isVisible ? 'block' : 'hidden', __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, q.question), q.answers.map((answer, i)=>/*#__PURE__*/ React.createElement("label", { key: i, className: "block mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: `question${idx}`, value: answer, className: "mr-2", checked: answers[idx] === answer, onChange: (e)=>handleAnswerChange(e, idx), __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }), answer)), idx < questions.length - 1 ? /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700", onClick: ()=>setCurrentQuestion((prev)=>prev + 1), __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, "次へ") : /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700", onClick: handleSubmit, __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "提出")); })) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-4 mt-6", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "診断結果"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, results), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700", onClick: handleReplay, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "リプレイ"))); }