Add Review Answers
A score of 35/40 is great, but the student needs to know which 5 questions they got wrong so they can improve. We will add a "Review Mode" that lets them browse the exam again with the correct answers highlighted.
Review Mode State
3.13.1Add a new boolean variable to your global state in app.js called isReviewMode = false;.
On the Result Screen HTML, add a "Review Answers" button. When clicked, it should set this boolean to true, reset the question index to 0, and switch back to the Exam Screen (without starting the timer).
document.getElementById('reviewBtn').addEventListener('click', () => {
isReviewMode = true;
currentQuestionIndex = 0;
// Switch UI back to exam screen
document.getElementById('resultScreen').classList.remove('active');
document.getElementById('examScreen').classList.add('active');
// Hide the "Submit Exam" button during review
document.getElementById('submitExamBtn').style.display = 'none';
renderQuestion(currentQuestionIndex);
});Modifying the Render Function
3.13.2Now, update your renderQuestion() function to check if isReviewMode is true. If it is, disable all radio buttons and highlight the correct and incorrect answers using CSS classes.
// Inside renderQuestion(), during the options loop:
if (isReviewMode) {
input.disabled = true; // Prevent changing answers!
// If this was the CORRECT answer, highlight it in green
if (key === qData.answer) {
wrapper.style.backgroundColor = '#d4edda';
wrapper.style.borderColor = '#28a745';
}
// If the user picked this option, but it was WRONG, highlight in red
if (userAnswers[index] === key && key !== qData.answer) {
wrapper.style.backgroundColor = '#f8d7da';
wrapper.style.borderColor = '#dc3545';
}
}Displaying the Solution Text
3.13.3SdashAPI provides step-by-step solutions for many questions. In Review Mode, you should render this text below the options.
if (isReviewMode && qData.solution) {
const solDiv = document.createElement('div');
solDiv.className = 'solution-box';
solDiv.innerHTML = `<strong>Explanation:</strong> ${qData.solution}`;
optionsContainer.appendChild(solDiv);
}