Name: _________________________________________



CS 131       Spring 2004

Lab 7: Interactive Pages


Up to this point, you have learned the basics of JavaScript programming and Web page design. Most recently, Lesson 7 and Lesson 9 introduced the event-driven programming model, using text boxes, buttons, and images to interact with and react to the user. In this lab, you will apply your programming and Web skills to designing and implementing an interactive Web page for playing slots.

Slot machine

A rapidly growing sector of electronic commerce is in the area of online gambling. Since the Internet crosses international borders, online casinos are often able to circumvent federal gambling laws and provide unregulated gambling through the Internet. Whether for real money or just for entertainment, a multitude of online gambling sites are accessible via the Web.

For this lab, you will implement an online slots game. If you are not familiar with the game, a slot machine contains three windows or slots in which an image is shown. To play the game, the player inserts a coin and pulls on a handle, causing the images in the slots to be randomized (usually by spinning the wheels on which the images are printed). If the three resulting images in the slots are identical, say three lemons, then the player wins and receives some payoff.

For example,

The following HTML document (also accessible as www.dickinson.edu/~cs131/Labs/slots.html) is a start on developing a Web page for simulating a slot machine.

<HTML> <!-- CS 131 slots.html 8/21/2000 --> <!-- This page simulates a slot machine. --> <!-------------------------------------------------------> <HEAD> <TITLE> Online Slots </TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="http://www.dickinson.edu/~cs131/random.js"> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function DoSpin() // Assumes: the page contains an image (slot1) // Results: displays a random spin as the slot1 image { var wheelOne; wheelOne = randomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]); document.images.slot1.src= "http://www.dickinson.edu/~cs131/Images/" + wheelOne; } </SCRIPT> </HEAD> <BODY> <CENTER> <IMG NAME="slot1" BORDER=1 SRC="http://www.dickinson.edu/~cs131/Images/cherry.jpg"> <BR><BR> <FORM NAME="SlotForm"> <INPUT TYPE="button" VALUE="Click to Spin" ONCLICK="DoSpin();"> </FORM> </CENTER> </BODY> </HTML>


EXERCISE 1:    Cut-and-paste the slots.html text into a new HTML document. Load this page and describe its behavior. What is the initial image displayed on the screen? What other images are obtainable?



The IMG tag on this page has an attribute that we have not encountered before "BORDER=1". What is the purpose of this attribute? What if the number 1 is changed, say to 2 or 3?




EXERCISE 2:    Most slot machines have 3 slots, all yielding random images on each spin. To simulate this, add two more slots images to your slots.html page, next to the current one. When the user clicks on the button, all three slots images should be randomly selected and displayed on the page.

Note: You will not be asked to include code for each individual exercise in this lab. Instead, you will only include the final HTML page after completing all exercises. However, you should still be sure to answer any questions that are posed in each exercise.


EXERCISE 3:    In a slot machine, the player wins if all three slots come out the same. While most slot machines differentiate between different matches (paying out more for matching bars as opposed to matching lemons, for example), we will not make this distinction. Any combination of three identical slots will be considered a winner. Add an if statement to DoSpin so that it checks for a slots winner. If the three slots are identical (i.e., the images have been assigned the same source file), then an alert box should display the message "A WINNER!".



Maintaining values on the page

The slots.html page that you have developed so far is sufficient for simulating the behavior of a slot machine. What it does not capture, however, is the monetary angle. Slot machines are used for gambling: players must pay to spin, and likewise win money if their spin turns up a winner. Using text boxes in the page, it is possible to keep track of the player's winnings and losses as they play the game.


EXERCISE 4:    Add a text box to your slots.html page, below the button, that will keep track of the player's bankroll. Be sure to label this text box so the player knows what it is. The text box should have an initial value of 20, representing the fact that the player starts out with $20 in their bankroll. Each spin of the wheel should cost the player $1 (resulting in the bankroll being decremented by 1). In the case of a winner, however, the player wins $13 (resulting in the bankroll being increased by 13).



As we have seen, text boxes can be used for both input and output. The user can enter values directly into a text box, and computed values can be displayed in a text box via a JavaScript assignment. There are times, however, when you would like to use a text box for output only, forbidding the user from entering values directly. For example, the bankroll text box in your slots.html page is updated by the DoSpin function on each spin. The player does not need to enter anything into the box, and indeed allowing them to alter the contents of the box is tantamount to theft.

It is possible to forbid user input into a text box using the ONFOCUS event. Closely related to the ONCHANGE event, the ONFOCUS event specifies what is to occur when the user directs their focus on the box (usually by clicking the mouse in it). To disable input in a text box, the predefined JavaScript function blur can be called to immediately remove the focus from that box:   ONFOCUS="blur();" For example:

<INPUT TYPE="text" NAME="myBox" SIZE=10 ONFOCUS="blur();">


EXERCISE 5:    Add an ONFOCUS event handler to the bankroll text box to immediately remove focus, and thus keep the player from changing the bankroll directly. Load your page and verify that it behaves as desired.



EXERCISE 6:    As is, your page does not recognize when a player has run out of money. It is possible for the user to play your slots game even after their bankroll becomes zero, and the bankroll can become negative as a result. Any smart casino owner would put a stop to this immediately. Add code to DoSpin that disallows a spin if the player's bankroll has reached $0. If the player's bankroll is $0, then an alert box should display a message stating that the spin was disallowed. Otherwise, the function should simulate the spin and update the bankroll as before.




EXERCISE 7:    While a smart casino owner knows better than to allow negative bankrolls, most casinos are not above extending personal loans to gamblers who are down on their luck. Augment your slots.html page so that it has capabilities for extending loans to the player when they run out of money.

You should add a new button and a new text field to your page. The button should allow a player to request a loan. Add a new function named RequestLoan that is called when this button is clicked. Your RequestLoan function should prompt (e.g. promptInt) the player for how much of a loan he or she would like. The function should use the text field to keep track of the player's total debt (i.e. the total of all loans that have been taken, initially $0.) When a player requests a loan, the function should add the amount of the loan to the player's bankroll and also to the player's debt. Note your page should not allow a player to directly change the contents of the debt field.




EXERCISE 8:    Of course, casinos realize that unlucky players are the most likey to take excessively large loans. Further, they know that players tend not to be able to pay back excessively large loans. To prevent this situation from occuring (and to save the need to hire goons to break players' legs), the casinos will usually limit the amount that they will loan to a player. Modify the behavior of your RequestLoan function, so that a player can never have more than $1000 in debt. If a player requests a loan that would take him or her over the $1000 limit, that loan should be denied. When a loan is denied the function should notify the player via an alert.



EXERCISE 9:    If a player gets lucky and starts to win after taking a loan, he or she should be able to use some of the winnings to pay off any debt. Add a button to your page that allows a player to pay off all or part of a debt. When clicked, this button should call a new function named PayOnLoan that prompts the user for the amount to pay on the debt. The function should deduct the amount to be paid from the player's bankroll and credit it to the debt. Note: Your function should also make sure that the player is not permitted to pay more on the debt than is in the bankroll. If a player requests to pay more than is in the bankroll, an alert should inform the player that they can not pay that much. Then their whole bankroll should be credited against the debt.



Include the source of your final slots.html page after you have completed all of the exercises.