Coin Flipping

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.

Step 3: Use a timeout. So far, the user interface is lacking in one way: About half the time, nothing seems to happen when you click the button, since the new image is the same as the old image. To fix this, write a new function called startFlip, and have the button call startFlip instead of flip. The startFlip function should change the image source to coins/no-coin.png, and it should change the message to something like "The coin is spinning...". Now, you have to arrange for the flip to complete. This is a natural use for a timeout. A timeout in JavaScript allows you to set an alarm to go off after some specified amount of time, and it lets you specify a function that will be run when the alarm goes off. To set a timeout, you use the setTimeout() function, which is already built into JavaScript. In this case, just add the following command to the end of your startFlip() function:

    setTimeout( flip, 2000 );

The second parameter says that the alarm will go off after 2000 milliseconds. One millisecond is 1/1000 of a second, so 2000 milliseconds is 2 seconds. The first parameter is the name of the function that will be called when the alarm goes off. Note particularly that you use the name of the function, without parentheses. Including parentheses after the name would call the function. You don't want to call the flip function here, just tell JavaScript to call it later.

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.

Prizes Again

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.

Fake Login

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!)