Java Reference
In-Depth Information
This uses the
preventDefault()
method to stop the default form behavior; then it
invokes the
check()
function, passing
$form[0].value
as an argument. This is the
value that is entered in the input field by the player and it will be passed to the the
check()
function to see if it's correct.
Next, we add this code to the end of the
check()
function to increase the value of
i
, and
then choose the next question:
i++;
if(i === quiz.questions.length) {
gameOver();
} else {
chooseQuestion();
}
Players can now use the form instead of prompt dialogs to enter their answers, but a lot of
the elements are displayed when they are unnecessary. For example, when the page loads
the form is displayed, event though there is no question to answer, and the start button re-
mains on the page, even after the game has started. To remedy this, we can create a couple
of helper functions to hide and show elements as we need them. Add the following to
scripts.js, before the
play()
function:
function hide(element) {
element.style.display = "none";
}
function show(element) {
element.style.display = "block";
}
These functions change the
display
CSS property of the element to
"none"
, which ef-
fectively hides the element, although it is still contained in the markup. Now we can use
these functions to hide certain elements at the relevant times. To hide the form when the
page loads, add the following code just before the
play()
function:
// hide the form at the start of the game
hide($form);
