Frontend Weekly
Published in

Frontend Weekly

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:

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:

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:

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:

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!



It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shamaz Saeed

My name is Shamaz saeed and I am a full-stack Web Application Developer. I am very passionate about Web Development, and strive to better myself as a developer.