Build a Quiz App using HTML, CSS, and JavaScript (With Score Tracking)

This project will teach you how to:

Dynamically load questions
Handle user interaction
Track scores
Display results
Use event listeners and basic DOM manipulation

Folder Structure

quiz-app/
├── index.html // UI structure
├── style.css // UI design
└── script.js // App logic

1. HTML: Structure the Quiz Interface

Create an index.html file:

<!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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="quiz-container">
<h1>JavaScript Quiz</h1>
<div id="quiz">
<h2 id="question">Question text will appear here</h2>
<div id="options"></div>
<button id="nextBtn">Next</button>
<div id="result"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Key Elements:

#question – Displays the current question
#options – Holds all multiple choice answers
#nextBtn – Advances to the next question
#result – Shows the final score

2. CSS: Style the Interface

Create a style.css file:

body {
font-family: 'Segoe UI', sans-serif;
background: #f2f4f8;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: start;
height: 100vh;
padding-top: 50px;
}
.quiz-container {
background: #ffffff;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
max-width: 600px;
width: 100%;
}
h1 {
text-align: center;
margin-bottom: 25px;
}
#question {
font-size: 1.3rem;
margin-bottom: 15px;
}
#options {
display: flex;
flex-direction: column;
gap: 10px;
}
.option {
padding: 12px;
background: #f1f1f1;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
}
.option:hover {
background: #e0e0e0;
}
.option.selected {
background-color: #d0e8ff;
border-color: #007bff;
}
#nextBtn {
margin-top: 20px;
padding: 10px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
#nextBtn:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
}

3. JavaScript: Logic & Interaction

Create a script.js file:

const questions = [
{
question: "What does HTML stand for?",
options: [
"Hyper Text Markup Language",
"High Text Machine Language",
"Home Tool Markup Language"
],
answer: 0
},
{
question: "Which programming language is used for web
development?",
options: ["Python", "C++", "JavaScript", "Java"],
answer: 2
},
{
question: "What does CSS do?",
options: [
"Adds behavior",
"Defines structure",
"Adds styling",
"Compiles JavaScript"
],
answer: 2
}
];
let currentQuestion = 0;
let score = 0;
let selectedOption = null;
const questionEl = document.getElementById("question");
const optionsEl = document.getElementById("options");
const nextBtn = document.getElementById("nextBtn");
const resultEl = document.getElementById("result");
function loadQuestion() {
const q = questions[currentQuestion];
questionEl.textContent = q.question;
optionsEl.innerHTML = "";
resultEl.textContent = "";
q.options.forEach((opt, index) => {
const div = document.createElement("div");
div.classList.add("option");
div.textContent = opt;
div.addEventListener("click" , () => {
document.querySelectorAll("
.option").forEach(o =>
o.classList.remove("selected"));
div.classList.add("selected");
selectedOption = index;
});
optionsEl.appendChild(div);
});
}
nextBtn.addEventListener("click", () => {
if (selectedOption === null) {
alert("Please select an answer before continuing.");
return;
}
if (selectedOption === questions[currentQuestion].answer) {
score++;
}
currentQuestion++;
selectedOption = null;
if (currentQuestion < questions.length) {
loadQuestion();
} else {
showResult();
}
});
function showResult() {
questionEl.textContent = "Quiz Completed!";
optionsEl.innerHTML = "";
nextBtn.style.display = "none";
resultEl.textContent =`
 Your score: ${score} /
${questions.length}`;
}
loadQuestion();

Bonus Features to Add Later

You can extend this quiz app with:

Timer per question
Shuffle questions
Persistent score with localStorage
Category selection or difficulty levels
Submit answer with Enter key