diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 1ace1537210..ace69128477 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -402,6 +402,14 @@
           "This project will help you understand the fundamental concepts behind these algorithms and how they can be applied to sort numerical data in a web applications."
         ]
       },
+      "learn-intermediate-algorithmic-thinking-by-building-a-dice-game": {
+        "title": "Learn Intermediate Algorithmic Thinking by Building a Dice Game",
+        "intro": [
+          "Algorithmic thinking involves the ability to break down complex problems into a sequence of well-defined, step-by-step instructions.",
+          "In this Dice game project, you’ll learn how to manage game state, implement game logic for rolling dice, keeping score, and applying rules for various combinations.",
+          "This project covers concepts such as event handling, array manipulation, conditional logic, and updating the user interface dynamically based on game state."
+        ]
+      },
       "learn-intermediate-oop-by-building-a-platformer-game": {
         "title": "Learn Intermediate OOP by Building a Platformer Game",
         "intro": [
diff --git a/client/src/pages/learn/2022/javascript-algorithms-and-data-structures/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/index.md b/client/src/pages/learn/2022/javascript-algorithms-and-data-structures/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/index.md
new file mode 100644
index 00000000000..2d3aad769c4
--- /dev/null
+++ b/client/src/pages/learn/2022/javascript-algorithms-and-data-structures/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/index.md
@@ -0,0 +1,10 @@
+---
+title: Introduction to the Learn Intermediate Algorithmic Thinking by Building a Dice Game
+block: learn-intermediate-algorithmic-thinking-by-building-a-dice-game
+superBlock: 2022/javascript-algorithms-and-data-structures
+isBeta: true
+---
+
+## Introduction to the Learn Intermediate Algorithmic Thinking by Building a Dice Game
+
+This is a test for the new project-based curriculum.
diff --git a/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json b/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json
new file mode 100644
index 00000000000..a2890083f41
--- /dev/null
+++ b/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json
@@ -0,0 +1,225 @@
+{
+  "name": "Learn Intermediate Algorithmic Thinking by Building a Dice Game",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
+  "dashedName": "learn-intermediate-algorithmic-thinking-by-building-a-dice-game",
+  "order": 422,
+  "time": "5 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "2022/javascript-algorithms-and-data-structures",
+  "superOrder": 4,
+  "isBeta": true,
+  "challengeOrder": [
+    {
+      "id": "6579fc66adaabbca6ceddb1f",
+      "title": "Step 1"
+    },
+    {
+      "id": "657a018ddd0006ce5bc29fa4",
+      "title": "Step 2"
+    },
+    {
+      "id": "657a05f6b5654ad24614a229",
+      "title": "Step 3"
+    },
+    {
+      "id": "657a0894e5b6acd463cf5aac",
+      "title": "Step 4"
+    },
+    {
+      "id": "657a0b3f420571d6a2208a18",
+      "title": "Step 5"
+    },
+    {
+      "id": "657a0d3d9ce4e1d8794a3c14",
+      "title": "Step 6"
+    },
+    {
+      "id": "657a0ea50da0c8d9d6d7950a",
+      "title": "Step 7"
+    },
+    {
+      "id": "657a0fb4dab33fdaf82232c6",
+      "title": "Step 8"
+    },
+    {
+      "id": "657a16a3e36c17e088e55c8b",
+      "title": "Step 9"
+    },
+    {
+      "id": "657a19e477dc04e36a86dffc",
+      "title": "Step 10"
+    },
+    {
+      "id": "657a1b8d2ff90ce56dc9c8dc",
+      "title": "Step 11"
+    },
+    {
+      "id": "657a1d7a4da888e7acfbf9fd",
+      "title": "Step 12"
+    },
+    {
+      "id": "657a218c34af9ceb661de044",
+      "title": "Step 13"
+    },
+    {
+      "id": "649efc2e07fbb2012b69c5d4",
+      "title": "Step 14"
+    },
+    {
+      "id": "649f02123109440198becab7",
+      "title": "Step 15"
+    },
+    {
+      "id": "649f03f6f661fb01d98fcfd1",
+      "title": "Step 16"
+    },
+    {
+      "id": "649f0e6e081b80023d1b4fab",
+      "title": "Step 17"
+    },
+    {
+      "id": "649f0fb16b7e27027526f4da",
+      "title": "Step 18"
+    },
+    {
+      "id": "649f12c7c84ffb02b0fc7563",
+      "title": "Step 19"
+    },
+    {
+      "id": "657a34809aba0502807b1937",
+      "title": "Step 20"
+    },
+    {
+      "id": "657a3c9ace5a8d086cf2cd2f",
+      "title": "Step 21"
+    },
+    {
+      "id": "657a3ee8aa19b00ac3f78816",
+      "title": "Step 22"
+    },
+    {
+      "id": "64a1b343d112ec024cf2025f",
+      "title": "Step 23"
+    },
+    {
+      "id": "64a1b48cbd1c3102840cf715",
+      "title": "Step 24"
+    },
+    {
+      "id": "64a1b5a282d4b502ad83043a",
+      "title": "Step 25"
+    },
+    {
+      "id": "64a1b6a63614f002dce978ed",
+      "title": "Step 26"
+    },
+    {
+      "id": "64a2391ae5a6b3022bc1ce6e",
+      "title": "Step 27"
+    },
+    {
+      "id": "64a23a46c4dc89026019f8e4",
+      "title": "Step 28"
+    },
+    {
+      "id": "64a24015fe4fbd02a16cbbe7",
+      "title": "Step 29"
+    },
+    {
+      "id": "64a7bf43e7f374013d88b4e6",
+      "title": "Step 30"
+    },
+    {
+      "id": "64a7c1a836c47c016f5d9c99",
+      "title": "Step 31"
+    },
+    {
+      "id": "64a7c453d3ddbe01a194ddc1",
+      "title": "Step 32"
+    },
+    {
+      "id": "64a7cc96491a05022098d7b0",
+      "title": "Step 33"
+    },
+    {
+      "id": "64ae4d469444a0014fb1dc80",
+      "title": "Step 34"
+    },
+    {
+      "id": "64ae500423fa16018a83fa31",
+      "title": "Step 35"
+    },
+    {
+      "id": "64ae5180ff093301b90147cc",
+      "title": "Step 36"
+    },
+    {
+      "id": "64ae530773cd7001ebacc6c1",
+      "title": "Step 37"
+    },
+    {
+      "id": "64ae54048b468302209dd977",
+      "title": "Step 38"
+    },
+    {
+      "id": "64ae550d9fdb40025e5857ae",
+      "title": "Step 39"
+    },
+    {
+      "id": "64ae561e7f4217029684cefd",
+      "title": "Step 40"
+    },
+    {
+      "id": "64ae57bf4eac6002c85af0e0",
+      "title": "Step 41"
+    },
+    {
+      "id": "64ae5d8d2ae28b030cfd035e",
+      "title": "Step 42"
+    },
+    {
+      "id": "64ae6a43e797ab035c56d88b",
+      "title": "Step 43"
+    },
+    {
+      "id": "64ae6aff1af3780391f3a0a0",
+      "title": "Step 44"
+    },
+    {
+      "id": "64ae70794c6760043f553998",
+      "title": "Step 45"
+    },
+    {
+      "id": "64ae722962105404772b7618",
+      "title": "Step 46"
+    },
+    {
+      "id": "64ae74510e6aed04a975f72f",
+      "title": "Step 47"
+    },
+    {
+      "id": "64b457bb4cd0e2013d839c92",
+      "title": "Step 48"
+    },
+    {
+      "id": "64b45a195557d801660f07d5",
+      "title": "Step 49"
+    },
+    {
+      "id": "64b45d46f718ff01988c51ad",
+      "title": "Step 50"
+    },
+    {
+      "id": "64b8c2130652b4013da1cc8a",
+      "title": "Step 51"
+    },
+    {
+      "id": "64b8c3f6f4dfc701661fab4f",
+      "title": "Step 52"
+    }
+  ],
+  "helpCategory": "JavaScript"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649efc2e07fbb2012b69c5d4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649efc2e07fbb2012b69c5d4.md
new file mode 100644
index 00000000000..2bbc418bf27
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649efc2e07fbb2012b69c5d4.md
@@ -0,0 +1,289 @@
+---
+id: 649efc2e07fbb2012b69c5d4
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Next, push your `randomDice` value to the end of the `diceValuesArr` array.
+
+# --hints--
+
+You should use the `push` method to add the `randomDice` value to the end of the `diceValuesArr` array.
+
+```js
+assert.match(code, /diceValuesArr\.push\s*\(\s*randomDice\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  --fcc-editable-region--
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+
+  }
+  --fcc-editable-region--
+}
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f02123109440198becab7.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f02123109440198becab7.md
new file mode 100644
index 00000000000..d6098ece294
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f02123109440198becab7.md
@@ -0,0 +1,299 @@
+---
+id: 649f02123109440198becab7
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The next step is to update the text content for all five of the dice displaying on the screen.
+
+Use the `forEach` method on the `listOfAllDice` variable to loop through each of the dice. For the callback function, pass in a `dice` and `index` parameter.
+
+# --hints--
+
+You should use a `forEach` loop on the `listOfAllDice` variable.
+
+```js
+assert.match(code, /listOfAllDice\.forEach\s*\(.*\)/);
+```
+
+Your callback function should have a `dice` and `index` parameter. Don't forget the parenthesis around the parameters.
+
+```js
+assert.match(code, /listOfAllDice\.forEach\s*\(\s*\(\s*dice\s*,\s*index\s*\)\s*=>\s*{/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f03f6f661fb01d98fcfd1.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f03f6f661fb01d98fcfd1.md
new file mode 100644
index 00000000000..4bb970feaab
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f03f6f661fb01d98fcfd1.md
@@ -0,0 +1,299 @@
+---
+id: 649f03f6f661fb01d98fcfd1
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Inside your callback function, use the `textContent` property on the `dice` parameter and assign it the value of `diceValuesArr[index]`.
+
+# --hints--
+
+You should use the `textContent` property on the `dice` parameter.
+
+```js
+assert.match(code, /dice\s*\.\s*textContent\s*/);
+```
+
+You should assign `diceValuesArr[index]` to `dice.textContent`.
+
+```js
+assert.match(code, /dice\s*\.\s*textContent\s*=\s*diceValuesArr\s*\[\s*index\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+
+    listOfAllDice.forEach((dice, index) => {
+      --fcc-editable-region--
+
+      --fcc-editable-region--
+    });
+  }
+};
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f0e6e081b80023d1b4fab.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f0e6e081b80023d1b4fab.md
new file mode 100644
index 00000000000..e2dad67c078
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f0e6e081b80023d1b4fab.md
@@ -0,0 +1,309 @@
+---
+id: 649f0e6e081b80023d1b4fab
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now it is time to test out the `rollDice` function.
+
+Add an `addEventListener()` method on the `rollDiceBtn` element and pass in a click event for the first argument and an empty arrow function for the second argument. 
+
+# --hints--
+
+You should have an `addEventListener()` method on the `rollDiceBtn` element.
+
+```js
+assert.match(code, /rollDiceBtn\.addEventListener\s*\(\s*.*\s*/);
+```
+
+You should have a click event for the first argument for the `addEventListener()` method.
+
+```js
+assert.match(code, /rollDiceBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*/);
+```
+
+You should have an empty arrow function for the second argument for the `addEventListener` method.
+
+```js
+assert.match(code, /rollDiceBtn\.addEventListener\s*\(\s*("|'|`)\s*click\s*\1,\s*\(\s*\)\s*=>\s*{\s*[\s\S]*\s*}\s*\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+  
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f0fb16b7e27027526f4da.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f0fb16b7e27027526f4da.md
new file mode 100644
index 00000000000..c3d7383fa07
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f0fb16b7e27027526f4da.md
@@ -0,0 +1,319 @@
+---
+id: 649f0fb16b7e27027526f4da
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In the game, you are allowed to roll the dice a maximum of three times per round. 
+
+Inside your callback function, add an `if` statement to check if `rolls` is strictly equal to the number `3`. 
+
+If the condition is true, show an `alert()` method to display the message `You have made three rolls this round. Please select a score.`.
+
+# --hints--
+
+You should have an `if` statement.
+
+```js
+assert.match(code, /if\s*\(\s*.*\s*\)\s*{/);
+```
+
+Your `if` statement should check if `rolls` is strictly equal to `3`.
+
+```js
+assert.match(code, /if\s*\(\s*rolls\s*===\s*3\s*\)\s*{/);
+```
+
+You should have an `alert` inside your `if` statement.
+
+```js
+assert.match(code, /if\s*\(\s*rolls\s*===\s*3\s*\)\s*{\s*alert\s*\(/);
+```
+
+Your `alert` message should say, `You have made three rolls this round. Please select a score.`
+
+```js
+assert.match(code, /alert\s*\(\s*['"]\s*You\s+have\s+made\s+three\s+rolls\s+this\s+round\.\s+Please\s+select\s+a\s+score\.\s*['"]\s*\)\s*;?\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f12c7c84ffb02b0fc7563.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f12c7c84ffb02b0fc7563.md
new file mode 100644
index 00000000000..5ca68dd1cd5
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/649f12c7c84ffb02b0fc7563.md
@@ -0,0 +1,316 @@
+---
+id: 649f12c7c84ffb02b0fc7563
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+If the rolls limit has not been reached, then the user can still roll the dice. 
+
+Add an `else` clause below your `if` statement. Inside the `else` clause, increment `rolls` by one and then call the `rollDice` function.
+
+Click on the "Roll the dice" button and you should see 5 random die values show up on the screen.
+
+# --hints--
+
+You should add have an `else` statement.
+
+```js
+assert.match(code, /else\s*{\s*[\s\S]*\s*}/);
+```
+
+You should increment `rolls` by `1` inside your `else` clause.
+
+```js
+assert.match(code, /else\s*{\s*rolls\s*\+\+\s*[^}]*}/);
+```
+
+You should call the `rollDice` function below `rolls++`.
+
+```js
+assert.match(code, /else\s*{\s*rolls\s*\+\+\s*;?\s*rollDice\s*\(\s*\)\s*;?\s*}/m);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+}
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  }
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b343d112ec024cf2025f.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b343d112ec024cf2025f.md
new file mode 100644
index 00000000000..7022e7f7929
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b343d112ec024cf2025f.md
@@ -0,0 +1,324 @@
+---
+id: 64a1b343d112ec024cf2025f
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+The next step is to add the functionality for allowing the user to toggle the display for the rules.
+
+Start by adding an `addEventListener()` to the `rulesBtn` element. The `addEventListener()` should listen for a `click` event for the first argument and take in an empty arrow function for the second argument. 
+
+# --hints--
+
+You should have an `addEventListener()` for your `rulesBtn` element.
+
+```js
+assert.match(code, /rulesBtn\.addEventListener\s*\(\s*.*\s*/);
+```
+
+You should have a `click` event as the first argument to the `addEventListener` method.
+
+```js
+assert.match(code, /rulesBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*/);
+```
+
+You should have an arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert.match(code, /rulesBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*,\s*\(\s*[^)]*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b48cbd1c3102840cf715.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b48cbd1c3102840cf715.md
new file mode 100644
index 00000000000..7be21451311
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b48cbd1c3102840cf715.md
@@ -0,0 +1,314 @@
+---
+id: 64a1b48cbd1c3102840cf715
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In order to toggle the display modal, you will need to flip the boolean value for the `isModalShowing` variable.  
+
+Inside your callback function, use the `logical NOT operator` to invert the value of the `isModalShowing` boolean.
+
+# --hints--
+
+You should use the `logical NOT operator(!)` to reassign the `isModalShowing` variable its inverted value.
+
+```js
+assert.match(code, /isModalShowing\s*=\s*!\s*isModalShowing/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+--fcc-editable-region--
+rulesBtn.addEventListener("click", () => {
+  
+});
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b5a282d4b502ad83043a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b5a282d4b502ad83043a.md
new file mode 100644
index 00000000000..ee82613d587
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b5a282d4b502ad83043a.md
@@ -0,0 +1,335 @@
+---
+id: 64a1b5a282d4b502ad83043a
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+If the rules are currently showing, then you will want the button text to say "Hide rules".  
+
+Create an `if` statement that checks the truthy value of the `isModalShowing` variable. Inside the `if` statement, add the `textContent` property on `rulesBtn` element and assign it the string value of `Hide Rules`.
+
+Below that, update the `display` property on `rulesContainer` and set it to `block`. 
+
+# --hints--
+
+You should have an `if` statement.
+
+```js
+assert.match(code, /if\s*\(\s*.*\s*\)\s*{\s*.*\s*}\s*/);
+```
+
+Your `if` statement should check if `isModalShowing` is truthy.
+
+```js
+assert.match(code, /if\s*\(\s*isModalShowing\s*\)/);
+```
+
+You should update the `textContent` property on `rulesBtn` to the string `Hide Rules`.
+
+```js
+assert.match(code, /rulesBtn\.textContent\s*=\s*('|"|`)Hide Rules\1/);
+```
+
+You should target the `display` property on `rulesContainer` and assign it the string value of `block`.
+
+```js
+assert.match(code, /.*?if\s*\(isModalShowing\)\s*{\s*.*?rulesContainer\.style\.display\s*=\s*['"]block['"]/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+--fcc-editable-region--
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+});
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b6a63614f002dce978ed.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b6a63614f002dce978ed.md
new file mode 100644
index 00000000000..cdde75af1ae
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a1b6a63614f002dce978ed.md
@@ -0,0 +1,330 @@
+---
+id: 64a1b6a63614f002dce978ed
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+If the modal is not showing then the button text should display as "Show rules" and the modal should be hidden. 
+
+Below your `if` statement, add an `else` statement. Inside your `else` statement, add the `textContent` property on `rulesBtn` and assign the string value of `Show Rules`.
+
+Then, set the `display` property on `rulesContainer` and assign it the string value of `none`.
+
+Test out your button and to see the rules toggle from shown to hidden.
+
+# --hints--
+
+You should update the `textContent` property on `rulesBtn` to the string `Show Rules` inside an `else` statement.
+
+```js
+assert.match(code, /else\s*{\s*.*?rulesBtn\.textContent\s*=\s*('|"|`)Show Rules\1/s);
+```
+
+You should target the `display` property on `rulesContainer` and set it to `none` inside the `else` statement.
+
+```js
+assert.match(code, /.*?else\s*{\s*.*?rulesContainer\.style\.display\s*=\s*['"]none['"]/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } 
+  --fcc-editable-region--
+  
+  --fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a2391ae5a6b3022bc1ce6e.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a2391ae5a6b3022bc1ce6e.md
new file mode 100644
index 00000000000..c3c71573dd1
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a2391ae5a6b3022bc1ce6e.md
@@ -0,0 +1,330 @@
+---
+id: 64a2391ae5a6b3022bc1ce6e
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+In the game, the player has the chance to hit a small or large straight. A small straight is when four of the dice have consecutive values. A large straight is when all five dice have consecutive values.
+
+To detect small and large straights, create an arrow function called `straightDetector` with a parameter of `arr`.
+
+# --hints--
+
+You should have a function called `straightDetector`.
+
+```js
+assert.isFunction(straightDetector)
+```
+
+Your function should be an arrow function with `arr` for the parameter.
+
+```js
+assert.match(code, /.*?const\s+straightDetector\s*=\s*\(\s*arr\s*\)\s*=>\s*{?/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a23a46c4dc89026019f8e4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a23a46c4dc89026019f8e4.md
new file mode 100644
index 00000000000..fa3bdab1a28
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a23a46c4dc89026019f8e4.md
@@ -0,0 +1,358 @@
+---
+id: 64a23a46c4dc89026019f8e4
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+To detect if the dice roll was a straight, you will first need to sort the numbers in ascending order.
+
+Inside your `straightDetector` function, use the `sort` method on the `arr` parameter. For the callback function, pass in `a` and `b` for the parameters and `implicitly` return `a - b`. 
+
+Assign the entire result to a `const` named `sortNumbers`. 
+
+# --hints--
+
+You should have a `const` variable called `sortNumbers`.
+
+```js
+assert.match(code, /const\s+sortNumbers\s*/);
+```
+
+You should assign `arr` to `sortNumbers`.
+
+```js
+assert.match(code, /const\s+sortNumbers\s*=\s*arr(.*)/);
+```
+
+You should apply the `sort` method to the `arr` parameter.
+
+```js
+assert.match(code, /const\s+sortNumbers\s*=\s*arr\.sort\(.*\);?/);
+```
+
+You should pass `a` and `b` as parameters to the `sort` method.
+
+```js
+assert.match(code, /const\s+sortNumbers\s*=\s*(?:arr\.sort\(\s*function\s*\(\s*a\s*,\s*b\s*\)\s*{\s*return\s*a\s*-\s*b\s*;?\s*}\s*\)|arr\.sort\(\s*\(a,\s*b\)\s*=>\s*a\s*-\s*b\s*\));?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const rulesBtn = document.getElementById("rules-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+
+let isModalShowing = false;
+
+let diceValuesArr = [];
+
+let round = 1;
+let rolls = 0;
+let score = 0;
+let totalScore = 0;
+
+function rollDice() {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    let randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+
+    listOfAllDice.forEach((dice, index) => {
+      dice.textContent = diceValuesArr[index];
+    });
+  }
+}
+
+function updateStats() {
+  currentRoundRollsText.innerHTML = rolls;
+  currentRoundText.innerHTML = round;
+}
+
+function resetGame() {
+  diceValuesArr = [0, 0, 0, 0, 0];
+  score = 0;
+  totalScore = 0;
+  round = 1;
+  rolls = 0;
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+
+  currentRoundRollsText.innerHTML = rolls;
+  currentRoundText.innerHTML = round;
+}
+
+const straightDetector = (arr) => {
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a24015fe4fbd02a16cbbe7.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a24015fe4fbd02a16cbbe7.md
new file mode 100644
index 00000000000..2d5da7e70d7
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a24015fe4fbd02a16cbbe7.md
@@ -0,0 +1,337 @@
+---
+id: 64a24015fe4fbd02a16cbbe7
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Using the `new Set()` constructor, create a set from `sortNumbers` and store it in a variable named `uniqueNumbers`. This will filter unique numbers from the `sortNumbers` array.
+
+# --hints--
+
+You should have a `const` variable called `uniqueNumbers`.
+
+```js
+assert.match(code, /const\s+uniqueNumbers/);
+```
+
+You should assign an empty array to your `uniqueNumbers` variable.
+
+```js
+assert.match(code, /const\s+uniqueNumbers\s*=\s*\[.*\]/);
+```
+
+You should convert the `Set` back into an array using the following syntax: `[...new Set(sortNumbers)]`.  
+
+```js
+assert.match(code, /const\s+uniqueNumbers\s*=\s*\[\.\.\.new\s+Set\(\s*sortNumbers\s*\)\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7bf43e7f374013d88b4e6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7bf43e7f374013d88b4e6.md
new file mode 100644
index 00000000000..1c8d7eabd55
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7bf43e7f374013d88b4e6.md
@@ -0,0 +1,332 @@
+---
+id: 64a7bf43e7f374013d88b4e6
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+You will join all the elements in the `uniqueNumbers` array into a string and store it in a variable named `stringifyArray`. This will be used to check if the user has rolled a small straight or a large straight.
+
+# --hints--
+
+You should have a `const` variable named `stringifyArray`.
+
+```js
+assert.match(code, /const\s+stringifyArray\s*=?\s*;?/);
+```
+
+You should assign `uniqueNumbers.join('')` to your `stringifyArray` variable.
+
+```js
+assert.match(code, /const\s+stringifyArray\s*=?\s*uniqueNumbers\.join\(\s*['"]['"]\s*\);?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7c1a836c47c016f5d9c99.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7c1a836c47c016f5d9c99.md
new file mode 100644
index 00000000000..927982cf62b
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7c1a836c47c016f5d9c99.md
@@ -0,0 +1,347 @@
+---
+id: 64a7c1a836c47c016f5d9c99
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Create a `const` variable named `smallStraightLogic` and store the string values `1234`, `2345` and `3456` in an array. This will be used to check if the user has rolled a small straight. 
+
+Similarly, create a `const` variable named `largeStraightLogic` and store the string values `12345` and `23456` in an array. This will be used to check if the user has rolled a large straight.
+
+# --hints--
+
+You should have a `const` variable named `smallStraightLogic`.
+
+```js
+assert.match(code, /const\s+smallStraightLogic\s*=?\s*;?/);
+```
+
+You should store the string values `1234`, `2345` and `3456` in an array and assign it to the `smallStraightLogic` variable.
+
+```js
+assert.match(code, /const\s+smallStraightLogic\s*=?\s*\[\s*['"]1234['"]\s*,\s*['"]2345['"]\s*,\s*['"]3456['"]\s*\];?/);
+```
+
+You should have a `const` variable named `largeStraightLogic`.
+
+```js
+assert.match(code, /const\s+largeStraightLogic\s*/);
+```
+
+You should store the string values `12345` and `23456` in an array and assign it to the `largeStraightLogic` variable.
+
+```js
+assert.match(code, /const\s+largeStraightLogic\s*=?\s*\[\s*['"]12345['"]\s*,\s*['"]23456['"]\s*\];?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7c453d3ddbe01a194ddc1.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7c453d3ddbe01a194ddc1.md
new file mode 100644
index 00000000000..5a07cb4517f
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7c453d3ddbe01a194ddc1.md
@@ -0,0 +1,345 @@
+---
+id: 64a7c453d3ddbe01a194ddc1
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+The next step is to build out the functionality for displaying the options to select a score.
+
+Create an arrow function named `updateRadioOption` and pass in two parameters named `optionNode` and `score`.
+
+# --hints--
+
+You should declare a function named `updateRadioOption`.
+
+```js
+assert.isFunction(updateRadioOption);
+```
+
+Your `updateRadioOption` function should be an arrow function.
+
+```js
+assert.match(code, /const\s+updateRadioOption\s*=\s*\(.*\)\s*=>\s*{\s*}\s*/)
+```
+
+Your `updateRadioOption` function should have two parameters named `optionNode` and `score`.
+
+```js
+assert.match(code, /const\s+updateRadioOption\s*=\s*\(\s*optionNode\s*,\s*score\s*\)\s*=>\s*{\s*}\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+}
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7cc96491a05022098d7b0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7cc96491a05022098d7b0.md
new file mode 100644
index 00000000000..4bfbd6b35c2
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64a7cc96491a05022098d7b0.md
@@ -0,0 +1,339 @@
+---
+id: 64a7cc96491a05022098d7b0
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Use the `optionNode` parameter to target the `scoreInputs` and set its `disabled` property to `false`.
+
+# --hints--
+
+You should target the `scoreInputs` using the `optionNode` argument.
+
+```js
+assert.match(code, /scoreInputs\[\s*optionNode\s*\]/);
+```
+
+You should set the `disabled` property of the `scoreInputs` to `false`.
+
+```js
+assert.match(code, /scoreInputs\[\s*optionNode\s*\]\.disabled\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae4d469444a0014fb1dc80.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae4d469444a0014fb1dc80.md
new file mode 100644
index 00000000000..f7be655b0f0
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae4d469444a0014fb1dc80.md
@@ -0,0 +1,340 @@
+---
+id: 64ae4d469444a0014fb1dc80
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Next, use the `optionNode` parameter to target the `scoreInputs` and set its `value` property to `score` parameter.
+
+# --hints--
+
+You should target the `scoreInputs` using the `optionNode` parameter.
+
+```js
+assert.match(code, /scoreInputs\[\s*optionNode\s*\]/);
+```
+
+You should set the `value` property of the `scoreInputs[optionNode]` to `score` the parameter.
+
+```js
+assert.match(code, /scoreInputs\[\s*optionNode\s*\]\.value\s*=\s*score/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert( "You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae500423fa16018a83fa31.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae500423fa16018a83fa31.md
new file mode 100644
index 00000000000..f18dc02244d
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae500423fa16018a83fa31.md
@@ -0,0 +1,341 @@
+---
+id: 64ae500423fa16018a83fa31
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Lastly, use the `optionNode` parameter to target the `scoreSpans` and set its `textContent` property to `, score = ${score}`.
+
+# --hints--
+
+You should target the `scoreSpans` using the `optionNode` parameter.
+
+```js
+assert.match(code, /scoreSpans\[\s*optionNode\s*\]/);
+```
+
+You should set the `textContent` property of the `scoreSpans[optionNode]` to `, score = ${score}`.
+
+```js
+assert.match(code, /scoreSpans\[\s*optionNode\s*\]\.textContent\s*=\s*`, score = \${score}`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae5180ff093301b90147cc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae5180ff093301b90147cc.md
new file mode 100644
index 00000000000..a30b58ecdb5
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae5180ff093301b90147cc.md
@@ -0,0 +1,343 @@
+---
+id: 64ae5180ff093301b90147cc
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Use an `if` statement to check if `smallStraightLogic` includes the value of `stringifyArray` and if it does, then call the function `updateRadioOption` with arguments of `3` and `30`. The `3` represents the option node and the `30` represents the score.
+
+# --hints--
+
+You should create an `if` statement that checks if `smallStraightLogic` includes the value of `stringifyArray`.
+
+```js
+assert.match(code, /if\s*\(\s*smallStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{/);
+```
+
+You should call the function `updateRadioOption` with arguments of `3` and `30`.
+
+```js
+assert.match(code, /if\s*\(\s*smallStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{\s*updateRadioOption\s*\(\s*3\s*,\s*30\s*\)\s*;?\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae530773cd7001ebacc6c1.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae530773cd7001ebacc6c1.md
new file mode 100644
index 00000000000..73b03f6068a
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae530773cd7001ebacc6c1.md
@@ -0,0 +1,347 @@
+---
+id: 64ae530773cd7001ebacc6c1
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Create another `if` statement to check if `largeStraightLogic` includes the value of `stringifyArray` and if it does, then call the function `updateRadioOption` with arguments of `4` and `40`. The `4` represents the option node and the `40` represents the score.
+
+# --hints--
+
+You should create a `if` statement that checks if `largeStraightLogic` includes the value of `stringifyArray`.
+
+```js
+assert.match(code, /if\s*\(\s*largeStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{/);
+```
+
+You should call the function `updateRadioOption` with arguments of `4` and `40`.
+
+```js
+assert.match(code, /if\s*\(\s*largeStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{\s*updateRadioOption\s*\(\s*4\s*,\s*40\s*\)\s*;?\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae54048b468302209dd977.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae54048b468302209dd977.md
new file mode 100644
index 00000000000..3bc20aff3a2
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae54048b468302209dd977.md
@@ -0,0 +1,345 @@
+---
+id: 64ae54048b468302209dd977
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Finally, call the `updateRadioOption` with the arguments `5` and `0`. This will work when the other 2 `if` statements are `false`.
+
+# --hints--
+
+You should call the function `updateRadioOption` with arguments of `5` and `0`.
+
+```js
+assert.match(code, /updateRadioOption\s*\(\s*5\s*,\s*0\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae550d9fdb40025e5857ae.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae550d9fdb40025e5857ae.md
new file mode 100644
index 00000000000..be989d2c5f1
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae550d9fdb40025e5857ae.md
@@ -0,0 +1,365 @@
+---
+id: 64ae550d9fdb40025e5857ae
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+You need to run the newly created `straightDetector` function to see the results on the display. To do this, create an arrow function named `findRollResult` and set the argument to `arr`. Then, call the function `straightDetector` with the argument of `arr`.
+
+# --hints--
+
+You should have a `findRollResult` function.
+
+```js
+assert.isFunction(findRollResult);
+```
+
+Your `findRollResult` function should be an arrow function.
+
+```js
+assert.match(code, /const\s+findRollResult\s*=\s*\([\s\S]*\)\s*=>\s*{\s*[\s\S]*\s*};?/);
+```
+
+Your `findRollResult` should have a parameter called `arr`.
+
+```js
+assert.match(code, /(const\s*findRollResult\s*=\s*\(arr\)\s*=>\s*{|function\s*findRollResult\s*\(arr\)\s*{)/);
+```
+
+You should call the function `straightDetector` with the argument of `arr`.
+
+```js
+assert.match(code, /const\s*findRollResult\s*=\s*\(arr\)\s*=>\s*{\s*straightDetector\s*\(\s*arr\s*\);\s*};?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae561e7f4217029684cefd.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae561e7f4217029684cefd.md
new file mode 100644
index 00000000000..294c8ced121
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae561e7f4217029684cefd.md
@@ -0,0 +1,350 @@
+---
+id: 64ae561e7f4217029684cefd
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Inside the event listener for the `rollDiceBtn` button, call the `findRollResult` function passing `diceValuesArr` as the argument . This will display the results of the roll on the screen every time the user clicks the roll dice button.
+
+# --hints--
+
+You should call the function `findRollResult` with the argument of `diceValuesArr`.
+
+```js
+assert.match(code, /findRollResult\s*\(\s*diceValuesArr\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae57bf4eac6002c85af0e0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae57bf4eac6002c85af0e0.md
new file mode 100644
index 00000000000..08d3d4f3b6e
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae57bf4eac6002c85af0e0.md
@@ -0,0 +1,358 @@
+---
+id: 64ae57bf4eac6002c85af0e0
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+You need to create a function named `resetRadioOption` which will be used to reset the radio option.
+
+# --hints--
+
+You should have a `resetRadioOption` function.
+
+```js
+assert.isFunction(resetRadioOption);
+```
+
+Your `resetRadioOption` should be an arrow function.
+
+```js
+assert.match(code, /const\s+resetRadioOption\s*=\s*\(.*\)\s*=>\s*{[\s\S]*};?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae5d8d2ae28b030cfd035e.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae5d8d2ae28b030cfd035e.md
new file mode 100644
index 00000000000..7d0d317c76a
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae5d8d2ae28b030cfd035e.md
@@ -0,0 +1,360 @@
+---
+id: 64ae5d8d2ae28b030cfd035e
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Now you need to use the `forEach` method to the `scoreInputs` array with a callback function with an argument named `input`.
+
+# --hints--
+
+You should apply the `forEach` method to the `scoreInputs` variable.
+
+```js
+assert.match(code, /scoreInputs\.forEach/);
+```
+
+You should apply a callback function to the `forEach` method with an argument called `input`.
+
+```js
+assert.match(code, /scoreInputs\.forEach\(\s*(function\s*\(\s*input\s*\)|\(\s*input\s*\)\s*=>)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae6a43e797ab035c56d88b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae6a43e797ab035c56d88b.md
new file mode 100644
index 00000000000..e96c67b42ef
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae6a43e797ab035c56d88b.md
@@ -0,0 +1,362 @@
+---
+id: 64ae6a43e797ab035c56d88b
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Set the `disabled` property of the `input` element to `true`, and set the `checked` property of the `input` element to `false`.
+
+# --hints--
+
+You should set the `disabled` property of the `input` element to `true`
+
+```js
+assert.match(code, /input\.disabled\s*=\s*true/);
+```
+
+You should set the `checked` property of the `input` element to `false`.
+  
+```js
+assert.match(code, /input\.checked\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae6aff1af3780391f3a0a0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae6aff1af3780391f3a0a0.md
new file mode 100644
index 00000000000..a876f5c8cd6
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae6aff1af3780391f3a0a0.md
@@ -0,0 +1,370 @@
+---
+id: 64ae6aff1af3780391f3a0a0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Apply the `forEach` method to the `scoreSpans` that you can target all the `span` elements in the `scoreInputs` element. Then apply a callback function with `span` as argument. Inside the callback function, set the `textContent` property of the `span` element to empty string.
+
+# --hints--
+
+You should apply the `forEach` method to the `scoreSpans` variable.
+
+```js
+assert.match(code, /scoreSpans\.forEach/);
+```
+
+You should apply a callback function to the `forEach` method with argument of `span`.
+
+```js
+assert.match(code, /scoreSpans\.forEach\(\s*(function\s*\(\s*span\s*\)|\(\s*span\s*\)\s*=>)/);
+```
+
+You should set the `textContent` property of the `span` element to `""`.
+
+```js
+assert.match(code, /span\.textContent\s*=\s*["']["']/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae70794c6760043f553998.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae70794c6760043f553998.md
new file mode 100644
index 00000000000..f39bddbe525
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae70794c6760043f553998.md
@@ -0,0 +1,377 @@
+---
+id: 64ae70794c6760043f553998
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+The next is to setup the functionality for the `keepScoreBtn`.
+
+Start by adding an `addEventListener()` to your `keepScoreBtn`. For the first argument, pass in a `click` event and for the second argument pass in an empty callback function.
+
+# --hints--
+
+You should add an `addEventListener()` to your `keepScoreBtn` variable.
+
+```js
+assert.match(code, /keepScoreBtn\.addEventListener\(\s*["']click["']/);
+```
+
+Your `addEventListener()` should have a `click` event for the first argument.
+
+```js
+assert.match(code, /keepScoreBtn\.addEventListener\(\s*["']click["']/);
+```
+
+Your `addEventListener()` should have a callback function for the second argument.
+
+```js
+assert.match(code, /keepScoreBtn\.addEventListener\(\s*["']click["']\s*,\s*(function|[^{]*=>\s*{)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae722962105404772b7618.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae722962105404772b7618.md
new file mode 100644
index 00000000000..8ed1e1e8251
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae722962105404772b7618.md
@@ -0,0 +1,371 @@
+---
+id: 64ae722962105404772b7618
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Next, declare two unassigned `let` variables named `selectedValue` and `achieved`. These will be used to store the selected value and the achieved value respectively.
+
+# --hints--
+
+You should have a `let` variable named `selectedValue`.
+
+```js
+assert.match(code, /let\s+selectedValue\s*;?/);
+```
+
+You should have a `let` variable named `achieved`.
+
+```js
+assert.match(code, /let\s+achieved\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae74510e6aed04a975f72f.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae74510e6aed04a975f72f.md
new file mode 100644
index 00000000000..45e3103435f
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64ae74510e6aed04a975f72f.md
@@ -0,0 +1,368 @@
+---
+id: 64ae74510e6aed04a975f72f
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+The `scoreInputs` is an array of radio input fields. Create a `for` loop to iterate through each element. Within the loop, create a variable named `radioButton` to represent the current element of the `scoreInputs` array.
+
+# --hints--
+
+You should have a `for` of loop to iterate through the `scoreInputs` array. Within the loop, create a variable named `radioButton` to represent the current element of the `scoreInputs` array.
+
+```js
+assert.match(code, /for\s*\(\s*(const|let|var)\s+radioButton\s+of\s+scoreInputs\s*\)\s*{\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  let selectedValue;
+  let achieved;
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b457bb4cd0e2013d839c92.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b457bb4cd0e2013d839c92.md
new file mode 100644
index 00000000000..d934435c7c1
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b457bb4cd0e2013d839c92.md
@@ -0,0 +1,390 @@
+---
+id: 64b457bb4cd0e2013d839c92
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Inside the loop, use an `if` statement to check if the current element `radioButton` is checked using `.checked` property. If it is `true`, then reassign the `selectedValue` to `radioButton.value`.
+
+Then, inside the `if` statement, reassign the `achieved` variable to `radioButton.id`. In the end, add a `break` statement to exit the loop.
+
+# --hints--
+
+You should create an `if` statement to check if the current element `radioButton` is checked using `.checked` property.
+
+```js
+assert.match(code, /if\s*\(\s*radioButton\s*\.\s*checked\s*\)\s*{\s*[^}]*\s*}/);
+```
+
+you should reassign the `selectedValue` to `radioButton.value`.
+
+```js
+assert.match(code, /selectedValue\s*=\s*radioButton\s*\.\s*value/);
+```
+
+you should reassign the `achieved` variable to `radioButton.id`.
+
+```js
+assert.match(code, /achieved\s*=\s*radioButton\s*\.\s*id/);
+```
+
+You should add a `break` statement to exit the loop.
+
+```js
+assert.match(code, /break\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  let selectedValue;
+  let achieved;
+
+  for (const radioButton of scoreInputs) {
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b45a195557d801660f07d5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b45a195557d801660f07d5.md
new file mode 100644
index 00000000000..d51f5998090
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b45a195557d801660f07d5.md
@@ -0,0 +1,394 @@
+---
+id: 64b45a195557d801660f07d5
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You should write an `if` statement to check against the `selectedValue` variable. Inside the `if` statement reassign `rolls` to `0`, increment `round` by `1`.Then, you will call the functions named `updateStats` and `resetRadioOption`. Finally, you will call the function named `updateScore` and pass in arguments `selectedValue` and `achieved`.
+
+# --hints--
+
+You should create an `if` statement to check against the `selectedValue` variable.
+
+```js
+assert.match(code, /if\s*\(\s*selectedValue\s*\)\s*{\s*[^}]*\s*}/);
+```
+
+Inside the `if` statement, you will reassign `rolls` to `0`, increment `round` by `1`.
+
+```js
+assert.match(code, /.*if\s*\(\s*selectedValue\s*\)\s*{\s*rolls\s*=\s*0\s*;?\s*round\s*\+\+\s*;?.*}/s);
+```
+
+You will call the functions named `updateStats` and `resetRadioOption`.
+
+```js
+assert.match(code, /if\s*\(\s*selectedValue\s*\)\s*{\s*rolls\s*=\s*0\s*;?\s*round\s*\+\+\s*;?\s*updateStats\s*\(\s*\)\s*;?\s*resetRadioOption\s*\(\s*\).*}/s);
+```
+
+You will call the function named `updateScore` and pass in arguments `selectedValue` and `achieved`.
+
+```js
+assert.match(code, /if\s*\(\s*selectedValue\s*\)\s*{\s*rolls\s*=\s*0\s*;?\s*round\s*\+\+\s*;?\s*updateStats\s*\(\s*\)\s*;?\s*resetRadioOption\s*\(\s*\)\s*;?\s*updateScore\s*\(\s*selectedValue\s*,\s*achieved\s*\)\s*;?\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  let selectedValue;
+  let achieved;
+
+  for (const radioButton of scoreInputs) {
+    if (radioButton.checked) {
+      selectedValue = radioButton.value;
+      achieved = radioButton.id;
+      break;
+    }
+  }
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b45d46f718ff01988c51ad.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b45d46f718ff01988c51ad.md
new file mode 100644
index 00000000000..cc1960d23aa
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b45d46f718ff01988c51ad.md
@@ -0,0 +1,401 @@
+---
+id: 64b45d46f718ff01988c51ad
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Create an `if` statement to check if  the value of `round` is greater than `6`. Then, create a setTimeout function to show the alert message after 500 milliseconds. The alert message should be `Game over! Your total score is ${totalScore}`. After the alert message, call the `resetGame` function to reset the game.
+
+# --hints--
+
+You should create an `if` statement to check if `round` is more than `6` or not.
+  
+```js
+assert.match(code, /if\s*\(\s*round\s*>\s*6\s*\)\s*{\s*[^}]*\s*}/);
+```
+
+You should create a `setTimeout` function to show the alert message after 500 milliseconds.
+  
+```js
+assert.match(code, /setTimeout\s*\(\s*\(\)\s*=>\s*{\s*[\s\S]*?\s*}\s*,\s*500\s*\)/);
+```
+
+You should use `alert` to show the alert message stating `Game over! Your total score is ${totalScore}` inside the setTimeout function.
+
+```js
+assert.match(code, /setTimeout\s*\(\s*\(\s*\)\s*=>\s*{\s*[^}]*\balert\s*\(\s*`Game\s*Over!\s*Your\s*total\s*score\s*is\s*\${totalScore}`\s*\)[^}]*\s*}\s*,\s*500\s*\)/);
+```
+
+You should call the `resetGame` function after the alert message.
+
+```js
+assert.match(code, /setTimeout\s*\(\s*\(\s*\)\s*=>\s*{\s*alert\s*\(\s*`Game\s*Over!\s*Your\s*total\s*score\s*is\s*\${totalScore}`\s*\)\s*;\s*resetGame\s*\(\s*\);\s*},\s*500\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  let selectedValue;
+  let achieved;
+
+  for (const radioButton of scoreInputs) {
+    if (radioButton.checked) {
+      selectedValue = radioButton.value;
+      achieved = radioButton.id;
+      break;
+    }
+  }
+
+  if (selectedValue) {
+    rolls = 0;
+    round++;
+    updateStats();
+    resetRadioOption();
+    updateScore(selectedValue, achieved);
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b8c2130652b4013da1cc8a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b8c2130652b4013da1cc8a.md
new file mode 100644
index 00000000000..c5a5b1aa90c
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b8c2130652b4013da1cc8a.md
@@ -0,0 +1,390 @@
+---
+id: 64b8c2130652b4013da1cc8a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create an `else` statement and display `Please select an option or roll the dice` using `alert()`.
+
+# --hints--
+
+You should create an `else` statement and display `Please select an option or roll the dice` using `alert()`.
+
+```js
+assert.match(code, /else\s*{\s*alert\s*\(\s*['"`]Please\s*select\s*an\s*option\s*or\s*roll\s*the\s*dice['"`]\s*\)\s*;?\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  let selectedValue;
+  let achieved;
+
+  for (const radioButton of scoreInputs) {
+    if (radioButton.checked) {
+      selectedValue = radioButton.value;
+      achieved = radioButton.id;
+      break;
+    }
+  }
+
+  if (selectedValue) {
+    rolls = 0;
+    round++;
+    updateStats();
+    resetRadioOption();
+    updateScore(selectedValue, achieved);
+
+    if (round > 6) {
+      setTimeout(() => {
+        alert(`Game Over! Your total score is ${totalScore}`);
+        resetGame();
+      }, 500);
+    }
+  }
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b8c3f6f4dfc701661fab4f.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b8c3f6f4dfc701661fab4f.md
new file mode 100644
index 00000000000..c3a98312ede
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/64b8c3f6f4dfc701661fab4f.md
@@ -0,0 +1,770 @@
+---
+id: 64b8c3f6f4dfc701661fab4f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Create a function named `updateScore` with 2 arguments named `selectedValue` and `achieved`. Then write a line of code that updates the totalScore variable by adding the integer value of the `selectedValue` argument to the `totalScore` variable. 
+
+Next, using the `innerHTMl` property, update the `totalScoreText` variable to display the `totalScore` variable. Finally, using the `innerHTML` property, set the `scoreHistory` to display `<li>${achieved} : ${selectedValue}</li>`
+
+# --hints--
+
+TODO: add tests in follow up PR
+
+```js
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  let selectedValue;
+  let achieved;
+
+  for (const radioButton of scoreInputs) {
+    if (radioButton.checked) {
+      selectedValue = radioButton.value;
+      achieved = radioButton.id;
+      break;
+    }
+  }
+
+  if (selectedValue) {
+    rolls = 0;
+    round++;
+    updateStats();
+    resetRadioOption();
+    updateScore(selectedValue, achieved);
+
+    if (round > 6) {
+      setTimeout(() => {
+        alert(`Game Over! Your total score is ${totalScore}`);
+        resetGame();
+      }, 500);
+    }
+  } else {
+    alert("Please select an option or roll the dice");
+  }
+});
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+const updateScore = (selectedValue, achieved) => {
+  totalScore += parseInt(selectedValue);
+  totalScoreText.innerHTML = totalScore;
+
+  scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
+};
+
+const resetRadioOption = () => {
+  scoreInputs.forEach((input) => {
+    input.disabled = true;
+    input.checked = false;
+  });
+
+  scoreSpans.forEach((span) => {
+    span.textContent = "";
+  });
+};
+
+const updateRadioOption = (optionNode, score) => {
+  scoreInputs[optionNode].disabled = false;
+  scoreInputs[optionNode].value = score;
+  scoreSpans[optionNode].textContent = `, score = ${score}`;
+};
+
+const straightDetector = (arr) => {
+  const sortNumbers = arr.sort((a, b) => a - b);
+  const uniqueNumbers = [...new Set(sortNumbers)];
+  const stringifyArray = uniqueNumbers.join("");
+
+  const smallStraightLogic = ["1234", "2345", "3456"];
+  const largeStraightLogic = ["12345", "23456"];
+
+  if (smallStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(3, 30);
+  }
+
+  if (largeStraightLogic.includes(stringifyArray)) {
+    updateRadioOption(4, 40);
+  }
+
+  updateRadioOption(5, 0);
+}
+
+const findRollResult = (arr) => {
+  straightDetector(arr);
+};
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    updateStats();
+    findRollResult(diceValuesArr);
+  }
+});
+
+rulesBtn.addEventListener("click", () => {
+  isModalShowing = !isModalShowing;
+
+  if (isModalShowing) {
+    rulesBtn.textContent = "Hide Rules";
+    rulesContainer.style.display = "block";
+  } else {
+    rulesBtn.textContent = "Show Rules";
+    rulesContainer.style.display = "none";
+  }
+});
+
+keepScoreBtn.addEventListener("click", () => {
+  let selectedValue;
+  let achieved;
+
+  for (const radioButton of scoreInputs) {
+    if (radioButton.checked) {
+      selectedValue = radioButton.value;
+      achieved = radioButton.id;
+      break;
+    }
+  }
+
+  if (selectedValue) {
+    rolls = 0;
+    round++;
+    updateStats();
+    resetRadioOption();
+    updateScore(selectedValue, achieved);
+
+    if (round > 6) {
+      setTimeout(() => {
+        alert(`Game Over! Your total score is ${totalScore}`);
+        resetGame();
+      }, 500);
+    }
+  } else {
+    alert("Please select an option or roll the dice");
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/6579fc66adaabbca6ceddb1f.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/6579fc66adaabbca6ceddb1f.md
new file mode 100644
index 00000000000..d20409d1cb0
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/6579fc66adaabbca6ceddb1f.md
@@ -0,0 +1,279 @@
+---
+id: 6579fc66adaabbca6ceddb1f
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn algorithmic thinking by building a dice game. There are a total of 6 rounds and for each round, the player can roll the dice up to 3 times and collect a score. 
+
+The HTML and CSS have been provided for you. Feel free to explore them.
+
+When you are ready, use the `querySelectorAll` method to target all elements with the `class` of `die`, and assign that to a constant called `listOfAllDice`.
+
+# --hints--
+
+You should have a `const` variable called `listOfAllDice`.
+
+```js
+assert.match(code, /const\s*listOfAllDice\s*/);
+```
+
+You should assign the `document.querySelectorAll()` method to the `listOfAllDice` variable.
+
+```js
+assert.match(code, /const\s+listOfAllDice\s*=\s*document\.querySelectorAll\s*\(.*\);?/);
+```
+
+You should target all elements with the `class` of `die` inside the `querySelectorAll` method.
+
+```js
+assert.match(code, /const\s*listOfAllDice\s*=\s*document\.querySelectorAll\s*\(\s*['"]\.die['"]\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a018ddd0006ce5bc29fa4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a018ddd0006ce5bc29fa4.md
new file mode 100644
index 00000000000..822c5b5d4a9
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a018ddd0006ce5bc29fa4.md
@@ -0,0 +1,298 @@
+---
+id: 657a018ddd0006ce5bc29fa4
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+The next step is to select all of the elements responsible for displaying the scores. 
+
+Use the `querySelectorAll()` method to access all of the `input` elements inside the `#score-options` `div` element and assign that result to a constant called `scoreInputs`.
+
+Then use the `querySelectorAll()` method to access all of the `span` elements inside the `#score-options` `div` element and assign that result to a constant called `scoreInputs`.
+
+# --hints--
+
+You should declare a variable named `scoreInputs`.
+
+```js
+assert.match(code, /const\s+scoreInputs\s*/);
+```
+
+You should assign the `document.querySelectorAll()` method to the `scoreInputs` variable.
+
+```js
+assert.match(code, /const\s+scoreInputs\s*=\s*document\.querySelectorAll\(.*\)/);
+```
+
+You should target all of the `input` elements inside the `#score-options` `div` element.
+
+```js
+assert.match(code, /const\s+scoreInputs\s*=\s*document\.querySelectorAll\(\s*['"]#score-options\s+input['"]\s*\)/);
+```
+
+You should declare a variable named `scoreSpans`.
+
+```js
+assert.match(code, /const\s+scoreSpans\s*/);
+```
+
+You should assign the `document.querySelectorAll()` method to the `scoreSpans` variable.
+
+```js
+assert.match(code, /const\s+scoreSpans\s*=\s*document\.querySelectorAll\(.*\);?/);
+```
+
+You should target all of the `span` elements inside the `#score-options` `div` element.
+
+```js
+assert.match(code, /const\s+scoreSpans\s*=\s*document\.querySelectorAll\(\s*['"]#score-options\s+span['"]\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a05f6b5654ad24614a229.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a05f6b5654ad24614a229.md
new file mode 100644
index 00000000000..51bda0d9614
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a05f6b5654ad24614a229.md
@@ -0,0 +1,288 @@
+---
+id: 657a05f6b5654ad24614a229
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the elements responsible for displaying the current round text. 
+
+Use `getElementById()` to access the element with the `id` of `current-round` and assign that to a constant called `currentRoundText`. 
+
+Then, use `getElementById()` to access the element with the `id` of `current-round-rolls` and assign that to a constant called `currentRoundRollsText`. 
+
+# --hints--
+
+You should declare a `const` variable named `currentRoundText`.
+
+```js
+assert.match(code, /const\s*currentRoundText\s*/);
+```
+
+You should use `document.getElementById()` to target the `current-round` element and assign it to your `currentRoundText` variable.
+
+```js
+assert.match(code, /const\s*currentRoundText\s*=\s*document\.getElementById\s*\(\s*['"]current-round['"]\s*\)\s*;?/s);
+```
+
+You should declare a `const` variable named `currentRoundRollsText`.
+
+```js
+assert.match(code, /const\s*currentRoundRollsText\s*/);
+```
+
+You should use `document.getElementById()` to target the `current-round-rolls` element and assign it to your `currentRoundRollsText` variable.
+
+```js
+assert.match(code, /const\s*currentRoundRollsText\s*=\s*document\.getElementById\s*\(\s*['"]current-round-rolls['"]\s*\)\s*;?/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0894e5b6acd463cf5aac.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0894e5b6acd463cf5aac.md
new file mode 100644
index 00000000000..2fae254824f
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0894e5b6acd463cf5aac.md
@@ -0,0 +1,290 @@
+---
+id: 657a0894e5b6acd463cf5aac
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Next, access the elements responsible for displaying the score history and total text. 
+
+Use `getElementById()` to access the element with the `id` of `total-score` and assign that to a constant called `totalScoreText`. 
+
+Then, use `getElementById()` to access the element with the `id` of `score-history` and assign that to a constant called `scoreHistory`. 
+
+# --hints--
+
+You should declare a `const` variable named `totalScoreText`.
+
+```js
+assert.match(code, /const\s*totalScoreText\s*/);
+```
+
+You should use `document.getElementById()` to target the `total-score` element and assign it to your `totalScoreText` variable.
+
+```js
+assert.match(code, /const\s*totalScoreText\s*=\s*document\.getElementById\s*\(\s*['"]total-score['"]\s*\)\s*;?/s);
+```
+
+You should declare a `const` variable named `scoreHistory`.
+
+```js
+assert.match(code, /const\s*scoreHistory\s*/);
+```
+
+You should use `document.getElementById()` to target the `score-history` element and assign it to your `scoreHistory` variable.
+
+```js
+assert.match(code, /const\s*scoreHistory\s*=\s*document\.getElementById\s*\(\s*['"]score-history['"]\s*\)\s*;?/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0b3f420571d6a2208a18.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0b3f420571d6a2208a18.md
new file mode 100644
index 00000000000..e436f34d3bc
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0b3f420571d6a2208a18.md
@@ -0,0 +1,292 @@
+---
+id: 657a0b3f420571d6a2208a18
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Next, access the buttons that are responsible for keeping the score and rolling the dice.
+
+Use `getElementById()` to access the element with the `id` of `roll-dice-btn` and assign that to a constant called `rollDiceBtn`. 
+
+Then, use `getElementById()` to access the element with the `id` of `keep-score-btn` and assign that to a constant called `keepScoreBtn`. 
+
+# --hints--
+
+You should use `const` to declare a variable called `rollDiceBtn`.
+
+```js
+assert.match(code, /const\s*rollDiceBtn\s*/);
+```
+
+You should use `document.getElementById()` to target the `roll-dice-btn` element and assign it to your `rollDiceBtn` variable.
+
+```js
+assert.match(code, /const\s+rollDiceBtn\s*=\s*document\.getElementById\s*\(\s*['"]\s*roll-dice-btn\s*['"]\s*\)/)
+```
+
+You should use `const` to declare a variable called `keepScoreBtn`.
+
+```js
+assert.match(code, /const\s*keepScoreBtn\s*/);
+```
+
+You should use `document.getElementById()` to target the `keep-score-btn` element and assign it to your `keepScoreBtn` variable.
+
+```js
+assert.match(code, /const\s+keepScoreBtn\s*=\s*document\.getElementById\s*\(\s*['"]\s*keep-score-btn\s*['"]\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0d3d9ce4e1d8794a3c14.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0d3d9ce4e1d8794a3c14.md
new file mode 100644
index 00000000000..651680b6e8f
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0d3d9ce4e1d8794a3c14.md
@@ -0,0 +1,294 @@
+---
+id: 657a0d3d9ce4e1d8794a3c14
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Next, you will need access the container used to display the rules and the rules button element.
+
+Use `querySelector()` to access the element with the `class` of `rules-container` and assign that to a constant called `rulesContainer`. 
+
+Then, use `getElementById()` to access the element with the `id` of `rules-btn` and assign that to a constant called `rulesBtn`. 
+
+# --hints--
+
+You should use `const` to declare a variable called `rulesContainer`.
+
+```js
+assert.match(code, /const\s*rulesContainer\s*/);
+```
+
+You should use `document.querySelector()` to target the `rules-container` element and assign it to your `rulesContainer` variable.
+
+```js
+assert.match(code, /const\s*rulesContainer\s*=\s*document\.querySelector\s*\(\s*['"]\.rules\-container['"]\s*\)/);
+```
+
+You should use `const` to declare a variable called `rulesBtn`.
+
+```js
+assert.match(code, /const\s*rulesBtn\s*/);
+```
+
+You should use `document.getElementById()` to target the `rules-btn` element and assign it to your `rulesBtn` variable.
+
+```js
+assert.match(code, /const\s+rulesBtn\s*=\s*document\.getElementById\s*\(\s*['"]\s*rules-btn\s*['"]\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0ea50da0c8d9d6d7950a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0ea50da0c8d9d6d7950a.md
new file mode 100644
index 00000000000..ca0bb02be56
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0ea50da0c8d9d6d7950a.md
@@ -0,0 +1,282 @@
+---
+id: 657a0ea50da0c8d9d6d7950a
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+When the user clicks on the "Show rules" button, they should be able to toggle between showing and hiding the game rules.
+
+Use `let` to create a variable called `isModalShowing` and assign it the value of `false`. 
+
+# --hints--
+
+You should use `let` to declare a variable named `isModalShowing`.
+
+```js
+assert.match(code, /let\s*isModalShowing\s*/);
+```
+
+You should assign the boolean `false` to your `isModalShowing` variable.
+
+```js
+assert.match(code, /let\s*isModalShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0fb4dab33fdaf82232c6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0fb4dab33fdaf82232c6.md
new file mode 100644
index 00000000000..61c3ed8fef0
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a0fb4dab33fdaf82232c6.md
@@ -0,0 +1,284 @@
+---
+id: 657a0fb4dab33fdaf82232c6
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Each time the user rolls the dice, you will need to keep track of all of the dice values. 
+
+Use `let` to create a variable called `diceValuesArr` and assign it the value of an empty array.
+
+# --hints--
+
+You should have a `let` variable called `diceValuesArr`.
+
+```js
+assert.match(code, /let\s*diceValuesArr\s*/);
+```
+
+You should assign an empty array to your `diceValuesArr` variable.
+
+```js
+assert.match(code, /let\s*diceValuesArr\s*=\s*\[\s*\]\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let isModalShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a16a3e36c17e088e55c8b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a16a3e36c17e088e55c8b.md
new file mode 100644
index 00000000000..12be8d76ed3
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a16a3e36c17e088e55c8b.md
@@ -0,0 +1,323 @@
+---
+id: 657a16a3e36c17e088e55c8b
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Throughout the game, you will need to keep track of the current score, total score, number of rolls and which round the player is on. 
+
+Use `let` to declare three variables named `rolls`, `score`, and `totalScore` and set all of their values to the number `0`. 
+
+Then, use `let` to declare a variable named `round` and assign it the value `1`. 
+
+# --hints--
+
+You should use `let` to declare a variable named `round`.
+
+```js
+assert.match(code, /let\s*round/);
+```
+
+You should set the value of `round` to `1`.
+
+```js
+assert.match(code, /round\s*=\s*1/);
+```
+
+You should use `let` to declare a variable named `rolls`.
+
+```js
+assert.match(code, /let\s*rolls/);
+```
+
+You should set the value of `rolls` to `0`.
+
+```js
+assert.match(code, /rolls\s*=\s*0/);
+```
+
+You should use `let` to declare a variable named `score`.
+
+```js
+assert.match(code, /let\s*score/);
+```
+
+You should set the value of `score` to `0`.
+
+```js
+assert.match(code, /score\s*=\s*0/);
+```
+
+You should use `let` to declare a variable named `totalScore`.
+
+```js
+assert.match(code, /let\s*totalScore/);
+```
+
+You should set the value of `totalScore` to `0`.
+
+```js
+assert.match(code, /totalScore\s*=\s*0/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a19e477dc04e36a86dffc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a19e477dc04e36a86dffc.md
new file mode 100644
index 00000000000..b4a63d6ee94
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a19e477dc04e36a86dffc.md
@@ -0,0 +1,289 @@
+---
+id: 657a19e477dc04e36a86dffc
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Whenever the user rolls the dice, the dice display should update on the screen.
+
+Create an arrow function called `rollDice` that does not take in any parameters. 
+
+# --hints--
+
+`rollDice` should be a function.
+
+```js
+assert.isFunction(rollDice);
+```
+
+`rollDice` should be an arrow function
+
+```js
+assert.match(code, /\s*const\s+rollDice\s*=\s*\(\s*\)\s*=>\s*{\s*}\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a1b8d2ff90ce56dc9c8dc.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a1b8d2ff90ce56dc9c8dc.md
new file mode 100644
index 00000000000..0ced0abbd2e
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a1b8d2ff90ce56dc9c8dc.md
@@ -0,0 +1,285 @@
+---
+id: 657a1b8d2ff90ce56dc9c8dc
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+For each dice roll, you will need to clear out the previous dice values in the `diceValuesArr`. 
+
+Inside the `rollDice` function, reassign an empty array to the `diceValuesArr` variable.
+
+# --hints--
+
+You should reassign an empty array to your `diceValuesArr` variable.
+
+```js
+assert.match(code, /const\s+rollDice\s*=\s*\(\s*\)\s*=>\s*{\s*diceValuesArr\s*=\s*\[\s*\]\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+--fcc-editable-region--
+const rollDice = () => {
+
+};
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a1d7a4da888e7acfbf9fd.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a1d7a4da888e7acfbf9fd.md
new file mode 100644
index 00000000000..d4e104f1109
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a1d7a4da888e7acfbf9fd.md
@@ -0,0 +1,304 @@
+---
+id: 657a1d7a4da888e7acfbf9fd
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+When the user rolls the dice, you will need to generate 5 random numbers representing each of the dice values. 
+
+To start, create a `for` loop that will loop a total of 5 times.
+
+# --hints--
+
+You should have a `for` loop.
+
+```js
+assert.match(code, /for\s*\(/)
+```
+
+Your `for` loop should initialize `i` to `0`.
+
+```js
+assert.match(code, /for\s*\(\s*let\s+i\s*=\s*0\s*;/);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than `5`.
+
+```js
+assert.match(code, /for\s*\(\s*let\s*i\s*=\s*0\s*;\s*i\s*<\s*5\s*;/);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs.
+
+```js
+assert.match(code, /for\s*\(\s*let\s*i\s*=\s*0\s*;\s*i\s*<\s*5\s*;\s*i\s*\+\+\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+--fcc-editable-region--
+const rollDice = () => {
+  diceValuesArr = [];
+
+};
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a218c34af9ceb661de044.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a218c34af9ceb661de044.md
new file mode 100644
index 00000000000..9bf36c3bcb6
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a218c34af9ceb661de044.md
@@ -0,0 +1,312 @@
+---
+id: 657a218c34af9ceb661de044
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+For each iteration of the `for` loop, you will need to generate a random number that represents one of the six possible values found on a dice.
+
+Use `Math.random()` to generate a random number ranging between 1 and 6 inclusive. Make sure to round that result down to the nearest whole integer. Then assign the entire result to a `const` variable called `randomDice`.
+
+# --hints--
+
+You should declare a variable named `randomDice` using the `const` keyword.
+
+```js
+assert.match(code, /const\s+randomDice\s*/);
+```
+
+You should assign `Math.random()` to the variable named `randomDice`.
+
+```js
+assert.match(code, /const\s+randomDice\s*=\s*.*Math\.random\s*\(\s*\)\s*/);
+```
+
+You should multiply `Math.random()` by 6.
+
+```js
+assert.match(code, /const\s+randomDice\s*=\s*.*Math\.random\s*\(\s*\)\s*\*\s*6\s*/);
+```
+
+You should use `Math.floor` to round the result down to the nearest whole number.
+
+```js
+assert.match(code, /const\s+randomDice\s*=\s*Math\.floor\s*\(\s*Math\.random\s*\(\s*\)\s*\*\s*6\s*\)\s*/);
+```
+
+You should add `1` to the end result of your `randomDice` variable.
+
+```js
+assert.match(code, /const\s+randomDice\s*=\s*Math\.floor\s*\(\s*Math\.random\s*\(\s*\)\s*\*\s*6\s*\)\s*\+\s*1\s*/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+--fcc-editable-region--
+const rollDice = () => {
+  diceValuesArr = [];
+  for (let i = 0; i < 5; i++) {
+
+  }
+};
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a34809aba0502807b1937.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a34809aba0502807b1937.md
new file mode 100644
index 00000000000..cd64de6575e
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a34809aba0502807b1937.md
@@ -0,0 +1,312 @@
+---
+id: 657a34809aba0502807b1937
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+If you try to roll the dice, you probably noticed that the `rolls` and `round` count do not change. You will need to update the text content for both of those values.
+
+Start by creating an arrow function called `updateStats` that does not take in any parameters. 
+
+# --hints--
+
+You should have a function called `updateStats`.
+
+```js
+assert.isFunction(updateStats);
+```
+
+Your `updateStats` function should be an arrow function.
+
+```js
+assert.match(code, /const\s+updateStats\s*=\s*\(\s*\)\s*=>\s*{[\s\S]*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a3c9ace5a8d086cf2cd2f.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a3c9ace5a8d086cf2cd2f.md
new file mode 100644
index 00000000000..b62e5c2ab26
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a3c9ace5a8d086cf2cd2f.md
@@ -0,0 +1,326 @@
+---
+id: 657a3c9ace5a8d086cf2cd2f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Inside your `updateStats` function, update the text content for the `currentRoundRollsText` by assigning `rolls` to `currentRoundRollsText.textContent`. 
+
+Below that, update the text content for the `currentRoundText` by assigning `round` to `currentRoundText.textContent`.
+
+# --hints--
+
+You should use the `textContent` property on the `currentRoundRollsText` variable.
+
+```js
+assert.match(code, /.*?currentRoundRollsText\s*\.\s*textContent/);
+```
+
+You should assign `rolls` to `currentRoundRollsText.textContent`.
+
+```js
+assert.match(code, /.*?currentRoundRollsText\s*\.\s*textContent\s*=\s*rolls\s*;?/s);
+```
+
+You should use the `textContent` property on the `currentRoundText` variable.
+
+```js
+assert.match(code, /.*?currentRoundText\s*\.\s*textContent/);
+```
+
+You should assign `round` to `currentRoundText.textContent`.
+
+```js
+assert.match(code, /.*?currentRoundText\s*\.\s*textContent\s*=\s*round\s*;?/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+--fcc-editable-region--
+const updateStats = () => {
+
+};
+--fcc-editable-region--
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+  }
+});
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a3ee8aa19b00ac3f78816.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a3ee8aa19b00ac3f78816.md
new file mode 100644
index 00000000000..9ba0cae4130
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/657a3ee8aa19b00ac3f78816.md
@@ -0,0 +1,311 @@
+---
+id: 657a3ee8aa19b00ac3f78816
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To see the `round` and `rolls` values update on the screen, call your `updateStats` function inside the `else` clause. 
+
+Now try rolling the dice, and you should see the `rolls` value properly updating.
+
+# --hints--
+
+You should call your `updateStats` function inside the `else` clause.
+
+```js
+assert.match(code, /updateStats\(\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Dice Game</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Advanced Dice Game</h1>
+    <button class="btn" id="rules-btn" type="button">Show rules</button>
+    <div class="rules-container">
+      <h2>Rules</h2>
+      <ul>
+        <li>There are total of six rounds</li>
+        <li>You can only roll the dice three times per round</li>
+        <li>To start the game, roll the dice</li>
+        <li>
+          Then, choose from one of the selected scores or roll the dice again
+        </li>
+        <li>
+          If you choose a selected score, then you will move to the next round
+        </li>
+        <li>
+          If you decline to choose a selected score, then you can roll the
+          dice again two more times
+        </li>
+      </ul>
+      <h2 class="points">Points</h2>
+      <ul>
+        <li>Three of a kind: Sum of all five dice</li>
+        <li>Four of a kind: Sum of all five dice</li>
+        <li>Full house: Three of a kind and a pair - 25 points</li>
+        <li>
+          Small straight: Four of the dice have consecutive values - 30 points
+        </li>
+        <li>
+          Large straight: All five dice have consecutive values - 40 points
+        </li>
+      </ul>
+    </div>
+  </header>
+
+  <main>
+    <form id="game">
+      <div id="dice">
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+        <div class="die"></div>
+      </div>
+
+      <p class="rounds-text">
+        <strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
+        <strong>Round:</strong> <span id="current-round">1</span>
+      </p>
+
+      <div id="score-options">
+        <div>
+          <input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
+          <label for="three-of-a-kind">Three of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
+          <label for="four-of-a-kind">Four of a kind<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="full-house" value="full-house" disabled />
+          <label for="full-house">Full house<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
+          <label for="small-straight">Small straight<span></span></label>
+        </div>
+        <div>
+          <input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
+          <label for="large-straight">Large straight<span></span></label>
+        </div>
+
+        <div>
+          <input type="radio" name="score-options" id="none" value="none" disabled />
+          <label for="none">None of the above<span></span></label>
+        </div>
+      </div>
+
+      <button class="btn" id="keep-score-btn" type="button">
+        Keep the above selected score
+      </button>
+      <button class="btn" id="roll-dice-btn" type="button">
+        Roll the dice
+      </button>
+    </form>
+
+    <div id="scores">
+      <h3>Score history (Total score: <span id="total-score">0</span>)</h3>
+      <ol id="score-history"></ol>
+    </div>
+  </main>
+  <script src="./script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --black: #000;
+  --white: #fff;
+  --grey: #3b3b4f;
+  --golden-yellow: #fecc4c;
+  --yellow: #ffcc4c;
+  --gold: #feac32;
+  --orange: #ffac33;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+header {
+  color: var(--light-grey);
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 25px 0;
+}
+
+.rules-container {
+  display: none;
+  background-color: var(--light-grey);
+  color: var(--black);
+  width: 50%;
+  margin: 20px auto;
+  height: 300px;
+  border-radius: 10px;
+  overflow-y: scroll;
+}
+
+.rules-container ul {
+  list-style-type: none;
+}
+
+.points {
+  margin-top: 15px;
+}
+
+main {
+  background-color: var(--light-grey);
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1rem;
+  margin: auto;
+  justify-items: center;
+  width: 50%;
+  border-radius: 10px;
+}
+
+#dice {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.die {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  margin-right: 15px;
+  border: 4px solid var(--black);
+  padding: 10px;
+}
+
+.rounds-text {
+  text-align: center;
+}
+
+input[type="radio"]:disabled + label {
+  color: var(--grey);
+}
+
+#score-history {
+  margin-top: 15px;
+  text-align: center;
+  list-style-position: inside;
+}
+
+.btn {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0 10px 0.5rem;
+  color: var(--black);
+  background-color: var(--gold);
+  background-image: linear-gradient(var(--golden-yellow), var(--orange));
+  border-color: var(--gold);
+  border-width: 3px;
+}
+
+.btn:hover:enabled {
+  background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+@media (max-width: 992px) {
+  main {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .btn {
+    width: 120px;
+  }
+}
+
+```
+
+```js
+const listOfAllDice = document.querySelectorAll(".die");
+const scoreInputs = document.querySelectorAll("#score-options input");
+const scoreSpans = document.querySelectorAll("#score-options span");
+const currentRoundText = document.getElementById("current-round");
+const currentRoundRollsText = document.getElementById("current-round-rolls");
+const totalScoreText = document.getElementById("total-score");
+const scoreHistory = document.getElementById("score-history");
+const rollDiceBtn = document.getElementById("roll-dice-btn");
+const keepScoreBtn = document.getElementById("keep-score-btn");
+const rulesContainer = document.querySelector(".rules-container");
+const rulesBtn = document.getElementById("rules-btn");
+
+let diceValuesArr = [];
+let isModalShowing = false;
+let score = 0;
+let totalScore = 0;
+let round = 1; 
+let rolls = 0; 
+
+const rollDice = () => {
+  diceValuesArr = [];
+
+  for (let i = 0; i < 5; i++) {
+    const randomDice = Math.floor(Math.random() * 6) + 1;
+    diceValuesArr.push(randomDice);
+  }
+
+  listOfAllDice.forEach((dice, index) => {
+    dice.textContent = diceValuesArr[index];
+  });
+};
+
+const updateStats = () => {
+  currentRoundRollsText.textContent = rolls;
+  currentRoundText.textContent = round;
+};
+
+
+rollDiceBtn.addEventListener("click", () => {
+  if (rolls === 3) {
+    alert("You have made three rolls this round. Please select a score.");
+  } else {
+    rolls++;
+    rollDice();
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  }
+});
+
+```
diff --git a/tools/challenge-parser/parser/__fixtures__/ast-exploded-marker.json b/tools/challenge-parser/parser/__fixtures__/ast-exploded-marker.json
index aa9ff5f9e81..b8a0dc8a6a8 100644
--- a/tools/challenge-parser/parser/__fixtures__/ast-exploded-marker.json
+++ b/tools/challenge-parser/parser/__fixtures__/ast-exploded-marker.json
@@ -530,4 +530,4 @@
     "start": { "line": 1, "column": 1, "offset": 0 },
     "end": { "line": 89, "column": 1, "offset": 758 }
   }
-}
+}
\ No newline at end of file