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

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.
   • if the player's pegs match the Mastermind's pegs exactly (the same colors in the same order), then the player wins.
   • if not, the Mastermind provides some feedback as to how close the guess was. In particular, the Mastermind announces how many pegs in the guess were the right color and further distinguishes how many of those were in the correct position.
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:

• For each guess, the player should be able to select peg colors and change their mind before finally committing to the guess.
• All past guesses, along with the resulting feedback, should remain on the page to allow the user to study them.
• When the game ends, either in a win or a loss, the Mastermind's pegs should be revealed.

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.