In this tutorial, we will learn how to create a simple quiz app in JavaScript. This code represents a simple interactive Quiz App built using HTML, CSS (implicitly), and JavaScript. It displays a series of multiple-choice questions to the user, allows them to select answers, and provides instant feedback after each selection. At the end of the quiz, the total score is displayed. The questions cover general knowledge topics such as geography, science, and literature.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz App</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f2f5;
margin: 0;
padding: 20px;
}
.quiz-container {
max-width: 600px;
background: white;
margin: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.question {
font-size: 1.2em;
margin-bottom: 10px;
}
.answers button {
display: block;
margin: 8px 0;
padding: 10px;
width: 100%;
border: none;
background: #eee;
border-radius: 5px;
cursor: pointer;
}
.answers button:hover {
background: #ddd;
}
.result {
text-align: center;
font-size: 1.5em;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="quiz-container">
<div id="quiz"></div>
<div class="result" id="result"></div>
</div>
<script>
const quizContainer = document.getElementById("quiz");
const resultContainer = document.getElementById("result");
let currentQuestionIndex = 0;
let score = 0;
const questions = [
{
question: "What is the capital of France?",
correctAnswer: "Paris",
answers: ["London", "Berlin", "Paris", "Madrid"]
},
{
question: "Which planet is known as the Red Planet?",
correctAnswer: "Mars",
answers: ["Venus", "Saturn", "Mars", "Jupiter"]
},
{
question: "Who wrote 'Romeo and Juliet'?",
correctAnswer: "William Shakespeare",
answers: ["William Wordsworth", "William Shakespeare", "John Keats", "Charles Dickens"]
},
{
question: "What is the largest ocean on Earth?",
correctAnswer: "Pacific Ocean",
answers: ["Atlantic Ocean", "Indian Ocean", "Pacific Ocean", "Arctic Ocean"]
},
{
question: "What is the boiling point of water?",
correctAnswer: "100°C",
answers: ["90°C", "100°C", "110°C", "80°C"]
},
{
question: "Which element has the chemical symbol 'O'?",
correctAnswer: "Oxygen",
answers: ["Gold", "Osmium", "Oxygen", "Oganesson"]
},
{
question: "What is the largest continent?",
correctAnswer: "Asia",
answers: ["Africa", "Asia", "Europe", "Australia"]
},
{
question: "Who painted the Mona Lisa?",
correctAnswer: "Leonardo da Vinci",
answers: ["Vincent van Gogh", "Pablo Picasso", "Leonardo da Vinci", "Claude Monet"]
},
{
question: "How many legs does a spider have?",
correctAnswer: "8",
answers: ["6", "8", "10", "12"]
},
{
question: "Which language is primarily spoken in Brazil?",
correctAnswer: "Portuguese",
answers: ["Spanish", "Portuguese", "English", "French"]
}
];
function showQuestion() {
if (currentQuestionIndex >= questions.length) {
showResult();
return;
}
const q = questions[currentQuestionIndex];
const shuffledAnswers = [...q.answers].sort(() => Math.random() - 0.5);
quizContainer.innerHTML = `
<div class="question">${q.question}</div>
<div class="answers">
${shuffledAnswers.map(answer => `<button onclick="checkAnswer('${answer.replace(/'/g, "\\'")}', '${q.correctAnswer.replace(/'/g, "\\'")}')">${answer}</button>`).join('')}
</div>
`;
}
function checkAnswer(selected, correct) {
if (selected === correct) {
score++;
}
currentQuestionIndex++;
showQuestion();
}
function showResult() {
quizContainer.innerHTML = "";
resultContainer.innerHTML = `You scored ${score} out of ${questions.length}!`;
}
showQuestion();
</script>
</body>
</html>