Build a Quiz Application using Vanilla JavaScript

In this video tutorial you learn to build a quiz application using vanilla javascript.

At first we need to add some dummy quiz data. Then we need to delcare a quiz count variable with the value of 0. Then create a function to load those data into our html elements. Add a click event listener to our next button and increment the quiz count variable by 1 and call the load quiz function again.

To fix undefined error we need to check if quiz count is less than the length of the quiz data and inside the if block we are going to increment quiz count and call the load quiz data function. And for else block we can call the alert function and add a suitable dialogue that the user finished answering all the questions.

Now every user can skip any question without selecting any answer. To prevent it we can create a function to get the selected answer. So create a get selected answer function and select all the radio buttons with querySelectorAll('input[name="answer"]) and run a loop over it and check if it is selected or not, if it is selected then return the id of that element else none of the answer is selected then return undefined or falsy value.

Now inside the click event function get the selected answer and assign that value with a variable called selected answer. And check if selected answer is undefined or has any value like a, b, c or d. If it has any value except we are going to increment the quiz count and load the quiz.

Now here we need a score variable. So define a score variable. Then check if quiz data[quiz count].correct is equal to selected answer, if it is true then increment the score by 1.

At the moment when any user select any answer and press the next button our answers are still selected. We need to fix it. So, we can make a function to deslect answer. So create that function and loop over all the answer radio element and assign false to that elements checked property.

Please make sure you watch this video till the end.

🙏 If you find this video tutorial helpful then don't forget share and subscribe.

Follow Me:

#quizApp #javascriptQuizApp