CSc 055: Assignments
Assignment 1 Assignment 2 Assignment 3 Assignment 4
Assignment 5 Assignment 6 Assignment 7 Assignment 8

Assignment 7
Due Mon, Nov 1

Objectives

  • to further practice with form elements
  • to further practice with properties to control web elements
  • to practice with eval
  • to practice with the IF statement for making choices

Details

Can you beat the computer at "Rock, Paper, Scissors"? You'll find out because in this assignment, you will create a web page that allows a person to play this game against the computer. The person should be able to play as many times as he/she wants and your web page should count and display a running total of ties, computer wins and player wins. The page layout will be similar to the picture below. It should have an internal style sheet, a heading, and an image.

The bulk of the page is a form with these elements:

  • Three regular buttons labeled "Rock", "Paper", and "Scissors". Pressing one of these buttons puts the corresponding word into the text field right below it.
  • a text field for the player's choice. The player will make a choice by pressing one of the three buttons above, and JS will put the appropriate word into this field.
  • a "Click to Play" button that the user will press to indicate that she has made her choice and is ready to play
  • a text box to show the computer's choice
  • a text box to show the winner
  • a text box to show the rule used to decide the winner
  • text boxes to show the number of ties, computer wins and player wins. These boxes should have 0 in them by default.
  • a reset button that will reset all fields to their default values

Use a two-column table to organize the form elements. The labels should be in one column and the form elements in the other. Notice how the "Click to Play" and "Start Over" buttons span both columns and take up the entire width of the table. Yours should too.

Here are the rules of the game in case you need a refresher:

  • Rock wins over scissors because rock crushes scissors
  • Paper wins over rock because paper covers rock
  • Scissors win over paper because scissors cut paper
  • Matching choices result in a tie.

Thus, the player is expected to press one of the choice buttons, press the "Click to Play" button, press another choice button, press "Click to Play", and repeat this process as long as she likes. The rest of the fields will show the winner of the current round and a running total of wins. The picture below shows the state of the game after many rounds of play.

Recommended Approach

There's a lot to do for this assignment, so start early. Take it in steps. Place all of your Javascript functions inside your HTML file. And remember your two best friends when it comes to Javascript: the error console in Firefox and alert boxes that you can use at any point in your code to display the contents of a variable. Here's the approach I recommend.

  1. Create the HTML and CSS code for the page. Don't forget to give the form and each form element a unique name. Make sure the defaults are like in the first picture above, and be sure the reset button works.
  2. Write a function named decisionForComputer that makes a random choice for the computer and displays the choice in the correct text box. How? There is a built-in function called Math.random() to generate a random number between 0 and 1. So you could place a random number into a variable with a line like the following:

    choice = Math.random();

    After the above line executes, a random number will be assigned to the variable "choice". If the number in "choice" is less than 1/3, this means the computer chose rock; if it's between 1/3 and 2/3, the computer chose paper; otherwise the computer chose scissors. Depending on what was chosen, place the appropriate text into the text field for the computer's choice. Call this function when the user clicks the "Click to Play" button. Debug until it works.
  3. Create a second function named playGame. This function will be called after decisionForComputer finishes (so your "Click to Play" button will call 2 functions in a row). This function will take the player's input from the Player Choice text box, the computer's choice from the Computer Choice text box, and decide who won the round. It will then update the rest of the fields accordingly. Here's the logic I would use:

    If the player left the Player Choice field blank (by forgetting to press one of the choice buttons first):
    tell user (with an alert) to press either the "Rock", "Paper", or "Scissors" button first
    else if there's a tie
    update the Winner, Rule and # Ties text boxes
    else figure out who the winner is and update the appropriate text boxes

Name this page "index.html" and publish it to your "hw7" folder. Don't forget to update your Assignments Directory from Assignment 4 with a new link. Test on IE and Firefox. And, as always, don't forget your DTD, comments, and meta tags for both keywords and a description.

What to Turn In

Please turn in printouts of all XHTML, CSS, and JS code.

Gentle reminder...

All assignments are individual projects. I encourage you to talk to others about the general nature of the project and ideas about how to pursue it. However, the technical work, the writing, and the inspiration behind these must be substantially your own. If any person besides you contributes in any way to the project, you must credit their work on your assignment. Similarly, if you include information that you have gleaned from other published sources, you must cite them as references. Looking at, and/or copying, other people's written work is inappropriate, and will be considered cheating.