Java Reference
In-Depth Information
Quiz Ninja Project
Now that we've learned about the Document Object Model, we can start to add some dy-
namic markup to display the questions in our quiz. This will mean that there will be no need
to rely on as many alert dialogs.
The first thing we need to do is add some empty
section
elements to the HTML in the
index.htm file. Add the following after the closing
</header>
tag:
index.htm
(excerpt)
<section id="question"></section>
<section id="feedback"></section>
These empty elements will be used to show the questions and provide feedback about wheth-
er the user has answered a question correctly or not. We'll also add a paragraph element in-
side the
<header>
tags that can be used to display the score as the game is being played:
index.htm
(excerpt)
<p>Score: <strong id="score">0</strong></p>
The ID attributes of these elements will act as hooks that allow us to easily gain access
to that element using the
document.getElementById()
method. Let's do that now
by setting up some variables that we can use to access these elements near the start of the
scripts.js file:
scripts.js
(excerpt)
//// dom references ////
var $question = document.getElementById("question");
var $score = document.getElementById("score");
var $feedback = document.getElementById("feedback");
