CS 120, Fall 2012, Lab 6

CS 120, Fall 2012, Lab 6:
JavaScript with IF

To set up for the lab, create a new project in Aptana named lab6: Use the command "New" / "Web Project"; enter lab6 as the project name, and leave the location set to the default location. Then copy all the files from /classes/cs120/lab6-files into your project.

Note that you will not use the file style-me.html in the lab. It is there as an example. You can look at the HTML and check out what the page does. It uses a function to implement a button—something that you will have to do in the lab.

You will need some techniques that we have covered recently in class, as well as some that were used in Lab 2.

This lab is due before our next lab, on Friday, October 12. You should have it completed at that time.

Turning In and Publishing Lab 5

You do not have to do anything special to turn in your lab work, if you followed instructions correctly in lab5. (It was easy to get some details wrong!)

Your Aptana Studio 3 Workspace folder, inside your Documents folder, should contain a folder named lab5. This folder is the project that you created last week for Lab 5. I will look for it when I want to grade your work. I have arranged things so that I have access to your Aptana workspace folder. If you do not have a lab5 folder in the right place, or if it does not contain the work that you want to turn it, be sure to fix the problem before you leave lab today.

The work in your Aptana Studio 3 Workspace has not been published on the web. Once I have collected the assignment, you can add the work to your web portfolio. The only trick here is that you want to copy the work, not move it. You can do this either inside the Aptana Studio window or in a file browser window. In either case, select the item or items that you want to copy, right-click on one of the items and select "Copy". Then click in the location to which you want to copy the items, and select "Paste". Once the work is in your web portfolio folder, you can link to it from the main index page of your portfolio.

Password Check

The file password.html contains a rather famous poem, but its display property has been set to "none", so it is not visible on the web page in a browser. The web page shows a message that the user must enter a password to see the poem, with an input box for the password and an "ENTER" button. However, the button doesn't do anything. You should implement the button so that it tests the user's password. If the password is correct, you should show the <div> that contains the poem, and you should hide the <p> the contains the message, input box, and button. If the password entered by the user is not correct, you should put up a message to tell the user that what they entered was not the correct password. (You can make up the password.)

The button is already configured to call the function checkPassword() when clicked. You just have to define this function. Put the definition in a <script> element in the <head> section of the page. The function will use an if statement to test the user's input and will respond appropriately. You will not have to make any changes to the page outside the script element.

For a little extra credit: After the user makes a third incorrect attempt to enter the password, do something different. For example, tell the user that they've used up their chances, and send them to another page. Or tell them the correct password (since they look like such a nice person). To do this, you'll need another variable to count how many attempts the user has made. Create the variable outside the function and give it the value zero:

var count;
count = 0;

This has to be outside the function because, if it's inside the function, count will be reset to zero each time the function is called. Inside the function, you should add one to count when the user's password is incorrect, and you should take some action if count becomes equal to three.

(Note: This example also introduces the <pre> element. Usually in HTML, line breads and extra spaces are ignored. However, line breaks and extra spaces are preserved in the content of <pre>. "Pre" stands for pre-formatted, and it means that the text appears exactly as laid out in the HTML source. The default font family for <pre> is monospace.)

Coin Flip

The second exercise of the lab is to implement a simulated coin flipper. The file flip.html just displays an image named no-coin.png, which shows a question mark. You also have image files named heads.png and heads.png that show pictures of the two sides of a coin. Your task is to simulate flipping a coin by showing one of the two coin images. Here are the requirements:

Add two buttons to the page, one for flipping the coin and one for resetting the image to the initial question mark image. The "reset" button should initially be disabled.

When the user clicks the "flip" button, you should randomly decide whether to show heads.png or tails.png, and you should substitute that image for the question mark image. In addition, the "flip" button should become disabled and the "reset" button should become enabled.

When the user clicks the "reset" button, you should substitute the question mark image for the coin image, the "flip" button should become enabled, and the "reset" button should become disabled.

For a little extra credit: Add a message to the page saying how many heads have appeared and how many tails. For example, it might just say "Heads: 3; Tails: 7". The message should change every time the user flips the coin.