#Project 2 - Rock, Paper, Scissors
##Scope
This project will introduce the student to simple one page javascript app to play Rock-Paper-Scissors. They will be introduced to the idea of libraries and the use the use the JQuery library to manage events. The students should have previous experience with events and event handlers. Furthermore they will be introduced to Random numbers and how they are simulated in computers. After they have completed the simple game, they can be asked to complete a more complex variant, Rock-Paper-Scissors-Lizard-Spock.
#Before Class
The teacher should become familar with the following topics.
- Javascript Events
- The JQuery Documentation and how to nagivate it, especially the documentation about events
- Javascript Libraries and how they should be loaded into a page
- Random and PseudoRandom numbers, ie the what makes a number "random"
##Vocabulary
- Library
- JQuery
- Random
- PseudoRandom
##References
- Javascript Library
- Script Tag
- How Jquery Works
- JQuery Events
- PseudoRandom
- Math.random
- Rock-Paper-Scissors-Lizard-Spock
##Industry Skills This project improves the student's industry skills in the following way. For a description of each skill please refer to the Year 2 Rubric.
Technical Vocabulary:
While completing this project the student will learn about how to simulate random numbers in javascript. She will also learn to apply the JQuery library to bind user actions to behavior in an application. She will also have the opportunity to modify the initial app to add features as new requirements are revealed.
Paired Programming:
...
Version Control:
The student will be asked to create an initial version of RPS. After they have committed that version and confirmed that it works, they can begin to modifying it to create the more complicated RPSLS version.
Code Review:
While completing this project, the student will have the opportunity to provide feed back to their peers and in turn recive feedback from others about the design and code choices they have made.
Search Engine Skills:
While completing this project the student will have to use and augment their search engine skills to find how to use JQuery. They will probably also have to search for usages of Math.random
Command Line:
...
Debugging
While completing this project the student will have the opportunity to use a debugger to step over their code to see the logic of the program that they're writing.
##Web Programming Skills This project improves the student's web programming skills in the following way. For a description of each skill please refer to the Year 2 Rubric.
Forms:
While completing this project the student will be exposed to the form elements like Button and Submit that they can bind events onto.
Templating:
While completing this project the student will be able to use simple templates to generate messages to their users.
##Year One Review This project will improve upon the following skills from the Year 1 Rubric.:
| HTML/CSS | JavaScript | Work Readiness |
|---|---|---|
| Structure | Variables | Debugging |
| Content | Types | Team Work |
| Styling | Boolean | |
| Wireframing | Loops |
| Arrays |
| Events |
| Functions |
#During Class
##Do Now As the students walk into class they are asked to write out the rules for Rock Paper Scissors. If they don't know the game, they should be given a link to the Wikipedia Page.
They should draw a 3 column chart like so and fill in the winner:
| Player1 | Player2 | Winner |
|---|---|---|
| Rock | Rock | |
| Rock | Paper | |
| Rock | Scissors | |
| Paper | Rock | |
| Paper | Paper | |
| Paper | Scissors | |
| Scissors | Rock | |
| Scissors | Paper | |
| Scissors | Scissors |
##Opening
We're going to build an entire game inside a webpage where you play against the computer. Then we're going to change how the computer plays the game so that we can win.
##Lecture Before students begin work on this project they must be introduced to the following concepts. The lecturer may decide the best way to deliver these topics.
- Javascript Libraries
- How to load libraries
- Random and PseudoRandom numbers
- How to simulate a fair dice roll.
- How to simulate an unfair dice roll.
##Project Creation Time
The students will be given a skeleton project with no assets and only scaffold code. They will have to copy the files from the gihub project. They teachers can demonstrate how to do it.
Once they have the skeleton, they will have to fill in the logic of the game for the ai portion and also logic to determine the winner. They will be given image assets that they can use to flesh out the game. After the teacher confirms that the game is working, they will be asked to make the AI paritial to one of the 3 choices by varying the distribution of the random number picker.
If there is time, they can move onto the Lizard Spock variant with 5 choices.
##Closing
They day can be wrapped up by having a RPS competition with the students and their apps entered into a Bracket, with each competition being a best of 3 between a student and another student's appliaction.
##Check for Understanding
Ask students how they would use double click instead of single click to signal their choice.
Ask students how they would modify the AI to pick Rock 1% of the time and the other choices equally.
##How to Submit The teacher must ask students to share the link to their project on your school's Project Submission Form.
##Homework A possible homework is for the Lizard Spock variant with 5 choices.
- RPS: https://www.flickr.com/photos/ifmomsaysok/4262635874
- RPSLS: https://www.flickr.com/photos/elsantuario/6448112917
- Scissors: https://www.flickr.com/photos/arriabelli/2500283558
- Paper: https://www.flickr.com/photos/calliope/3468811439
- Rock: https://www.flickr.com/photos/kansasphoto/6157668054
- Lizard: https://www.flickr.com/photos/mdalmuld/14431710441
- Spock: https://www.flickr.com/photos/israel-avila/3676210312