Fun With Loops

---

This project will review things you know about HTML and CSS, but the focus will be on producing working Javascript. You will need to use lots of conditional statements (if and if-else statements) and loops. You will also be practicing alert boxes, prompts, and producing HTML content with Javascript using document.write. You may also choose to write some functions while implementing this project, although you will not be required to write any functions of your own.

---

For this project you will create a webpage with the title "Fun With Loops". As soon as the page loads, the user will be presented with a dialog box (use the "prompt" function) that looks like the one below:

The user will choose one of the four options. What happens after that is described in detail below.

Warning: This project requires a significant amount of time. Please start working on the project immediately. Office hours get busy during the few days before the project is due, and you may not get the help you need if you wait too long. As always, we will not grant project extensions due to technical problems on your end.

---

We strongly recommend creating a folder (visible within Komodo Edit) called "Project3". All of the work you do on this project should go in this folder. This includes the HTML page that you will create, which you should call "index.html". You can do style rules any way you want (in-line, at the top of the page, in a separate file, or any combination of these three.) If you choose to include a separate CSS file, please be sure it is in this same folder as your HTML file.

Regarding the Initial Dialog Box

• The words "This page says:" that you see in the image above were produced by the Chrome browser (not by my program). If you run your program in a different browser it will look different.
• Notice that the prompt takes up more than one line. The trick I used for that was to imbed the special "newline character" into the prompt. The newline character looks like this: "\n". So the prompt begins like this: "What would you like to do? \n 1. Play a game \n" etc. Every time there is "\n" a new line begins. Try it!
• You may assume that the user will enter a numerical value in the box. You must check this value to ensure that it is in the range from 1 to 4. If the value entered is not in this range, you must repeat the prompt until the user provides a value that is in the range from 1 to 4.

Generating Random Numbers

There are a couple of places in this project where you will need to generate random numbers. We recommend copying the function below and pasting it into your project. This function will allow you to easily generate random integers (whole numbers) in a specified range:

function randomNumber(from, to) {
    return Math.floor(Math.random() * (to - from + 1)) + from;
}

As an example of how to use this function, suppose you need a random value between 1 and 10. You could use the following function call to obtain one:

var value = randomNumber(1, 10);

Handling the 4 choices

Depending on the user's choice (1 through 4) in the initial dialog box, your program will do one of the four things. Click the links below for descriprions of how you must handle each possibility:

1. Play a game
2. See some art
3. Watch time go by
4. Something else fun

---

• The title that appears above the page in the browser should say "Fun With Loops".
• You must create a file named: index.html. You may also choose to include a separate CSS file -- it's up to you.
• You are only creating a single page -- everything that happens is on that same HTML page.
• You must use proper indentation in your code (both in the HTML file and the CSS file).
• Be sure to test your project with the Chrome browser -- that is how we will test it.
• You may not use any authoring tool (Dreamweaver, Frontpage, Word, etc.) that generates the HTML for you.
• You must implement this project by yourself.
• We do not accept email submissions of projects under any circumstances. See the instructions below for the proper procedure for submitting your work. If you are not sure how to create a zip file and how to submit this zip file, it is your responsibility to visit TA office hours before the due date to ask for help. We will not grant extensions on the project due date because you were not able to submit the project successfully.
• This project is to be done individually. Students who are found to have collaborated on the project will be prosecuted for academic dishonesty.
• DO NOT POST YOUR SOLUTION TO THIS PROJECT ON ANY WEB SERVER.

---

You will be submitting a zip file. Please be sure that all of your work (your HTML file, and optional CSS file) are in a folder called "Project3". Create a zip file that includes this folder, as follows. On Windows, right-click the folder, then choose "send to, compressed (zipped) folder". DO NOT USE A UTILITY LIKE 7-ZIP OR WINRAR. The procedure is similar on a Mac.

You will not receive credit for submitting a file that is not a standard "zip" file. In particular, "rar" files or "7z" files will not be graded. Submit the zip file to the submit server, by logging in, selecting Project 3 (Fun With Loops), and uploading the zip file to the server. You may submit as many times as you like -- we will only grade the last submission. Late submissions received up to 24 hours beyond the deadline will be accepted, but will be penalized 20 points. No submissions will be accepted more than 24 hours past the deadline.

After you have submitted the project, we strongly recommend downloading your submission from the submit server. It will give you a zip file. Unzip this file and verify that the contents are as they should be.