Update QuizArea.jsx

Here's a description of the changes made to the provided code:

1. Timer Feature:
   - We added a timer feature to each question in the quiz.
   - `useState` and `useEffect` hooks are used to manage the timer.
   - `timer` state variable keeps track of the remaining time in seconds, initially set to 30 seconds.
   - `timerInterval` state variable is used to store the interval ID for the timer.
   - `startTimer` function initializes the timer and starts counting down from 30 seconds.
   - `stopTimer` function clears the timer interval when the question changes or when the quiz finishes.
   - In the `useEffect`, we start the timer when a new question is displayed and stop it when the quiz is finished.
   - The remaining time is displayed in the UI using `<p>Time Left: {timer} seconds</p>`.

2. Progress Bar Feature:
   - We added a progress bar to indicate the progress of the quiz visually.
   - CSS classes `progress-bar` and `progress` are used to style the progress bar. Make sure to add appropriate CSS styles for these classes.
   - The width of the progress bar is determined based on the current question's index (`next`) and the total number of questions (`len`).
   - The progress bar is a visual representation of how far the user has progressed in the quiz.

These enhancements improve the user experience of the quiz by adding a time limit per question and a visual indicator of progress. Users can see how much time is remaining for each question and how far they have progressed in the quiz.

src/pages/QuizArea/QuizArea.jsx

@@ -1,15 +1,44 @@
-import { useContext } from 'react';
-import QuestionBox from '../../components/QuestionBox/QuestionBox'
+import React, { useContext, useEffect, useState } from 'react';
+import QuestionBox from '../../components/QuestionBox/QuestionBox';
 import quizContext from '../../context/quizContext';
 import Scoreboard from '../ScoreBoard/Scoreboard';
 
 const QuizArea = () => {
-    const context = useContext(quizContext)
-    const { questions, next, len, score } = context
+    const context = useContext(quizContext);
+    const { questions, next, len, score } = context;
+
+    const [timer, setTimer] = useState(30); // Initial timer value in seconds
+    const [timerInterval, setTimerInterval] = useState(null);
+
+    // Function to start the timer
+    const startTimer = () => {
+        setTimer(30); // Reset the timer to its initial value
+        const interval = setInterval(() => {
+            setTimer((prevTimer) => prevTimer - 1);
+        }, 1000);
+        setTimerInterval(interval);
+    };
+
+    // Function to stop the timer
+    const stopTimer = () => {
+        clearInterval(timerInterval);
+    };
+
+    useEffect(() => {
+        if (next <= len - 1) {
+            startTimer(); // Start the timer when a new question is displayed
+        } else {
+            stopTimer(); // Stop the timer when the quiz is finished
+        }
+
+        return () => {
+            stopTimer(); // Cleanup: Stop the timer when the component unmounts
+        };
+    }, [next, len]);
 
     const randomNumber = () => {
         return Math.floor(Math.random() * 4);
-    }
+    };
 
     const getOptions = (incorrectAns, correctAns) => {
         let optionsArray = incorrectAns;
@@ -19,29 +48,28 @@ const QuizArea = () => {
         } else {
             return [optionsArray, correctAns];
         }
-    }
-
+    };
 
     return (
         <>
-            {
-                //For fetch All the Questions 🔴
-
-                // questions.map((index) => {
-                //     const options = getOptions(index.incorrect_answers, index.correct_answer)
-                //     return <QuestionBox category={index.category} options={options} question={index.question} key={index.question} />
-                // })
-
-                (next <= len - 1)
-                    ?
-                    <div className="container p-4">
-                        < QuestionBox category={questions[next].category} options={getOptions(questions[next].incorrect_answers, questions[next].correct_answer)} question={questions[next].question} key={questions[next].question} />
-                    </div>
-                    :
-                    <Scoreboard total_que={len} wrong_que={score.wrongAnswers} correct_que={score.rightAnswers} />
-            }
+            <div className="progress-bar">
+                <div className="progress" style={{ width: `${(next / len) * 100}%` }}></div>
+            </div>
+            {next <= len - 1 ? (
+                <div className="container p-4">
+                    <QuestionBox
+                        category={questions[next].category}
+                        options={getOptions(questions[next].incorrect_answers, questions[next].correct_answer)}
+                        question={questions[next].question}
+                        key={questions[next].question}
+                    />
+                    <p>Time Left: {timer} seconds</p>
+                </div>
+            ) : (
+                <Scoreboard total_que={len} wrong_que={score.wrongAnswers} correct_que={score.rightAnswers} />
+            )}
         </>
-    )
-}
+    );
+};
 
-export default QuizArea
+export default QuizArea;