UT Bullet Chapter 3: Quizzes and Practice Exercises

Chapter 3: Web-based Quizzes and Practice Exercises
with HTML & JavaScript


Table of Contents


Chapter 3: Quizzes and Practice Exercises UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Chapter 3: Web-based Quizzes and Practice Exercises
with HTML & JavaScript

What You Will Learn To Do
    Red BulletWeb-based:
      Cyan Bullet HTML Form Elements
      Cyan Bullet Interactive Forms
      Cyan Bullet Quizzes
      Cyan Bullet Practice Exercises with Feedback
      Cyan Bullet Automated Scoring
      Cyan Bullet Automated Email of HTML Form Entries
Chapter 3: Quizzes and Practice Exercises 3 - 1 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

HTML Forms: A Higher Level of Interactivity

Although you can now develop a broad range of Web documents, your Web documents have limited interactivity. You can display text, graphics, and sound. Given browser navigation features and HTML hyperlink capabilities, your Web documents have a fairly high degree of interactivity and learner control. But, the interactivity is limited to navigation or positioning. Learners may move forward or backward, slowly or rapidly. Learners may follow any hyperlink on the screen at any time. Learners may go back to previous displays. But, this type of control is limited to the control of the "where" of instruction.

As a developer of hypermedia courseware you really need a greater degree of control over the learning environment. In addition, to having the student be able to control the "where" of the instruction, you need to be able to ask questions and get answers. You need to provide immediate feedback for responses, especially for errors, to help avoid further errors. You need to minimize errors to maximize reward and minimize frustration.

You need to be able to present questions in a variety of commonly used quiz item formats, like fill-in-the blank, multiple- choice, short answer, true-false, and completion items. You need to be able to check each response, provide immediate correction and feedback, hints, and you need to be able to conduct an overall evaluation to score the performance as a whole. In addition, as an instructor, you'd like to have the results submitted to yourself or a designated surrogate in a convenient format.

Thanks to JavaScript

 Well, your dreams are fulfilled. All of these capabilities are at your fingertips as a Web author when you combine the presentation, learning resources and navigation capabilities of HTML with the practice and feedback capabilities of HTML forms elements and the instructional management capabilities of the JavaScript language built into Netscape Navigator 2.x and 3.x and other compatible browsers (e.g., Microsoft Internet Explorer).

Prior to Nescape 2.0, to evaluate, score, and provide feedback (all aspects of the Hypertutor Model) for responses to Web pages, it required writing Common Gateway Interface (CGI) scripts or programs. CGI scripts are independent programs that reside on the Web server, not the client, in special directories, with special permissions that may not be obtained easily and that interact with your Web pages on an ongoing basis. Along with that looming complication, you probably can predict some of the potential Web server management and security problems that might arise when thousands of Web authors have permission to routinely write, maintain and upgrade CGI programs that write directly to Web site storage. So, securing CGI privileges is not necessarily a trivial matter. On top of that, the CGI forms submitting process can be bandwidth intensive. Submitting each form requires separate transmittal through the network, multiplying network traffic problems. Each immediate feedback event requires a separate series of transmissions to and from the server -- a clumsy system indeed.

Now You can Email Forms Submissions

Fortunately, the good folks at Netscape have built a way to avoid these problems into Netscape Navigator 2.0 and up. To put it in a nutshell, you add intelligence to the browser, in the form of JavaScript commands. You have the browser provide the immediate feedback each time it's needed. You have the browser do the scoring. And, finally, you have the browser submit results in the form of email. No Web server security or permission access problems! No Web server data storage problems! No bandwidth intensive complications! All, thanks to JavaScript, the interpreted scripting language built into every Netscape Navigator since December of 1995, and supported by Microsoft's Internet Explorer as well as others.

Chapter 3: Quizzes and Practice Exercises 3 - 2 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The HTML Form Elements

Form elements allow you to elicit responses from the active learner by providing HTML documents with a variety of live entry or input elements (e.g., check boxes, radio buttons, fill-in blanks, multiple-choice items, scrolling lists, etc.). Form elements retain their values during successive document reloadings. If you press either the "reload" or "back" buttons, perhaps after leaving the document, to return to the document, the form entries are retained.

To develop your form element skills, for each form element you will start with an Element Study Table that includes some introductory examples. Review questions typically follow the Element Study Tables to help you remember salient features of the form elements. You follow-up with more elaborate and complete, HTML document examples applying form elements in quiz and practice exercise instructional contexts. Then, additional comprehensive review questions help you to review some of the more important issues associated with the use of the form elements. Finally, you finish by developing some forms-based quiz or practice exercise hypermedia courseware of your own.

You will see that each form element has a number of "attributes" which typically need to be specified. For example, the NAME attribute is mandatory if you want to submit a form, which typically is the case. JavaScript commands also reference the NAME attribute of an element to identify it or its contents.

There are not many HTML form elements. There is the FORM element itself, whose primary purpose to contain form elements which collect and hold information requested from the learner. Then there are the four elements that can only be contained within a FORM element, the INPUT element, the SELECT and OPTION elements, and the TEXTAREA element. You will quickly see that the very important INPUT element has eight element "types". You will learn how to use all the form elements, because they all have important applications in Web-based hypermedia courseware. See the Form Elements List below for a complete list of HTML form elements.

Form Elements List
Chapter 3: Quizzes and Practice Exercises 3 - 3 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Element Study Tables

Each form element will be described in a multi-row Element Study Table similar to those used to introduce the HTML elements in Chapter 2: "Web-based Information and Presentation Courseware". As in Chapter 2, each Element Study Table includes description, usage syntax, and HTML version information, plus multiple examples. In this chapter, however, each different type of form element will be presented in its own Element Study Table.

The Form Element

A form consists of whatever elements are included between the FORM start and end tags within a document. Form INPUT, SELECT, OPTION, and TEXTAREA elements must be contained in the FORM element. The FORM element itself must be contained in the BODY element. You cannot place a form within a form. The FORM element has a number of attributes and event handlers described below. Attribute and event handler names immediately follow the form element name in the "Usage" cell of each Element Study Table.

