Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.17: Trivia Project

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.

Creating a link to another page is done through what type of tag?




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.

Which statements about strings are true





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.

When creating a HTML Hex color, what order are the parts that make up the code?





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.

In order to create a space character that won't be ignored, you use .

Finally, we want the user to be able to answer numeric questions. These questions have a number for their answer.

How many generic font families are there? .

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. 

Chapter contents

Chapter 5 Contents

5.1 Forms Cheat Sheets

This chapter's summary cheat sheet.

5.2 The client-server model

How forms are traditionally used.

5.3 The Form tag

How to set up a form in HTML.

5.4 Inputting text

Getting text input from the user.

5.5 Specialized text formats

Making your input fields more specific and semantic.

5.6 Form cosmetics

Making forms look more like printed forms.

5.7 checkboxes & radio buttons

How to use Checkboxes and Radio buttons.

5.8 Numbers and Dates

Using numbers and dates gives your user better GUI controls.

5.9 special purpose input types

The reset, button, image, color, and file input types.

5.10 Option Select

The select element lets users select options from a drop-down list.

5.11 Data Lists

The datalist elements lets you create pull-down lists for input elements.

5.12 Output

Displaying values in a form.

5.13 dialog box concepts

Built in dialog boxes and pre-dialog tag handmade dialogs.

5.14 using dialog boxes

The <dialog> tag and using it to create dialog boxes.

5.15 Validating forms

Review of validating forms in HTML.

5.16 JavaScript Validation

How to use JavaScript to prevent invalid forms from being submitted.

5.17 Project: Trivia

Chapter project: Trivia game

5.18 Trivia Project Solution

Solution for the Trivia gaame

← previous section
JavaScript Form Validation
next section →
Trivia Project Solution.
Table of Contents