CSC 551: Web Programming
Spring 2001

HW4: JavaScript Programming

Part 1

As we discussed in class, one of the advantages of text boxes over prompts is persistence and modifiability. If the user enters input into several text boxes, those values persist in the boxes. If the user changes their mind or wants to reexecute code based on new values, they can simply edit the appropriate text boxes and reexecute.

Create a new version of your grades.html that uses text boxes for inputting the user's grades. As before, homework grades should be entered into a single text box (as should quiz grades). The output of your program, which should include the homework and quiz averages, should be displayed in a separate frame in the page.

Part 2

A future assignment will involve writing a Web-based JavaScript program that plays the game Mastermind (Copyright (c) 1981, Pressman Toy Corporation). If you are not familiar with the game, the rules are as follows:
  1. The Mastermind (in this case, your program) selects four colored pegs out of a large collection, with six possible colors each.
  2. The player tries to guess the color and order of the Mastermind's pegs by proposing 4 pegs of their own.
  3. The player keeps guessing until they get the pegs correct (in which case they win) or until they have made eight incorrect guesses (in which case they lose).

For example, suppose the Mastermind chooses:   
Now suppose the user guesses the following:   
For this guess, there is one peg, red, that is correct (right color in the right position), while there are two additional pegs, blue and yellow, that are the right color but in the wrong position.

Without writing any code, design the layout of a page for playing the game. That is, draw a picture of the page and identify the individual page elements that make up the page. Be sure to annotate those elements with a brief description of what event-handling should occur with respect to the elements. For example, if there is a button on the page, describe what should happen when the user clicks on that button. Be sure to consider:

Note: To familiarize yourself with the game, you are allowed to find and play with existing Mastermind games on the Web. However, the design of your page should not rely on these pages, most of which are terribly designed and/or rely on language features that you are not familiar with. Use your understanding of form elements and JavaScript to produce your own design. Under no circumstances are you allowed to view source code of existing Mastermind programs.

Repeat: you are not allowed to view the source code of any existing Mastermind page.