Dynamic Content in Internet Explorer 4: The Quiz HTML Flow

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

The HTML Flow

We will go through the code step-by-step, as the rendering engine of Internet Explorer would:

A CSS-positioned element is defined in our STYLE tag: #quiz. This element will later contain the main Q&A screens. Although a position is defined, the actual pixel positioning is omitted. We will position it on the page later.

In our JavaScript, we create an array for our questions and answers and declare some global variables. The counter variables are initialized with a value of 1, for easier human-like counting. Variables for the different kinds of answers (wrong, right and late) are of course initialized with 0. Next, we have our first function, newQA(). We will discuss all functions in the code when they are actually used, not when they appear on the page. It will be easier to follow.

Next, we have 5 consecutive calls to the newQA() function with 3 arguments each. Every time newQA() is called it takes an element in the arQuestions array, starting with element 1, and creates a new array off each element. These new arrays are populated with the question, the first name of the author, and the last name. This multi-dimensional array structure makes it easy for us to reference the data with counters. Once the new array is created, arrayCounter is incremented, pointing to the next array element to be filled.

We initialize a variable to remember the total number of questions, and the remainder of the script contains functions to be compiled and put aside for later.

Our BODY tag has an onLoad event handler which we'll get to when the page has finished loading. The first element on our page is a DIV container, aligned in the center of the page, named startScreen. It contains straightforward HTML with the welcome information and the quiz start button.

The next element, which contains all the remainder of the page elements, is the DIV defined in our STYLE. Presently it is hidden, so the students see only the welcome screen. In this hidden container we have an empty I named element (quizQuest) and a BR for formatting. quizQuest will later host our questions.

quizEntry, a SPAN container holds the answer-insertion FORM.

That's it for the HTML. The rest is performed dynamically with Explorer's content-changing properties and methods.

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/quizText1.html