How to Build a Simple Quiz App in JavaScript: A Beginner’s Guide
Creating a basic quiz app with JavaScript is a fun and straightforward project, perfect for building your coding confidence. Plus, once you’re done, you’ll have a fully functional app to show off. No bells and whistles—just pure, simple code that lets users answer questions and get immediate feedback on their score.
Here’s what we’ll cover in this guide:
- Structuring quiz data
- Prompting users for answers
- Calculating and displaying a score
This tutorial will walk you through each step. And don’t worry—there’s only a tiny bit of HTML involved.
Setting Up Your Project: HTML First, Then JavaScript
Before jumping into the JavaScript, let’s set up a basic HTML structure for the page. This part is straightforward; we’re just setting up a title and linking our JavaScript file.
1. Create an HTML File
Open your code editor and create a new HTML file. Here’s all you need to get started:htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Quiz App</title>
</head>
<body>
<h1>Basic Quiz App</h1>
<script src="quiz.js"></script>
</body>
</html>
This HTML file will load our JavaScript quiz once we add it in.
Create a JavaScript File Now, create a file named quiz.js in the same folder. Here’s where all the magic will happen—where we write the code that powers our quiz.
Step 1: Setting Up Questions and Answers
To keep it simple, we’ll store our questions and answers in an object. Using objects keeps our code clean and makes it easy to add or edit questions later on.
javascriptCopy code<code>const quizData = {
questions: [
{ question: "What’s the capital of France?", answer: "Paris" },
{ question: "What is 2 + 2?", answer: "4" },
{ question: "What color is the sky on a clear day?", answer: "Blue" }
]
};
</code>In this example:
- We have a
questionsarray insidequizData. - Each question is an object with two parts: a
questionand ananswer.
You could add more questions by simply extending this array. Easy, right?
Step 2: Prompting the User
Next, let’s write a function that will loop through the questions, prompt the user for an answer, and give feedback. Here’s how it might look:
javascriptCopy code<code>function runQuiz() {
let score = 0;
// Loop through each question
for (let i = 0; i < quizData.questions.length; i++) {
const userAnswer = prompt(quizData.questions[i].question);
// Check if the answer is correct
if (userAnswer.trim().toLowerCase() === quizData.questions[i].answer.toLowerCase()) {
alert("Correct!");
score++;
} else {
alert("Oops! The correct answer was " + quizData.questions[i].answer);
}
}
// Show final score
alert("You scored " + score + " out of " + quizData.questions.length);
}
</code>Let’s break it down:
- Score Tracking:
let score = 0;initializes the user’s score, starting from zero. - Loop Through Questions:
for (let i = 0; i < quizData.questions.length; i++)lets us cycle through each question, one by one. - Prompt for an Answer:
prompt(quizData.questions[i].question)shows the question and waits for the user to respond. - Check if It’s Right: Here’s the part where the app feels like it’s really working! If the user’s answer matches the correct answer (ignoring extra spaces and capitalization), we congratulate them and add a point to their score. Otherwise, they get a little reminder of the right answer.
- Final Score: Once all questions are answered, the app displays a final score—giving users an idea of how well they did.
Step 3: Running the Quiz
Finally, all we need to do is call our runQuiz() function at the bottom of quiz.js to make the app work.
javascriptCopy code<code>runQuiz();
</code>With this line, as soon as the page loads, the quiz will start, prompting users with each question in order. It’s simple, but it works.
Full Code for Your Basic Quiz App
Here’s the entire code, all in one place:
javascriptCopy code<code>const quizData = {
questions: [
{ question: "What’s the capital of France?", answer: "Paris" },
{ question: "What is 2 + 2?", answer: "4" },
{ question: "What color is the sky on a clear day?", answer: "Blue" }
]
};
function runQuiz() {
let score = 0;
for (let i = 0; i < quizData.questions.length; i++) {
const userAnswer = prompt(quizData.questions[i].question);
if (userAnswer.trim().toLowerCase() === quizData.questions[i].answer.toLowerCase()) {
alert("Correct!");
score++;
} else {
alert("Oops! The correct answer was " + quizData.questions[i].answer);
}
}
alert("You scored " + score + " out of " + quizData.questions.length);
}
runQuiz();
</code>Taking It Further: Ideas for Improvement
Once you’ve got the basics, there’s a lot you can add. Here are a few ideas:
- Add More Questions: The simplest way to level up is to add more questions to
quizData. - Shuffle Questions: Randomize the order of questions each time the quiz runs for a fresh experience.
- Track High Scores: Use local storage to track high scores or display a message like “New high score!” when users break a record.
- Add HTML for Better UI: Instead of using
promptandalert, create a simple form and buttons to handle user input. It’s a little more work but makes the quiz feel more like a real app.
Final Words
Building a basic quiz application in JavaScript doesn’t require fancy tools or libraries. All you need is a few key concepts—loops, conditionals, and objects. This project offers a hands-on way to practice JavaScript and see results in real time. Once you’ve built this app, you’ll be ready to tackle more complex projects, each adding a new layer of interactivity and polish.
So, get coding, test your quiz, and see what score you get!
