Homework 7

Using a file named deal.html you are going to create a simplified version of the TV gameshow "Deal or No Deal" using Javascript. If you are not familar with the game, read this article. You are to create a web page that provides a set of instructions and then the gameboard. There should then be a horizontal rule dividing the instructions from the gameboard. The gameboard should have the following elements:

  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 labeled "Deal" and "Start New Game".

Here is how the game works:

  1. The user presses the "Start New 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 at some point during the game (how this might happen will be discussed shortly). 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 suitcase button at a time and when the button is selected its value is revealed by replacing the button's number with the value of its suitcase. The button is disabled and its background color should be made yellow. The checkbox associated with that amount is checked. To prevent the user from clicking the checkboxes and inadvertently checking them, you can have the onclick event call a function that returns false. This will allow the user to click the checkbox but prevent the checkbox from toggling its value (i.e., if the checkbox is not yet selected, then it will remain unselected, and if it is selected, then it will remain selected). You can also 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 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" button or another suitcase.
A sample screen for this problem is shown below. You should try to approximate the appearance of this website as closely as possible and you should use the same instructions that I use.

Here is a second screen shot right after the user has accepted the deal. Note that the user's selected suitcase and the remaining suitcases all have their suitcase amounts revealed.

What To Submit

Submit deal.html. All of your css styling and javascript should be contained in deal.html for simplicity of grading.