Quiz Time
body {
font-family: Arial, sans-serif;
background-color: #f0f4f7;
margin: 0;
padding: 0;
}
.quiz-container {
width: 100%;
max-width: 600px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
#question-container {
margin-bottom: 20px;
}
#options {
list-style-type: none;
padding: 0;
}
#options li {
background-color: #f8f9fa;
padding: 10px;
margin: 5px 0;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
}
#options li:hover {
background-color: #e2e6ea;
}
.timer {
font-size: 20px;
margin-bottom: 20px;
}
.score {
font-size: 18px;
margin-bottom: 20px;
}
.next-btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
display: none;
}
.next-btn:hover {
background-color: #0056b3;
}
// Quiz data (questions, options, correct answers)
const questions = [
{
question: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Rome"],
correctAnswer: "Paris",
},
{
question: "Who developed the theory of relativity?",
options: ["Newton", "Einstein", "Galileo", "Tesla"],
correctAnswer: "Einstein",
},
{
question: "Which is the largest planet in our solar system?",
options: ["Earth", "Jupiter", "Saturn", "Mars"],
correctAnswer: "Jupiter",
},
{
question: "What is the boiling point of water?",
options: ["100°C", "90°C", "80°C", "120°C"],
correctAnswer: "100°C",
},
{
question: "Which language is used for web development?",
options: ["Python", "JavaScript", "Java", "C++"],
correctAnswer: "JavaScript",
},
{
question: "Who wrote 'To Kill a Mockingbird'?",
options: ["Harper Lee", "J.K. Rowling", "F. Scott Fitzgerald", "George Orwell"],
correctAnswer: "Harper Lee",
},
{
question: "What is the hardest natural substance?",
options: ["Gold", "Iron", "Diamond", "Platinum"],
correctAnswer: "Diamond",
},
{
question: "What is the smallest country in the world?",
options: ["Monaco", "Vatican City", "San Marino", "Liechtenstein"],
correctAnswer: "Vatican City",
},
{
question: "What is the tallest mountain in the world?",
options: ["K2", "Mount Kilimanjaro", "Mount Everest", "Mount Fuji"],
correctAnswer: "Mount Everest",
},
{
question: "Which is the longest river in the world?",
options: ["Amazon", "Nile", "Yangtze", "Ganges"],
correctAnswer: "Nile",
},
];
// Variables to manage quiz state
let currentQuestionIndex = 0;
let score = 0;
let timer = 15;
let timerInterval;
// Function to start the quiz
function startQuiz() {
showQuestion();
startTimer();
}
// Function to show a question and its options
function showQuestion() {
const question = questions[currentQuestionIndex];
const questionText = document.getElementById('question');
const optionsList = document.getElementById('options');
const nextButton = document.getElementById('next-button');
questionText.textContent = question.question;
optionsList.innerHTML = ''; // Clear previous options
// Create options buttons dynamically
question.options.forEach(option => {
const li = document.createElement('li');
li.textContent = option;
li.onclick = () => checkAnswer(option);
optionsList.appendChild(li);
});
// Show next button
nextButton.style.display = 'none';
}
// Function to start the timer
function startTimer() {
const timerElement = document.getElementById('timer');
timerInterval = setInterval(() => {
if (timer > 0) {
timer--;
timerElement.textContent = timer;
} else {
clearInterval(timerInterval);
showNextButton();
}
}, 1000);
}
// Function to check if the selected answer is correct
function checkAnswer(selectedAnswer) {
const correctAnswer = questions[currentQuestionIndex].correctAnswer;
if (selectedAnswer === correctAnswer) {
score += 10; // Add 10 points for correct answer
}
// Stop the timer and show next button
clearInterval(timerInterval);
showNextButton();
}
// Function to show the next button
function showNextButton() {
const nextButton = document.getElementById('next-button');
nextButton.style.display = 'block';
document.getElementById('score').textContent = score;
}
// Function to move to the next question
function nextQuestion() {
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
timer = 15;
startQuiz();
} else {
alert('Quiz finished! Your total score is ' + score);
}
}
// Start the quiz when the page loads
startQuiz();
Quiz Time!
Time left: 15 seconds
Score: 0 points
