Learn to create a multiple-choice quiz in vanilla JavaScript
This week I’ve been working on 2 different multiple-choice quizzes, and today I’d like to share with you how to easily implement this feature in any of your JS projects, no matter the topic.
Here is an example of the deployed project called ‘Happy Tipper’, have a look:
https://sulfuric-quick-trumpet.glitch.me
Now let’s begin.
First of all, you need to create a form with questions and inputs as answers (type=“radio”). Each individual answer should have a unique class or id (you choose) — this is very important, and this is in our HTML file.
In my case, each statement has 5 options to choose from (= rate the statements). Depending on the option checked, the user gets a certain number of points — this will be in JS, so let’s go there.
What needs to be done now is adding points to the result of the calculation, which is initially set to zero. Let’s use ‘if statements’ for all the radio buttons. The number of points added depends on the option the user has chosen (look at how I’ve implemented that: first I chose the class of a checked radio button, then I added the points).
After the user has rated all the statements, they usually see the result in points. In my app, however, I decided to give the user the advice based on the number of points they scored — I’ve implemented it through ‘if-else statements’.
Let me quickly summarize everything I’ve done:
- Code statements and answers in HTML
2. Set the initial points to zero
3. Using ‘if-statements’, add points to zero depending on the radio button the user checks
4. Calculate the result and present it to the user (when they click the button)
Voila!
