Quiz
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
margin: 0;
}
#quiz-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
}
#quiz-question {
margin-bottom: 20px;
}
.answer {
display: block;
margin: 10px 0;
}
.navigation-buttons {
display: flex;
justify-content: space-between;
}
.hidden {
display: none;
}
@media (max-width: 600px) {
#quiz-container {
padding: 15px;
}
.navigation-buttons {
flex-direction: column;
}
.navigation-buttons button {
margin-bottom: 10px;
}
}
const quizData = [
{
question: "What is the capital of France?",
answers: [
{ text: "Berlin", correct: false },
{ text: "Madrid", correct: false },
{ text: "Paris", correct: true },
{ text: "Lisbon", correct: false }
]
},
{
question: "What is 2 + 2?",
answers: [
{ text: "3", correct: false },
{ text: "4", correct: true },
{ text: "5", correct: false },
{ text: "6", correct: false }
]
},
// Add more questions as needed
];
let currentQuestionIndex = 0;
let score = 0;
const timePerQuestion = 30;
let timer;
let userAnswers = new Array(quizData.length).fill(null);
const startQuizButton = document.getElementById('start-quiz');
const quizContent = document.getElementById('quiz-content');
const quizQuestionElement = document.getElementById('quiz-question');
const quizAnswersElement = document.getElementById('quiz-answers');
const prevQuestionButton = document.getElementById('prev-question');
const nextQuestionButton = document.getElementById('next-question');
const submitQuizButton = document.getElementById('submit-quiz');
const quizResult = document.getElementById('quiz-result');
const scoreElement = document.getElementById('score');
const correctAnswersElement = document.getElementById('correct-answers');
startQuizButton.addEventListener('click', startQuiz);
prevQuestionButton.addEventListener('click', () => navigateQuestion(-1));
nextQuestionButton.addEventListener('click', () => navigateQuestion(1));
submitQuizButton.addEventListener('click', submitQuiz);
function startQuiz() {
startQuizButton.classList.add('hidden');
quizContent.classList.remove('hidden');
showQuestion();
}
function showQuestion() {
const questionData = quizData[currentQuestionIndex];
quizQuestionElement.textContent = questionData.question;
quizAnswersElement.innerHTML = '';
questionData.answers.forEach((answer, index) => {
const answerElement = document.createElement('label');
answerElement.classList.add('answer');
answerElement.innerHTML = `
${answer.text}
`;
quizAnswersElement.appendChild(answerElement);
});
prevQuestionButton.classList.toggle('hidden', currentQuestionIndex === 0);
nextQuestionButton.classList.toggle('hidden', currentQuestionIndex === quizData.length - 1);
submitQuizButton.classList.toggle('hidden', currentQuestionIndex !== quizData.length - 1);
startTimer();
}
function navigateQuestion(direction) {
stopTimer();
const selectedAnswerIndex = document.querySelector('input[name="answer"]:checked')?.value;
if (selectedAnswerIndex !== undefined) {
userAnswers[currentQuestionIndex] = parseInt(selectedAnswerIndex);
}
currentQuestionIndex += direction;
showQuestion();
}
function submitQuiz() {
stopTimer();
calculateScore();
showResults();
}
function calculateScore() {
score = 0;
quizData.forEach((question, index) => {
if (userAnswers[index] !== null) {
if (question.answers[userAnswers[index]].correct) {
score += 1;
} else {
score -= 0.25;
}
}
});
}
function showResults() {
quizContent.classList.add('hidden');
quizResult.classList.remove('hidden');
scoreElement.textContent = `Your score is ${score}`;
correctAnswersElement.innerHTML = '';
quizData.forEach((question, index) => {
const correctAnswer = question.answers.find(answer => answer.correct).text;
const userAnswer = userAnswers[index] !== null ? question.answers[userAnswers[index]].text : 'No answer';
correctAnswersElement.innerHTML += `
Question: ${question.question}
Your answer: ${userAnswer}
Correct answer: ${correctAnswer}
`;
});
}
function startTimer() {
timer = setTimeout(() => {
navigateQuestion(1);
}, timePerQuestion * 1000);
}
function stopTimer() {
clearTimeout(timer);
}
