function MainComponent() { const [questions, setQuestions] = React.useState([]); const [filters, setFilters] = React.useState({}); const [currentQuestion, setCurrentQuestion] = React.useState(null); const [remainingTime, setRemainingTime] = React.useState(60); const [userAnswers, setUserAnswers] = React.useState({}); const [showResults, setShowResults] = React.useState(false); const [score, setScore] = React.useState(0); const timerRef = React.useRef(null); const fetchQuestions = ()=>{ // Replace with actual database fetching logic and apply filters const fetchedQuestions = []; // Placeholder for the fetched questions setQuestions(fetchedQuestions); setCurrentQuestion(fetchedQuestions[0]); }; React.useEffect(()=>{ fetchQuestions(); }, [ filters ]); React.useEffect(()=>{ if (currentQuestion && !showResults) { setRemainingTime(60); timerRef.current = setInterval(()=>{ setRemainingTime((prevTime)=>{ if (prevTime === 1) { clearInterval(timerRef.current); submitAnswer('', currentQuestion.id); return 60; } return prevTime - 1; }); }, 1000); } return ()=>{ clearInterval(timerRef.current); }; }, [ currentQuestion, showResults ]); const submitAnswer = (answer, questionId)=>{ setUserAnswers((prevAnswers)=>({ ...prevAnswers, [questionId]: answer })); moveToNextQuestion(); }; const moveToNextQuestion = ()=>{ const nextIndex = questions.findIndex((q)=>q.id === currentQuestion.id) + 1; if (nextIndex < questions.length) { setCurrentQuestion(questions[nextIndex]); } else { setShowResults(true); calculateScore(); } }; const calculateScore = ()=>{ let newScore = 0; questions.forEach((question)=>{ if (userAnswers[question.id] === question.correctAnswer) { newScore += 1; } }); setScore(newScore); }; const handleFilterChange = (event)=>{ const { name, value } = event.target; setFilters((prevFilters)=>({ ...prevFilters, [name]: value })); }; const startQuiz = ()=>{ setShowResults(false); setUserAnswers({}); fetchQuestions(); }; const displayResults = ()=>/*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, "Your Score: ", score, "/", questions.length), /*#__PURE__*/ React.createElement("button", { onClick: startQuiz, className: "bg-blue-500 text-white py-2 px-4 rounded focus:outline-none", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, "Restart Quiz"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, questions.map((question)=>{ const userAnswer = userAnswers[question.id]; const isCorrect = question.correctAnswer === userAnswer; return /*#__PURE__*/ React.createElement("div", { key: question.id, className: `my-2 p-4 ${isCorrect ? 'bg-green-200' : 'bg-red-200'}`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, question.text), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Your answer: ", userAnswer), !isCorrect && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 104, columnNumber: 30 }, __self: this }, "Correct answer: ", question.correctAnswer)); }))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center py-4", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "categoryFilter", onChange: handleFilterChange, className: "border-2 border-gray-300 rounded py-1 px-3", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Select Category"))), /*#__PURE__*/ React.createElement("button", { onClick: fetchQuestions, className: "bg-purple-500 text-white py-2 px-4 rounded focus:outline-none", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, "Generate Quiz")), showResults ? displayResults() : currentQuestion && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded shadow-lg flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, remainingTime, " seconds left"), /*#__PURE__*/ React.createElement("img", { src: currentQuestion.imageUrl, alt: `Question ${currentQuestion.id} image`, className: "w-[200px] md:w-[300px] object-contain", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); submitAnswer(e.target.elements.answer.value, currentQuestion.id); }, __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "answer", className: "border-2 border-gray-300 rounded py-2 px-4 w-full md:w-1/2", autoComplete: "off", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded focus:outline-none mt-4 block", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, ` @keyframes countdown { from { width: 100%; } to { width: 0%; } } `)); }