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.
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 andAll Rights Reserved. Legal Notices.