Instead of ending here, I want to add onto our project. It will give us practice with something we haven’t used yet. We’re going to turn it into a math game.

You’ll need to figure out a good place to add on something to click on to open math options. The options are going to be compare and arithmetic. Once they choose one of those, they should get an option to choose integers or not (that means use negative numbers). If they choose arithmetic, they should get options to add, multiply, or subtract.

If you want words to stay in the same line but have different tags, use the span tag. You can also use a button tag to create a button.

Each clickable item will need a unique id so that it can be identified when it is clicked.

Then there should be a place where they will see the directions for what they chose. Where do you think that will work best on the page? For integers, black cards are positive numbers and red numbers are negative numbers. Each direction will need a unique id so we can reveal the correct one when we need it.

Place buttons, or I just used the word winner, to have a place for the user to click to show which number is greater instead of the computer doing it automatically.

Add an input box so that there is a place to put in your answer. This is new. There is an input tag that we can use. We’re not worrying about looks right now. We’re just putting in our place holders. You input tag will look something like this.

<input value=”answer” id=”answer”></input>

You can give everything you made a class of hidden so that we can add CSS .hidden{display:none} so that they aren’t on the page until we want them. Only your button/link for choosing math options should be visible.

Add a little CSS so that you can look at your page. It doesn’t have to be finalized, but make it usable and something you’re willing to look at and that shows you the layout of the page.

You can see the video of this lesson.