Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update QuizArea.jsx #6

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+54 −26
Open

Update QuizArea.jsx #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 54 additions & 26 deletions src/pages/QuizArea/QuizArea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;