As assignment 5 we had to create a simple math game. At this point in the course I must say I started to feel familiar with JavaScript. I started to build the basic look of the game in HTML, I started with the radio-buttons, followed by three buttons. After that I added a input where the player could add the answer. Then I added all the text so I could get a feel about everything. When I was done at this stage, the page was so ugly. But I knew I had to make it work before I could start polish the design.
Now I started with the javaScript. First off I gave my button some functions, a button that would check which radio-button was checked and then randomized some numbers. I felt that if the multiplication button was checked, I would randomize smaller numbers to make the calculation easier. So it checks whats selected and writes out the first number, then the math sign and then the second number and saves the result in a var. When I did write out the answer, I used the .innerHTML function that can change content in the HTML-document from the javaScript.
To make it easier for the player I did put in a function so that every time they push the new number button the game always focus the input. I also added some functionality so the player can just guess the answer once. If they were right, 1 point for her and it writes out using .innerHTML. If the she was wrong, disable the function to send away a new answer and she has to try a new number.
Now I had a working math game. But it was still pretty ugly. So now it was time for some CSS. I changed the layout to a more centered layout. I added some style to my buttons and added in in the javaScript that it showed the right answer using .innerHTML. If you were right, the text was green. If you were wrong, the text was red. I also added a header image to make the game look more fun.