User Interaction Continued...

Testing a User’s Response

In this example we’ll go beyond the "Welcome" script. In this example, you will pose a test question to the user and based on the answer, display a different result for the user in the form of one of two different GIF images.

Using conditional operators to test input

The first part of the script appears in the header because this is the advisable style, except where the script must generate output in sequence with the HTML file. For this reason, all the variable declarations – asking the question and checking the answer – take place in the header. The script in the body of the HTML document outputs only the final results.

Notice the extensive use of variables, both strings and number, all declared with the var command. Every important item in the script is assigned to a variable. This makes the script easier to read and easier to change. By changing the question and answer variables, you can change the test, and by changing the correct and incorrect variables you can change the response given to the user.

In addition, you see a practical example of conditional expression

(response == answer) ? correct : incorrect

and how the value of a conditional expression be assigned to a variable.

if "then"

if (day == "Saturday") {
     document.write("It’s the weekend!");
     alert("It’s the weekend!");
}
if (day != "Saturday") {
     document.write("It’s not Saturday!");
}

The if – else construct provides an easier way to do this by using else:

if (day == "Saturday") {
     document.write("It’s the weekend!");
     alert("It’s the weekend!");
}
else {
     document.write("It’s not Saturday!");
}

Using the if statement, we can extend one-step – we can enable the user to indicate if they want a second chance to answer the question correctly.

What we can do is ask the question and check the result. If the result is incorrect, you will ask the user if they wish to try again. If they do, ask one more time.

In order to make this easier, we’ll use the confirm() method, which is similar to the alert() and prompt() methods that you already know how to use. The confirm() method takes a single string as an argument. It displays the string in a dialog box with OK and Cancel buttons and returns a value of true if the users select OK or false if Cancel is selected.

confirm() method with the if statement

In order to add the second chance, add two embedded if statements.

var response = prompt(question, "0");

the variable response is declared, the user is asked to answer the question and the user's answer is assign to response.

if (response != answer)

Here, you compare the user’s response to the correct answer. If the answer is incorrect, then the next line is executed . If the answer is correct, the program skips down to output the result.

if (confirm("Wrong! Press OK for a second chance."))

The user has made an incorrect response. Now you check whether the user wants a second chance with the confirm() method, which returns a Boolean value, which is evaluated by the if statement.

response = prompt(question, "0");

If the user selects OK in the confirm dialog box, the confirm() method returns true, and this line executes. With this command, the user is again asked the question, and the second response is stored in the response variable, replacing the previous answer.