Voting Game
Congratulations!
You've completed the quiz.
document.addEventListener("DOMContentLoaded", () => {
showPage(1);
});
const correctAnswers = {
q1: "C",
q2: "C",
q3: "A",
q4: "B",
q5: "C"
};
let score = 0;
function showPage(pageNumber) {
const pages = document.querySelectorAll('.question-page');
pages.forEach((page, index) => {
page.style.display = (index + 1 === pageNumber) ? 'block' : 'none';
});
document.getElementById('congrats-page').style.display = 'none';
}
function nextPage(pageNumber) {
showPage(pageNumber);
}
function showCongrats() {
const pages = document.querySelectorAll('.question-page');
pages.forEach(page => page.style.display = 'none');
document.getElementById('congrats-page').style.display = 'block';
calculateScore();
document.getElementById('final-score').innerText = `Your final score is: ${score} points`;
}
function checkSelection(questionNumber) {
const selected = document.querySelector(`input[name="q${questionNumber}"]:checked`);
const nextButton = document.getElementById(`next${questionNumber}`);
const congratsButton = document.getElementById('congratsButton');
if (selected) {
if (nextButton) {
nextButton.disabled = false;
}
if (congratsButton && questionNumber === 5) {
congratsButton.disabled = false;
}
}
}
function calculateScore() {
for (let i = 1; i <= 5; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (selected && selected.value === correctAnswers[`q${i}`]) {
score += 10;
}
}
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#game-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h2 {
margin-top: 0;
}
.question-page {
display: none;
}
#congrats-page {
display: none;
text-align: center;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
