Third Assignment

Task: Create a memory test page with the elements and behavior described below.

 Elements: (1) An HTML form; within that form, (2) a display field (the field containing the words "Oblate Willie Navigator" above); (3) an input field (the blank field above); (4) a submit button ("Check!" above); (5) a reset button; (6) title and explanatory text. The page containing these elements should also have a <script> container (see note about placement below) and two or more JavaScript functions.

Behavior:

  1. When the page loads, a string of three words appears in the display field. Those three words are selected randomly from a larger set of possibilities -- at least 10 words, preferably more -- so that a different set of three words comes up each time the page is loaded.

  2. After five seconds the words in the display field vanish. The user is expected to type the three words from memory into the blank input field, then click the submit button.

  3. This click invokes a JavaScript function that compares the string the user typed to the string that was displayed. If the strings match there is appropriate feedback (an alert message will do); there is different feedback for wrong answers.

  4. Clicking the reset button blanks the input and display fields and starts the entire process over.

Script Placement: Because of the way forms are processed by Netscape, you will have to put your <script> container toward the bottom of the markup, after </body> but before </html>.

Notes: Maximize the randomness of your display strings by selecting each word individually rather than selecting from a repertoire of precombined three-word strings. Display strings may contain repetitions (e.g., "Willie Willie Boathouse"); however, it is preferable to eliminate repetitions if you can find a way.