Homework 10

  1. Please put all three problems on the same html page and put a legend around each form that reads question 1, 2, or 3. Name the html page hw10.html.

  1. 30 points: Create a form called addr that has the label street address, followed by a text element for entering the street number and name, and a menu, for entering the suffix, which should be one of dr|rd|ln|tr (representing drive, road, lane, and trail). On a separate line should be a submit button, which is implemented as a button, not a submit button. This is to prevent the onsubmit problem discussed in my email.
    1. When the user presses the submit button, you should call a validation function that checks whether the street address has the correct form. A street may have more than one name, such as in "2425 pin oak".
      1. If the street address is correct then you should pop up an alert box that lists the street number, street, and suffix on separate lines. Each of the lines should be appropriately labeled.
      2. If the street address is incorrect then the text box's background color should be changed to yellow and the text should be changed to red. An alert box should pop up with an error message explaining that a street address should have the form "number street".
    2. The default for the suffix should be "dr".
    3. Your application should not do anything when a suffix is selected or when a street address is edited.

  2. 30 points: Create a form called print that has two radio buttons labeled "All" and "From". The labels should follow (i.e., to the right of) the radio buttons. The "From" option should be followed by a text box, the label "To", and a second text box. The two text boxes should be disabled if "All" is selected. When "From" is selected, both text boxes should be enabled, the "From" text box should be given the focus, and the text in the "From" box should be selected. Whenever the user edits the "From" text box, the value in the "From" text box should be placed as the current value in the "To" text box if either 1) there is no value in the "To" text box, or 2) the value in the "To" text box is less than the value in the "From" text box. Whenever the user edits the "To" text box the validation function should check the value of the "From" text box and either 1) place the value of the "To" textbox in the "From" textbox if the "From" textbox is empty, or 2) make the background color of the "To" box yellow and assign to the "title" property a string that reads "the to value must be greater than or equal to the from value". If the user hovers the mouse cursor over the "To" textbox a box will pop up with this string displayed in it. When the user places a correct value in the "To" textbox the "title" property should be assigned the null string. When the "All" option is selected the text boxes should be disabled but their values should not be cleared.

  3. 40 points: You are going to create a simplified version of the TV gameshow "Deal or No Deal" using Javascript. You are to create an initial web page that provides a set of instructions and a button after the instructions that reads "Start Game". You should come up with a coherent set of instructions. There should then be a horizontal rule and the following form:

    1. A centered, readonly textbox with the label "Offer" and a maxsize of 7 digits. The offer box should be initially blank.

    2. Underneath the offer box should be a 2x5 table with 10 buttons, labeled from 1 to 10. The buttons represent suitcases with hidden monetary values. The 10 possible values for each suitcase are $.01, $1, $5, $10, 100, $1000, $10000, $100000, $500000, and $1000000. The values will be randomly assigned to the 10 suitcases. You should feel free to devise your own algorithm for doing this, but one acceptable way is to use the Math.random function, which returns a floating point number between 0 and 1. Generate 10 random numbers and place them in an array. For each random number determine its numeric position in sorted order and assign it the corresponding value from the money array. For example suppose the random number .506058 is the third generated random number and it is the 6th largest value overall. Then button 3 would be assigned the value $1,000 because $1000 is the 6th largest value in the money array.

    3. Next to the 2x5 table should be a vertical 1x10 table with 10 checkboxes, labeled with the amounts from $.01 to $1000000.

    4. Two centered buttons, side-by-side, labeled "Deal" and "No Deal".

    Here is how the game works:

    1. The user presses the "Start Game" button and the gameboard is initialized by assigning values to buttons and unchecking and enabling all checkboxes (the user may have already played the game and is starting a new one).

    2. The user selects a button. This is their "suitcase" and they may either hold it to the end of the game, in which case they receive whatever monetary value the suitcase holds, or they may sell the suitcase to the banker. Once selected, the button should be disabled, the text should be displayed in silver, and the button should be colored blue. The offer box should remain blank.

    3. The user selects one button at a time and when the button is selected its value is revealed by replacing the button's number with the value of the button. The button is disabled and its background color should be made yellow. The checkbox associated with that amount is checked and disabled. You should select the checkbox by calling its click method. It is true that the user can also check the checkboxes and that's a drawback of this user interface. You can try setting the "readonly" property but Firefox inconveniently ignores this property.

    4. After each button is selected the banker makes an offer in the offer text box. The remaining un-opened suitcase buttons should be disabled until the player decides whether or not to accept the offer. The offer should be computed as 90% of the expected value of the remaining unopened suitcases, because that is what happens on Deal or No Deal--the banker always lowballs the offer until there are only a couple of suitcases left. The offer should be an integer.

    5. The user selects either the "Deal" or "No Deal" button. If the user selects the "Deal" button the game ends and the value in the user's suitcase is revealed. If the user selects the "No Deal" button the game continues and the buttons associated with the un-opened suitcases are re-enabled. If the user has opened all the suitcases the game automatically ends and the value in the user's suitcase is revealed. No matter how the game ends, an alert box should pop up telling the user how much the user won. If the user selects the deal, the user wins whatever the offer amount is, not what is in the suitcase.