Skip to content

Commit 91d90dc

Browse files
author
Anass Rach
committed
Fix scoring!
1 parent 5497c8d commit 91d90dc

1 file changed

Lines changed: 151 additions & 146 deletions

File tree

‎assets/quizzes/java21-quiz.html‎

Lines changed: 151 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -389,173 +389,178 @@ <h2>Quiz Complete!</h2>
389389
}
390390
];
391391

392-
var currentQuestionIndex = 0;
393-
var score = 0;
394-
var selectedAnswer = null;
395-
var answered = false;
392+
var currentQuestionIndex = 0;
393+
var score = 0;
394+
var selectedAnswer = null;
395+
var answered = false;
396396

397-
function initQuiz() {
398-
document.getElementById('totalQuestions').textContent = questions.length;
399-
document.getElementById('maxScore').textContent = questions.length;
400-
displayQuestion();
401-
}
397+
// Track per-question scoring and selected answers
398+
var scoredMap = new Array(questions.length).fill(false);
399+
var selectedAnswers = new Array(questions.length).fill(null);
402400

403-
function displayQuestion() {
404-
var container = document.getElementById('questionContainer');
405-
var question = questions[currentQuestionIndex];
406-
407-
var html = '<div class="question active">';
408-
html += '<div class="question-header">';
409-
html += '<span class="question-number">Question ' + (currentQuestionIndex + 1) + '</span>';
410-
html += '</div>';
411-
html += '<div class="question-text">' + question.question + '</div>';
412-
413-
if (question.code) {
414-
html += '<div class="code-block">' + question.code + '</div>';
415-
}
416-
417-
html += '<div class="options" id="options">';
418-
for (var i = 0; i < question.options.length; i++) {
419-
html += '<div class="option" onclick="selectOption(' + i + ')">';
420-
html += '<span class="option-label">' + String.fromCharCode(65 + i) + '.</span>';
421-
html += question.options[i];
422-
html += '</div>';
423-
}
424-
html += '</div>';
425-
426-
html += '<div class="explanation" id="explanation">';
427-
html += '<h4>Explanation:</h4>';
428-
html += '<p>' + question.explanation + '</p>';
429-
html += '</div>';
401+
function initQuiz() {
402+
document.getElementById('totalQuestions').textContent = questions.length;
403+
document.getElementById('maxScore').textContent = questions.length;
404+
updateScore();
405+
displayQuestion();
406+
}
407+
408+
function displayQuestion() {
409+
var container = document.getElementById('questionContainer');
410+
var question = questions[currentQuestionIndex];
411+
412+
var html = '<div class="question active">';
413+
html += '<div class="question-header">';
414+
html += '<span class="question-number">Question ' + (currentQuestionIndex + 1) + '</span>';
415+
html += '</div>';
416+
html += '<div class="question-text">' + question.question + '</div>';
417+
418+
if (question.code) {
419+
html += '<div class="code-block">' + question.code + '</div>';
420+
}
421+
422+
html += '<div class="options" id="options">';
423+
for (var i = 0; i < question.options.length; i++) {
424+
html += '<div class="option" onclick="selectOption(' + i + ')">';
425+
html += '<span class="option-label">' + String.fromCharCode(65 + i) + '.</span>';
426+
html += question.options[i];
430427
html += '</div>';
431-
432-
container.innerHTML = html;
433-
434-
updateProgress();
435-
updateControls();
428+
}
429+
html += '</div>';
430+
431+
html += '<div class="explanation" id="explanation">';
432+
html += '<h4>Explanation:</h4>';
433+
html += '<p>' + question.explanation + '</p>';
434+
html += '</div>';
435+
html += '</div>';
436+
437+
container.innerHTML = html;
438+
439+
updateProgress();
440+
updateControls();
441+
442+
// Restore previously selected answer if exists
443+
if (selectedAnswers[currentQuestionIndex] !== null) {
444+
selectOption(selectedAnswers[currentQuestionIndex], true);
445+
} else {
436446
selectedAnswer = null;
437447
answered = false;
448+
document.getElementById('nextBtn').disabled = true;
449+
document.getElementById('nextBtn').textContent = "Next Question";
438450
}
451+
}
439452

440-
function selectOption(index) {
441-
if (answered) return;
442-
443-
var options = document.querySelectorAll('.option');
444-
for (var i = 0; i < options.length; i++) {
445-
options[i].classList.remove('selected');
446-
}
447-
options[index].classList.add('selected');
448-
449-
selectedAnswer = index;
450-
document.getElementById('nextBtn').disabled = false;
451-
}
453+
function selectOption(index, restoring = false) {
454+
if (answered && !restoring) return;
452455

453-
function nextQuestion() {
454-
if (selectedAnswer === null) return;
455-
456-
var question = questions[currentQuestionIndex];
457-
var options = document.querySelectorAll('.option');
458-
459-
// Show correct/incorrect answers
460-
for (var i = 0; i < options.length; i++) {
461-
if (i === question.correct) {
462-
options[i].classList.add('correct');
463-
} else if (i === selectedAnswer && i !== question.correct) {
464-
options[i].classList.add('incorrect');
465-
}
466-
}
467-
468-
// Update score
469-
if (selectedAnswer === question.correct) {
470-
score++;
471-
}
472-
473-
// Show explanation
474-
document.getElementById('explanation').classList.add('show');
475-
476-
answered = true;
477-
document.getElementById('nextBtn').textContent =
478-
currentQuestionIndex === questions.length - 1 ? 'Finish Quiz' : 'Next Question';
479-
480-
// Move to next question or finish quiz
481-
if (document.getElementById('nextBtn').textContent === 'Next Question') {
482-
setTimeout(function() {
483-
currentQuestionIndex++;
484-
if (currentQuestionIndex < questions.length) {
485-
displayQuestion();
486-
} else {
487-
showResults();
488-
}
489-
}, 2000);
490-
} else {
491-
setTimeout(function() {
492-
showResults();
493-
}, 2000);
494-
}
495-
496-
updateScore();
456+
var options = document.querySelectorAll('.option');
457+
for (var i = 0; i < options.length; i++) {
458+
options[i].classList.remove('selected', 'correct', 'incorrect');
497459
}
460+
options[index].classList.add('selected');
461+
462+
selectedAnswer = index;
463+
selectedAnswers[currentQuestionIndex] = index;
464+
465+
var question = questions[currentQuestionIndex];
498466

499-
function previousQuestion() {
500-
if (currentQuestionIndex > 0) {
501-
currentQuestionIndex--;
502-
displayQuestion();
467+
// Mark correct/incorrect
468+
for (var i = 0; i < options.length; i++) {
469+
if (i === question.correct) {
470+
options[i].classList.add('correct');
471+
} else if (i === selectedAnswer && i !== question.correct) {
472+
options[i].classList.add('incorrect');
503473
}
504474
}
505475

506-
function updateProgress() {
507-
var progress = ((currentQuestionIndex) / questions.length) * 100;
508-
document.getElementById('progressFill').style.width = progress + '%';
509-
document.getElementById('currentQuestion').textContent = currentQuestionIndex + 1;
510-
}
476+
// Show explanation
477+
document.getElementById('explanation').classList.add('show');
511478

512-
function updateControls() {
513-
document.getElementById('prevBtn').disabled = currentQuestionIndex === 0;
514-
document.getElementById('nextBtn').disabled = selectedAnswer === null && !answered;
479+
// Score only once per question
480+
if (!scoredMap[currentQuestionIndex] && selectedAnswer === question.correct) {
481+
score++;
482+
scoredMap[currentQuestionIndex] = true;
483+
updateScore();
515484
}
516485

517-
function updateScore() {
518-
document.getElementById('currentScore').textContent = score;
519-
}
486+
answered = true;
520487

521-
function showResults() {
522-
document.getElementById('questionContainer').style.display = 'none';
523-
document.querySelector('.controls').style.display = 'none';
524-
document.getElementById('results').classList.add('show');
525-
526-
var percentage = Math.round((score / questions.length) * 100);
527-
document.getElementById('finalScore').textContent = score + '/' + questions.length;
528-
529-
var message = '';
530-
if (percentage >= 90) {
531-
message = 'Excellent! You\'re ready for the OCP exam!';
532-
} else if (percentage >= 75) {
533-
message = 'Good job! Review the topics you missed and you\'ll be ready!';
534-
} else if (percentage >= 60) {
535-
message = 'Not bad! Study more and practice additional questions.';
536-
} else {
537-
message = 'Keep studying! Focus on the fundamentals and try again.';
538-
}
539-
540-
document.getElementById('scoreMessage').textContent = message;
488+
document.getElementById('nextBtn').disabled = false;
489+
document.getElementById('nextBtn').textContent =
490+
currentQuestionIndex === questions.length - 1 ? 'Finish Quiz' : 'Next Question';
491+
}
492+
493+
function nextQuestion() {
494+
if (!answered) return;
495+
496+
if (currentQuestionIndex < questions.length - 1) {
497+
currentQuestionIndex++;
498+
displayQuestion();
499+
} else {
500+
showResults();
541501
}
502+
}
542503

543-
function restartQuiz() {
544-
currentQuestionIndex = 0;
545-
score = 0;
546-
selectedAnswer = null;
547-
answered = false;
548-
549-
document.getElementById('results').classList.remove('show');
550-
document.getElementById('questionContainer').style.display = 'block';
551-
document.querySelector('.controls').style.display = 'flex';
552-
553-
updateScore();
504+
function previousQuestion() {
505+
if (currentQuestionIndex > 0) {
506+
currentQuestionIndex--;
554507
displayQuestion();
555508
}
509+
}
510+
511+
function updateProgress() {
512+
var progress = ((currentQuestionIndex) / questions.length) * 100;
513+
document.getElementById('progressFill').style.width = progress + '%';
514+
document.getElementById('currentQuestion').textContent = currentQuestionIndex + 1;
515+
}
516+
517+
function updateControls() {
518+
document.getElementById('prevBtn').disabled = currentQuestionIndex === 0;
519+
}
520+
521+
function updateScore() {
522+
document.getElementById('currentScore').textContent = score;
523+
}
524+
525+
function showResults() {
526+
document.getElementById('questionContainer').style.display = 'none';
527+
document.querySelector('.controls').style.display = 'none';
528+
document.getElementById('results').classList.add('show');
529+
530+
var percentage = Math.round((score / questions.length) * 100);
531+
document.getElementById('finalScore').textContent = score + '/' + questions.length;
532+
533+
var message = '';
534+
if (percentage >= 90) {
535+
message = 'Excellent! You\'re ready for the OCP exam!';
536+
} else if (percentage >= 75) {
537+
message = 'Good job! Review the topics you missed and you\'ll be ready!';
538+
} else if (percentage >= 60) {
539+
message = 'Not bad! Study more and practice additional questions.';
540+
} else {
541+
message = 'Keep studying! Focus on the fundamentals and try again.';
542+
}
543+
544+
document.getElementById('scoreMessage').textContent = message;
545+
}
546+
547+
function restartQuiz() {
548+
currentQuestionIndex = 0;
549+
score = 0;
550+
selectedAnswer = null;
551+
answered = false;
552+
scoredMap = new Array(questions.length).fill(false);
553+
selectedAnswers = new Array(questions.length).fill(null);
554+
555+
document.getElementById('results').classList.remove('show');
556+
document.getElementById('questionContainer').style.display = 'block';
557+
document.querySelector('.controls').style.display = 'flex';
558+
559+
updateScore();
560+
displayQuestion();
561+
}
556562

557-
// Initialize quiz when page loads
558-
document.addEventListener('DOMContentLoaded', initQuiz);
559-
</script>
563+
document.addEventListener('DOMContentLoaded', initQuiz);
564+
</script>
560565
</body>
561566
</html>

0 commit comments

Comments
 (0)