.quiz-container { max-width: 600px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9; position: relative; } .quiz-question { margin-bottom: 20px; } .quiz-image { margin-bottom: 10px; } .quiz-options { list-style-type: none; padding: 0; } .quiz-options li { margin-bottom: 10px; } .correct { color: green; font-weight: bold; } .incorrect { color: red; } .quiz-result { display: none; } .score { position: absolute; bottom: 10px; right: 10px; font-size: 1.2em; font-weight: bold; }

let correctAnswers = 0;

function checkAnswer(question, correctOption) { var options = document.getElementsByName(question); for (var i = 0; i < options.length; i++) { if (options[i].checked) { if (options[i].value == correctOption) { options[i].parentElement.classList.add('correct'); correctAnswers++; } else { options[i].parentElement.classList.add('incorrect'); var correctElement = document.querySelector(`input[name="${question}"][value="${correctOption}"]`).parentElement; correctElement.classList.add('correct'); } break; } } document.getElementById(question + '-next').style.display = 'inline'; updateScore(); } function showNextQuestion(currentQuestion, nextQuestion) { document.getElementById(currentQuestion).style.display = 'none'; document.getElementById(nextQuestion).style.display = 'block'; } function updateScore() { document.getElementById('score').textContent = `${correctAnswers}/5`; } function restartQuiz() { correctAnswers = 0; var questions = document.getElementsByClassName('quiz-question'); for (var i = 0; i { option.classList.remove('correct', 'incorrect'); });

var inputs = document.querySelectorAll('.quiz-options input'); inputs.forEach(input => { input.checked = false; });

var nextButtons = document.querySelectorAll('.next-button'); nextButtons.forEach(button => { button.style.display = 'none'; });

document.getElementById('quiz-result').style.display = 'none'; updateScore(); }