Feb 24
How to Build an Online Quiz Application Using JavaScript with Code Examples
In this tutorial, we will be building an online quiz application using JavaScript. The application will allow users to test their knowledge on various topics and keep track of their scores. We will be using HTML, CSS, and JavaScript to build the application. Let’s get started!
Step 1: Set Up Your HTML
First, we need to set up the HTML structure for our quiz application. We will be using a form element to contain our quiz questions and answer choices. Here’s an example of what the HTML structure might look like:
<!DOCTYPE html>
<html>
<head>
<title>Online Quiz Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="quiz-form">
<h1>Quiz Title</h1>
<div class="question">
<h2>Question 1</h2>
<input type="radio" name="answer1" value="a"> Option A<br>
<input type="radio" name="answer1" value="b"> Option B<br>
<input type="radio" name="answer1" value="c"> Option C<br>
</div>
<div class="question">
<h2>Question 2</h2>
<input type="radio" name="answer2" value="a"> Option A<br>
<input type="radio" name="answer2" value="b"> Option B<br>
<input type="radio" name="answer2" value="c"> Option C<br>
</div>
<div class="question">
<h2>Question 3</h2>
<input type="radio" name="answer3" value="a"> Option A<br>
<input type="radio" name="answer3" value="b"> Option B<br>
<input type="radio" name="answer3" value="c"> Option C<br>
</div>
<button type="submit">Submit</button>
</form>
<script src="./app.js"></script>
</body>
</html>Note that we have created three questions, each with three answer choices. We have also added a submit button at the end of the form.
Step 2: Create a JavaScript Function to Score the Quiz
Next, we need to create a JavaScript function that will score the quiz. This function will be called when the user submits their answers. Here’s an example of what the function might look like:
function scoreQuiz() {
var score = 0;
var answer1 = document.querySelector('input[name="answer1"]:checked').value;
var answer2 = document.querySelector('input[name="answer2"]:checked').value;
var answer3 = document.querySelector('input[name="answer3"]:checked').value;
if (answer1 === "a") {
score++;
}
if (answer2 === "b") {
score++;
}
if (answer3 === "c") {
score++;
}
alert("Your score is " + score + "/3");
}In this function, we first initialize a score variable to 0. We then use the querySelector method to get the value of each checked radio button. We check each answer and increment the score if the answer is correct. Finally, we display the score in an alert box.
Step 3: Add Event Listener to the Submit Button
We need to add an event listener to the submit button so that the scoreQuiz function is called when the user submits their answers. Here’s an example of how we can add an event listener to the submit button:
var quizForm = document.getElementById("quiz-form");
quizForm.addEventListener("submit", function(event) {
event.preventDefault();
scoreQuiz();
});In this code, we first get the quiz form element by its ID. We then add an event listener to the form using the submit event. We use the preventDefault method to prevent the form from submitting and reloading the page. Finally, we call the scoreQuiz function to calculate the user’s score.
Step 4: Style Your Quiz Application
Lastly, we can add some CSS styling to our quiz application to make it look more visually appealing. Here’s an example of what the CSS might look like:
body {
font-family: Arial, sans-serif;
text-align: center;
}
form {
margin: 0 auto;
width: 50%;
}
h1, h2 {
margin-bottom: 10px;
}
.question {
margin-bottom: 20px;
}
input[type="radio"] {
margin-right: 10px;
}
button[type="submit"] {
margin-top: 20px;
padding: 10px 20px;
border-radius: 5px;
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #3e8e41;
}This CSS code will add some basic styling to the quiz application, including centering the form, adjusting the font family and sizes, and styling the submit button.
Here is the Full code
Final Thoughts
Congratulations! You have now built an online quiz application using JavaScript. This project can be expanded by adding more questions, including different question types (e.g. multiple-choice, true/false, fill-in-the-blank), and adding more advanced scoring features.
If you want to see the full code for this project, you can find it on Github Gist and Codepen. If you want to stay updated on more tutorials and projects, be sure to follow me on GitHub and Medium.
Thanks for reading, and happy coding!
