Java Reference
In-Depth Information
Quiz Ninja Project
Now that we've reached the end of the chapter, it's time to add some events to our Quiz
Ninja Project. We're going to add a button that can be clicked on to start the game. This will
replace the
confirm
dialog that we've been using so far.
To start, add this line of code to index.htm, just before the closing
<body>
tag:
<button id="button">Click To Play Quiz Ninja!</button>
This will add a button to the markup. Now we need a reference to it in scripts.js. Add the
following line of code after the other DOM references:
var $start = document.getElementById("start");
Now we need to attach a
click
event listener to to the button that will start the game when
the button is clicked. Add the following code after the view functions:
// Event listeners
$start.addEventListener('click', function() { play(quiz) }
, false);
The only thing left to do is add some styles to the styles.css file to make the button stand
out:
button {
font: bold 24px/150% Arial, Helvetica, sans-serif;
display: block;
width: 300px;
padding: 10px;
margin: 10px auto;
}
And that's it ― hopefully you can see that it wasn't too hard to implement a button to play the
game, especially since all the functions we needed were already in place. Open index.htm
and have a go at playing the game. It should look similar to
Figure 7.1
.
