Improve Game Visuals

[CMahaff]

Note: With current visuals, some button text falls outside of the button, may need to shrink font.

[mfansler]

I notice that an incorrect answer can only be clicked once. While the user probably shouldn't be silly enough to try to click it again, it might be worth including some visual cue to show that 1) that answer was wrong and 2) the button is now disabled. Something like turning the button background red and making it unresponsive to :hover actions is one possibility.

[CMahaff]

I agree that this needed to be done. For some reason, I couldn't get this to work with CSS. I added a .incorrect class to gamescreen, then used .addClass to change the button, and while I could confirm it added the class, the buttons stayed gray. Does .button maybe hold higher priority? I did try removing the button class then re-adding with .addClass('incorrect button') but that still didn't work. For now, it is using .css('background-color', 'red')

Also, to get this to work I had to add a new variable to keep track of the last button the user pressed, this.currentAnswer - as well as added the answer id as an html id (there might be a way to get the id from data-logic though). But the answer the user chose was not passed down to the function that sets incorrect or correct, only the server reponse which is essentially true/false.