CIS 111

Introduction to Web Programming

Project 2 –
1. Goals
This project aims to implement a rock-paper-scissors game on a web page. You will
solve the problem using only the JavaScript elements studied in lectures and labs.
This project allows you to earn up to 20 extra credit points by adding additional
functionality.
After completing this project, you will gain experience with the following:

• creating a more complex JavaScript program

• generating random numbers
• implementing conditionals
• producing formatted output to the Chrome Console
• modifying a web page using JavaScript

1.1. Reminders
Honesty: While you are encouraged to have high-level discussions with your fellow
students, you must be able to complete the details of this project on your own.
Late Policy: All projects are due by 11:59 pm of the posted deadline. Projects
uploaded after the due date/time are considered late and will not be graded.

1.2. Game Rules

In rock-paper-scissors, two players will each randomly choose one of three hand
signs: rock ( ), paper ( ), or scissors ( ). Both players show their signs simultaneously
to see who will win. Here are the rules that determine which hand sign beats another:

• Rock wins over scissors (rock smashes scissors)

• Scissors win over paper (scissors cut paper)
• Paper wins over rock (paper wraps rock)

If both players show the same sign, it is a tie or draw. And that is the whole game! It’s
often played in a best-two-out-of-three format as a quick contest to decide who gets
to go first or something like that.
In your program, the user selects a hand sign, and the computer, not knowing what
you have chosen, randomly selects its hand sign. This action is not simultaneous but is
equivalent to being blindfolded. You can find the images on Canvas->Projects-
>project-2-images.

2. Incremental Development
Incremental development means building part of a program before making it all. It is a
staging strategy in which product features are developed and delivered to users at
different times, increasing its functionality and complexity.
Complete each of the following project stages.

2.1. [20 pts] Lab 3 and 4 Products

Complete Labs 3 and 4 and upload the files required in them.

2.2. [20 pts] Buttons

You start implementing the rock-paper-scissors game by displaying three buttons with
images of the hand signs. When you click on each button, it must display your
selection on the console log. Fig. 1 shows a web page that illustrates this behavior.

Fig. 1. Behavior of the web page buttons.html after clicking the paper button.
As part of this first partial solution, you must implement the Cascade Style Sheet
required to display the buttons and their images adequately formatted.
All three button HTML elements must execute the function play included in your
JavaScript file. The function play receives the button’s name the user clicked on as an
argument. You will find the three hand-sign images on
Canvas->Files->Projects->project-2->images.
The required files in this part are 111/p2/buttons.html, 111/p2/rps.css, and
111/p2/rps-b.js.

2.3. [30 pts] Computer Plays

As a second step towards the game’s solution, you will make the computer select a
hand sign and log the results on the console. After you click a button, the program
generates a random number from 0 to 2, representing the hand sign the computer has
selected. The program logs the human and computer choices on the console and who
wins. Fig. 2 shows a web page that illustrates this behavior.

Fig. 2. Example of the behavior of the web page computer-plays.html.

Extend the function play to call the function randomSelection( ); this function
returns a string representing the hand sign name (i.e., “paper”, “rock”, or “scissors”.)
After selecting the computer’s hand sign, play must call the function
whoWins(human, computer); this function takes as arguments two strings that
represent the hand signs chosen by the human and computer, respectively, and
returns the identifier of the winner. whoWins returns “human”, “computer”, or “draw”.
whoWins must call the Boolean function beats(A, B), where A and B are selections
(i.e., “paper”, “rock”, or “scissors”.) beats(A, B), returns true if A beats B, and
false otherwise.

Modify the file buttons.html if needed and save the new version as
computer-plays.html. Extend the style file rps.css as needed. Save all the functions
in the files rps-cp.js.
The required files in this part are 111/p2/computer-plays.html, 111/p2/rps.css, and
111/p2/rps-cp.js.

2.4. [30 pts] Final Version

Even though computer-plays.html already solves the problem, it would be nice to
have a visual result produced by the web page. The last version you will create must
convert the choices made by the human and computer into their graphical versions
and display them on the web page, together with the result. Fig. 3 shows a web page
that illustrates this behavior.
 Fig. 3. Behavior of the final version of the solution to the rock-paper-scissors game.
The human player clicked on paper, and the computer selected scissors. The
computer wins.
The web page rock-paper-scissors.html must now include a placeholder for the
graphical results. This placeholder can be a table element with two rows and three
columns. The first row acts as a table header; it has three cells that must contain
“Human”, “Computer”, and “Wins”. The second row is where the results are to be
stored.
The function play of the final version must make three calls to the function
displayResult(what, where). The parameters what and where indicate the
contents of the result and the table cell where it must place it (i.e., the id of the HTML
element that the JavaScript program will modify), respectively. Create a JavaScript file
called rps.js and store these functions in it.
We identify an HTML element using an id. For instance, we identify a div as “target”
using <div id="target"></div> so that we can later search it in the whole HTML
document. document.getElementById(“target”) searches for the element
identified as “target” and returns it so that it can be used, assigned to a variable, etc.
We can modify any previously identified web page element by assigning a value to its
innerHTML property. In a single instruction:

document.getElementById(elementID).innerHTML = newContent;

where elementID is a string variable that stores the target element id, and
newContent is the variable that stores the new content for that element. Generally,
newContent is a string that represents HTML code.

Modify the file computer-plays.html as needed and save the new version as
rock-paper-scissors.html. Extend the style file rps.css as needed. Save all the
functions in the files rps.js.
The required files in this part are 111/p2/rock-paper-scissors.html, 111/p2/rps.css,
and 111/p2/rps.js.

2.5. [10 pts] Extra Credit

Extend the implementation with a scoring record that counts how many times the
human and the computer have won. Figure 4 shows how the web page must behave.
You are free to implement this option any way you want, using the JavaScript
constructs studied in class so far.
Extend the style file rps.css as needed.
The required files in this part are 111/p2/extra-credit.html, 111/p2/rps.css, and
111/p2/rps-ec.js.

Fig. 4. Extra credit – the program must keep a score of all the games played and how
many the Human and the Computer have won. A Reset button sets all counters to
zero.

2.6. Upload and Test

Remember to upload all Project 2’s files to Coding Rooms. You may copy and paste
the content of your files or upload them directly to Coding Rooms. The files to be
uploaded to Coding Rooms are:

• Products from Labs 3 and 4 (lab-3.html, lab-3.js, and lab-4.html)

• buttons.html
• rps-b.js
• computer-plays.html
• rps-cp.js
• rock-paper-scissors.html
• rps.js
• rps.css
• Optional for extra credit – extra-credit.html and rps-ec.js
 Remember:
Lab 1 session and the document on Canvas->Files->labs->lab-1->coding-
rooms.pdf briefly describe how to interact with Coding Rooms.
Do not change any variable, function, or file name. Keep them as requested in this
document. The grader is case-sensitive.
In Coding Rooms, you will find these lines or similar at the end of the JavaScript files:
// Do not edit or remove the following lines; they are required to perform the unit
tests

try {
module.exports.calculateDogAge = calculateDogAge;
module.exports.perimeter = perimeter;
module.exports.area = area;
module.exports.C2F = C2F;
module.exports.F2C = F2C;
} catch (err) {
console.log("lab-2.js functions loaded");
}

Do not remove them, or none of your programs will not pass the unit tests.