Weekly Dev Challenge: QUIZ application
This week’s SCRIMBA’s weekly dev challenge was creating a QUIZ application.
So went ahead and created the default UI in HTML and it looked like below:
This application will show score, a question with 4 options, a Submit button and a next question button and a label to show correct/incorrect answers.
I stored all the questions in a JS object with key as the questions inside the object and answer options in another key with name answers.
Next thing i did was declare all the DOM elements to use them inside the JavaScript.
I created two functions for the two buttons, one submitAnswers which would verify the answer of the question and show correct/incorrect messages and add 1 to the score and another nextQuestion which would load the next question from the myQuestions JS object.
I had another function computeResult that would verify the user option is correct or incorrect. If correct it will increment the global score else it would show an incorrect message with correct answer.
The html looks like this
And the CSS looks like this:
So the final output of the program looks like below :
For correct answer
For incorrect answer
Error handling
End Screen:
So if you would like to share some feedback to refactor the code, please go ahead.
