CMSC 104 Spring 10

Arrays Lab

Objectives

• To practice working with arrays, functions, and random numbers in JavaScript
• To lean to work with images on a web page

The Lab Assignment

The lab assignment is broken into the following steps.

1. Create a directory under your pub/www/cs104 directory for this lab named arrays and navigate to that directory so that it is your working directory.
2. You will find the image files for six dice which represent the values 1- 6 in Mr. Frey's public directory --
   /afs/umbc.edu/users/f/r/frey/pub/die-images. Copy these files to the directory you created in the step above using the command cp /afs/umbc.edu/users/f/r/frey/pub/dice-images/* .
3. Create a web page named dice.html with the following functionality
   1. Prompt the user for the number of dice he/she wishes to roll. This should be a number between 1 and 5, inclusive.
   2. For each roll, generate a random number between 1 and 6, inclusive and display the corresponding die image
   3. Display the sum of the dice

Helpful Hints

1. To generate a random integer between 1 and 6 (inclusive) use the formula
   randomInt = Math.ceil( Math.random( ) * 6);
2. Store the image file names in an array. The index into the array is based on the random number generated above. Consider writing a function that returns the image file name.
3. To insert an image into a web page, use the img tag as shown in the example below.

   <img src="image1.gif"/>

4. You may assume the user will input a positive integer when asked for the number of rolls. It is not necessary to perform input validation.
5. Your code should display the die images on a single line with the total underneath the images.
6. Screen shots are provided below.

Sample Screen Shots