Rewrite "rock paper scissors" project

foundations/javascript_basics/project_rock_paper_scissors.md

@@ -1,42 +1,58 @@
 ### Introduction
 
-We're going to make a simple implementation of grade-school classic "rock paper scissors". If you don't know what that is check the [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or [this](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) detailed step-by-step. For the moment we're just going to play the game from the browser console, but __we will revisit this project in a later lesson and add a Graphical User Interface with buttons and text,__ so don't forget to keep the code on GitHub! You might notice some 'Live Preview' links in the student solutions that have a GUI - this is coming in a later lesson. When you get there don't forget to come back and add your link!
+For this project, you'll create the grade-school game: **Rock Paper Scissors** which will be played entirely in the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article about the rock paper scissors game](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide about rock paper scissors.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors)
 
-### Quick exercises before starting
-
-1.  Identify three ways to include JavaScript in a page.
-2.  Test it out! Write `console.log("Hello World");` in JavaScript and check to see if it displays in the browser's console.
+<div class="lesson-note">
+<h4>Student solutions</h4>
+Some students' solutions below include buttons, text, and other elements. Those elements form what is known as a Graphical User Interface (GUI). You'll add those elements, the GUI, in a later lesson. So remember to push your code to GitHub.
+</div>
 
-Finally, this is your first JavaScript program built from scratch, so don't forget the previous lesson on problem solving. Plan your solution out before writing any code, and test each piece as you build to ensure it is working before moving on to the next!
+### Quick exercise before starting
 
-### Assignment
+1. Identify three ways to include JavaScript in a page.
+2. Check if the page includes JavaScript:
+   - Write `console.log("Hello World");` in JavaScript.
+   - Check if "Hello World" is logged in the browser console once you open your webpage.
 
-<div class="lesson-content__panel" markdown="1">
-Don't forget to commit early & often! You can [reference the Commit Message lesson here](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages)!
+### Problem solving approach
 
-1.  Start a new Git repo for your project.
-2.  Create a blank HTML document with a script tag (Hint: it is best practice to link an external .js file).  This game is going to be played completely from the console, so don't worry about putting anything else in there.
-3.  Your game is going to play against the computer, so begin with a function called `getComputerChoice` that will randomly return either 'Rock', 'Paper' or 'Scissors'.  We'll use this function in the game to make the computer's play. *Tip: use the console to make sure this is returning the expected output before moving to the next step!*
-4.  Write a function that plays a single round of Rock Paper Scissors.  The function should take two parameters - the `playerSelection` and `computerSelection` - and then return a string that declares the winner of the round like so: `"You Lose! Paper beats Rock"`
-    *   Make your function's playerSelection parameter case-insensitive (so users can input `rock`, `ROCK`, `RocK` or any other variation).
+Since this is your first JavaScript program built from scratch, remember the [previous wise words from the problem-solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving). Before diving into this project, first plan or pseudocode your solution, then write the code, then ensure the code works.
 
-5.  **Important note:** you want to `return` the results of this function call, _not_ `console.log()` them. You're going to use what you `return` later on, so let's test this function by using console.log to see the results:
+### Assignment
 
-    ~~~javascript
-    function playRound(playerSelection, computerSelection) {
-      // your code here!
-    }
+<div class="lesson-content__panel" markdown="1">
+Remember to commit early and often! To refresh your memory, check the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages).
+
+1. Create a new Git repository for your project.
+1. Create a blank HTML document with a script tag.
+   - It is best practice to link to an external JavaScript file inside this script tag. You play this game entirely on the console, so don't worry about writing anything else in the HTML file for this project.
+1. Your game plays against the computer. Create a function `getComputerChoice` that will randomly `return` either 'Rock', 'Paper' or 'Scissors'.
+   - Create a new function `getComputerChoice`.
+   - Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors".
+   - Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before you move on to the next step.
+1. Your game plays turn by turn. Write a function named `playRound`, which takes the `playerSelection` and `computerSelection` to play a single round, and returns a winner announcement. 
+   - Create a new function called `playRound`.
+   - Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to pass the human and computer choices as arguments.
+   - Make your function's `playerSelection` parameter case-insensitive (so users can input "rock", "ROCK", "RocK" or any other variation).
+   - Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock".
+   - example code:
+
+   ~~~javascript
+   function playRound(playerSelection, computerSelection) {
+   // your code here!
+   }
 
-    const playerSelection = "rock";
-    const computerSelection = getComputerChoice();
-    console.log(playRound(playerSelection, computerSelection));
-    ~~~
-
-6.  Write a NEW function called `game()`. Use the previous function _inside_ of this one to play a 5 round game that keeps score and reports a winner or loser at the end.
-    *   You have not officially learned how to "loop" over code to repeat function calls... if you already know about loops from somewhere else (or if you feel like doing some more learning) feel free to use them. If not, don't worry! Just call your `playRound` function 5 times in a row. Loops are covered in the next lesson.
-    *   At this point you should be using `console.log()` to display the results of each round and the winner at the end.
-    *   Use `prompt()` to get input from the user. [Read the docs here if you need to.](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
-    *   Feel free to re-work your previous functions if you need to. Specifically, you might want to change the return value to something more useful.
-    *   Feel free to create more "helper" functions if you think it would be useful.
+   const playerSelection = "rock";
+   const computerSelection = getComputerChoice();
+   console.log(playRound(playerSelection, computerSelection));
+   ~~~
+
+1. Your game plays for 5 rounds. Write a function called `game` which will keep score for 5 rounds, utilizing your 'playRound' function, before it declares a winner:
+   - Create a new function called `game`.
+   - Get the human player choice using the `prompt` method. Read [this MDN article about prompts](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) if you need to learn more about it.  
+   - Put the previous `playRound` function inside `game`.
+   - Play 5 rounds by calling `playRound` 5 times.
+   - Re-work your previous functions or create more helper functions if you feel the need to. Specifically, you might want to change the return values to something more useful.
+   - If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson. 
 
 </div>