Responsive Quiz
Welcome to the Quiz
Each correct answer gives you 1 point, and each wrong answer deducts 0.25 points.
Time left: 30 seconds
const startBtn = document.getElementById('startBtn');
const startContainer = document.getElementById('startContainer');
const quizContainer = document.getElementById('quizContainer');
const questionContainer = document.getElementById('questionContainer');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const timerElement = document.getElementById('time');
const progressBar = document.getElementById('progressBar').firstElementChild;
const resultContainer = document.getElementById('resultContainer');
const scoreElement = document.getElementById('score');
const questions = [
{
question: "What is the capital of France?",
options: ["A. Madrid", "B. Paris", "C. Berlin", "D. Rome"],
answer: "B"
},
{
question: "What is 2 + 2?",
options: ["A. 3", "B. 4", "C. 5", "D. 6"],
answer: "B"
},
// Add more questions here...
];
let currentQuestionIndex = 0;
let score = 0;
let selectedAnswers = {};
let timer;
let timeLeft = 30;
startBtn.addEventListener('click', startQuiz);
prevBtn.addEventListener('click', prevQuestion);
nextBtn.addEventListener('click', nextQuestion);
function startQuiz() {
startContainer.style.display = 'none';
quizContainer.style.display = 'block';
loadQuestion(currentQuestionIndex);
startTimer();
}
function loadQuestion(index) {
questionContainer.innerHTML = '';
const question = document.createElement('p');
question.innerText = questions[index].question;
questionContainer.appendChild(question);
questions[index].options.forEach(option => {
const label = document.createElement('label');
const input = document.createElement('input');
input.type = 'radio';
input.name = 'option';
input.value = option[0];
input.checked = selectedAnswers[index] === option[0];
label.appendChild(input);
label.appendChild(document.createTextNode(option));
questionContainer.appendChild(label);
});
updateProgressBar();
resetTimer();
}
function startTimer() {
timer = setInterval(() => {
timeLeft--;
timerElement.innerText = timeLeft;
if (timeLeft <= 0) {
clearInterval(timer);
nextQuestion();
}
}, 1000);
}
function resetTimer() {
clearInterval(timer);
timeLeft = 30;
timerElement.innerText = timeLeft;
startTimer();
}
function prevQuestion() {
saveAnswer();
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
loadQuestion(currentQuestionIndex);
}
}
function nextQuestion() {
saveAnswer();
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
loadQuestion(currentQuestionIndex);
} else {
calculateScore();
}
}
function saveAnswer() {
const selectedOption = document.querySelector('input[name="option"]:checked');
if (selectedOption) {
selectedAnswers[currentQuestionIndex] = selectedOption.value;
}
}
function calculateScore() {
clearInterval(timer);
for (let i = 0; i < questions.length; i++) {
if (selectedAnswers[i]) {
if (selectedAnswers[i] === questions[i].answer) {
score += 1;
} else {
score -= 0.25;
}
}
}
scoreElement.innerText = score;
quizContainer.style.display = 'none';
resultContainer.style.display = 'block';
}
function updateProgressBar() {
const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
progressBar.style.width = `${progress}%`;
}
