fix(curriculum): worked on early feedbacks for js role playing game (#49169)

* fix:implemented some of the recommendations of the earlier feedbacks on the JS RPG course * fix: improved some description texts of the JS RPG course (Made Naomi's requested changes)
2026-09-24 23:01:18 +08:00 · 2023-02-23 10:52:50 -08:00
parent 02ac246693
commit 9a3d0b7bfb
41 changed files with 116 additions and 45 deletions
@@ -7,7 +7,11 @@ dashedName: step-1

 # --description--

-JavaScript is a powerful language which allows you to build websites that are interactive. To get started, create your standard HTML boilerplate with a `DOCTYPE`, `html`, `head`, and `body`. Include a `title` element and a `link` for your stylesheet, and your `meta` tag for the `charset`. Then, create a `div` element with `id` set to `game` within your `body`. Use the text `RPG - Dragon Repeller` for your `title` element.
+JavaScript is a powerful language which allows you to build websites that are interactive. 
+
+To get started, create your standard HTML boilerplate with a `DOCTYPE`, `html`, `head`, and `body`, then add a `meta` tag for the `charset`. Add a `title` element and use the text `RPG - Dragon Repeller` for it. Include a `link` tag for your stylesheet to link the `styles.css` file.
+
+Finally, create a `div` element with `id` set to `game` within your `body`.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-10

 # --description--

-Give your `#game` a maximum width of `500px` and a maximum height of `400px`. Set the `background-color` to `lightgray` and the `color` to `white`. Finally, use margins to center it and give it `10px` of padding on all four sides.
+Give your `#game` a maximum width of `500px` and a maximum height of `400px`. Set the `background-color` to `lightgray` and the `color` to `white`. Use margins to center it by setting the top and bottom margin to `0`, and the left and right margin to `auto`. Finally, give it `10px` of padding on all four sides.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-13

 # --description--

-Hide your `#monsterStats` element for now. Do not change any of the other styling.
+For now, hide your `#monsterStats` element with the `display` property. Do not change any of the other styling.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-16

 # --description--

-One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing `F12` or `Ctrl+Shift+I`. You can also click the "Console" button above the preview window to see our built-in console. The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging.
+One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing `F12` or `Ctrl+Shift+I`. On Mac, you can press `Option + ⌘ + C` and select "Console". You can also click the "Console" button above the preview window to see our built-in console. 
+
+The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging.

 Add a `console.log("Hello World");` line between your `script` tags. Then click the "Console" button to open the console. You should see the text `Hello World`.

@@ -7,7 +7,9 @@ dashedName: step-17

 # --description--

-Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`.
+Before you start writing your project code, you should move it to its own file to keep things organized. 
+
+Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`.

 # --hints--

@@ -13,7 +13,9 @@ Variables can be <dfn>assigned</dfn> a value. When you do this while you declare
 var camperbot = "Bot";
 ```

-This would initialize the `camperbot` variable with a value of `Bot`. Initialize your `xp` variable to have a value of `0`.
+This would initialize the `camperbot` variable with a value of `Bot`, a string.
+
+Initialize your `xp` variable to have a value of `0`, a number.

 # --hints--

@@ -13,7 +13,9 @@ The player's inventory in your game will be able to hold multiple items. You wil
 let order = ["first", "second", "third"];
 ```

-This is an array which holds three values. Notice how the values are separated by commas. Change your `inventory` variable to be an array with the strings `stick`, `dagger`, and `sword`.
+This is an array which holds three values. Notice how the values are separated by commas.
+
+Change your `inventory` variable to be an array with the strings `stick`, `dagger`, and `sword`.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-29

 # --description--

-JavaScript interacts with the HTML using the <dfn>Document Object Model</dfn>, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the `document` variable, which represents your entire HTML document.
+JavaScript interacts with the HTML using the <dfn>Document Object Model</dfn>, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the `document` object, which represents your entire HTML document.

 One method for finding specific elements in your HTML is using the `querySelector()` method. The `querySelector()` method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the `<h1>` element in your HTML, you would write:

@@ -15,7 +15,9 @@ One method for finding specific elements in your HTML is using the `querySelecto
 let h1 = document.querySelector("h1");
 ```

-Note that `h1` is a string and matches the CSS selector you would use. Create a `button1` variable and use `querySelector()` to assign it your element with the `id` of `button1`. Remember that CSS `id` selectors are prefixed with a `#`.
+Note that `h1` is a string and matches the CSS selector you would use.
+
+Create a `button1` variable and use `querySelector()` to assign it your element with the `id` of `button1`. Remember that CSS `id` selectors are prefixed with a `#`.

 # --hints--

@@ -11,6 +11,7 @@ Comments allow you to add notes to your code. In JavaScript, single-line comment

 ```js
 // hello world
+
 /*
  hello world
 */
@@ -7,7 +7,13 @@ dashedName: step-36

 # --description--

-`button1` represents your first `button` element. These elements have a special property called `onclick`, which you can use to determine what happens when someone clicks that button. Properties in JavaScript can be accessed in a couple of ways - the first is with <dfn>dot notation</dfn>. Accessing the `onclick` property of a button would look like `button.onclick`.
+`button1` represents your first `button` element. These elements have a special property called `onclick`, which you can use to determine what happens when someone clicks that button.
+
+You can access properties in JavaScript a couple of different ways. The first is with <dfn>dot notation</dfn>. Accessing the `onclick` property of a button would look like: 
+
+```js
+button.onclick
+```

 Use dot notation to set the `onclick` property of your `button1` to the variable `goStore`. This variable will be something you write later. Note that `button1` is already declared, so you do not need to use `let` or `const`.

@@ -7,7 +7,7 @@ dashedName: step-43

 # --description--

-Now add a line that updates the text of `button2` to say `Buy weapon (30 gold)` and update the text of `button3` to say `Go to town square`.
+Now, add a line that updates the text of `button2` to say `Buy weapon (30 gold)` and update the text of `button3` to say `Go to town square`.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-44

 # --description--

-You will also need to update the functions that run when the buttons are clicked. Update the `onclick` property for each button to run `buyHealth`, `buyWeapon`, and `goTown`, respectively.
+You will also need to update the functions that run when the buttons are clicked again.
+
+In your `goStore()` function, update the `onclick` property for each button to run `buyHealth`, `buyWeapon`, and `goTown`, respectively.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-48

 # --description--

-In your `goTown` function, update your `button` elements' `innerText` properties to be `Go to store`, `Go to cave`, and `Fight dragon`. Update your `onclick` properties to be `goStore`, `goCave`, and `fightDragon`, respectively. Finally, update your text's `innerText` property to be `You are in the town square. You see a sign that says Store.`.
+In your `goTown` function, change your `button` elements' `innerText` properties to be `Go to store`, `Go to cave`, and `Fight dragon`. Update your `onclick` properties to be `goStore`, `goCave`, and `fightDragon`, respectively.
+
+Finally, update your text's `innerText` property to be `You are in the town square. You see a sign that says Store.`.

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-52

 You previously used an array to store strings. But arrays can store any data type. This time, your array will be storing objects. Objects are similar to arrays, but with a few differences. One difference is that objects use properties, or keys, to access and modify data.

-Objects are indicated by curly braces. An empty object would look like `{}`. Add an empty object to your `locations` array.
+Objects are indicated by curly braces. An empty object would look like `{}`.
+
+Add an empty object to your `locations` array.

 # --hints--

@@ -7,9 +7,9 @@ dashedName: step-54

 # --description--

-Just like array values, object properties are separated by a comma. Add a comma after your `name` property and add a `button text` property with the value of an empty array. Note that because the property name has more than one word, you'll need to surround it in quotes.
+Just like array values, object properties are separated by a comma. Add a comma after your `name` property and add a `button text` property with the value of an empty array. 

-For example:
+Note that, because the property name has more than one word, you'll need to surround it in quotes. For example:

 ```js
 {
@@ -7,7 +7,13 @@ dashedName: step-60

 # --description--

-Instead of assigning the `innerText` and `onclick` properties to specific strings and functions, the `update` function will use data from the `location` that is passed into it. First, that data needs to be passed. Inside the `goTown` function, call the `update` function. Here is an example of calling a function named `myFunction`: `myFunction();`.
+Instead of assigning the `innerText` and `onclick` properties to specific strings and functions, the `update` function will use data from the `location` that is passed into it. First, that data needs to be passed.
+
+Inside the `goTown` function, call the `update` function. Here is an example of calling a function named `myFunction`:
+
+```js
+myFunction();
+```

 # --hints--

@@ -7,7 +7,13 @@ dashedName: step-61

 # --description--

-You now need to pass the `location` argument into the `update` call. You pass arguments by including them within the parentheses of the function call. For example, calling `myFunction` with an `arg` argument would look like: `myFunction(arg)`. Pass your `locations` array into the `update` call.
+You now need to pass the `location` argument into the `update` call. You pass arguments by including them within the parentheses of the function call. For example, calling `myFunction` with an `arg` argument would look like:
+
+```js
+myFunction(arg)
+```
+
+Pass your `locations` array into the `update` call.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-62

 # --description--

-The `locations` array contains two locations: the `town square` and the `store`. Currently you are passing that entire array into the `update` function. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`.
+The `locations` array contains two locations: the `town square` and the `store`. Currently you are passing that entire array into the `update` function.
+
+Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`.

 This is called <dfn>bracket notation</dfn>. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array.

@@ -7,7 +7,9 @@ dashedName: step-63

 # --description--

-Now your `update` function needs to use the argument you pass into it. Inside the `update` function, change the `button1.innerText` assignment to be `location["button text"]`. That uses bracket notation to get the `button text` property of the `location` object passed into the function.
+Now your `update` function needs to use the argument you pass into it.
+
+Inside the `update` function, change the value of the `button1.innerText` assignment to be `location["button text"]`. That way, you use bracket notation to get the `button text` property of the `location` object passed into the function.

 # --hints--

@@ -7,7 +7,13 @@ dashedName: step-67

 # --description--

-Finally, update the `text.innerText` assignment to equal the `text` from the `location` object. However, instead of using bracket notation, use <dfn>dot notation</dfn>. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`.
+Finally, update the `text.innerText` assignment to equal the `text` from the `location` object. However, instead of using bracket notation, use <dfn>dot notation</dfn>.
+
+Here is an example of accessing the `name` property of an object called `person`:
+
+```js
+person.name
+```

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-75

 # --description--

-Now that you are updating the `gold` and `health` variables, you need to display those new values on the game screen. After your assignment lines, assign the `innerText` property of `goldText` to be the variable `gold`. Use the same pattern to update `healthText` with the `health` variable.
+Now that you are updating the `gold` and `health` variables, you need to display those new values on the game screen.
+
+After your assignment lines, assign the `innerText` property of `goldText` to be the variable `gold`. Use the same pattern to update `healthText` with the `health` variable.

 Here is an example:

@@ -19,6 +21,8 @@ total.innerText = value;

 You can test this by clicking your "Go to store" button, followed by your "Buy Health" button.

+**Note:** Your answer should only be two lines of code.
+
 # --hints--

 Your `buyHealth` function should update the text of `healthText` to be the value of `health`.
@@ -7,7 +7,7 @@ dashedName: step-78

 # --description--

-Now when a player tries to buy health it will only work if they have enough money. If they do not, nothing will happen. Add an `else` statement where you can put code to run if a player does not have enough money.
+Now when a player tries to buy health, it will only work if they have enough money. If they do not, nothing will happen. Add an `else` statement where you can put code to run if a player does not have enough money.

 Here is an example of an empty `else` statement:

@@ -9,7 +9,7 @@ dashedName: step-84

 The value of the `currentWeapon` variable corresponds to an index in the `weapons` array. The player starts with a `stick`, since `currentWeapon` starts at `0` and `weapons[0]` is the `stick` weapon.

-In the `buyWeapon` function, add one to `currentWeapon` - the user is buying the next weapon in the `weapons` array.
+In the `buyWeapon` function, use compound assignment to add `1` to `currentWeapon` - the user is buying the next weapon in the `weapons` array.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-88

 # --description--

-For your `newWeapon` variable, use bracket notation to use the `currentWeapon` variable to access an object within the `weapons` array.
+Use bracket notation to access an object within the `weapons` array and assign it to your `newWeapon` variable. Place the variable `currentWeapon` within the brackets.

 When you use a variable in bracket notation, you are accessing the property or index by the *value* of that variable.

@@ -7,7 +7,9 @@ dashedName: step-92

 # --description--

-Up until now, any time `text.innerText` was updated the old text was erased. This time, use the `+=` operator to add text to the end of `text.innerText`. Add the string ` In your inventory you have: ` - include the spaces at the beginning and the end.
+Up until now, any time `text.innerText` was updated, the old text was erased. This time, use the `+=` operator to add text to the end of `text.innerText`.
+
+Add the string ` In your inventory you have: ` - include the spaces at the beginning and the end.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-96

 # --description--

-Arrays have a `length` property that returns the number of items in the array. You may want to add new values to the `weapons` array in the future. Change your `if` condition to check if `currentWeapon` is less than the length of the `weapons` array. An example of checking the length of an array `myArray` would look like `myArray.length`.
+Arrays have a `length` property that returns the number of items in the array. You may want to add new values to the `weapons` array in the future.
+
+Change your `if` condition to check if `currentWeapon` is less than the length of the `weapons` array. An example of checking the length of an array `myArray` would look like `myArray.length`.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-97

 # --description--

-You now have an error to fix. The `currentWeapon` variable is the index of the `weapons` array, but array indexing starts at zero. The index of the last element in an array is one less than the length of the array. Change the `if` condition to check `weapons.length - 1`, instead of `weapons.length`.
+You now have an error to fix. The `currentWeapon` variable is the index of the `weapons` array, but array indexing starts at zero. The index of the last element in an array is one less than the length of the array.
+
+Change the `if` condition to check `weapons.length - 1`, instead of `weapons.length`.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-99

 # --description--

-Once a player has the most powerful weapon, you can give them the ability to sell their old weapons. In the outer `else` statement, set `button2.innerText` to `Sell weapon for 15 gold`. Also set `button2.onclick` to the function name `sellWeapon`.
+Once a player has the most powerful weapon, you can give them the ability to sell their old weapons.
+
+In the outer `else` statement, set `button2.innerText` to `Sell weapon for 15 gold`. Also set `button2.onclick` to the function name `sellWeapon`.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-111

 # --description--

-Following the same pattern, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also remove the `console.log` call from your `fightDragon` function.
+Following the same pattern, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also, remove the `console.log` call from your `fightDragon` function.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-115

 # --description--

-Below your `update` call, set the `monsterHealth` to be the health of the current monster. You can get this value by accessing the `health` property of `monsters[fighting]`.
+Below your `update` call, set the `monsterHealth` to be the health of the current monster. You can get this value by accessing the `health` property of `monsters[fighting]` with dot notation.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-117

 # --description--

-Now set the `innerText` property of `monsterName` to be the `name` property of the current monster. Do the same for `monsterHealthText` and the `health` property.
+Now, set the `innerText` property of `monsterName` to be the `name` property of the current monster. Do the same for `monsterHealthText` and the `health` property.

 # --hints--

@@ -11,7 +11,7 @@ JavaScript offers the built-in `Math` utility which offers a number of mathemati

 Using these, you can generate a random number within a range. For example, this generates a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1;`.

-Following this pattern, add a random number between one and the value of `xp` at the end of your `monsterHealth` variable change.
+Following this pattern, use the addition operator (`+`) to add a random number between `1` and the value of `xp` to your `monsterHealth` variable change.

 # --hints--

@@ -7,9 +7,7 @@ dashedName: step-125

 # --description--

-You can make an `else` statement conditional by using `else if`. At the end of your `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to `0`. In your `else if`, call the `defeatMonster` function.
-
-Here's an example:
+You can make an `else` statement conditional by using `else if`. Here's an example:

 ```js
 if (num > 10) {
@@ -19,6 +17,8 @@ if (num > 10) {
 }
 ```

+At the end of your `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to `0`. In your `else if`, call the `defeatMonster` function.
+
 # --hints--

 You should have an `else if` statement.
@@ -7,7 +7,9 @@ dashedName: step-132

 # --description--

-Your `locations` array doesn't have a fifth element, so `locations[4]` doesn't work. Add a new object at the end of the `locations` array, following the same structure as the other objects. Set `name` to `kill monster`, set `button text` to an array with three `Go to town square` strings, set `button functions` to an array with three `goTown` variables, and set `text` to `The monster screams Arg! as it dies. You gain experience points and find gold.`.
+Your `locations` array doesn't have a fifth element, so `locations[4]` doesn't work.
+
+Add a new object at the end of the `locations` array, following the same structure as the other objects. Set `name` to `kill monster`, set `button text` to an array with three `Go to town square` strings, set `button functions` to an array with three `goTown` variables, and set `text` to `The monster screams Arg! as it dies. You gain experience points and find gold.`.

 # --hints--
 
@@ -7,7 +7,9 @@ dashedName: step-133

 # --description--

-The word `Arg!` should have quotes around it. Besides escaping quotes, there is another way you can include quotation marks inside a string. Change the double quotes around the string `The monster screams Arg! as it dies. You gain experience points and find gold.` to single quotes `'`, then add double quotes around `Arg!`.
+The word `Arg!` should have quotes around it. Besides escaping quotes, there is another way you can include quotation marks inside a string.
+
+Change the double quotes around the string `The monster screams Arg! as it dies. You gain experience points and find gold.` to single quotes `'`, then add double quotes around `Arg!`.

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-134

 # --description--

-After a monster is defeated, the monster's stat box should no longer display. On the first line of the `update` function, use `monsterStats.style.display` to change the `display` value to `none`.
+After a monster is defeated, the monster's stat box should no longer display.
+
+On the first line of the `update` function, use `monsterStats.style.display` to change the `display` value to `none`.

 # --hints--

@@ -28,7 +28,7 @@ const block = attack.toString().split("else if");
 assert.include(block[1], "if");
 ```

-Your new `if` statement should check if `fighting` is equal to `2`.
+Your new `if` statement should check if `fighting` is strictly equal to `2`.

 ```js
 const block = attack.toString().split("else if");
@@ -7,7 +7,7 @@ dashedName: step-148

 # --description--

-In your `attack` function, below the `health` variable create an `if` statement. Set the condition to call the `isMonsterHit` function.
+In your `attack` function, below the `health` variable, create an `if` statement. Set the condition to call the `isMonsterHit` function.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-150

 # --description--

-Add an `else` statement to your `if` statement. In the `else` statement, use the `+=` operator to add the text ` You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside you `attack()` function. In the `else` statement, use the `+=` operator to add the text ` You miss.` to the end of `text.innerText`.

 # --hints--

@@ -7,9 +7,11 @@ dashedName: step-152

 # --description--

-The player should hit if either `Math.random() > .2` **or** if the player's health is less than 20. At the end of your `return` statement, use the <dfn>logical or</dfn> operator `||` and check if `health` is less than `20`.
+The player should hit if either `Math.random() > .2` **or** if the player's health is less than 20.

-The logical or operator will use the first value if it is truthy, otherwise it will use the second value.
+At the end of your `return` statement, use the <dfn>logical or</dfn> operator `||` and check if `health` is less than `20`.
+
+The logical or operator will use the first value if it is truthy – that is, anything apart from `NaN`, `null`, `0`, `-0`, `0n`, `""`, and `false`. Otherwise, it will use the second value.

 For example: `num < 10 || num > 20`.

@@ -7,7 +7,9 @@ dashedName: step-34

 # --description--

-Finally, use `querySelector()` to get the `#monsterHealth` element. Because you have already declared a `monsterHealth` variable earlier, you need to use a different variable name for this element. Declare a new variable with the `const` keyword and name it `monsterHealthText`.
+Finally, use `querySelector()` to get the `#monsterHealth` element. Because you have already declared a `monsterHealth` variable earlier, you need to use a different variable name for this element.
+
+Declare a new variable with the `const` keyword and name it `monsterHealthText`.

 # --hints--