const quizData = [
{
question: "What is the capital of France?",
answers: [
{ text: "Berlin", correct: false },
{ text: "Madrid", correct: false },
{ text: "Paris", correct: true },
{ text: "Lisbon", correct: false }
]
},
{
question: "What is 2 + 2?",
answers: [
{ text: "3", correct: false },
{ text: "4", correct: true },
{ text: "5", correct: false },
{ text: "6", correct: false }
]
}
// Add more questions as needed
];
let currentQuestionIndex = 0;
let score = 0;
const totalQuizTime = 2 * 60; // 2 minutes in seconds
let timer;
let quizTimeLeft = totalQuizTime;
let quizStartTime;
let userAnswers = new Array(quizData.length).fill(null);
const startQuizButton = document.getElementById('start-quiz');
const quizContent = document.getElementById('quiz-content');
const quizQuestionElement = document.getElementById('quiz-question');
const quizAnswersElement = document.getElementById('quiz-answers');
const prevQuestionButton = document.getElementById('prev-question');
const nextQuestionButton = document.getElementById('next-question');
const submitQuizButton = document.getElementById('submit-quiz');
const jumpToQuestionSelect = document.getElementById('jump-to-question');
const quizResult = document.getElementById('quiz-result');
const scoreElement = document.getElementById('score');
const totalTimeElement = document.getElementById('total-time');
const correctAnswersElement = document.getElementById('correct-answers');
const timerElement = document.getElementById('timer');
const questionsLeftElement = document.getElementById('questions-left');
const progressBarElement = document.getElementById('progress-bar');
startQuizButton.addEventListener('click', startQuiz);
prevQuestionButton.addEventListener('click', () => navigateQuestion(-1));
nextQuestionButton.addEventListener('click', () => navigateQuestion(1));
submitQuizButton.addEventListener('click', submitQuiz);
jumpToQuestionSelect.addEventListener('change', () => {
const selectedIndex = parseInt(jumpToQuestionSelect.value);
if (!isNaN(selectedIndex)) {
jumpToQuestion(selectedIndex);
}
});
function startQuiz() {
startQuizButton.classList.add('hidden');
quizContent.classList.remove('hidden');
quizStartTime = new Date();
populateJumpToQuestion();
showQuestion();
startTimer();
}
function showQuestion() {
const questionData = quizData[currentQuestionIndex];
quizQuestionElement.textContent = questionData.question;
quizAnswersElement.innerHTML = '';
questionData.answers.forEach((answer, index) => {
const answerElement = document.createElement('label');
answerElement.classList.add('answer');
answerElement.innerHTML = `
${answer.text}
`;
quizAnswersElement.appendChild(answerElement);
});
prevQuestionButton.classList.toggle('hidden', currentQuestionIndex === 0);
nextQuestionButton.classList.toggle('hidden', currentQuestionIndex === quizData.length - 1);
submitQuizButton.classList.toggle('hidden', currentQuestionIndex !== quizData.length - 1);
jumpToQuestionSelect.classList.remove('hidden');
jumpToQuestionSelect.value = currentQuestionIndex;
updateProgressBar();
updateQuestionsLeft();
}
function navigateQuestion(direction) {
saveAnswer();
currentQuestionIndex += direction;
showQuestion();
}
function jumpToQuestion(index) {
if (index >= 0 && index < quizData.length) {
saveAnswer();
currentQuestionIndex = index;
showQuestion();
} else {
console.error('Invalid question index:', index);
}
}
function saveAnswer() {
const selectedAnswerIndex = document.querySelector('input[name="answer"]:checked')?.value;
if (selectedAnswerIndex !== undefined) {
userAnswers[currentQuestionIndex] = parseInt(selectedAnswerIndex);
}
}
function updateQuestionsLeft() {
questionsLeftElement.textContent = `Question ${currentQuestionIndex + 1} of ${quizData.length}`;
}
function populateJumpToQuestion() {
jumpToQuestionSelect.innerHTML = '';
quizData.forEach((_, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = `Question ${index + 1}`;
jumpToQuestionSelect.appendChild(option);
});
}
function submitQuiz() {
stopTimer();
saveAnswer();
calculateScore();
showResults();
}
function calculateScore() {
score = 0;
quizData.forEach((question, index) => {
if (userAnswers[index] !== null) {
if (question.answers[userAnswers[index]].correct) {
score += 1;
} else {
score -= 0.25;
}
}
});
}
function showResults() {
quizContent.classList.add('hidden');
quizResult.classList.remove('hidden');
scoreElement.textContent = `Your score is ${score}`;
totalTimeElement.textContent = `Total time taken: ${formatTime(totalQuizTime - quizTimeLeft)}`;
correctAnswersElement.innerHTML = '';
quizData.forEach((question, index) => {
const correctAnswer = question.answers.find(answer => answer.correct).text;
const userAnswer = userAnswers[index] !== null ? question.answers[userAnswers[index]].text : 'No answer';
correctAnswersElement.innerHTML += `
`; }); } function startTimer() { quizTimeLeft = totalQuizTime; updateTimerDisplay(); timer = setInterval(() => { quizTimeLeft--; updateTimerDisplay(); if (quizTimeLeft <= 0) { clearInterval(timer); submitQuiz(); } }, 1000); } function stopTimer() { clearInterval(timer); } function updateTimerDisplay() { const minutes = Math.floor(quizTimeLeft / 60); const seconds = quizTimeLeft % 60; timerElement.textContent = `Time left: ${minutes}:${seconds.toString().padStart(2, '0')}`; } function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const secs = seconds % 60; return `${minutes}:${secs.toString().padStart(2, '0')}`; } function updateProgressBar() { const progressPercentage = ((currentQuestionIndex + 1) / quizData.length) * 100; progressBarElement.style.width = `${progressPercentage}%`; }
Question: ${question.question}
Your answer: ${userAnswer}
Correct answer: ${correctAnswer}
`; }); } function startTimer() { quizTimeLeft = totalQuizTime; updateTimerDisplay(); timer = setInterval(() => { quizTimeLeft--; updateTimerDisplay(); if (quizTimeLeft <= 0) { clearInterval(timer); submitQuiz(); } }, 1000); } function stopTimer() { clearInterval(timer); } function updateTimerDisplay() { const minutes = Math.floor(quizTimeLeft / 60); const seconds = quizTimeLeft % 60; timerElement.textContent = `Time left: ${minutes}:${seconds.toString().padStart(2, '0')}`; } function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const secs = seconds % 60; return `${minutes}:${secs.toString().padStart(2, '0')}`; } function updateProgressBar() { const progressPercentage = ((currentQuestionIndex + 1) / quizData.length) * 100; progressBarElement.style.width = `${progressPercentage}%`; }