Java Reference
In-Depth Information
Last of all we need to change the
gameOver()
function so it uses the
update()
func-
tion instead of an alert dialog. The game over message is placed inside the question ele-
ment, so it replaces the last question asked:
scripts.js
(excerpt)
function gameOver(){
// inform the player that the game has finished and tell
them how
↵
many points they have scored
update($question,"Game Over, you scored " + score + "
points");
}
Adding Some Style
Since we're now using a lot more HTML to display information, we need to add some extra
styles to our CSS file. Open up the styles.css file and add the following:
styles.css
(excerpt)
section p {
font: bold 24px/150% Arial, Helvetica, sans-serif;
background: #ccc;
border: #999 2px solid;
color: #666;
text-align: center;
padding: 10px;
margin: 10px;
width: 300px;
}
This will style the paragraphs that are added to the question and feedback sections so that
they appear in a gray box with a border, helping them to stand out and be easy to read.
The feedback paragraphs also have a class of
right
or
wrong
depending on whether the
player answers the question correctly or not. We can use this to add some extra styles to
give some visual feedback and color the boxes green for right answers and red for wrong
answers by adding the following styles:
