This time work on making your math options clickable. You will need a click function command for each one. When it is clicked, it will assign a variable and/or run a function. It will also need to open directions and any other needed options. We don’t need the functions filled out right now. We can use console.log(“running addition”), for example, to show that the correct function is being called.

.winner {

flex-grow: 1;

}

//I added the word Winner into each player’s div under suit. Flex grow pushes it to the bottom of the box.

button {

background-color: #4CAF50;                     /

padding: 1rem;

margin: 1rem;

font-size: 1.3rem;

color: #fff;

}

//Changes the look of the math option buttons, Gives it the background color of the Draw button

span {

margin-left: 1rem;

}

//Puts space between the options

.button:hover {

color: red;

cursor: pointer;

}

//Gives things with a class of button the effect of a pointer and red font

input {

margin: 1rem 0;

}

//Rudimentary CSS for the input box

.hidden {

display: none;

}

//Hides everything with the class of hidden from the page to start off

p {

font-size: 1.2rem;

}

//Font size of the directions

Then I used code in the javascript to hide and reveal options and directions as were needed. As much as possible, I want things hidden on the page to keep it neat and uncluttered. But, we want the appropriate directions on the page. We also want them to go away if new options are chosen. Here is just some of that code. You’ll have to click away and decide what you want shown and hidden when.

$(“#mathOptions”).on(‘click’, function() {

$(“.hidden”).css(“display”, “none”);

$(“#options”).css(“display”, “block”);

})

//When they click on the options question, choices appear. Hidden makes sure everything marked to be hidden is hidden. “Options” reveals the choices.

$(“#compare”).on(‘click’, function() {

$(“#options”).css(“display”, “none”);

$(“#integers”).css(“display”, “block”);

$(“#compareDirections”).css(“display”, “block”);

$(“#one”).css(“display”, “block”);

$(“#two”).css(“display”, “block”);

})

//When compare is chosen… The options disappear, The choice of integers appears, The directions appear, The word Winner appears in each player’s box

$(“#arithmetic”).on(‘click’, function() {

$(“#options”).css(“display”, “none”);

$(“#math”).css(“display”, “block”);                      ,

})

//When arithmetic is chosen…The options disappear, The choices for adding, multiplying, and subtracting appear

You can watch the video of this lesson.