`; // If the question has been answered, show explanation if (userAnswers[currentQuestion] !== null) { const isCorrect = userAnswers[currentQuestion] === questionData.correct; questionHTML += ` `; } questionContainer.innerHTML = questionHTML; // Add event listeners to options document.querySelectorAll('.option').forEach(option => { option.addEventListener('click', selectOption); }); } // Select an option function selectOption(e) { if (quizCompleted) return; const selectedIndex = parseInt(e.currentTarget.getAttribute('data-index')); userAnswers[currentQuestion] = selectedIndex; // Update UI document.querySelectorAll('.option').forEach(option => { option.classList.remove('selected'); }); e.currentTarget.classList.add('selected'); // If it's the last question, change button to Submit if (currentQuestion === quizData.length - 1) { nextBtn.innerHTML = `Submit `; nextBtn.classList.remove('btn-next'); nextBtn.classList.add('btn-submit'); } // Automatically move to next question after a delay if not last if (currentQuestion < quizData.length - 1) { setTimeout(() => { nextQuestion(); }, 800); } } // Go to next question function nextQuestion() { if (currentQuestion < quizData.length - 1) { currentQuestion++; loadQuestion(); updateNavigationButtons(); updateProgressBar(); } else { // If on last question and it's answered, submit quiz if (userAnswers[currentQuestion] !== null) { submitQuiz(); } } } // Go to previous question function prevQuestion() { if (currentQuestion > 0) { currentQuestion--; loadQuestion(); updateNavigationButtons(); updateProgressBar(); } } // Update navigation buttons state function updateNavigationButtons() { prevBtn.disabled = currentQuestion === 0; if (currentQuestion === quizData.length - 1) { nextBtn.innerHTML = `Submit `; nextBtn.classList.remove('btn-next'); nextBtn.classList.add('btn-submit'); } else { nextBtn.innerHTML = `Next `; nextBtn.classList.remove('btn-submit'); nextBtn.classList.add('btn-next'); } } // Update progress bar function updateProgressBar() { const progressPercent = ((currentQuestion + 1) / quizData.length) * 100; progressBar.style.width = `${progressPercent}%`; } // Start the timer function startTimer() { updateTimerDisplay(); timerInterval = setInterval(() => { timeLeft--; updateTimerDisplay(); if (timeLeft <= 0) { clearInterval(timerInterval); submitQuiz(); } }, 1000); } // Update timer display function updateTimerDisplay() { const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; // Add warning class when time is running low if (timeLeft <= 30) { timerElement.classList.add('warning'); } } // Submit the quiz function submitQuiz() { clearInterval(timerInterval); quizCompleted = true; // Calculate score score = 0; userAnswers.forEach((answer, index) => { if (answer === quizData[index].correct) { score++; } }); // Show result quizContainer.style.display = 'none'; resultContainer.style.display = 'block'; scoreDisplay.textContent = `${score}/${quizData.length}`; // Set score text based on performance let performanceText = ""; if (score === quizData.length) { performanceText = "Excellent! Perfect score! 🎉"; } else if (score >= quizData.length * 0.7) { performanceText = "Great job! Good MPSC knowledge."; } else if (score >= quizData.length * 0.5) { performanceText = "Good effort! Keep studying."; } else { performanceText = "Keep practicing! You'll improve."; } scoreText.textContent = performanceText; } // Restart the quiz function restartQuiz() { currentQuestion = 0; userAnswers = Array(quizData.length).fill(null); score = 0; timeLeft = 120; quizCompleted = false; // Reset UI resultContainer.style.display = 'none'; quizContainer.style.display = 'block'; timerElement.classList.remove('warning'); nextBtn.innerHTML = `Next `; nextBtn.classList.remove('btn-submit'); nextBtn.classList.add('btn-next'); // Reinitialize initQuiz(); } // Event listeners prevBtn.addEventListener('click', prevQuestion); nextBtn.addEventListener('click', nextQuestion); restartBtn.addEventListener('click', restartQuiz); // Initialize the quiz when page loads window.addEventListener('DOMContentLoaded', initQuiz);