diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 5d0e3240add..8f6ce9f070d 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -2015,7 +2015,12 @@
"ctwj": { "title": "195", "intro": [] },
"fmbk": { "title": "196", "intro": [] },
"nlbo": { "title": "197", "intro": [] },
- "bbyq": { "title": "198", "intro": [] },
+ "workshop-rps-game": {
+ "title": "Build a Rock, Paper, Scissors Game",
+ "intro": [
+ "In this workshop, you will review DOM manipulation and events by building a Rock, Paper, Scissors Game."
+ ]
+ },
"uglc": { "title": "199", "intro": [] },
"vonu": { "title": "200", "intro": [] },
"iejn": { "title": "201", "intro": [] },
diff --git a/client/src/pages/learn/front-end-development/workshop-rps-game/index.md b/client/src/pages/learn/front-end-development/workshop-rps-game/index.md
new file mode 100644
index 00000000000..a311dc1bf64
--- /dev/null
+++ b/client/src/pages/learn/front-end-development/workshop-rps-game/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Rock, Paper, Scissors Game
+block: workshop-rps-game
+superBlock: front-end-development
+---
+
+## Introduction to the Build a Rock, Paper, Scissors Game
+
+This is a test for the new project-based curriculum.
diff --git a/curriculum/challenges/_meta/workshop-rps-game/meta.json b/curriculum/challenges/_meta/workshop-rps-game/meta.json
new file mode 100644
index 00000000000..c00a5f98f0e
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-rps-game/meta.json
@@ -0,0 +1,69 @@
+{
+ "name": "Build a Rock, Paper, Scissors Game",
+ "blockType": "workshop",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "workshop-rps-game",
+ "order": 198,
+ "superBlock": "front-end-development",
+ "challengeOrder": [
+ {
+ "id": "66d8fade439d513e5f77c906",
+ "title": "Step 1"
+ },
+ {
+ "id": "66d05da61ff145d7a46fe41b",
+ "title": "Step 2"
+ },
+ {
+ "id": "66cf13fe7619e9a1d57c7b5e",
+ "title": "Step 3"
+ },
+ {
+ "id": "66cf315cff4d36b27da828ba",
+ "title": "Step 4"
+ },
+ {
+ "id": "66d064c7d79408da050f8b2f",
+ "title": "Step 5"
+ },
+ {
+ "id": "66cf33305293e1b35c1aef7f",
+ "title": "Step 6"
+ },
+ {
+ "id": "66d068348ca093db469b4d59",
+ "title": "Step 7"
+ },
+ {
+ "id": "66cf34fcb005e7b447141afd",
+ "title": "Step 8"
+ },
+ {
+ "id": "66d0746099f6f3de3678fd26",
+ "title": "Step 9"
+ },
+ {
+ "id": "66d076040c7d1cdf36525af9",
+ "title": "Step 10"
+ },
+ {
+ "id": "66d081d79b1d57e1b42caabf",
+ "title": "Step 11"
+ },
+ {
+ "id": "66cf35a75f891ab4f4e5497b",
+ "title": "Step 12"
+ },
+ {
+ "id": "66d085d37aeffce2ef786de3",
+ "title": "Step 13"
+ },
+ {
+ "id": "66cf3639aca119b5c00b02d3",
+ "title": "Step 14"
+ }
+ ],
+ "helpCategory": "JavaScript"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf13fe7619e9a1d57c7b5e.md b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf13fe7619e9a1d57c7b5e.md
new file mode 100644
index 00000000000..ec8a6e2d1ea
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf13fe7619e9a1d57c7b5e.md
@@ -0,0 +1,204 @@
+---
+id: 66cf13fe7619e9a1d57c7b5e
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The next step is to build out the functionality that will generate a random choice for the computer.
+
+Create a function called `getRandomComputerResult` that returns a random choice from the `options` array.
+
+*Hint*: Don't forget that in the earlier JavaScript fundamentals section, you learned about using `Math.random()` and `Math.floor()`.
+
+# --hints--
+
+Your `getRandomComputerResult` function should return a string.
+
+```js
+assert.isString(getRandomComputerResult());
+```
+
+Your `getRandomComputerResult` function should return one of the options in the `options` array.
+
+```js
+assert.include(["Rock", "Paper", "Scissors"], getRandomComputerResult());
+```
+
+Your `getRandomComputerResult` function should return a random option each time.
+
+```js
+const results = new Set();
+
+for (let i = 0; i < 50; i++) {
+ results.add(getRandomComputerResult());
+}
+
+assert.hasAllKeys(results, ["Rock", "Paper", "Scissors"]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Rock, Paper, Scissors game
+
+
+
+
Let's play Rock, Paper, Scissors!
+
+
+ Rules to the game
+
+
You will be playing against the computer.
+
You can choose between Rock, Paper, and Scissors.
+
The first one to three points wins.
+
+
Here are the rules to getting a point in the game:
+
+
Rock beats Scissors
+
Scissors beats Paper
+
Paper beats Rock
+
+
+ If the player and computer choose the same option (Ex. Paper and
+ Paper), then no one gets the point.
+
+
+
+
+ Player Score: 0
+ Computer Score:
+ 0
+
+
+
+
Choose an option:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --very-dark-blue: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+}
+
+body {
+ background-color: var(--very-dark-blue);
+ text-align: center;
+ color: var(--white);
+}
+
+h1 {
+ margin: 15px 0 20px;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--very-dark-blue);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+.rules-container {
+ padding: 10px 0;
+ margin: auto;
+ border-radius: 15px;
+ border: 5px solid var(--yellow);
+ background-color: var(--white);
+ color: var(--very-dark-blue);
+}
+
+.rules-container ul {
+ list-style-type: none;
+}
+
+.rules-container p {
+ margin: 10px 0;
+}
+
+@media (min-width: 760px) {
+ .rules-container {
+ width: 60%;
+ }
+}
+
+.score-container {
+ display: flex;
+ justify-content: space-around;
+ margin: 30px 0;
+ font-size: 1.2rem;
+}
+
+.score {
+ font-weight: 500;
+}
+
+.results-container {
+ font-size: 1.3rem;
+ margin: 15px 0;
+}
+
+#winner-msg {
+ margin-top: 25px;
+}
+
+#reset-game-btn {
+ display: none;
+ margin: 20px auto;
+}
+
+```
+
+```js
+--fcc-editable-region--
+const options = ["Rock", "Paper", "Scissors"];
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf315cff4d36b27da828ba.md b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf315cff4d36b27da828ba.md
new file mode 100644
index 00000000000..f48209d2c4f
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf315cff4d36b27da828ba.md
@@ -0,0 +1,244 @@
+---
+id: 66cf315cff4d36b27da828ba
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+In this step, you will focus on determining if the player has won the round.
+
+Create a `hasPlayerWonTheRound` function with two parameters called `player` and `computer`.
+
+The function should return `true` if the player has won the round, and `false` if the player has lost or tied the round.
+
+Here are the criteria for the player to win a round:
+
+- If the player chooses `"Rock"` and the computer chooses `"Scissors"`
+- If the player chooses `"Scissors"` and the computer chooses `"Paper"`
+- If the player chooses `"Paper"` and the computer chooses `"Rock"`
+
+# --hints--
+
+You should have a function called `hasPlayerWonTheRound`.
+
+```js
+assert.isFunction(hasPlayerWonTheRound);
+```
+
+Your function should have two parameters called `player` and `computer`.
+
+```js
+assert.match(code, /hasPlayerWonTheRound\s*(?:=\s*)?\(\s*player\s*,\s*computer\s*\)\s*/);
+```
+
+Your `hasPlayerWonTheRound` function should return a boolean.
+
+```js
+assert.isBoolean(hasPlayerWonTheRound("Rock", "Scissors"));
+```
+
+Your `hasPlayerWonTheRound` function should return `true` if the player chose `"Rock"` and the computer chose `"Scissors"`.
+
+```js
+assert.isTrue(hasPlayerWonTheRound("Rock", "Scissors"));
+```
+
+Your `hasPlayerWonTheRound` function should return `true` if the player chose `"Scissors"` and the computer chose `"Paper"`.
+
+```js
+assert.isTrue(hasPlayerWonTheRound("Scissors", "Paper"));
+```
+
+Your `hasPlayerWonTheRound` function should return `true` if the player chose `"Paper"` and the computer chose `"Rock"`.
+
+```js
+assert.isTrue(hasPlayerWonTheRound("Paper", "Rock"));
+```
+
+Your `hasPlayerWonTheRound` function should return `false` if the player and computer chose the same option.
+
+```js
+assert.isFalse(hasPlayerWonTheRound("Rock", "Rock"));
+assert.isFalse(hasPlayerWonTheRound("Scissors", "Scissors"));
+assert.isFalse(hasPlayerWonTheRound("Paper", "Paper"));
+```
+
+Your `hasPlayerWonTheRound` function should return `false` if the computer won the round.
+
+```js
+assert.isFalse(hasPlayerWonTheRound("Scissors", "Rock"));
+assert.isFalse(hasPlayerWonTheRound("Paper", "Scissors"));
+assert.isFalse(hasPlayerWonTheRound("Rock", "Paper"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Rock, Paper, Scissors game
+
+
+
+
Let's play Rock, Paper, Scissors!
+
+
+ Rules to the game
+
+
You will be playing against the computer.
+
You can choose between Rock, Paper, and Scissors.
+
The first one to three points wins.
+
+
Here are the rules to getting a point in the game:
+
+
Rock beats Scissors
+
Scissors beats Paper
+
Paper beats Rock
+
+
+ If the player and computer choose the same option (Ex. Paper and
+ Paper), then no one gets the point.
+
+
+
+
+ Player Score: 0
+ Computer Score:
+ 0
+
+
+
+
Choose an option:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --very-dark-blue: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+}
+
+body {
+ background-color: var(--very-dark-blue);
+ text-align: center;
+ color: var(--white);
+}
+
+h1 {
+ margin: 15px 0 20px;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--very-dark-blue);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+.rules-container {
+ padding: 10px 0;
+ margin: auto;
+ border-radius: 15px;
+ border: 5px solid var(--yellow);
+ background-color: var(--white);
+ color: var(--very-dark-blue);
+}
+
+.rules-container ul {
+ list-style-type: none;
+}
+
+.rules-container p {
+ margin: 10px 0;
+}
+
+@media (min-width: 760px) {
+ .rules-container {
+ width: 60%;
+ }
+}
+
+.score-container {
+ display: flex;
+ justify-content: space-around;
+ margin: 30px 0;
+ font-size: 1.2rem;
+}
+
+.score {
+ font-weight: 500;
+}
+
+.results-container {
+ font-size: 1.3rem;
+ margin: 15px 0;
+}
+
+#winner-msg {
+ margin-top: 25px;
+}
+
+#reset-game-btn {
+ display: none;
+ margin: 20px auto;
+}
+
+```
+
+```js
+const options = ["Rock", "Paper", "Scissors"];
+
+function getRandomComputerResult() {
+ const randomIndex = Math.floor(Math.random() * options.length);
+ return options[randomIndex];
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
new file mode 100644
index 00000000000..1c7be5dd7d8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
@@ -0,0 +1,225 @@
+---
+id: 66cf33305293e1b35c1aef7f
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now it’s time to get the results of the round. Complete the `getRoundResults` function.
+
+If the player wins the round, update the `playerScore` by `1` and return the message `"Player wins! [player's choice] beats [computer's choice]"`.
+
+If the computer and player choose the same option, return the message `"It's a tie! Both chose [player's choice]"`.
+
+If the computer wins the round, update the `computerScore` by `1` and return the message `"Computer wins! [computer's choice] beats [player's choice]"`.
+
+`[computer's choice]` should be replaced with `computerResult` while `[player's choice]` should be replaced with the `userOption`.
+
+# --hints--
+
+Your `getRoundResults` should return a string.
+
+```js
+assert.isString(getRoundResults("Rock"));
+```
+
+Your `getRoundResults` function should return the correct message based on who wins the round. If no one wins, the message should say it's a tie.
+
+```js
+const result = getRoundResults("Paper")
+if(result.startsWith("Player wins!")){
+ assert.strictEqual(result, "Player wins! Paper beats Rock")
+ assert.isAtLeast(playerScore, 1)
+} else if(result.startsWith("Computer wins!")) {
+ assert.strictEqual(result, "Computer wins! Scissors beats Paper")
+ assert.isAtLeast(computerScore, 1)
+} else if(result.startsWith("It's a tie!")){
+ assert.strictEqual(result, "It's a tie! Both chose Paper")
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Rock, Paper, Scissors game
+
+
+
+
Let's play Rock, Paper, Scissors!
+
+
+ Rules to the game
+
+
You will be playing against the computer.
+
You can choose between Rock, Paper, and Scissors.
+
The first one to three points wins.
+
+
Here are the rules to getting a point in the game:
+
+
Rock beats Scissors
+
Scissors beats Paper
+
Paper beats Rock
+
+
+ If the player and computer choose the same option (Ex. Paper and
+ Paper), then no one gets the point.
+
+
+
+
+ Player Score: 0
+ Computer Score:
+ 0
+
+
+
+
Choose an option:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --very-dark-blue: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+}
+
+body {
+ background-color: var(--very-dark-blue);
+ text-align: center;
+ color: var(--white);
+}
+
+h1 {
+ margin: 15px 0 20px;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--very-dark-blue);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+.rules-container {
+ padding: 10px 0;
+ margin: auto;
+ border-radius: 15px;
+ border: 5px solid var(--yellow);
+ background-color: var(--white);
+ color: var(--very-dark-blue);
+}
+
+.rules-container ul {
+ list-style-type: none;
+}
+
+.rules-container p {
+ margin: 10px 0;
+}
+
+@media (min-width: 760px) {
+ .rules-container {
+ width: 60%;
+ }
+}
+
+.score-container {
+ display: flex;
+ justify-content: space-around;
+ margin: 30px 0;
+ font-size: 1.2rem;
+}
+
+.score {
+ font-weight: 500;
+}
+
+.results-container {
+ font-size: 1.3rem;
+ margin: 15px 0;
+}
+
+#winner-msg {
+ margin-top: 25px;
+}
+
+#reset-game-btn {
+ display: none;
+ margin: 20px auto;
+}
+
+```
+
+```js
+const options = ["Rock", "Paper", "Scissors"];
+
+function getRandomComputerResult() {
+ const randomIndex = Math.floor(Math.random() * options.length);
+ return options[randomIndex];
+}
+
+function hasPlayerWonTheRound(player, computer) {
+ return (
+ (player === "Rock" && computer === "Scissors") ||
+ (player === "Scissors" && computer === "Paper") ||
+ (player === "Paper" && computer === "Rock")
+ );
+}
+
+let playerScore = 0;
+let computerScore = 0;
+
+--fcc-editable-region--
+function getRoundResults(userOption) {
+ const computerResult = getRandomComputerResult();
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf34fcb005e7b447141afd.md b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf34fcb005e7b447141afd.md
new file mode 100644
index 00000000000..18ae7b780fc
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf34fcb005e7b447141afd.md
@@ -0,0 +1,275 @@
+---
+id: 66cf34fcb005e7b447141afd
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now it is time to update the scores and the round results message.
+
+Create a `showResults` function with a parameter called `userOption`.
+
+Inside your `showResults` function, the `roundResultsMsg` should be updated with the result of the round.
+
+Then, the `playerScoreSpanElement` and `computerScoreSpanElement` should also be updated to show the updated scores of the player and computer.
+
+Remember, that the order matters here. You will need to first update the `roundResultsMsg`, then the `playerScoreSpanElement`, and finally the `computerScoreSpanElement` because the `roundResultsMsg` will be used to determine the scores.
+
+# --hints--
+
+You should have a function called `showResults`.
+
+```js
+assert.isFunction(showResults);
+```
+
+Your `showResults` function should have a parameter called `userOption`.
+
+```js
+assert.match(code, /showResults\s*(?:=\s*)?(?:\(\s*)?userOption(?:\s*\))?\s*/);
+```
+
+Your `showResults` function should update the `roundResultsMsg` with the result of the round.
+
+```js
+const possibleResults = [
+ "Player wins! Rock beats Scissors",
+ "Player wins! Scissors beats Paper",
+ "Player wins! Paper beats Rock",
+ "Computer wins! Paper beats Rock",
+ "Computer wins! Scissors beats Paper",
+ "Computer wins! Rock beats Scissors",
+ "It's a tie! Both chose Rock",
+ "It's a tie! Both chose Scissors",
+ "It's a tie! Both chose Paper"
+];
+showResults("Rock");
+assert.include(possibleResults, roundResultsMsg.innerText.replace(/\//g, "'"));
+```
+
+Your `showResults` function should update the `computerScoreSpanElement` to show the updated score of the computer.
+
+```js
+computerScore = 0;
+const oldRandomResult = getRandomComputerResult;
+getRandomComputerResult = () => "Rock";
+
+showResults("Scissors");
+assert.equal(computerScoreSpanElement.innerText, "1");
+
+getRandomComputerResult = oldRandomResult;
+```
+
+Your `showResults` function should update the `playerScoreSpanElement` to show the updated score of the player.
+
+```js
+playerScore = 0;
+const oldRandomResult = getRandomComputerResult;
+getRandomComputerResult = () => "Scissors";
+
+showResults("Rock");
+assert.equal(playerScoreSpanElement.innerText, "1");
+
+getRandomComputerResult = oldRandomResult;
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Rock, Paper, Scissors game
+
+
+
+
Let's play Rock, Paper, Scissors!
+
+
+ Rules to the game
+
+
You will be playing against the computer.
+
You can choose between Rock, Paper, and Scissors.
+
The first one to three points wins.
+
+
Here are the rules to getting a point in the game:
+
+
Rock beats Scissors
+
Scissors beats Paper
+
Paper beats Rock
+
+
+ If the player and computer choose the same option (Ex. Paper and
+ Paper), then no one gets the point.
+
+
+
+
+ Player Score: 0
+ Computer Score:
+ 0
+
+
+
+
Choose an option:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --very-dark-blue: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+}
+
+body {
+ background-color: var(--very-dark-blue);
+ text-align: center;
+ color: var(--white);
+}
+
+h1 {
+ margin: 15px 0 20px;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--very-dark-blue);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+.rules-container {
+ padding: 10px 0;
+ margin: auto;
+ border-radius: 15px;
+ border: 5px solid var(--yellow);
+ background-color: var(--white);
+ color: var(--very-dark-blue);
+}
+
+.rules-container ul {
+ list-style-type: none;
+}
+
+.rules-container p {
+ margin: 10px 0;
+}
+
+@media (min-width: 760px) {
+ .rules-container {
+ width: 60%;
+ }
+}
+
+.score-container {
+ display: flex;
+ justify-content: space-around;
+ margin: 30px 0;
+ font-size: 1.2rem;
+}
+
+.score {
+ font-weight: 500;
+}
+
+.results-container {
+ font-size: 1.3rem;
+ margin: 15px 0;
+}
+
+#winner-msg {
+ margin-top: 25px;
+}
+
+#reset-game-btn {
+ display: none;
+ margin: 20px auto;
+}
+
+```
+
+```js
+const options = ["Rock", "Paper", "Scissors"];
+
+function getRandomComputerResult() {
+ const randomIndex = Math.floor(Math.random() * options.length);
+ return options[randomIndex];
+}
+
+function hasPlayerWonTheRound(player, computer) {
+ return (
+ (player === "Rock" && computer === "Scissors") ||
+ (player === "Scissors" && computer === "Paper") ||
+ (player === "Paper" && computer === "Rock")
+ );
+}
+
+let playerScore = 0;
+let computerScore = 0;
+
+function getRoundResults(userOption) {
+ const computerResult = getRandomComputerResult();
+
+ if (hasPlayerWonTheRound(userOption, computerResult)) {
+ playerScore++;
+ return `Player wins! ${userOption} beats ${computerResult}`;
+ } else if (computerResult === userOption) {
+ return `It's a tie! Both chose ${userOption}`;
+ } else {
+ computerScore++;
+ return `Computer wins! ${computerResult} beats ${userOption}`;
+ }
+}
+
+const playerScoreSpanElement = document.getElementById("player-score");
+const computerScoreSpanElement = document.getElementById("computer-score");
+const roundResultsMsg = document.getElementById("results-msg");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf35a75f891ab4f4e5497b.md b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf35a75f891ab4f4e5497b.md
new file mode 100644
index 00000000000..c3db0bcbf8d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf35a75f891ab4f4e5497b.md
@@ -0,0 +1,274 @@
+---
+id: 66cf35a75f891ab4f4e5497b
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+If you try to play the game, you will see that you can play for an infinite amount of rounds. But the rules state that the first one to three points wins. You want to check if there's a winner, and display a message.
+
+In your `showResults` function, if the player has reached three points, update the `winnerMsgElement` to `"Player has won the game!"`. If the computer has reached three points, update the `winnerMsgElement` to `"Computer has won the game!"`.
+
+If there is a winner, show the `resetGameBtn` button by settings it's `display` to `block` and hide the `optionsContainer` by setting it's `display` to `none`.
+
+Now, try to play the game and see if the winner message is displayed when a player reaches three points.
+
+# --hints--
+
+You should update the `winnerMsgElement` if there is a winner.
+
+```js
+while (playerScore < 3 && computerScore < 3) {
+ showResults("Rock");
+}
+
+if (playerScore === 3) {
+ assert.equal(winnerMsgElement.innerText, "Player has won the game!");
+} else {
+ assert.equal(winnerMsgElement.innerText, "Computer has won the game!");
+}
+
+```
+
+You should hide the `optionsContainer` if the player or computer has reached three points.
+
+```js
+playerScore = 3;
+showResults("Scissors");
+assert.equal(optionsContainer.style.display, "none");
+```
+
+You should show the `resetGameBtn` button if the player or computer has reached three points.
+
+```js
+computerScore = 3;
+showResults("Rock");
+const computedStyle = window.getComputedStyle(resetGameBtn).display;
+assert.notEqual(computedStyle, "none");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Rock, Paper, Scissors game
+
+
+
+
Let's play Rock, Paper, Scissors!
+
+
+ Rules to the game
+
+
You will be playing against the computer.
+
You can choose between Rock, Paper, and Scissors.
+
The first one to three points wins.
+
+
Here are the rules to getting a point in the game:
+
+
Rock beats Scissors
+
Scissors beats Paper
+
Paper beats Rock
+
+
+ If the player and computer choose the same option (Ex. Paper and
+ Paper), then no one gets the point.
+
+
+
+
+ Player Score: 0
+ Computer Score:
+ 0
+
+
+
+
Choose an option:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --very-dark-blue: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+}
+
+body {
+ background-color: var(--very-dark-blue);
+ text-align: center;
+ color: var(--white);
+}
+
+h1 {
+ margin: 15px 0 20px;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--very-dark-blue);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+.rules-container {
+ padding: 10px 0;
+ margin: auto;
+ border-radius: 15px;
+ border: 5px solid var(--yellow);
+ background-color: var(--white);
+ color: var(--very-dark-blue);
+}
+
+.rules-container ul {
+ list-style-type: none;
+}
+
+.rules-container p {
+ margin: 10px 0;
+}
+
+@media (min-width: 760px) {
+ .rules-container {
+ width: 60%;
+ }
+}
+
+.score-container {
+ display: flex;
+ justify-content: space-around;
+ margin: 30px 0;
+ font-size: 1.2rem;
+}
+
+.score {
+ font-weight: 500;
+}
+
+.results-container {
+ font-size: 1.3rem;
+ margin: 15px 0;
+}
+
+#winner-msg {
+ margin-top: 25px;
+}
+
+#reset-game-btn {
+ display: none;
+ margin: 20px auto;
+}
+
+```
+
+```js
+const options = ["Rock", "Paper", "Scissors"];
+
+function getRandomComputerResult() {
+ const randomIndex = Math.floor(Math.random() * options.length);
+ return options[randomIndex];
+}
+
+function hasPlayerWonTheRound(player, computer) {
+ return (
+ (player === "Rock" && computer === "Scissors") ||
+ (player === "Scissors" && computer === "Paper") ||
+ (player === "Paper" && computer === "Rock")
+ );
+}
+
+let playerScore = 0;
+let computerScore = 0;
+
+function getRoundResults(userOption) {
+ const computerResult = getRandomComputerResult();
+
+ if (hasPlayerWonTheRound(userOption, computerResult)) {
+ playerScore++;
+ return `Player wins! ${userOption} beats ${computerResult}`;
+ } else if (computerResult === userOption) {
+ return `It's a tie! Both chose ${userOption}`;
+ } else {
+ computerScore++;
+ return `Computer wins! ${computerResult} beats ${userOption}`;
+ }
+}
+
+--fcc-editable-region--
+const playerScoreSpanElement = document.getElementById("player-score");
+const computerScoreSpanElement = document.getElementById("computer-score");
+const roundResultsMsg = document.getElementById("results-msg");
+const winnerMsgElement = document.getElementById("winner-msg");
+const optionsContainer = document.querySelector(".options-container");
+const resetGameBtn = document.getElementById("reset-game-btn");
+
+function showResults(userOption) {
+ roundResultsMsg.innerText = getRoundResults(userOption);
+ computerScoreSpanElement.innerText = computerScore;
+ playerScoreSpanElement.innerText = playerScore;
+
+
+};
+--fcc-editable-region--
+
+const rockBtn = document.getElementById("rock-btn");
+const paperBtn = document.getElementById("paper-btn");
+const scissorsBtn = document.getElementById("scissors-btn");
+
+rockBtn.addEventListener("click", function () {
+ showResults("Rock");
+});
+
+paperBtn.addEventListener("click", function () {
+ showResults("Paper");
+});
+
+scissorsBtn.addEventListener("click", function () {
+ showResults("Scissors");
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf3639aca119b5c00b02d3.md b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf3639aca119b5c00b02d3.md
new file mode 100644
index 00000000000..1e38823bb35
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-rps-game/66cf3639aca119b5c00b02d3.md
@@ -0,0 +1,571 @@
+---
+id: 66cf3639aca119b5c00b02d3
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+For the final step of the workshop, you will need to build out the reset game functionality.
+
+Create a `resetGame` function that accomplishes the following:
+
+- Resets the player and computer scores to `0`.
+- Updates the `playerScoreSpanElement` and `computerScoreSpanElement` to display the new scores.
+- Hides the `resetGameBtn` button.
+- Shows the `optionsContainer` so the player can play again.
+- Clears the content for the `winnerMsgElement` and `roundResultsMsg` elements.
+
+Try testing out the game by playing a few rounds until one of the players reaches `3` points. Then, click the `"Play again?"` button to see if the game resets correctly.
+
+And with this final step, you have completed the Rock, Paper, Scissors game!
+
+# --hints--
+
+Your `resetGame` function should set the `playerScore` to `0`.
+
+```js
+playerScore = 1;
+resetGame();
+assert.equal(playerScore, 0);
+```
+
+Your `resetGame` function should set the `computerScore` to `0`.
+
+```js
+computerScore = 1;
+resetGame();
+assert.equal(computerScore, 0);
+```
+
+Your `resetGame` function should set the `playerScoreSpanElement` to `0`.
+
+```js
+playerScoreSpanElement.innerText = "1";
+resetGame();
+assert.equal(playerScoreSpanElement.innerText, "0");
+```
+
+Your `resetGame` function should set the `computerScoreSpanElement` to `0`.
+
+```js
+computerScoreSpanElement.innerText = "1";
+resetGame();
+assert.equal(computerScoreSpanElement.innerText, "0");
+```
+
+Your `resetGame` function should set the `roundResultsMsg` to an empty string.
+
+```js
+rockBtn.click();
+assert.notEqual(roundResultsMsg.innerText, "");
+resetGame();
+assert.equal(roundResultsMsg.innerText, "");
+```
+
+Your `resetGame` function should set the `winnerMsgElement` to an empty string.
+
+```js
+winnerMsgElement.innerText = "Player has won the game!";
+resetGame();
+assert.equal(winnerMsgElement.innerText, "");
+```
+
+Your `resetGame` function should hide the `resetGameBtn`.
+
+```js
+playerScore = 3;
+computerScore = 3;
+rockBtn.click();
+assert.notEqual(window.getComputedStyle(resetGameBtn).display, "none");
+resetGame();
+assert.equal(window.getComputedStyle(resetGameBtn).display, "none");
+```
+
+Your `resetGame` function should show the `optionsContainer`.
+
+```js
+playerScore = 3;
+computerScore = 3;
+rockBtn.click();
+assert.equal(window.getComputedStyle(optionsContainer).display, "none");
+resetGame();
+assert.notEqual(window.getComputedStyle(optionsContainer).display, "none");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Rock, Paper, Scissors game
+
+
+
+
Let's play Rock, Paper, Scissors!
+
+
+ Rules to the game
+
+
You will be playing against the computer.
+
You can choose between Rock, Paper, and Scissors.
+
The first one to three points wins.
+
+
Here are the rules to getting a point in the game:
+
+
Rock beats Scissors
+
Scissors beats Paper
+
Paper beats Rock
+
+
+ If the player and computer choose the same option (Ex. Paper and
+ Paper), then no one gets the point.
+