This Quiz Web App will have the following features.
- User Interface for Question and four interactive options.
- Navigation between questions.
- Evaluation in the form of True or False output values.
Approach: For the user interface, the page is divided into four divisions using HTML div tags and given classes and ids to identify them. The classes and Ids names are chosen such that it carries the purpose of each div.
- The first “div” is for “result” which will be used to show the status of the question if the selected answer is correct or not.
- The second “div” is for “question-container” which will be used for holding the question text and display them.
- The third “div” is for “option-container” as the name suggests, it will hold all four options for the question.
- The fourth “div” is for “navigation” which will have a button for navigating to the next question and to evaluate the selected answer.
All of these four “div” are inside another “div” with class “panel”. We are using this DOM element in our script.
HTML Code: The following code demonstrates the design part of the quiz app.
The code takes care of the looks and alignment of the user interface. The file is included in the head section of the above code.
Let’s see how we can access different things from this array “Questions”:
How to access any question text Questions[id].q How to access text of the first option of any question Questions[id].a.text How to know whether the option is true or false Questions[id].a.isCorrect
Note: The “id” keep changing based on the question number, it represents the question number from the array.
The Questions array is defined. We have taken one boolean variable “start” which is initially set as true indicating the start of the Quiz. The iterate() function is responsible for displaying questions and options based on the “id” passed to it. This function is called conditionally using the “next” button later in the code.
Working of iterate() function: We are getting the result from HTML div and setting it to empty text using the HTML innerText property of node element. Once the question is set, we are setting the options using the same method discussed in the table. we are also setting the option “value” which is also coming from the array “Questions”. This “op1.value” means the value for that option button and “Questions[id].a.isCorrect” will set it to true or false. Then we are setting one variable “selected” which is used to hold the value for the selected option by the user.
The evaluate button is implemented using the addEventListener function. If it is correct then it will set the “result” div text to “true” and will set the “style.color” property to “green” else it will set the “result” div to “false” and will set the “style.color” property to “red”.
We are getting the next button using the class name. The click event is set which will check the id variable. If it is less than our total questions id which is (0,1,2) in our case so that our array does not get out of bound. We are calling the “iterate” function conditionally passing the new id of the question also setting the “start” to false indicating that this is not the start of the quiz.