Guide 3.11: Real Projects
Build the Result Screen
After calculating the score, we need to hide the exam interface and present the final grade to the student in a clear, encouraging format.
Result Screen HTML
3.11.1Add this final block of HTML to your index.html right after the exam screen. Remember, it shares the .screen class so it stays hidden initially.
<div id="resultScreen" class="screen">
<h1>Exam Completed!</h1>
<div class="score-card" style="margin: 32px 0; padding: 24px; background: #f8fafc; border: 1px solid #ddd; border-radius: 12px;">
<h2 style="font-size: 48px; color: #007bff; margin: 0;" id="finalScore">0 / 40</h2>
<p style="font-size: 20px; margin-top: 8px;" id="finalPercentage">0%</p>
<hr style="border:none; border-top: 1px solid #ddd; margin: 24px 0;">
<div style="display:flex; justify-content: space-around;">
<div>
<strong>Attempted:</strong> <span id="statAttempted">0</span>
</div>
<div>
<strong>Missed:</strong> <span id="statMissed">0</span>
</div>
</div>
</div>
<button id="retakeBtn">Take Another Exam</button>
</div>Populating the Results
3.11.2Now, define the showResultScreen() function in app.js to populate these DOM elements with the variables we calculated in the previous step.
function showResultScreen(score, attempted, percentage) {
// Switch screens
document.getElementById('examScreen').classList.remove('active');
document.getElementById('resultScreen').classList.add('active');
// Inject values
document.getElementById('finalScore').textContent = `${score} / ${examQuestions.length}`;
document.getElementById('finalPercentage').textContent = `${percentage}%`;
document.getElementById('statAttempted').textContent = attempted;
document.getElementById('statMissed').textContent = examQuestions.length - attempted;
// Optional: Color code the percentage
const pctEl = document.getElementById('finalPercentage');
if (percentage >= 70) pctEl.style.color = 'green';
else if (percentage >= 50) pctEl.style.color = 'orange';
else pctEl.style.color = 'red';
}Retake the Exam
3.11.3Finally, wire up the retake button to completely reset the application state and return the user to the home screen.
document.getElementById('retakeBtn').addEventListener('click', () => {
// Reset state
examQuestions = [];
currentQuestionIndex = 0;
userAnswers = {};
// Switch screens
document.getElementById('resultScreen').classList.remove('active');
document.getElementById('homeScreen').classList.add('active');
});