The first step in any trivia game is coming up with questions. As it is easiest to create questions for a topic you are familiar with, I opted to go with the first four chapters of this book. As stated by the requirements, there should be 5 types of questions so I had one of each type of question for each of the first four chapters of the book. While it would not be overly difficult to generate the form in JavaScript, just like we did with the table in chapter 4, I opted to take the easier route and hand code my questions. As all the chapters have similar form code, I will only show one of the chapter’s code so you can see how the different types of questions were laid out in HTML.
One important feature that I wanted was for there to be check marks for correct answers and Xs for incorrect answers once the quiz has been completed. This is done by having a span section before each question that will hold the checkmark or X. Some simple utility functions take in the label used for the mark and sets the contents and colors appropriately. We are simply using existing Unicode characters for the symbols so no images need to be loaded, but if we wanted a more custom look for our checkmarks we could easily have used an image tag instead of a span and change the image being used to the appropriate image.
The true/false questions can be a simple group of radio buttons. You will notice that to support marking the question we have the section have an overall label, for the final mark of the question. Each radio button is labelled with the same base label followed by an extended label (letters, but anything would work).
The code for checking the answer is very simple as all we need to do is see if the selected radio button matches the answer we are expecting. The base label is used for the checkmark by adding the mark extension to the label, while we take advantage of the querySelector function for determining which label is checked. If the checked label is not null, as it is possible for the user to not select an item, and the answer id matches our concatenation of the base label and our correct extension then we set the checkmark and return 1 to indicate they got the question correct. If the answer is not correct, we default to setting the X mark and return 0 for the score.
Having a section where players select multiple answers, with some being correct while others being incorrect is a bit trickier to implement. First, because an answer has multiple correct or incorrect answers, each checkbox needs to have a mark span beside it. We also need a way of knowing if the answer is correct or not. This could be done in a similar way to how we did it with the multiple-choice above and have the mark method passed the information, but as the value of checkboxes do not need to be unique, we can simply build the marking information right into the form. Checkboxes with a value of T are expected to be checked, while checkboxes with a value of F are expected to remain unchecked.
For checking the multiple correct we need to know the base label and for convenience the number of choices. It is possible to find the number of choices with code, but as I had this information it was easier to simply pass this value. We then loop through all the labels and process each answer separately while counting the number of correct answers. Once we know how many are correct, we normalize the score by dividing the number of correct answers by the total number of answers that are part of the question.
Ordering is a bit more of a pain to prepare. Each line is a select box, with the options being the list to be ordered. This means a lot of code duplication. I opted to always have each option be the first option in the list, bur if you wanted all possible answers represented, you could simply take advantage of the selected attribute and assign each line a different answer. The correct order is the value of the option. As each line is part of the answer, we need a mark by each line.
As with the multiple-answers question, we are being lazy and providing the number of answers but could have had code to figure this out. We loop through the answers, knowing that the value of the option should be the same as the select box that we are processing. This results in the score and setting of checkmarks. Once marked, we normalize the score by dividing the number of correctly positioned items by the number of choices.
The fill-in-the-blank style of question is probably the easiest to set up as it is simply a text input box.
My approach to checking the fill-in-the-blank is not the best approach, as I am assuming just a single correct answer. If the mark matches, then you have the correct answer otherwise you do not. A better approach would be to have an array of answers, but as I haven’t covered arrays yet, the less accurate approach was used. We will be looking at arrays in chapter 7.
Finally, the number entry option is also very easy to set up in HTML as it is just a number input box.
Checking the answer is also easy as we just see if the number matches the answer. The number questions I wrote all have precise answers, if this was not the case, a more flexible approach would be to have a range of acceptable numbers.
With all the questions finished, we need to score the answers. This is simply calling the processing method for each question. Once you have the final score you can then put the final results onto the page.
That is it for this chapter. In the next chapter we will be looking at the layout capabilities of CSS.
This chapter's summary cheat sheet.
How forms are traditionally used.
How to set up a form in HTML.
Getting text input from the user.
Making your input fields more specific and semantic.
Making forms look more like printed forms.
How to use Checkboxes and Radio buttons.
Using numbers and dates gives your user better GUI controls.
The reset, button, image, color, and file input types.
The select element lets users select options from a drop-down list.
The datalist elements lets you create pull-down lists for input elements.
Displaying values in a form.
Built in dialog boxes and pre-dialog tag handmade dialogs.
The <dialog> tag and using it to create dialog boxes.
Review of validating forms in HTML.
How to use JavaScript to prevent invalid forms from being submitted.
Chapter project: Trivia game
Solution for the Trivia gaame