Contents

CSCI A112 / INFO I110:
Introduction to Programming with JavaScript
Spring 2007

Project Description

As your programming project for A112/I110, you will have to design and implement a slot machine using HTML and JavaScript. Your program should simulate a simplified "one-armed bandit", similar to the type seen in Las Vegas casinos or on the web. Details follow.

Examples

Some screen shots of professional examples of online themed slot machines can be found here:

• Scroll down.

Keep this project in the back of your mind as we cover the A112/I110 material! Programming is only the ability to successfully assemble all of the "little pieces" that you will learn in A112/I110, such as variables, functions, conditionals, forms, and loops.

Figure 1: Starting configuration of slot machine (when web page is first loaded).	Figure 2: After "Spin It!" button is clicked.
Figure 3: A winning combination ($10). Note highest dollar amount is taken if winning states overlap.	Figure 4: Another winning combination (obtained using the "Cheat" button).

Grading Breakdown for Project

The above table shows the breakdown for how your A112/I110 project will be graded. As you can see, the project grade is equally divided among the four criteria of design, user interface, functionality, and comments/readability. Each of these criteria is discussed further below.

Design -- General Requirements

You are required to hand in a Word document detailing your project design on Friday, April 13 (two weeks before the project is due). This document should detail (in English, mostly point form) how you will create the user interface using HTML and how you will implement the functionality of your slot machine using JavaScript.

User Interface -- General Requirements

The user interface is the HTML document that contains the pictures, buttons, text field(s), etc. to display your slot machine to the user. You should pick a theme for your user interface: this theme should be unique! Search the web for good pictures, backgrounds, etc. that go with your theme. Use fonts appropriate to your theme. In general, you can be as sophisticated or as simple as you want with your user interface, as long as you satisfy the specific requirements given below. Make your user interface as personalized as you can -- it should be a reflection of your style, like a favorite outfit.

Implementation -- General Requirements

In general, the user should be able to click a button and the slot machine should display the result of the randomized picture selection, and calculate whether the user has won any money. Specific requirements are listed below.

Comments & Readability -- General Requirements

Uniqueness is a very important component of your project, as is readability. In order to ensure your user interface is unique, choose a theme different from that of your friends. In order to ensure your JavaScript code is unique, insert comments liberally explaining what your code does (in English, in your own words). Comments in your code will also greatly help us grade your code -- since what is obvious to you may not be obvious to someone reading your code. Try to make your comments as precise and helpful as possible (without being overly verbose or incessant).

Specific Requirements

Design Document

1. The design document must be written using Microsoft Word for Windows.
2. The design document should be in English, mostly using point form. If you wish to include some JavaScript snippets to illustrate a particular feature of your design, you may do so.
3. There is a 3 page (single spaced) maximum length for the design document. Your design should also not be too cursory; you probably want to fall in the 2-3 page (single spaced) range.
4. In your design document, you should describe how you will implement the slot machine user interface and functionality. The tools you have to implement the project are HTML and JavaScript, and you should be specific about what features of these languages you will use.
5. Try as much as possible to break your solution down into modules: sub-tasks that can be easily implemented with a little HTML or a piece of JavaScript code. JavaScript functions will aid you in this, as they are designed to be stand-alone pieces of code that perform a particular simple task.
6. Be as specific and detailed as possible. For example, you may want to list actual variable names and function names, and give a description (in English) of what the variable will contain, or what the function will do. Also indicate how the pieces of your design come together to yield a working slot machine simulation.
7. Make sure you indicate the theme of your slot machine. You might also wish to draw a picture or two showing how your slot machine will look once completed. You can draw these right in Word, or you can capture screen shots of your actual user interface, if you have it completed before the design deadline.
8. On Monday, April 9 we will discuss the design document further in class. Do not wait until then to begin your design! You should come to that class with questions and a reasonable design idea already in hand.

User Interface

Figure 5: Sample user interface for slot machine.

1. The diagram above assigns labels to the various parts of the sample slot machine given in figures 1-4. Note that this slot machine only shows a suggested user interface (based on a "fruit" theme); your user interface can (and should) be quite different, as long as it functions similarly.
2. You need to use at least 10 images that can potentially show up in the display windows. For the sample shown, I used images of fruit: bananas, raspberries, blueberries, etc. In addition, you should have 2 special images: a "winning" image and a "losing" image. My "winning" image is a coin. My "losing" image says "SORRY!". Thus, you need to have a total of 10 themed images, and 2 special images (which can diverge from your theme a bit, if necessary), i.e. 12 images total.
3. Your slot machine should have at least 3 display windows.
4. You should provide a legend which tells which combinations win, and how much. In the example above, there are five winning combinations. You should also provide at least five winning combinations for the user. Hint: it is a good idea to have the payout for a winning combination depend on the current bet.
5. You should allow the user to change his/her bet. Provide a means of selecting at least two bet amounts (in the sample, these are $1 and $3, and are selected with the bet buttons). If you wish, you can have the user enter their bet amount in a text field.
6. You should provide a button that the user can click to run the slot machine simulation. In the sample, this button is labelled "Spin It!".
7. You can provide and implement a cheat button for bonus credit if you wish.
8. You should personalize your user interface as much as possible. For example, you can change the fonts, colors, borders, layout, and background to fit your theme.
9. You may wish to provide additional feedback to the user (for example, alert statements when he/she changes his bet, telling him/her what the new bet amount is). You may wish to add other user interface "bells & whistles", such as sounds or animations to your slot machine, but this is not necessary.

