Creating an AJAX Quiz Using the Library
Now that you have a reusable AJAX library, you can use it to create JavaScript applications that take advantage of remote scripting. This first example displays quiz questions on a page and prompts you for the answers.
Rather than including the questions in the script, this example reads the quiz questions and answers from an XML file on the server as a demonstration of AJAX.
Watch Out!
Unlike most of the scripts in this book, this example requires a web server. It will not work on a local machine due to browsers' security restrictions on remote scripting.
The HTML File
The HTML for this example is straightforward. It defines a simple form with an Answer field and a Submit button, along with some hooks for the script. The HTML for this example is shown in Listing 17.2.
Listing 17.2. The HTML File for the Quiz Example
<html>
<head><title>Ajax Test</title>
<script language="JavaScript" type="text/javascript"
src="ajax.js">
</script>
</head>
<body>
<h1>Ajax Quiz Example</h1>
<form>
<p><b>Question:</b>
<span id="question">...
</span>
</p>
<p><b>Answer:</b>
<input type="text" name="answer" id="answer">
<input type="button" value="Submit" id="submit">
</p>
<input type="button" value="Start the Quiz" id="startq">
</form>
<script language="JavaScript" type="text/javascript"
src="quiz.js">
</script>
</body>
</html>
|
This HTML file includes the following elements:
The <script> tag in the <head> section includes the AJAX library you created in the previous section from the ajax.js file. The <script> tag in the <body> section includes the quiz.js file, which will contain the quiz script. The <span id="question"> tag sets up a place for the question to be inserted by the script. The text field with the id value answer is where the user will answer the question. The button with the id value submit will submit an answer. The button with the id value startq will start the quiz.
You can test the HTML document at this time, but the buttons won't work until you add the script.
The XML File
The XML file for the quiz is shown in Listing 17.3. I've filled it with a few JavaScript questions, but it could easily be adapted for another purpose.
Listing 17.3. The XML File Containing the Quiz Questions and Answers
<?xml version="1.0" ?>
<questions>
<q>What DOM object contains URL information for the window?</q>
<a>location</a>
<q>Which method of the document object finds the object for an element?</q>
<a>getElementById</a>
<q>If you declare a variable outside a function, is it global or local?</q>
<a>global</a>
<q>What is the formal standard for the JavaScript language called?</q>
<a>ECMAScript</a>
</questions>
|
The <questions> tag encloses the entire file, and each question and answer are enclosed in <q> and <a> tags. Remember, this is XML, not HTMLthese are not standard HTML tags, but tags that were created for this example. Because this file will be used only by your script, it does not need to follow a standard format.
To use this file, save it as questions.xml in the same folder as the HTML document. It will be loaded by the script you create in the next section.
Of course, with a quiz this small, you could have made things easier by storing the questions and answers in a JavaScript array. But imagine a much larger quiz, with thousands of questions, or a server-side program that pulls questions from a database, or even a hundred different files with different quizzes to choose between, and you can see the benefit of using a separate XML file.
The JavaScript File
Because you have a separate library to handle the complexities of making an AJAX request and receiving the response, the script for this example only needs to deal with the action for the quiz itself. Listing 17.4 shows the JavaScript file for this example.
Listing 17.4. The JavaScript File for the Quiz Example
// global variable qn is the current question number
var qn=0;
// load the questions from the XML file
function getQuestions() {
obj=document.getElementById("question");
obj.firstChild.nodeValue="(please wait)";
ajaxCallback = nextQuestion;
ajaxRequest("questions.xml");
}
// display the next question
function nextQuestion() {
questions = ajaxreq.responseXML.getElementsByTagName("q");
obj=document.getElementById("question");
if (qn < questions.length) {
q = questions[qn].firstChild.nodeValue;
obj.firstChild.nodeValue=q;
} else {
obj.firstChild.nodeValue="(no more questions)";
}
}
// check the user's answer
function checkAnswer() {
answers = ajaxreq.responseXML.getElementsByTagName("a");
a = answers[qn].firstChild.nodeValue;
answerfield = document.getElementById("answer");
if (a == answerfield.value) {
alert("Correct!");
}
else {
alert("Incorrect. The correct answer is: " + a);
}
qn = qn + 1;
answerfield.value="";
nextQuestion();
}
// Set up the event handlers for the buttons
obj=document.getElementById("startq");
obj.onclick=getQuestions;
ans=document.getElementById("submit");
ans.onclick=checkAnswer;
|
This script consists of the following:
The first var statement defines a global variable, qn, which will keep track of which question is currently displayed. It is initially set to zero for the first question. The getQuestions() function is called when the user clicks the Start Quiz button. This function uses the AJAX library to request the contents of the questions.xml file. It sets the ajaxCallback variable to the nextQuestion() function. The nextQuestion() function is called when the AJAX request is complete. This function uses the getElementsByTagName() method on the responseXML property to find all of the questions (<q> tags) and store them in the questions array. The checkAnswer() function is called when the user submits an answer. It uses getElementsByTagName() to store the answers (<a> tags) in the answers array, and then compares the answer for the current question with the user's answer and displays an alert indicating whether they were right or wrong. The script commands after this function set up two event handlers. One attaches the getQuestions() function to the Start Quiz button to set up the quiz; the other attaches the checkAnswer() function to the Submit button.
Testing the Quiz
To try this example, you'll need all four files in the same folder: ajax.js (the AJAX library), quiz.js (the quiz functions), questions.xml (the questions), and the HTML document. All but the HTML document need to have the correct filenames so they will work correctly. Also remember that because it uses AJAX, this example requires a web server.
Figure 17.1 shows the quiz in action. The second question has just been answered.
By the Way
This example should work on Internet Explorer 57, Mozilla 1.0 or later, any version of Firefox, or recent versions of Apple Safari. If you have trouble, try the latest Firefox.
|