The FORM Element Study Table
Element: FORM
Description: Contains all elements of a form. In Navigator 3.x, if onReset is defined (see Usage below), this function will be executed before the form is reset. This provides an opportunity to cancel the reset. A document may have multiple forms.
Usage: <FORM [NAME="name"]
[ACTION="action]
[ENCTYPE="enctype"]
[METHOD="method"]
[onSubmit="event handler"]
[onReset="event handler"]>
[elements]
</FORM>
L: 2
Example: <FORM NAME="EXAMPLE">
Form elements
</FORM>
Chapter 3: Quizzes and Practice Exercises 3 - 4 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Example HTML Document: The Form Element

The following simple example is intended to illustrate the general layout of an HTML document containing one form. It contains all elements necessary for a form-containing document. The example is a trivial one because the form contains no form related elements (that is, no INPUT, SELECT, OPTION, or TEXTAREA form elements). Study the HTML tags. Then view the browser display produced by the HTML. Click on "Browser Display" in the appropriate HTML Example below to do so. Of course, you may also type-in the example yourself using the edit, save, reload and test development cycle for more hands-on experience.

The Form Element
HTML
Example: 		Example 3.1
HTML Text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>
Place Title for Window Caption Here
</TITLE>
</HEAD>
<BODY>
...<BR>
Body elements may appear here.
<FORM NAME="FORM1">
Form elements appear here.
</FORM>
Body elements may appear here.
</BODY>
</HTML>

Browser Display produced when a document containing the above HTML text is loaded by a browser.
Chapter 3: Quizzes and Practice Exercises 3 - 5 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
The Form Element
Practice
Exercise: 		Practice Exercise 3.1:
What is the primary purpose of the FORM element?

No response
To display tables
Get information
To format displays
None of the above

Chapter 3: Quizzes and Practice Exercises 3 - 6 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Form Elements That Must Appear Within the FORM Element

Each Element Study Table below describes an additional type of HTML form element. All such form elements must be contained within the FORM element. Each table concisely summarizes relevant information for one type of form element. Explore the Element Study Tables for a comprehensive introduction to the form INPUT, SELECT, OPTION, and TEXTAREA elements. It will constitute the foundation for their effective use in hypermedia courseware.

As in Chapter 2, explore each Element Study Table fully. Use it for review or reference purposes. Understand the descriptions. Note the usage syntax. Note the HTML level or version specifying the element. Remember Web browser incorporation of HTML elements is ongoing. It is important to know the capabilities of your high priority targeted Web browsers. Especially, see and experience how the entered HTML examples are displayed by your browser in the example rows. Press the buttons. Check the checkboxes. Enter the passwords. Press the radio, reset and submit buttons. Select the option and select elements. Type in the text elements. Type more in the textarea elements. Respond to the Review Question(s). Then, go on to the more extended examples of form element usage.

Remember, all these form elements must be contained in the FORM element within the BODY of the HTML document. Finally, remember display formats depend upon characteristics of the browser and its configuration.

The Types of Form Input Element

There are a number of very important types of form INPUT element. The input element types are presented one-by-one below in alphabetical order. You will notice for each INPUT element in the "Description" and "Usage" cells of the table that all input elements have TYPE, NAME and VALUE properties or attributes. As you study the table keep in mind that the NAME and VALUE properties are used to access the information entered into the input element. You will begin to learn how to manage this information later in the hypermedia tutorial (hypertutorial) when JavaScript functions are introduced. The first type of input element to be discussed is the "BUTTON" input element.

The Button Input Element
The button input element is used to implement a predesignated action. When the button is pressed that action is executed.

Button Input Element Study Table
Element: INPUT TYPE="BUTTON"
Description: Displays a button with the text assigned to the VALUE property of the button (see Usage below). When the button is pressed it executes the series of JavaScript instructions assigned to the onClick method.
Usage: <INPUT TYPE="BUTTON"
[NAME="name"]
[VALUE="value"]
[onClick="JavaScript instructions"]
>
L: 3
Example: <INPUT TYPE="BUTTON"
NAME="EX_BUTTON"
VALUE="Press Me "
>
Displays as (Press button below - button does nothing):


<INPUT TYPE="BUTTON"
NAME="FEEDBACK"
VALUE="Get Feedback... "
onClick="alert('You pressed the Get Feedback button!');"
>
Displays as (Press button below - displays an alert dialogue):
Button Input Element Review Question
Question: What does the HTML button input element typically do?

No response
Implement menus
Execute actions
Present choices
Submit data


Chapter 3: Quizzes and Practice Exercises 3 - 7 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Checkbox Input Element
The checkbox input element is used to display a checkbox and to determine whether the checkbox has been checked. A checkbox can also be used to implement a predesignated action. Checkboxes will typically be implemented in a group with a common name assigned to the NAME property of all checkboxes in the group (see 2nd table example below). Checkboxes allow multiple options to be checked and so are particularly good for "Check all that apply." kinds of questions.

Checkbox Input Element Study Table
Element: INPUT TYPE="CHECKBOX"
Description: Displays one checkbox. The checkbox returns its VALUE property when selected (see Usage below). A NAME assigned to one or a group of checkboxes is later used to refer to the checkbox(es) for further processing purposes. The CHECKED property, when present, causes a checked checkbox to be displayed. When a checkbox is clicked, the action executes the series of JavaScript instructions (called an event handler) assigned to the onClick method.
Usage: <INPUT TYPE="CHECKBOX"
[NAME="name"]
[VALUE="value"]
[CHECKED]
[onClick="JavaScript instructions"]
>[text to be displayed adjacent to checkbox]
L: 2
Example: <INPUT TYPE="CHECKBOX"
NAME="EX_CHECKBOX"
VALUE="Box"
>Check if you want your score emailed to you.

Displays as (Click in box below):

Check if you want your score emailed to you.
Check all that apply:<BR>
<INPUT TYPE="CHECKBOX"
NAME="SES"
VALUE="Married"
>Check if you are married.<BR>
<INPUT TYPE="CHECKBOX"
NAME="SES"
VALUE="Graduate"
>Check if you are a college graduate.<BR>
<INPUT TYPE="CHECKBOX"
NAME="SES"
VALUE="Employed"
>Check if you are employed.<BR>
Displays as (click in the checkboxes):

Check all that apply:
Check if you are married.
Check if you are a college graduate.
Check if you are employed.
Checkbox Input Element Review Question
Question: For what type of item is the HTML checkbox input element particularly useful?

No Response
Menu
Multiple-choice
Check all that apply
Completion


Chapter 3: Quizzes and Practice Exercises 3 - 8 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Hidden Input Element
The hidden input element contains a textfield that is not displayed in the browser. It provides a place for the HTML/JavaScript developer to store information from the form or other forms in the document in a format which is under the complete control of the developer. This information can be submitted just like any other form information. You will use the hidden input element to store information from a form in a simple readable format which you can then submit by email (more about this later).

Hidden Input Element Study Table
Element: INPUT TYPE="HIDDEN"
Description: Displays nothing but allows data you store in it to be transmitted when the form containing it is submitted. The NAME property is used to refer to the HIDDEN input element. The VALUE property contains the default value of the data to be transmitted or whatever data has been stored in it as a result of form input, which will be transmitted when the form is submitted.
Usage: <INPUT TYPE="HIDDEN"
[NAME="name"]
[VALUE="value"]
>
L: 2
Example: <INPUT TYPE="HIDDEN"
NAME="FORMDATA"
VALUE=""
>

Displays as (note it's hidden):
Hidden Input Element Review Question
Question: Why is the HTML hidden element particularly relevant to hypermedia courseware developers?

No Response
Hiding passwords
Emailing results
Getting information
None of the above


Chapter 3: Quizzes and Practice Exercises 3 - 9 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Password Input Element
The password input element, like the text input element is used to obtain text input. However, unlike the text input element, the text entered into the password element is not displayed. Instead asterisk or other "mask" characters appear where the text is typed. This type of behavior is typical for password fields. The password element is used in situations where a password must be entered and security concerns dictate obscuring the typed characters while retaining their identities.

Password Input Element Study Table
Element: INPUT TYPE="PASSWORD"
Description: Displays a password input text field. NAME (see Usage) is later used to refer to the password for further processing. The VALUE property contains the entered password or specifies the default value of the password. A SIZE property designates the maximum number of characters which will be accepted by the password field.
Usage: <INPUT TYPE="PASSWORD"
[NAME="name"]
[VALUE="value"
[SIZE=integer]
>
L: 2
Example: <INPUT TYPE="PASSWORD"
NAME="USERID"
VALUE=""
SIZE=9
>

Displays as (Type something):


<INPUT TYPE="PASSWORD"
NAME="PASSWORD"
VALUE="GUEST"
SIZE=5
>

Displays as (Type something):
Password Input Element Review Question
Question: What does the HTML password element do?

No Response
Hides a password
Emailing results
Gets information
None of the above


Chapter 3: Quizzes and Practice Exercises 3 - 10 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Radio Input Element
Radio buttons are similar to checkboxes in function and layout. But, only one may be "checked" or chosen at a time. The radio input element, one of the most important for hypermedia courseware, is a primary tool for the presentation and response to multiple-choice items. You have used many radio buttons during the course of these hypertutorial chapters. Radio buttons typically are arranged in groups, one group of radio buttons per question or item. In a group of radio buttons, like old-fashioned car radios, only one button may be depressed or checked at a time. Pressing one radio button pops-out all other radio buttons in the group.

Radio Input Element Study Table
Element: INPUT TYPE="RADIO"
Description: Displays one radio button. The NAME property is is later used to refer to the button for further processing. The VALUE property is returned when the button is chosen. CHECKED can be used to specify a prechosen or default button. The CHECKED property, when present, causes a checked button to be displayed. When a radio button is clicked, the action executes the series of JavaScript instructions (called an event handler) assigned to its onClick method.
Usage: <INPUT TYPE="RADIO"
[NAME="name"]
[VALUE="value"]
[CHECKED]
[onClick="JavaScript instructions"]
>[text to be displayed adjacent to radio button]
L: 2
Example: General Ulysses S. Grant is buried in Grant's tomb.<BR><BR>

<INPUT TYPE="RADIO"
NAME="ITEM1"
VALUE="True"
onClick="alert('True is correct. Good work.');"
>True
<INPUT TYPE="RADIO"
NAME="ITEM1"
VALUE="False"
onClick="alert('False is not correct. Try again.');"
>False

Displays as (Click the buttons):

General Ulysses S. Grant is buried in Grant's tomb.

True False
Which has distributed the most copies?.<BR><BR>

<INPUT TYPE="RADIO"
NAME="ITEM2"
CHECKED VALUE="none"
>No response<BR>
<INPUT TYPE="RADIO"
NAME="ITEM2"
VALUE="Tapestry"
><CITE>Tapestry</CITE> by Carole King<BR>
<INPUT TYPE="RADIO"
NAME="ITEM2"
VALUE="Saturday"
><CITE>Saturday Night Fever</CITE> by BeeGees<BR>
<INPUT TYPE="RADIO"
NAME="ITEM2"
VALUE="Thriller"
><CITE>Thriller</CITE> by Michael Jackson<BR>
<INPUT TYPE="RADIO"
NAME="ITEM2"
VALUE="Netscape"
><CITE>Netscape Navigator</CITE> by Netscape Communications<BR>
<INPUT TYPE="RADIO"
NAME="ITEM2"
VALUE="Netscape"
>Don't know<BR>

Displays as (Click the buttons):

Which has distributed the most copies?.

No response
Tapestry by Carole King
Saturday Night Fever by BeeGees
Thriller by Michael Jackson
Netscape Navigator by Netscape Communications
Don't know
Radio Input Element Review Question
Question: What type of item is the radio input element particularly useful for?

No Response
Short answer
Completion
Multiple-choice
Matching


Chapter 3: Quizzes and Practice Exercises 3 - 11 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Reset Input Element
The reset input element is very similar to the button element. You can think of it as a special kind of button which executes a predesignated action when clicked. The reset input element displays a button which when pressed clears all entries in the form to their original settings.

In the FORM element containing most of this chapter the FORM element onReset event handler has been defined so that pressing any reset button for the form displays a confirm dialogue so the reset can be cancelled. Consequently, a confirm dialogue appears when any reset button in the form is pressed. If the onReset method of the FORM element had not been defined, pressing the reset button would immediately (with no opportunity to cancel) reset all entries in the chapter to their initial settings.

Reset Input Element Study Table
Element: INPUT TYPE="RESET"
Description: Displays a button with the text assigned to the VALUE property of the button. When the button is pressed, it resets all form elements to their initial settings. If the onClick method has been defined the JavaScript instructions defining the onClick method will also be executed when the button is pressed.
Usage: <INPUT TYPE="RESET"
[NAME="name"]
[VALUE="value"]
[onClick="JavaScript instructions"]
>
L: 2
Example: <INPUT TYPE="RESET"
NAME="RESET1"
>

Displays as (Press button below - Press "Cancel" on prompt to avoid erasing your responses to previous questions):


<CENTER>
<INPUT TYPE="RESET"
NAME="EX_RESET"
VALUE="Clear All Entries..."
>
</CENTER>

Displays as (Press button below - Press "Cancel" on prompt to avoid erasing your responses to previous questions):
Reset Input Element Review Question
Question: What is the reset input element for?

No Response
Short answers
Executing an action
Submitting forms
Form initialization


Chapter 3: Quizzes and Practice Exercises 3 - 12 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Submit Input Element
The submit input element provides a button that when pressed causes the form data to be transmitted to the URL specified in the ACTION attribute of the form. The submit input element onClick method is also executed if the method had been defined.

Submit Input Element Study Table
Element: INPUT TYPE="SUBMIT"
Description: Displays a button with the text assigned to the VALUE property of the button. If no text is assigned "Submit Query" will appear on the button. When the button is pressed, it submits all data entered into the form to the specified URL. onClick may be assigned JavaScript instructions defining additional actions to be executed when the button is pressed.
Usage: <INPUT TYPE="SUBMIT"
[NAME="name"]
[VALUE="value"]
[onClick="JavaScript instructions"]
>
L: 2
Example: <INPUT TYPE="SUBMIT"
NAME="SUBMIT1"
>

Displays as (Press button below - Press "Cancel" on prompt to avoid submitting responses by email at this time):


<CENTER>
<INPUT TYPE="SUBMIT"
NAME="SUBMIT2"
VALUE="Submit to Instructor..."
>
</CENTER>

Displays as (Press button below - Press "Cancel" on prompt to avoid submitting responses by email at this time):
Submit Input Element Review Question
Question: What is the submit input element for?

No Response
Short answers
Executing an action
Submitting forms
Form initialization


Chapter 3: Quizzes and Practice Exercises 3 - 13 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Text Input Element
The text input element displays a text entry field of designated size for the entry of typed text responses. The text entry field, properly positioned, is typically used for entry of a word or a number, say for a completion or fill-in-the-blank item, but may also be used for a phrase, or a brief sentence in response to a question or a prompt.

Text Input Element Study Table
Element: INPUT TYPE="TEXT"
Description: Displays a short text field of length SIZE for the entry of typed-in characters. MAXLENGTH characters may be entered. Several event handlers for the element are described below. Event handlers may be assigned JavaScript instructions defining actions to be executed when the element-related events occur. The event handlers do not need to be used for typical quiz and practice exercise forms so they are not discussed here. For further information see Flanagan (1996), Goodman (1996), Graham (1995), or Ritchey (1996).
Usage: <INPUT TYPE="TEXT"
[NAME="name"]
[VALUE="value"]
[SIZE=integer]
[MAXLENGTH=integer]
[onBlur="JavaScript instructions"]
[onChange="JavaScript instructions"]
[onFocus="JavaScript instructions"]
>
L: 2
Example: <INPUT TYPE="TEXT"
NAME="TEXT1"
VALUE="default"
SIZE=5
MAXLENGTH=10
>

Displays as (try it out):

Enter the name of the form input element that allows you to type text into a field.
<CENTER>
<INPUT TYPE="TEXT"
NAME="TEXT2"
VALUE=""
SIZE=4
MAXLENGTH=4
>
</CENTER>


Displays as (try it out):

Enter the name of the form input element that allows you to type text into a field.

Text Input Element Review Question
Question: The text input element is particularly useful for what type of item?

No Response
Multiple-choice
Check all that apply
Completion
Menu


Chapter 3: Quizzes and Practice Exercises 3 - 14 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Select and Option Elements

The SELECT and OPTION elements are used together whenever the developer of Web-based hypermedia courseware wants to display a menu or listbox of options. The listbox, more frequently referred to as a select object, may be configured to display all options at once, a portion of the options within a scrolling window, or with only one option showing as the primary or default option, but with the rest available in a pop-up list by clicking on a button adjacent to the option display.

Select and Option Elements Study Table
Element: SELECT and OPTION
Description: The SELECT element is a container having attributes and may contain multiple OPTION elements. So it also has an end tag. The SELECT and OPTION elements, used together, display a menu or list of options or selections identified in OPTION elements. The SELECT element may be used to implement menus. The menu may be configured so that multiple options are acceptable with the MULTIPLE attribute. The SIZE element denotes the number of options that are initially displayed and visible at one time. SELECT and OPTION elements are typically used to display a multiple option list so that, initially, one option from a pop-up list, or several options from a more extended scrollable list, or all available options are displayed (see examples below). Unlike the types of INPUT elements, there is no TYPE attribute or property for a SELECT or OPTION element.
Usage: <SELECT [NAME="name"]
[SIZE=integer]
[MULTIPLE]
[onBlur="JavaScript instructions"]
[onChange="JavaScript instructions"]
[onFocus="JavaScript instructions"]
>
<OPTION [SELECTED] [VALUE="text1"]> Displayed text1
[<OPTION [SELECTED] [VALUE="text2"]>Displayed text2]
...
[<OPTION [SELECTED] [VALUE="texti"]> Displayed texti]
...
</SELECT>
L: 2
Example: <SELECT NAME="MENU1"
SIZE=1
>
<OPTION SELECTED VALUE="None">No response
<OPTION VALUE="Button">Button
<OPTION VALUE="Checkbox">Checkbox
<OPTION VALUE="Hidden">Hidden
<OPTION VALUE="Password">Password
<OPTION VALUE="Radio">Radio
<OPTION VALUE="Reset">Reset
<OPTION VALUE="Submit">Submit
<OPTION VALUE="Text">Text
</SELECT>


Displays as (try it out):

<SELECT NAME="MENU2"
SIZE=4
>
<OPTION SELECTED VALUE="None">No response
<OPTION VALUE="Button">Button
<OPTION VALUE="Checkbox">Checkbox
<OPTION VALUE="Hidden">Hidden
<OPTION VALUE="Password">Password
<OPTION VALUE="Radio">Radio
<OPTION VALUE="Reset">Reset
<OPTION VALUE="Submit">Submit
<OPTION VALUE="Text">Text
</SELECT>


Displays as (try it out):

<CENTER>
<SELECT NAME="MENU3"
SIZE=9
>
<OPTION SELECTED VALUE="None">No response
<OPTION VALUE="Button">Button
<OPTION VALUE="Checkbox">Checkbox
<OPTION VALUE="Hidden">Hidden
<OPTION VALUE="Password">Password
<OPTION VALUE="Radio">Radio
<OPTION VALUE="Reset">Reset
<OPTION VALUE="Submit">Submit
<OPTION VALUE="Text">Text
</SELECT>
</CENTER>


Displays as (try it out):
Select and Option Elements Review Question
Question: The select and option elements are particularly useful for what type of item?

No Response
Menu
Short answer
Completion
Open-ended


Chapter 3: Quizzes and Practice Exercises 3 - 15 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

The Textarea Element

The TEXTAREA element displays an extended text field allowing entry of multiple lines of text. You can specify the number of rows and columns of characters occupied by the text area. The TEXTAREA element is often used for the input of extended comments or replies to open-ended questions or prompts that may require sentences or even paragraphs. You can think of TEXTAREA as an element which causes a mini text editor to be displayed that you can configure to do automatic word wrap if so desired.

The Textarea Element Study Table
Element: TEXTAREA
Description: Displays an editable and scrollable text field having ROWS rows and COLS columns that would be used for extended text entries in the fashion of a window containing a mini text editor. Word wrap may be specified as either off, virtual (visible but not stored line breaks), or physical (visible and stored) using the the WRAP attribute. The TEXTAREA element has no TYPE attribute.
Usage: <TEXTAREA [NAME="name"]
[ROWS=integer]
[COLS=integer]
[WRAP=off | virtual | physical]
[onBlur="JavaScript instructions"]
[onChange="JavaScript instructions"]
[onFocus="JavaScript instructions"]
>[default value text]
</TEXTAREA>
L: 2
Example: <TEXTAREA NAME="textarea1"
ROWS=3
COLS=20
WRAP=virtual
>Type some text here please.
</TEXTAREA>

Displays as (Try it out. Notice the word wrap.):

Enter below any additional comments or suggestions.<BR><BR>
<TEXTAREA NAME="textarea2"
ROWS=2
COLS=20
WRAP=off
>
</TEXTAREA>

Displays as (Try it out. Notice no word wrap.):

Enter below any additional comments or suggestions.

Additional Comments (e.g., What did you like best? What did you like least?, etc.):<BR>
<CENTER>
<TEXTAREA NAME="textarea3"
ROWS=10
COLS=40
WRAP=off
>
</TEXTAREA>
</CENTER>

Displays as (Try it out. Notice no word wrap.):

Additional Comments (e.g., What did you like best? What did you like least?, etc.):
Textarea Element Review Question
Question: The textarea element is particularly useful for what type of item?

No Response
Menu
Short answer
Completion
Open-ended


Chapter 3: Quizzes and Practice Exercises 3 - 16 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Form Element Question Review
Question 1: What type of HTML form element is particularly good for multiple-choice items?

No Response
CHECKBOX
RADIO
TEXT
TEXTAREA


Form Element Question Review
Question 2: What type of HTML form element is particularly good for menus?

No Response
CHECKBOX
SELECT
TEXT
TEXTAREA


Form Element Question Review
Question 3: What type of HTML form element is useful for extended comments?

No Response
CHECKBOX
RADIO
TEXT
TEXTAREA


Form Element Question Review
Question 4: What type of HTML form element is used for clearing the form?

No Response
SUBMIT
RESET
PASSWORD
HIDDEN


Form Element Question Review
Question 5: What type of HTML form element is particularly good for fill-in-the-blank items?

No Response
CHECKBOX
RADIO
TEXT
TEXTAREA


Chapter 3: Quizzes and Practice Exercises 3 - 17 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Example HTML Form Documents: Quizzes and Practice Exercises

The following complete example HTML form documents use many of the form elements you have just studied. The examples powerfully illustrate how the various form elements may be combined together into interactive courseware documents like interactive quizzes (no immediate feedback) and practice exercises (immediate feedback). Click on the "HTML Text" hypertext link to peruse each example. Study the HTML tags. Then view the browser display produced by the complete example HTML Text document by clicking on the "Browser Display" hyperlink for the example. Remember, you may also type-in the examples yourself and use the edit, save, reload and test development cycle to create and display the document for more hands-on experience.

Example HTML Document: A Form-Based Quiz

A form-based quiz is the first complete example HTML form document. Try out the quiz by clicking on "Browser Display" below. Then study the HTML. Particularly notice the attributes in the FORM start tag that define how clearing the form is handled.

HTML Example Document: A Form-Based Quiz
HTML
Example: 		Example 3.2
HTML Text: A Form-Based Quiz

Browser Display produced when a document containing the above HTML text is loaded by a browser.

Note that, when you look at the HTML above, the FORM start tag for the quiz example has an onReset method event handler defined which is assigned a JavaScript confirm dialogue. The onReset works in conjunction with the reset button element (Clear all entries...) appearing toward the bottom of the QUIZ form. The confirm dialogue presents an OK versus Cancel choice concerning the reset. If the FORM did not have an onReset method, pressing the reset button would immediately reset the QUIZ form to its initial values. Defining onReset to implement a confirm dialogue allows the learner to cancel without resetting the form by pressing the confirm dialogue's "Cancel" button.

Chapter 3: Quizzes and Practice Exercises 3 - 18 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Example HTML Document: Form-Based Practice Exercises

Practice exercises differ conceptually from quizzes in the sense that you don't get immediate feedback for each item in a quiz, but you can in a practice exercise. In a practice exercise context, where learning and not evaluation is the primary objective, immediate feedback occurs so that the learner may correct errors before moving ahead to greater challenges.

Forms Input: Immediate Feedback with Buttons
It is a simple matter to accomplish immediate feedback for each question when using radio buttons. You just add the appropriate onClick event handler to each radio button. So, the next complete example HTML form document uses nothing but radio buttons to show you one way to implement immediate feedback in a practice exercise context. As radio buttons are an ideal way to obtain multiple-choice responses you can expect to frequently use them as shown in the example. The example powerfully illustrates what can be done instructionally with HTML forms. If the questions look familiar it's because you responded to them in Chapter 2. Now, however, you not only respond to them, but actually create the machinery to drive them.

Again view the browser display produced by the complete example HTML document by clicking on the "Browser Display" for the appropriate example. Then study the HTML tags. Of course, you may also want to type-in the example using the edit, save, reload and test development cycle for more hands-on experience.

HTML Document Example: Form-Based Practice Exercises
HTML
Example: 		Example 3.3
HTML Text: Form-Based Practice Exercises

Browser Display produced when a document containing the above HTML text is loaded by a browser. Notice that all items in this set have the same format, typical for radio buttons.
Chapter 3: Quizzes and Practice Exercises 3 - 19 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Handling Forms Input with JavaScript

Immediate Objectives

 The purpose of the following sections is to enable you to accomplish two objectives.

To be able to:
  1. Score simple Quiz and Practice Exercise Courseware
  2. Email HTML form element entries in flexible formats for evaluation and record keeping

To accomplish these objectives you need to know some JavaScript. JavaScript is the scripting language that has been built into every Netscape browser beginning with Netscape Navigator 2.0, partially with the purpose of helping to manage HTML forms entries. For those who know something about the C or C++ computer languages, JavaScript is a derivative of these languages so it has much in common with them.

Keeping the objectives in mind, and to simplify, the presentation, you will focus only on what you need to know to accomplish the objectives. So, in the presentation that follows there is no attempt to be complete about the JavaScript language. See Flanagan (1996), Goodman (1996), Ritchey (1996), or Shafer (1996), for more elaborate and complete presentations of the JavaScript language as a whole. Flanagan (1996), in particular, includes an extensive and complete reference for all JavaScript objects, properties, constants, arrays, functions, methods, and event handlers. The book is also available on the Web at http://www.ora.com/info/early/..

Forms Input: JavaScript Scoring

 Let's go back to the last example's practice exercises. Let's develop a plan for scoring them. How would you score them by hand? You've got five items. You'd check each item. To check each item you'd need to check each button. For each button, if the item response was correct and it was checked, you would add one to the number correct. You would continue the process for each item. Of course, you need a list (array) of correct answers to do it.

There are five items and thus 25 buttons altogether. Form elements have numbers associated with them. The first element in a form is always number 0. The second is number 1. The third is number 2, and so on. These elements could be said to form a list or array. There are 26 elements in the array for this form down to the last of the radio buttons, including the text input field for the name at the top. So, to get a score in the form of a percentage, after checking all buttons (elements), you would divide the number of buttons correctly checked by the total number of items.

That is the plan. It forms the essense of the logic of your JavaScript, radio-button, quiz or practice exercise scoring. After the correct answers have been defined and after all radio buttons have been pressed, execute (using a button's onClick event handler) the scoring function (name it computescore). Putting the plan in a more formal form, it could be expressed as follows:

How JavaScript Refers to Form Elements
 It turns out that the current HTML document may be referred to from within a JavaScript script as "document". A form may be referred to by its name ("PE" in this case). Particular form elements within a form may be referred to by their names (e.g., Q1, Q2, etc.). Buttons having the same name form an array where the first button with the name is button 0, the second is button 1 and so on. These buttons may be referred to by their array numbers. Finally, the checked status of a button, for each button, is referenced in the button's property named checked. The value of each button is referenced in the button's value property as set by the button's VALUE attribute.

All these names may be strung together, separated by periods, to refer to a particular button's state. So, for example, the state of the 3rd button in the 2nd question may be referred to as (note [2] designates the 3rd array element because the first element in the array has index [0]):

document.PE.Q2[2].checked.

Furthermore, these statements generalize to other form elements as you will see in the next chapter. So, you can see it is possible to refer to and access the state or value of any entry contained in any form element by using a JavaScript statement.

JavaScript Scoring Function Script
Now, keeping the above issues in mind, let's translate the plan into JavaScript. The JavaScript translation follows below. You may think of the JavaScript below as a template for your own scoring of radio button responses. To adapt the script to your own purposes for any number of radio buttons, simply set the Answer array to the correct answers following the pattern below, and set nItems and nButtons variables to the numbers appropriate for your form. Double slashes, "//", below begin explanatory comments that are ignored by JavaScript. The i++ appearing about two-thirds of the way through tells the computer to add 1 to the cycle (loop) counter each time the cycle (loop) is repeated) 

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from older browsers

// Below defines the answers. Only correct buttons have correct answers.
Answer = new Array("",
                  "","","","4","",   //Answers for 1 thru 5 buttons
                  "","","","4","",   //Answers for 6 thru 10 buttons
                  "","","","","5",   //Answers for 11 thru 15 buttons
                  "","","","","5",   //Answers for 16 thru 20 buttons
                  "","","3","","");  //Answers for 21 thru 25 buttons

// Below defines the computescore function.
function computescore ()  // Name the function to be defined
{                         // Start the function definition
  var nCorrect=0;         // Set the variables to their starting values
  var nItems = 5;
  var nButtons = 25;
  var score = 0;

  for (i=1; i<=nButtons; i++)  // For the 1st to the 25th radio button repeat
  {                              // the following series of commands
    if ( (document.PE1.elements[i].value == Answer[i]) && // If button correct
         (document.PE1.elements[i].checked == true) )     // & checked
      nCorrect+=1;                                        // Add 1 to nCorrect
  }
  score = (Math.floor((nCorrect/nItems)*10000+0.5))/100;  //Compute & Round %
  return score;                                           //Return score when
                                                          //function executes
}                         // End the function definition

// -->
</SCRIPT>

JavaScript functions need to be declared in the HEAD part of the HTML document to assure they are available when needed. Also they must be contained in a SCRIPT element to inform the browser that it is a JavaScript script and not HTML. The complete script in the context of scoring the five item "Logical Element Practice Exercises" then appears and works as shown in HTML Example 3.4 below.

Chapter 3: Quizzes and Practice Exercises 3 - 20 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Example HTML Document: Scoring Five Practice Exercises
HTML
Example: 		Example 3.4
HTML Text: Scoring Five Practice Exercises

Browser Display produced when a document containing the above HTML text is loaded by a browser. Notice that all items in this set have the same format, typical for radio buttons.
Chapter 3: Quizzes and Practice Exercises 3 - 21 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Using the JavaScript as a Template
It is a simple matter now to modify the scoring function to handle any number of radio button items. Part of the beauty of it is that the strategy works whether you understand the function or not. Suppose you had three items. Then the HTML and JavaScript for displaying and scoring the first three of the previous practice exercises would appear as shown in Example 3.5 below. Note that only the three following points have changed.

If you had 10 5-alternative items, you would have a total of 50 elements in the Answer array. You would change nItems to 10, and nButtons to 50. If you had 50 5-alternative items, you would have a total of 250 elements in the Answer array. You would change nItems to 50, and nButtons to 250.

Example HTML Document: Scoring Three Practice Exercises
HTML
Example: 		Example 3.5
HTML Text: Scoring Three Practice Exercises

Browser Display produced when a document containing the above HTML text is loaded by a browser. Notice that all items use radio buttons.
Chapter 3: Quizzes and Practice Exercises 3 - 22 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
JavaScript Scoring Question Review
Question 1: A JavaScript scoring function can be used to score responses to radio buttons.

No Response
True
False

JavaScript Scoring Question Review
Question 2: The scoring function provides a template for radio button scoring.

No Response
True
False

JavaScript Scoring Question Review
Question 3: Scoring requires that a correct answer array be defined.

No Response
True
False

Chapter 3: Quizzes and Practice Exercises 3 - 23 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Forms Input: JavaScript Email

Let's go back now to the Example 3.5 set of three practice exercises and ask a different sort of question. How can you save the results? Better yet, can the results automatically be sent to the instructor? The answer is a resounding "Yes". In fact, all item responses may be listed, scored, and emailed to the instructor, or whoever else is designated to receive them, automatically, at the click of a button.

Just as you developed a plan for scoring, now let's develop a plan for emailing. How would you email the responses. You've got three items. You'd get each item's responses. This means getting whether each button is checked. Then you'd compute the score using the computescore function. Then you'd format the item response and score results, (i.e., what goes where in the email report). Finally, you'd email the report.

With a JavaScript form there's a little more to it, because in order to have maximum flexibility in formatting the email report of results you will need to, first, create a function which formats the email report and saves the formatted report in a variable. Then, second, you will need to execute that function from within a second form in the practice exercise document. That second form will contain a HIDDEN element which will have the complete formatted report assigned to its VALUE attribute. Finally, third, when the submit button for the form containing the HIDDEN element is pressed, the formatted report will be emailed to the appropriate email address after providing the sender an opportunity to confirm submittal of the email report.

That is the emailing plan. After all radio buttons have been pressed, responses are entered, scored, formatted and stored in the VALUE attribute of a second form's HIDDEN element, an email function (name it emailResults) is executed using that form's Submit button. Expressing the plan more formally, it could be put as follows:

JavaScript Email Function Script
Now, let's translate this plan into JavaScript. Again, you may think of the JavaScript below as a template for your own radio button response email. The "\n" appearing at the end of many lines below is the JavaScript, C/C++ notation for a line break. Keep in mind that you can refer to and access the state or value of any entry contained in any form element using Javascript document, form name, element name, array member number, checked and value references.

To adapt the script to your own purposes for any number of radio buttons, simply add additional appropriate emailData+= lines to the function if there are more buttons, or delete irrelevant lines if there are less buttons preserving the obvious pattern revealed in the function below. Double slashes, "//", again begin explanatory comments that are ignored by JavaScript. 

function emailResults(form) {
  var header = "";
  var emailData="";

  header += "\nTitle:  " + document.title + "\n";                 //Header Info
  header += "From: " + document.location + "\n\n";
  emailData+="NAME:  "+document.PE.value + "\n";
  emailData+="PE 1 Button 1: "+document.PE.Q1[0].checked + "\n";  //Item 1
  emailData+="PE 1 Button 2: "+document.PE.Q1[1].checked + "\n";
  emailData+="PE 1 Button 3: "+document.PE.Q1[2].checked + "\n";
  emailData+="PE 1 Button 4: "+document.PE.Q1[3].checked + "\n";
  emailData+="PE 1 Button 5: "+document.PE.Q1[4].checked + "\n";
  emailData+="PE 2 Button 6: "+document.PE.Q2[0].checked + "\n";  //Item 2
  emailData+="PE 2 Button 7: "+document.PE.Q2[1].checked + "\n";
  emailData+="PE 2 Button 8: "+document.PE.Q2[2].checked + "\n";
  emailData+="PE 2 Button 9: "+document.PE.Q2[3].checked + "\n";
  emailData+="PE 2 Button 10: "+document.PE.Q2[4].checked + "\n";
  emailData+="PE 3 Button 11: "+document.PE.Q3[0].checked + "\n";  //Item 3
  emailData+="PE 3 Button 12: "+document.PE.Q3[1].checked + "\n";
  emailData+="PE 3 Button 13: "+document.PE.Q3[2].checked + "\n";
  emailData+="PE 3 Button 14: "+document.PE.Q3[3].checked + "\n";
  emailData+="PE 3 Button 15: "+document.PE.Q3[4].checked + "\n";
  emailData+="SCORE: "+computescore() + "\n";
  form.maildata.value = header + emailData;
  alert("This is what is being submitted to the instructor.   " + form.action + '       '+
    form.maildata.value);
  return true;
}

As before JavaScript functions need to be declared in the HEAD part of the HTML document to assure availability when needed, and must be contained within a SCRIPT element. The complete script in the context of scoring the three item "Logical Element Practice Exercises" then appears and works as shown in HTML Example 3.6 below.

Chapter 3: Quizzes and Practice Exercises 3 - 24 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Example HTML Document:
Emailing Results From Three Practice Exercises
HTML
Example: 		Example 3.6
HTML Text: Emailing Results from Three Practice Exercises

Browser Display produced when a document containing the above HTML text is loaded by a browser. Notice that all items in this set have the same format, typical for radio buttons.
Chapter 3: Quizzes and Practice Exercises 3 - 25 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Using the JavaScript as a Template
It is a simple matter now to modify the emailResults function to handle any number of radio button items. Suppose you had five items as in Example 3.4. Then the HTML and JavaScript for displaying, scoring and emailing those five practice exercises would appear as shown in Example 3.7 below. Note the FORM for Example 3.7 is named "PE2", so "PE2" occurs everywhere "PE1" did in the previous version of the emailResults and computescore functions. Also, note the addition of 10 more emailData+= statements to add the data for buttons 16 through 25 to the email document. Of course, the Answer array has changed to include correct answers for the additional two items. Also, for those two items 10 buttons have been added. nItems has been changed to 5. And, nButtons has been changed to 25.

If you had 10 5-alternative items, you would have a total of 50 emailData+= statements in the emailResults function. If you had 50 5-alternative items, you would have a total of 250 emailData+= statements, all of which would observe the same pattern of index incrementing within the arrays accessed by the emailData+= statements that you see illustrated in these examples.

Example HTML Document:
Emailing Results From Five Practice Exercises
HTML
Example: 		Example 3.7
HTML Text: Emailing Results from Five Practice Exercises

Browser Display produced when a document containing the above HTML text is loaded by a browser. Notice that all items use radio buttons.

Scoring, Feedback and Email with Other Form Elements

As stated earlier, it is a relatively straightforward matter, to extend the JavaScript functions for scoring, immediate feedback, and email of form results to work with a greater range of form elements. Those elaborations will be presented in the next chapter. For now, it is clear that it is a simple matter to modify the computescore and emailResults functions to handle any number of items or radio buttons. The items, of course, would not need to have equal numbers of buttons.

Chapter 3: Quizzes and Practice Exercises 3 - 26 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
JavaScript Question Review
Question 1: You can provide immediate feedback for radio button responses with the onClick event handler.

No Response
True
False

JavaScript Question Review
Question 2: Which button is used to email the form responses?

No Response
RESET
BUTTON
SUBMIT

JavaScript Question Review
Question 3: Emailing in these examples was accomplished by storing data in which element?

No Response
RESET
HIDDEN
TEXT
TEXTAREA

Chapter 3: Quizzes and Practice Exercises 3 - 27 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Summary

You now know how to use HTML forms to present quizzes and exercises having a wide variety of different types of response formats. And, you have begun to learn how you can provide feedback, scoring, and emailing of results for these kinds of forms. You have made major strides forward. You now have experience with scores of form element examples. You have seen how you can use the JavaScript scoring function examples presented in this chapter as templates for scoring quiz or practice exercises containing any number of multiple-choice (radio button) items. You have seen how you can use the onClick event handler to provide immediate informative feedback to radio button responses. You have now seen how you can use the JavaScript functions for emailing radio button responses on quizzes and practice exercises as templates for emailing your own quizzes and practice exercises. In the next chapter you will see how these JavaScript functions can be extended in a straightforward fashion to handle a wider variety of form elements.

Chapter 3: Quizzes and Practice Exercises 3 - 28 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Additional Hands-On Practice Project Assignment

It is always more efficient when developing Web-based courseware to adapt an existing working document to one's own purposes than to have to start from scratch to create a whole new document, building from the ground floor up without a model. So, keeping that in mind, enter your favorite word processor (e.g., WordPerfect) or text editor (e.g., Windows Notepad) and choose one or more of the possible practice projects below. Then, for each project, choose the appropriate example document from this tutorial to serve as a template for adaptation to your own purposes.

Copy the chosen example document, as described in "Edit, Save, Reload and Test", into the word processor and use the "Save as" option to save it under a new name of your own choosing. Then use the edit, save, reload and test development process to edit the newly saved example HTML document(s) to produce one or more of the following Web-based hypermedia courseware products to meet your own instructional goals.

    List of Possible Practice Projects:

  1. A Form-based Quiz (example HTML document is Example 3.2)
  2. A Form-based Practice Exercise Set (example HTML document is Example 3.3)
  3. A Form-based Quiz with Scoring (example HTML documents are Example 3.4 and Example 3.5 minus the immediate feedback produced by the onClick event handler functions)
  4. A Form-based Quiz with Scoring and Email (example HTML documents are Example 3.6 and Example 3.7 minus the immediate feedback produced by the onClick event handler functions)
  5. A Form-based Practice Exercise Set with Scoring (example HTML documents are Example 3.4 and Example 3.5)
  6. A Form-based Practice Exercise Set with Scoring and Email (example HTML documents are Example 3.6 and Example 3.7)
  7. Other Form-based Product (e.g., Web page for your department, program, office, etc.).

End Chapter 3: Quizzes and Practice Exercises
using HTML & JavaScript


Copyright © 1997 Craig Johnson
Comments:
cjohnson@acad1.sahs.uth.tmc.edu
Chapter 3: Quizzes and Practice Exercises 3 - 29 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

References

  1. Flanagan, D. JavaScript: The Definitive Guide (Beta Edition). Sebastopol, CA: O'Reilly, 1996.
  2. Goodman, D. Danny Goodman's JavaScript Handbook. Foster City, CA: IDG, 1996.
  3. Graham, I. S. The HTML Sourcebook. New York: Wiley, 1995.
  4. Ritchey, T. Programming JavaScript for Netscape 2.0. Indianapolis, IN: New Riders, 1996.
  5. Shafer, D., JavaScript & Netscape Wizardry. Scottsdale, AZ: Coriolis, 1996.
Chapter 3: Quizzes and Practice Exercises 3 - 30 UT Bullet