Implementation

1. Your slot machine simulation should pick the images to be displayed in the windows randomly from the 12 (or more) images you choose, except that the "losing" image should be as probable as all the other images combined. (One way to implement this is to pretend you have 11 copies of the losing image.) In order to choose randomly among the images, you will want to use the Math.random and Math.floor methods: there is a very good explanation of how to use these to choose a random number in a particular range on pages 377-383 of your text.
2. You can start the slot machine off with any combination of images displaying that you choose. (In the example, I started off with 3 coins displayed.)
3. Make sure you keep track of how much money the user has. You can start them off with any positive amount you desire (I used $100). This value should be displayed and updated whenever it changes during the simulation.
4. If the user has no more money, then clicking the spin simulation button should have no effect. (The cheat button should still work however, see below.)
5. Once you have selected which images to display (and displayed them), you should calculate the resulting amount of money the user now has. You should take into account whether they got a winning combination. Make sure you implement your winnings legend correctly.
6. As examples of winning combinations, see the sample in figures 1-5. You are free to change or add winning combinations as you like, although you should include some special winning combinations that involve the "winning" image you picked. (In the sample, if a coin comes up, it receives money.) Remember, you need to specify at least 5 reasonable, distinct winning combinations.
7. The "losing" image cannot be a part of any winning combination.
8. If the slot machine is displaying two winning combinations (for example, if my sample displayed a coin plus two bananas), you should assume the user won the greater payoff ($10 in the example, as opposed to $5). Don't forget to subtract the user's original bet from their winnings!
9. You should allow the user to change their bet (and the simulation should run accordingly). You can have the user enter their bet in a text field, or you can use another method (buttons, radio buttons, checkboxes, etc). In the example, there are two bet buttons, one to set the bet amount to $1 and one to set the bet amount to $3.
10. You should have as little repitition of code as possible. This means you will want to determine when to use functions, loops, and arrays. Your solution should be composed of "small solutions", which fit together to provide the whole simulation. Functions naturally implement each of these "small solutions". You should not repeat code unnecessarily -- you will want to use loops and arrays to avoid this as much as possible.
11. If you have any questions about the required functionality, make sure you ask well before the deadline!

Comments & Readability

1. This project must be your own work. You should choose your own theme and images, and design your own user interface. As a part of making your code equally unique, you should have comments in your JavaScript.
2. Precede each function you create with a brief, commented description of what that function does as well as what input it is expecting, any preconditions, and what it returns.
3. Choose meaningful names for your variables and functions. When in doubt, include comments that indicate what role the variable plays in your program.
4. Ensure your comments are in your own words and accurately describe the important features of your code. If it is not quite obvious what a chunk of code does, comment it and explain what it does. Make sure you comment your HTML where necessary as well.

Bonus Credit

You can obtain up to a 2% bonus for the course if you also implement a "cheat button" for your slot machine, as follows. When clicked, the cheat button should cycle through random selections until the first "three of a kind" winning combination is obtained (so if you are going to implement the cheat button, a precondition is that "three of a kind" is a winning combination for your slot machine). Note that you will not satisfy the bonus requirements if you simply choose a particular three of a kind combination; rather you need to cycle your simulation until it obtains three of a kind. You should then add the three of a kind bonus to the user's money, as if he/she had obtained it legally. Note that three of the "losing" image should not be accepted (even though technically it is "three of a kind"), since the losing image cannot yield any winnings.

Project Submission

1. Your project design document should be submitted as a single, separate Word document on or before midnight of Friday, April 13. This file should be named your "username_design.doc" (e.g. "crood_design.doc"), and submitted via Oncourse.
2. Your fully implemented project should occupy a single HTML file. All your JavaScript code should be in this HTML file (with the bulk of it probably being in the HEAD). Name your submission your "username_project.html" (e.g. "crood_project.html").
3. Submit your final project (the HTML file) to Oncourse on or before midnight of Friday, April 27 to receive credit for your submission.
4. You will have images that go along with your project HTML file. Upload these images and the HTML file to your Steel account so that they are publicly accessible, and ensure you use full URLs to refer to them in your project file. Get help doing this in lab, or see the Knowledge Base document: At IUB, how can I put personal pages on the web?.
5. Email the URL to the version you've put on the web to your lab instructor.

Good luck! Make sure you have some fun with this project -- it is meant to introduce you to some of the neat effects you can create with HTML forms and the JavaScript programming language. If you can build a project like this from the ground up, you're a programming force to be reckoned with!