1.22 Hand-in: Roll Some Dice

Generating random numbers

Generating a random number between 1 → 6 requires you to do the following:

  1. generate a random decimal using Math.random()
  2. multiplying the random integer by 6
  3. rounding the result up to the nearest integer

Generating a random integer using Math.random()

There is a function, Math.random(), that returns a random number between 0 → 0.999999... It is not truly random (you need to use something like reading radioactive decay for that), but it is close enough for our purposes at this point.

Here is what Math.random() returns:

Rounding, Floors, and ceilings

There are often times when you want to normally round a number, and Math.round() will do this for you in the usual way:
2.3 round()s normally to:
5.6 round()s normally to:

Sometimes you want to round down to the nearest integer. Math.floor() will do this for you:
2.3 floor()s down to:
5.6 floor()s down to:

Sometimes you want to round up to the nearest integer. Math.ceil() will do this for you:
2.3 ceil()s up to:
5.6 ceil()s up to:

Rolling a die

Let's say for this example that we are using a six-sided die.

We will start off by generating a random decimal:

Then we need to multiply this number by six in order to simulate a range from 1 → 6.

It still does not look like a die roll from 1 &rarr 6 yet. Sometimes we get numbers less one, and we never get a number equal to 6. The function that we need to shape the results into the proper integers is Math.ceil().

So if you combine everything into one line, the resulting code is:

Program Planning Charts

You will be using function pipelines as much as possible in the future. In order to help you organize and structure your code effectively, you will need to use programming planning charts before you begin. Here is an example:

Example Program Planning Chart for finding the area of a circle:

Program description

This program asks the user to input the radius so that the program can calculate the area of a circle and then output it.


User interface

Main program flow - mainProcedure()

INPUT function - getRadius()

Function task: set radius equal to "inputID"'s value

Function returns: the radius

PROCESS function - calculateArea()

Function input parameters: the radius

Function task: set area equal to radius * radius * Math.pi

Function returns: the area

OUTPUT function - outputArea()

Function input parameters: the area

Function task: set the innerHTML of "outputID" equal to the area

Saving your work

Download the template and rename it to your last name, such as "1.22H-RollSomeDice-LastName.html".

The assignment

In this assignment you will use function pipelines and a planning chart to create a page that asks the user how many dice to roll, and then displays the sum of that result, like this:

Please enter the number of six-sided dice to roll and add together:

The total of the dice added together is:


Please keep in mind the following

  1. Complete your program planning chart first
  2. Consider using <input type="text" id="inputID"> to create the input line
  3. You will need a loop to count the number of dice that are added together
  4. Use function pipelines for this assignment. Do not use variables outside of the functions.
  5. Split your functions into separate parts: INIT, INPUT, PROCESS, and OUTPUT.
  6. In your descriptive comments for each function, indicate whether the function is for INIT, INPUT, PROCESS, or OUTPUT.
  7. Use onclick="mainProcedure();" to start the process rolling

Evaluation (out of 10)