function MainComponent() { const [user, setUser] = React.useState(null); const [questions, setQuestions] = React.useState([]); const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [userAnswer, setUserAnswer] = React.useState(""); const [score, setScore] = React.useState(0); const [feedback, setFeedback] = React.useState([]); const [isSessionActive, setIsSessionActive] = React.useState(false); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const handleRegister = (e)=>{ e.preventDefault(); // Handle user registration logic here }; const handleLogin = (e)=>{ e.preventDefault(); setIsLoggedIn(true); // Handle user login logic here }; const handleLogout = ()=>{ setIsLoggedIn(false); // Handle user logout logic here }; const handleNextQuestion = ()=>{ if (userAnswer.trim().toLowerCase() === questions[currentQuestionIndex].answer.toLowerCase()) { setScore(score + 1); setFeedback([ ...feedback, { question: questions[currentQuestionIndex], correct: true } ]); } else { setFeedback([ ...feedback, { question: questions[currentQuestionIndex], correct: false } ]); } if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1); setUserAnswer(""); } else { setIsSessionActive(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "ユーザー登録"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleRegister, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "username", type: "text", name: "username", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "email", type: "email", name: "email", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "password", type: "password", name: "password", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, "登録"))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-8", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-center", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleLogin, __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "login-username", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "login-username", type: "text", name: "login-username", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "login-password", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "login-password", type: "password", name: "login-password", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, "ログイン")))))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-8", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "問題出題"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, questions[currentQuestionIndex]?.question), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "question-answer", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleNextQuestion, __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "次へ"))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-8", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-center", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "成績表示"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, "総合得点：", score), feedback.map((f, index)=>/*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm mb-4", key: index, __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, f.question.question, ": ", f.correct ? "正解" : "不正解")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: ()=>{ setUser(null); setScore(0); setCurrentQuestionIndex(0); setFeedback([]); }, __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, "戻る"))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-8", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded", onClick: handleLogout, __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "ログアウト")))); }