The obvious project for forms would have to be a trivia game. So the project for this chapter is to take advantage of your new knowledge about forms to create a trivia game that has at least ten questions in it. To make sure your knowledge gets spread out over the material we have covered, there should be several types of answer formats.
The obvious select answer from a list of radio buttons is a must have. Here is an example of such a question.
The next type of question has multiple correct answers so the player must just select the correct answers from the presented choices. Checkboxes are great for this type of question.
Having players put answers into the correct order is also a good type of question to have. While some type of drag/drop or connecting lines would be possible we haven’t quite gotten that far into the material so we instead will have select boxes with all the choices in each of the select boxes.
Another common type of quiz style is the fill-in-the-blanks problem. Here the player is presented with a problem and has to type in the correct answer.
Finally, we want the user to be able to answer numeric questions. These questions have a number for their answer.
For my version, I wrote 5 handlers to check the results of each type of questions placing Unicode checkmark or x-mark symbols where appropriate. While it is certainly possible to have the code for handling each question separate, having the utility methods made it easier to add later questions. Take each type of question separate and get it working before going to the next type of question is my advice for undertaking this project.
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