CS 120, Fall 2011, Lab 6:
If Statements, Form Elements, and More Events
To begin the lab, create a new Web Project in Aptana. Name it lab6. Copy the entire contents of the folder /classes/cs120/lab6-files into your lab6 project.
This lab is due next Friday.
The file flip.html is a very simple web page that shows a "question-mark" image. The source of the image is coins/no-coin.png. For the first exercise, you will make the page into a coin-flipping app. The exercise should be completed in a series of steps.
Step 1: Simple change of image. The coins directory also includes images of the two sides of a coin, coins/heads.png and coins/tails.png. For the first step of the exercise, add a button to the page, and program that button to change the image that is displayed on the page. When the button is clicked, the image should change to one of the coin images (heads or tails), selected at random. (You've done image changes before, in the slideshow exercise in Lab 2.) To do the programming, you should add a <script> to the head of the page, and you should define a function to do the work. (We talked about simulating coin flips in class.) The button's onchange event should call the function.
Step 2: Add a message. To make it completely clear to the user what is going on, you should add a text message to the page to say either "Heads" or "Tails" (or something more verbose) when the coin is flipped. Add a "message" paragraph to the page, and change the text of the message whenever you flip the coin.
setTimeout( flip, 2000 );
Step 4: Protect your timeout! Something strange can happen if the user clicks the flip button while the timeout is pending. In fact, another timeout will be started, which will call flip() again in its own good time. (Try quickly clicking the button several times in a row.) You need to prevent this from happening. One way to do that is to disable the button when the user clicks it, and re-enable it when the timeout expires and the flip completes. Recall from class that you can disable a button by setting its disabled property to true, and you can re-enable it by setting its disabled property to false.
The result of all this should be a nice coin flipping app: When you click the button, you see the question mark for 2 seconds. After two seconds, it is replaced by either heads or tails.
The file active-prizes.html is the same list of Math/CS prize recipients that you used in Lab 3, with a few changes at the beginning of the file. First, a short style section has been added that makes all <div> sections with class="prize" invisible (display: none). This is the great majority of material on the page. The only <div> that is visible is the introduction, which does not have class="prize". Second, a <select> element has been added at the top, which creates a pop-up menu that lists all the sections.
Your Assignment: Make the pop-up menu functional. That is, when the selection is changed in the menu, the corresponding section of the page should be shown. Note that you must also hide the section that was previously showing.
You should add a <script> and define a function to do the work, and you should arrange for the function to be called when the selection is changed. Note that you will have to make some additions to the <select> element. Notice that you need to keep track of which section is currently showing!
You will need to use the id's of all the sections. The ids of the ten sections are, in order: intro, binert, klein, mosey, bentsen, proctor, rippey, lee, pbk, and honors.
Without any CSS styling, the page will look pretty bad. You are welcome to apply the CSS style that you wrote for Lab 3. If you are have time, you might consider putting in a short delay between the time when the previous section disappears and the time when the new section appears.
As a final exercise, you should make a web page with a fake login screen. When the page first appears, it should look something like this:
When the user clicks Submit, you should check whether the user name and password are valid. What exactly that means is up to you, but you should make some kind of test with an if statement. If they are not valid, inform the user of that fact in some way. If they are valid, the login screen should disappear and be replaced by the content of the web page. I don't care what that content is; it could be just a headline that says, "Welcome to my page."
(Be aware, of course, that this really is a fake login, offering no real security at all, since the user can simply view the source code of your web page any time they want!)