function MainComponent() { const questions = [ { id: 1, sequence: "1, 2, 3, ?", answer: "4" }, { id: 2, sequence: "2, 4, 6, ?", answer: "8" }, { id: 3, sequence: "5, 10, 15, ?", answer: "20" }, { id: 4, sequence: "1, 4, 9, ?", answer: "16" }, { id: 5, sequence: "2, 3, 5, 8, ?", answer: "13" }, { id: 6, sequence: "1, 1, 2, 3, 5, ?", answer: "8" }, { id: 7, sequence: "8, 5, 4, 9, 1, ?", answer: "10" }, { id: 8, sequence: "3, 6, 18, 24, ?", answer: "48" }, { id: 9, sequence: "5, 25, 125, ?", answer: "625" }, { id: 10, sequence: "7, 14, 77, ?", answer: "154" } ]; const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [userAnswer, setUserAnswer] = React.useState(""); const [score, setScore] = React.useState(0); const handleSubmit = (e)=>{ e.preventDefault(); if (userAnswer === questions[currentQuestionIndex].answer) { setScore(score + 1); } setUserAnswer(""); if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1); } }; const currentQuestion = questions[currentQuestionIndex]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-[400px] text-center", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "数列クイズ"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "次に来る数は何ですか？"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, currentQuestion.sequence), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "answer", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), className: "border p-2 rounded w-full mb-4", placeholder: "ここに答えを入力してください", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded w-full", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "提出する")), /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "スコア: ", score))); }