My goal is to take you on a trip from planning to building a quiz application. For that, we will use vanilla JavaScript, CSS, and HTML. No additional libraries or packages. Let’s get started by defining what our quiz app can do.

Defining the specification

The quiz will be split into two main classes. The first one will be a settings area in which the player can choose the difficulty, the category, and the number of questions he wants to answer. For that, we will create a settings-class to track all of this information. After doing that he can start the quiz.

The second area will be a quiz. The quiz-class tracks the progress of the player and decides whether or not to display the next question of the final screen.

Concept of our classes

Furthermore, the quiz-class has two other components, first of an array of question-classes that hold the data of a question, display it, and checks if the answer was right or not. The other one is the _final-class _that displays the last page with the player’s score.

We will be using the Open Trivia DB API for the questions so that we don’t have to come up with our own questions.

As you might already guess, because I am talking a lot about classes, we will use Object-Oriented-Programming to implement this quiz app and not Functional-Programming. If you are interested in the difference between these two paradigms go an check out my article “Functional Programming vs OOP in JavaScript”.

Prerequisites

Before we can start implementing the quiz we need to create our folder structure and the HTML and CSS. In this article, we will be focusing on the JavaScript part of the application. Therefore I will be providing the necessary HTML and CSS in this section. Let’s start by creating the folder structure like this:

$ mkdir vanilla-quiz
$ cd ./vanilla-quiz
$ mkdir quiz
$ touch index.html index.js styles.css

#javascript #programming #html #css #web-development