function MainComponent() { const [question, setQuestion] = React.useState("What is the shortcut for inserting a new row?"); const [answer, setAnswer] = React.useState(""); const [score, setScore] = React.useState(0); const [submitted, setSubmitted] = React.useState(false); function changeQuestion() { if (submitted) { setQuestion("What is the shortcut for creating a new sheet?"); setSubmitted(false); } } function handleInputChange(event) { setAnswer(event.target.value); } function handleSubmit(event) { event.preventDefault(); const correctAnswers = { "What is the shortcut for inserting a new row?": "Ctrl + Shift + Plus", "What is the shortcut for creating a new sheet?": "Shift + F11" }; const points = correctAnswers[question] === answer ? 10 : 0; setScore(score + points); setSubmitted(true); changeQuestion(); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#333] mb-8 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Google Sheets Shuriken"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] p-4 shadow-lg rounded-lg bg-white", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "question", className: "mb-2 font-roboto text-xl", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Windows Google Sheets Shortcut:"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto text-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, question), /*#__PURE__*/ React.createElement("input", { name: "answer", type: "text", placeholder: "Type your answer here...", className: "p-2 mb-4 border rounded border-gray-300", value: answer, onChange: handleInputChange, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2 px-4 bg-[#4caf50] text-white rounded hover:bg-[#66bb6a] transition duration-200", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Submit Answer")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Your Score: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 42, columnNumber: 46 }, __self: this }, score, "pts"))))); }