Quiz App – Mini-Projects
This tutorial will guide you through building a basic quiz app using JavaScript, suitable for intermediate learners. We’ll focus on creating a simple app that allows users to take quizzes and receive feedback. This project will cover fundamental JavaScript concepts like variables, functions, event handling, and basic DOM manipulation. It’s a great starting point for expanding your skills and understanding of web development.
Introduction
A quiz app is a fun and engaging application that tests users’ knowledge on various topics. This tutorial will walk you through building a simple quiz app, incorporating features like question presentation, answer submission, and feedback. It’s a foundational project that will help solidify your understanding of JavaScript and web development principles.
A Quiz App allows users to answer questions and check their score.
Quiz apps are useful because they:
- Test user knowledge
- Improve interaction
- Help learn JavaScript concepts
In this project, users can:
- Answer multiple-choice questions
- Get instant feedback
- See final score
🧠 Concepts You Will Learn
- Arrays and objects
- DOM manipulation
- Event handling
- Conditional logic
- Dynamic UI updates
📌 Features
- Multiple-choice questions
- Next question functionality
- Score tracking
- Final result display
🏗️ Project Setup
You only need:
- A browser
- A code editor
💻 Code Implementation
📁 index.html
<!DOCTYPE html>
<html>
<head>
<title>Quiz App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.quiz-container {
background: white;
width: 100%;
max-width: 500px;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
h1 {
color: #667eea;
margin-bottom: 10px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
#question {
color: #333;
margin: 25px 0;
font-size: 1.4em;
line-height: 1.5;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
#answers {
display: flex;
flex-direction: column;
gap: 12px;
margin: 25px 0;
}
#answers button {
padding: 15px 20px;
border: 2px solid #e0e0e0;
background: white;
color: #333;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
text-align: left;
position: relative;
overflow: hidden;
}
#answers button:hover:not(:disabled) {
border-color: #667eea;
background: #f8f9ff;
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
#answers button:disabled {
cursor: not-allowed;
opacity: 0.7;
}
#answers button.correct {
background: #d4edda;
border-color: #27ae60;
color: #155724;
}
#answers button.wrong {
background: #f8d7da;
border-color: #e74c3c;
color: #721c24;
}
#nextBtn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 30px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
font-weight: 600;
transition: all 0.3s ease;
width: 100%;
margin-top: 20px;
display: none;
text-transform: uppercase;
letter-spacing: 1px;
}
#nextBtn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
#nextBtn:active {
transform: translateY(0);
}
#score {
display: none;
margin-top: 25px;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
font-size: 1.3em;
font-weight: 600;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.progress-bar {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 10px;
margin: 20px 0;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
transition: width 0.5s ease;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>🧠 Quiz App</h1>
<div class="progress-bar">
<div class="progress-fill" id="progressBar"></div>
</div>
<h2 id="question">Question</h2>
<div id="answers"></div>
<button id="nextBtn">Next Question →</button>
<h3 id="score"></h3>
</div>
<script src="script.js"></script>
</body>
</html>
📁 index.html
const quizData = [
{
question: "What is the capital of France?",
options: ["Berlin", "Paris", "Rome", "Madrid"],
correct: "Paris"
},
{
question: "Which planet is largest?",
options: ["Mars", "Jupiter", "Venus", "Earth"],
correct: "Jupiter"
},
{
question: "Which language runs in browser?",
options: ["Python", "C++", "JavaScript", "Java"],
correct: "JavaScript"
},
{
question: "What is 12 × 8?",
options: ["80", "96", "108", "72"],
correct: "96"
},
{
question: "Who wrote 'Romeo and Juliet'?",
options: ["William Shakespeare", "Charles Dickens", "J.K. Rowling", "Mark Twain"],
correct: "William Shakespeare"
},
{
question: "Which element has the chemical symbol 'O'?",
options: ["Gold", "Oxygen", "Osmium", "Iron"],
correct: "Oxygen"
},
{
question: "What year did the first man land on the moon?",
options: ["1969", "1959", "1975", "1982"],
correct: "1969"
}
];
let currentQuestion = 0;
let score = 0;
let answered = false;
const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const nextBtn = document.getElementById("nextBtn");
const scoreEl = document.getElementById("score");
const progressBar = document.getElementById("progressBar");
// Load question
function loadQuestion() {
answered = false;
const currentQuiz = quizData[currentQuestion];
questionEl.textContent = currentQuiz.question;
answersEl.innerHTML = "";
nextBtn.style.display = "none";
scoreEl.style.display = "none";
// Update progress bar
const progress = ((currentQuestion) / quizData.length) * 100;
progressBar.style.width = progress + "%";
currentQuiz.options.forEach(option => {
const button = document.createElement("button");
button.textContent = option;
button.addEventListener("click", function() {
if (!answered) {
checkAnswer(option, button);
}
});
answersEl.appendChild(button);
});
}
// Check answer
function checkAnswer(selected, button) {
answered = true;
const correctAnswer = quizData[currentQuestion].correct;
const buttons = answersEl.querySelectorAll("button");
// Disable all buttons and show correct answer
buttons.forEach(btn => {
btn.disabled = true;
if (btn.textContent === correctAnswer) {
btn.classList.add("correct");
}
});
// Show feedback
if (selected === correctAnswer) {
score++;
button.classList.add("correct");
} else {
button.classList.add("wrong");
}
nextBtn.style.display = "block";
}
// Next question
nextBtn.addEventListener("click", function() {
currentQuestion++;
if (currentQuestion < quizData.length) {
loadQuestion();
} else {
showScore();
}
});
// Show score
function showScore() {
// Complete the progress bar
progressBar.style.width = "100%";
questionEl.textContent = "🎉 Quiz Completed!";
answersEl.innerHTML = "";
nextBtn.style.display = "none";
const percentage = (score / quizData.length) * 100;
let emoji = "🏆";
if (percentage < 50) emoji = "💪";
else if (percentage < 100) emoji = "🌟";
scoreEl.innerHTML = `
${emoji} Your Score: ${score} / ${quizData.length}<br>
<span style="font-size: 0.8em; opacity: 0.9;">${percentage.toFixed(0)}% Correct</span>
`;
scoreEl.style.display = "block";
}
// Initial load
loadQuestion();
nextBtn.style.display = "none";
Quiz App Tutorial
▶️ How to Run
- Create a folder
- Add:
index.htmlscript.js
- Open
index.htmlin browser
⚙️ How It Works
- Questions stored in an array of objects
loadQuestion()updates the UI- Answer buttons are created dynamically
checkAnswer()validates the selected answer- Score is tracked using a variable
Summary
This tutorial has provided a basic introduction to building a quiz app using JavaScript. By understanding fundamental concepts like variables, functions, and event handling, you’ve laid a solid foundation for further exploration and development of more complex web applications. Remember to practice and experiment with different features to truly master the skills you’ve learned.