Java Reference
In-Depth Information
Quiz Ninja Project
Now we can use forms in our Quiz Ninja game so that players can enter their answers
without using prompt dialogs. Our first task is to add a form element with an ID of
answer
in the HTML. This goes in between the
question
and
feedback
sections in the in-
dex.htm file:
<form id="answer">
<input type="text">
<button>Submit Answer</button>
</form>
Now we add a reference to the form in our JavaScript. Add this line to the end of the DOM
references in scripts.js:
var $form = document.getElementById("answer");
The next task to do is remove the
for
loop that we've been using to loop through each
question. This is because the prompt dialogs that we've been using pause the execution of
the program and wait until the player has entered the answer. This won't happen if we use
a form, so the program would just loop through each question without giving the player a
chance to answer!
Instead, we're going to use a counter to keep track of which question the player is up to. Re-
move the following main game loop code from the scripts.js file:
// main game loop
for(var i=0, question, answer, max=quiz.questions.length;
i<max;
↵
i++) {
question = quiz.questions[i].question;
answer = ask(question);
check(answer);
}
// end of main game loop
And replace it with this:
