function MainComponent() { const generateQuestion = ()=>{ const num1 = Math.floor(Math.random() * 10); const num2 = Math.floor(Math.random() * 10); const correctAnswer = num1 + num2; const choices = [ correctAnswer, correctAnswer + Math.floor(Math.random() * 5 + 1), correctAnswer - Math.floor(Math.random() * 5 + 1) ].sort(()=>Math.random() - 0.5); return { num1, num2, choices, correct: correctAnswer }; }; const [question, setQuestion] = React.useState(generateQuestion()); const [feedback, setFeedback] = React.useState(null); const handleChoiceClick = (choice)=>{ if (choice === question.correct) { setFeedback("正解！"); setTimeout(()=>{ setFeedback(null); setQuestion(generateQuestion()); }, 1000); } else { setFeedback(`不正解！正解は ${question.correct} です`); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f0e6d6] flex flex-col items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full h-[200px] bg-[#6b4f4f] flex justify-center items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-crimson-text text-[#ffffff]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "簡単な計算アプリ")), /*#__PURE__*/ React.createElement("main", { className: "p-8 flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-[800px] bg-[#fff] shadow-md p-6 rounded-lg mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-crimson-text text-[#6b4f4f] mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "次の計算を解いてください:"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto text-[#333333] mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, question.num1, " + ", question.num2, " = ?"), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, question.choices.map((choice, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 cursor-pointer bg-[#f0e6d6] hover:bg-[#e0d1b3] p-2 rounded-lg", onClick: ()=>handleChoiceClick(choice), __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, choice)))), feedback && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-[#fff] shadow-md p-6 rounded-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, feedback))), /*#__PURE__*/ React.createElement("footer", { className: "w-full h-[100px] bg-[#6b4f4f] flex items-center justify-center mt-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#ffffff] font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "© 2023 簡単な計算アプリ"))); }