to practice working with events, forms, and form controls

For this lab you will be creating a webpage that allows the user to roll dice.

The following constructor function can be used to simulate a die that can be rolled:

function Die( ) {
  this.sides = 6;
  this.roll = function( ) {
    return parseInt((Math.random( ) * 1000) % this.sides) + 1;
  }
}

To roll the die you can create a die object:

  var d = new Die( );

A default die has six sides but you can change the number of sides:

  d.sides = 12;

On your page the user should be given the ability to choose how many sides will be used on the dice. The number of sides should be limited to between 2 and 100. Both dice will have the same number of sides.

To roll the die you call its roll method and it will return the rolled value:

  var rolled_value = d.roll( );

On your page you should give the user a button they can click to trigger the rolling of the two dice.

What your script should do is roll two dice 36000 times and keep track of the number of times each total for the two dice occur. Two columns of text should be shown on your page. One should show the total number of times that each total was rolled and the other should show each total as a percentage of the 36000 rolls.

For example, if the user types in that they want 4 sided dice and clicks the roll button they should be given two lists of numbers. The actual rolls list would be something like:

2: 2341
3: 4486
4: 6626
5: 9166
6: 6636
7: 4480
8: 2265

And the percentage list would look something like:

2: 6.50%
3: 12.46%
4: 18.41%
5: 25.46%
6: 18.43%
7: 12.44%
8: 6.29%

Your numbers will not exactly match these are rolling dice is a random process. These numbers just give you an idea of the range and format the responses should be in.