We’re going to move onto the arithmetic part of our math options. When they click on add, we’ll have an addition variable that flips on. We’ll do the same with multiplication and subtraction. They will be variables that are 0, off. Then when their “id” is clicked on, they will be turned on and will be set to equal 1.

We’ll need to do things a little differently this time. The player isn’t clicking on an answer. They need to type in an answer. We’ll need to get that answer and check it against the real answer. If they match, the player will get the cards. If the player is wrong, then the computer gets the cards.

Since we’re now talking about player versus computer, we should change First Player and Second Player to Player and Computer. You can do use ctrl F to use the Find feature in Atom. On the bottom, a box will pop up. You can type in firstPlayer in the find line and then under that enter player in the replace line. Then click on Replace All. You can do the same with secondPlayer and computer. That will standardize our terms. You’ll need to do that in your HTML and script.js file. By hand you’ll have to replace First Player and Second Player where they are written in the cards.

To allow the player to enter an answer, we need their input. To do that we can use an input box by putting an input tag in our HTML. We don’t need a closing tag on input. We need to give it an ID, because we need to have a way to identify the value put in there and use it. We’re going to compare it to the correct answer.

<input id=”playerAnswer”>

In order for the code to know that we are done entering our value, we’re going to put in a button to submit our answer. I’m going to use the button tag and have the word Check written on the button. I need to give it an ID so that the code knows when I clicked on it.

<button id=”submit”>Check</button>

In the next lesson, we’ll get that value answered and do something with it.

You can watch this lesson. This time I coded live instead of doing it ahead of time.