Dynamic Content in Internet Explorer 4: The Quiz Script

Dynamic Content in IE4:
The Quiz: Step-by-Step II

The Script in Action

When the page loads, the onLoad event handler fires and assigns the HTML contained in our still-hidden SPAN to a variable, origEntry. Now our answer form, to be used for each question, is just a variable away.

When the students have read the welcome and are ready to proceed, the script springs back into action. The Start Quiz button calls startIt(), with one argument: true. Although startIt() will be called every time we go to a new question, this is the only time an argument will be included. We are telling startIt() that we are just coming off the welcome screen.

The first thing startIt() does is to check if our question counter is more than our total questions. In other words, it checks to see if the quiz is being repeated or is in progress. If repeated, the variables are reset.

Using the question counter, the current question is retrieved from the array and placed in our italicized element quizQuest. Since the question contains no HTML, the innerText property is used.

startIt() now checks to see if we are starting for the first time, using our passed argument. If we are, it deletes the startScreen DIV completely, by assigning an empty string to its outerText property. The students' welcome screen disappears from their monitor, and our hidden DIV moves up on the screen. It is centered horizontally by referring to the students' screen width, and made visible. The students see the first question. Before startIt() returns, it quickly gives focus to the form field, to save the students a mouse click, and starts counting off the 10 seconds with the setTimeout() method. In 10 seconds, the tooLate() function will be called.

If the students reply in the allotted time, the function answered() is called by the FORMs onSubmit handler. Immediately, the timeout is cleared, canceling the call to the tooLate() function. answered() converts the answer to lower case and compares it to a lower case version of the author's surname. The surname suffices as an answer. If the answer is correct, the correctAns() function is called, if not, dummy() is called.

If the students do not reply in 10 seconds, control is passed to tooLate(). This function is similar to correctAns() and dummy(). In fact, they can be combined into one. They all increment their respective answer counters and provide a custom string to be used in the upcoming screen response. Then they pass that string to the response() function.

In response(), this string is combined with another string: the return value of the function respDisplay(). respDisplay() creates a string with the correct answer and, if the student is not at the last question, a button to navigate to the next question. This string is passed back to response() when the function returns. Back in response(), the innerHTML property of quizEntry is invoked to display the combined string on the screen in place of the entry form.

The students continue to the second question, but this time startIt() does not find a passed argument so it retrieves the stored HTML from our onLoad call and reassigns it to quizEntry, creating a new answer entry form identical to the original.

This cycle is repeated until the students reach the last question. respDisplay() will create a longer string with an appended tabulation of results and two buttons: one to review all the questions and one to start the quiz again.

If the quiz is restarted, then startIt() will first reset relevant variables before proceeding. The script will cycle through as before.

If the students chose to review the questions, the listThem() function deletes the content of the main DIV by assigning a blank string to its innerHTML property. innerText would have done the same, of course. Our reviewCounter is set to 1 and we use the setInterval() method to call the function showQuest() every two seconds.

The only method in this script that has not been discussed in this column before is the new setInterval() method, available to both Internet Explorer and Netscape Navigator. A detailed discussion can be found in Doc JavaScript's column on rotating banners.

Every time showQuest() is called it checks to see if the questions are finished. If they are not, it assigns a question and the appropriate answer to a string and uses the insertAdjacentHTML() method to update the quiz DIV, a question at a time. This method of appending HTML to the end of an element gives the impression on-screen of a scrolling, expanding container. The questions finished, the clearInterval() method cancels the function calls and an EXIT button is displayed. In our example the exit button reloads the page, but that is just a placeholder.

The quiz has been purposely written in a not-so-efficient manner. This gives it modularity and is easier to explain. Many variables and functions can be combined. Some redundancies may be omitted. It demonstrates, however, many of the Explorer properties and methods for changing content dynamically, albeit with text examples, but image, applet and control manipulation follows exactly the same rules.

---

That's all folks!

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 09/24/97
Revised: 09/28/97

URL: https://www.webreference.com/dhtml/column5/quizText2.html