function MainComponent() { const [question, setQuestion] = React.useState({}); const [userAnswer, setUserAnswer] = React.useState(""); const [score, setScore] = React.useState(0); const [currentQuestion, setCurrentQuestion] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(5); const questions = [ { question: "Copy (Excel)", answer: "Ctrl+C" }, { question: "Paste (Excel)", answer: "Ctrl+V" }, { question: "Save (Excel)", answer: "Ctrl+S" }, { question: "Undo (Excel)", answer: "Ctrl+Z" } ]; const startQuiz = ()=>{ setCurrentQuestion(0); setScore(0); setTimeLeft(5); setQuestion(questions[Math.floor(Math.random() * questions.length)]); }; const handleAnswerSubmit = (e)=>{ e.preventDefault(); if (userAnswer.toLowerCase() === question.answer.toLowerCase()) { setScore(score + 1); } setUserAnswer(""); setNextQuestion(); }; const setNextQuestion = ()=>{ const nextQuestionIndex = currentQuestion + 1; if (nextQuestionIndex < 10) { setCurrentQuestion(nextQuestionIndex); setQuestion(questions[Math.floor(Math.random() * questions.length)]); setTimeLeft(5); } else { alert(`Quiz over! Your score: ${score}`); startQuiz(); } }; React.useEffect(()=>{ if (timeLeft > 0) { const timer = setInterval(()=>setTimeLeft(timeLeft - 1), 1000); return ()=>clearInterval(timer); } else { setNextQuestion(); } }, [ timeLeft ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full h-screen bg-[#F0F0F0] relative", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Shortcut Key Quiz"), /*#__PURE__*/ React.createElement("button", { onClick: startQuiz, className: "px-8 py-2 bg-green-500 text-white font-roboto rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Play"), question.question && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, question.question), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAnswerSubmit, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "answer", type: "text", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), className: "px-4 py-2 border border-gray-400 rounded mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-blue-500 text-white font-roboto rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Time left: ", timeLeft, "s"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-lg font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Score: ", score)), /*#__PURE__*/ React.createElement("div", { className: "fixed left-0 top-0 h-full w-[100px] bg-gray-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, "Ad Space"), /*#__PURE__*/ React.createElement("div", { className: "fixed right-0 top-0 h-full w-[100px] bg-gray-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, "Ad Space")); }