## Generating random numbers

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

- generate a random decimal using
`Math.random()`

- multiplying the random integer by 6
- 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:

- var
`randomDecimal`=Math.random();

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

- var
`unroundedDecimal`=`randomDecimal`* 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()`

.

`var`

`dieRoll`=Math.ceil(`unroundedDecimal`);

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

`var`

`dieRoll`=Math.ceil(Math.random() * 6);

## 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.

#### Variables

- var radius = the radius of the circle entered by the user
- var area = area of the circle as calculated by the program, to be output
- pi is a constant built into Javascript through Math.pi

#### User interface

- instructions to tell what to do
- an input line ("inputID") for people to enter the radius
- a button to trigger the program
- a line with a <span> ("outputID") for the answer to appear

#### Main program flow - mainProcedure()

- var radius =getRadius();
- var area =calculate Area( radius );
- outputArea( area );

#### 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

- Complete your program planning chart first
- Consider using
`<input type="text" id="inputID">`

to create the input line - You will need a loop to count the number of dice that are added together
- Use
**function pipelines**for this assignment. Do not use variables outside of the functions. - Split your functions into separate parts: INIT, INPUT, PROCESS, and OUTPUT.
- In your descriptive comments for each function, indicate whether the function is for INIT, INPUT, PROCESS, or OUTPUT.
- Use
`onclick="mainProcedure();"`

to start the process rolling

## Evaluation (out of 10)

- ___/3 — Well-modularized code into separate input/processing/output
**function pipelines** - ___/3 — Successful completion of the program planning chart
- ___/2 — Successful program execution: loops, Math.random, and rounding
- ___/2 — Well-commented code with good indentation, commenting (including "INIT:", ...), and style