jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-02-18 19:00:36 -05:00
Code Issues Projects Releases Wiki Activity

chore(curriculum) add quotes to strings intermediate OOP (#54174)

Browse Source
This commit is contained in:
James
2024-04-03 00:40:10 +11:00
committed by GitHub
parent d49b45992e
commit bf753fc85a
14 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a6b393a10a4357087b3f7.md
View File

@@ -9,7 +9,7 @@ dashedName: step-19
Now, you need to set the color for your player.
Inside the `draw()` method, assign the string `#99c9ff` to `ctx.fillStyle`.
Inside the `draw()` method, assign the string `"#99c9ff"` to `ctx.fillStyle`.
# --hints--
@@ -20,7 +20,7 @@ const player = new Player();
assert.match(player.draw.toString(), /ctx\.fillStyle\s*/);
```
You should assign the string `#99c9ff` to `ctx.fillStyle`.
You should assign the string `"#99c9ff"` to `ctx.fillStyle`.
```js
const player = new Player();

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a75a844f2ea3a0060d807.md
View File

@@ -7,13 +7,13 @@ dashedName: step-20
# --description--
Below your `ctx.fillStyle`, you need to create the player's shape by using the `fillRect()` method.
Below your `ctx.fillStyle`, you need to create the player's shape by calling the `fillRect()` method on the ctx object which you instantiated earlier.
```js
fillRect(x, y, width, height)
```
Inside the `fillRect()` method add the `this.position.x`, `this.position.y`, `this.width` and `this.height` values.
Inside the `fillRect()` method add the `this.position.x`, `this.position.y`, `this.width` and `this.height` values.
# --hints--

8
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64aaf83d46b16a7b20a27051.md
View File

@@ -9,9 +9,9 @@ dashedName: step-37
Inside your `startGame` function, you will need to display the `canvas` element and hide the `startScreen` container.
Use `canvas.style.display` to change the display value to `block`.
Use `canvas.style.display` to change the display value to `"block"`.
Below that, use `startScreen.style.display` to change the display value to `none`.
Below that, use `startScreen.style.display` to change the display value to `"none"`.
# --hints--
@@ -27,7 +27,7 @@ You should use dot notation to access the `display` property of the `style` prop
assert.match(startGame.toString(), /canvas\.style\.display/);
```
You should set the `canvas` `display` property to `block`.
You should set the `canvas` `display` property to `"block"`.
```js
assert.match(startGame.toString(), /canvas\.style\.display\s*=\s*('|")block\1/);
@@ -45,7 +45,7 @@ You should use dot notation to access the `display` property of the `style` prop
assert.match(startGame.toString(), /startScreen\.style\.display/);
```
You should set the `startScreen` `display` property to `none`.
You should set the `startScreen` `display` property to `"none"`.
```js
assert.match(startGame.toString(), /startScreen\.style\.display\s*=\s*('|")none\1/);

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64ab06a9cc033b7d4a8bad2a.md
View File

@@ -27,10 +27,10 @@ You should pass `click` as the first argument to the `.addEventListener()` metho
assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*/);
```
You should pass `startGame` as the second argument to the `.addEventListener()` method.
You should pass a reference to `startGame` as the second argument to the `.addEventListener()` method.
```js
assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*,\s*startGame\s*/);
assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*,\s*startGame(?!\s*\()\s*/);
```
# --seed--

2
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c70f78dbf5667a307a7d90.md
View File

@@ -7,7 +7,7 @@ dashedName: step-51
# --description--
In the game, the player will interact with different checkpoints. If the `isCheckpointCollisionDetectionActive` is false, then you will need to stop the player's movements on the `x` and `y` axis.
In the game, the player will interact with different checkpoints. If the `isCheckpointCollisionDetectionActive` is false, then you will need to stop the player's movements on the `x` and `y` axes.
Start by creating an `if` statement where the condition checks if the `isCheckpointCollisionDetectionActive` is false.

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c714ec1b844f7bc0723deb.md
View File

@@ -9,11 +9,11 @@ dashedName: step-54
The first case you will want to add is when the left arrow key is pressed.
Inside the `switch` statement, add a new case called "ArrowLeft".
Inside the `switch` statement, add a new case called `"ArrowLeft"`.
# --hints--
Your switch statement should have a case called "ArrowLeft".
Your switch statement should have a case called `"ArrowLeft"`.
```js
assert.match(code, /switch\s*\(\s*key\s*\)\s*{\s*case\s*('|")ArrowLeft\1\s*:\s*/);

10
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7173772c2497ce99b474c.md
View File

@@ -9,27 +9,27 @@ dashedName: step-57
The player can jump up by using the up arrow key or the spacebar.
Add three new cases for "ArrowUp", " ", and "Spacebar". Remember that you can group cases together when they share the same operation.
Add three new cases for `"ArrowUp"`, `" "`, and `"Spacebar"`. Remember that you can group cases together when they share the same operation.
Inside those cases, use the subtraction assignment operator to subtract 8 from `player.velocity.y`.
Inside those cases, use the subtraction assignment operator to subtract `8` from `player.velocity.y`.
To close out these cases, make sure to add a `break` statement.
# --hints--
You should add a new `case` clause for "ArrowUp" inside your `switch` statement.
You should add a new `case` clause for `"ArrowUp"` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s*ArrowUp\s*\1\s*:\s*/)
```
You should add a new `case` clause for " " inside your `switch` statement.
You should add a new `case` clause for `" "` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s\1\s*:\s*/);
```
You should add a new `case` clause for "Spacebar" inside your `switch` statement.
You should add a new `case` clause for `"Spacebar"` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s*Spacebar\s*\1\s*:\s*/)

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c73367cce78a7fd65dd3be.md
View File

@@ -7,7 +7,7 @@ dashedName: step-60
# --description--
Inside the arrow function, call the `movePlayer` function and pass in `key`, 8, and `true` as arguments.
Inside the arrow function, call the `movePlayer` function and pass in `key`, `8`, and `true` as arguments.
# --hints--
@@ -17,7 +17,7 @@ You should call the `movePlayer` function.
assert.match(code, /movePlayer\s*\(.*\)/);
```
You should pass in `key`, 8, and `true` as arguments to the `movePlayer` function.
You should pass in `key`, `8`, and `true` as arguments to the `movePlayer` function.
```js
assert.match(code, /movePlayer\s*\(\s*key\s*,\s*8\s*,\s*true\s*\)/);

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7527100b19b09037ce5db.md
View File

@@ -7,13 +7,13 @@ dashedName: step-70
# --description--
Inside the `draw` method, assign `#acd157` to the `ctx.fillStyle`.
Inside the `draw` method, assign `"#acd157"` to the `ctx.fillStyle`.
Below that, call the `ctx.fillRect` method and pass in the `x` and `y` coordinates, along with the `width` and `height` properties. Remember to include `this` before each property.
# --hints--
You should assign `#acd157` to the `ctx.fillStyle`.
You should assign `"#acd157"` to the `ctx.fillStyle`.
```js
assert.match(code, /ctx\.fillStyle\s*=\s*('|")#acd157\1\s*;?/);

20
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb2e5bdfb23a67272a07c7.md
View File

@@ -9,7 +9,7 @@ dashedName: step-98
Now you need to create a `draw` method for the `CheckPoint` class.
Inside the `draw` method, add a `fillStyle` property to the `ctx` object and set it to `#f1be32`.
Inside the `draw` method, add a `fillStyle` property to the `ctx` object and set it to `"#f1be32"`.
Below the `fillStyle` property, use the `fillRect` method on the `ctx` object and pass in the `x`, `y`, `width`, and `height` properties as arguments.
@@ -22,14 +22,28 @@ const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this
assert.match(splitter[2], /draw\(\s*\)\s*\{/);
```
Your `draw` method should have a `fillStyle` property.
Your `draw` method should have a `fillStyle` property added to the `ctx` object.
```js
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)")
assert.match(splitter[2], /draw\(\s*\)\s*\{\s*ctx\.fillStyle/);
```
You should assign `"#f1be32"` to the `ctx.fillStyle` property.
```js
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)")
assert.match(splitter[2], /draw\(\s*\)\s*\{\s*ctx\.fillStyle\s*=\s*('|")#f1be32\1\s*;?/);
```
Your `draw` method should have a `fillRect` method.
Your `draw` method should invoke the `fillRect` method on the `ctx` object.
```js
const splitter = code.split('#f1be32')
assert.match(splitter[1], /ctx\.fillRect\(/);
```
When invoking `ctx.fillRect` you should pass in the `x`, `y`, `width`, and `height` properties as arguments. Don't forget the `this` keyword.
```js
const splitter = code.split('#f1be32')

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4978631a4f6e3e1b964d.md
View File

@@ -7,11 +7,11 @@ dashedName: step-106
# --description--
Inside the `showCheckpointScreen` function, set the `checkpointScreen` `display` property to block.
Inside the `showCheckpointScreen` function, set the `checkpointScreen` `style.display` property to `"block"`.
# --hints--
You should set the `checkpointScreen` `display` style property to block.
You should set the `checkpointScreen` `style.display` property to `"block"`.
```js
assert.match(code, /\s*checkpointScreen\s*\.\s*style\s*\.\s*display\s*=\s*('|")block\1\s*;?/);

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4ebdc75b3a73a43da5ec.md
View File

@@ -11,7 +11,7 @@ Create an `if` statement that checks if `isCheckpointCollisionDetectionActive` i
Inside the `if` statement, add a `setTimeout()` that takes in a callback function and a delay of 2000 milliseconds.
For the callback function, it should set the `checkpointScreen` `display` property to `none`.
For the callback function, it should set the `checkpointScreen` `style.display` property to `"none"`.
# --hints--
@@ -39,7 +39,7 @@ Your `setTimeout()` function should have a delay of 2000 milliseconds as the sec
assert.match(code, /\s*setTimeout\s*\(\s*\(\s*\)\s*=>[^,]*,\s*2000\s*\)/s);
```
Your callback function should set the `checkpointScreen` `display` property to `none`.
Your callback function should set the `checkpointScreen` `style.display` property to `"none"`.
```js
assert.match(code, /\s*if\s*\(\s*isCheckpointCollisionDetectionActive\s*\)\s*{\s*setTimeout\s*\(\s*\(\s*\)\s*=>\s*(\(\s*checkpointScreen\.style\.display\s*=\s*("|')none\2\s*\)|\{\s*checkpointScreen\.style\.display\s*=\s*("|')none\3\s*;?\s*\}|\s*checkpointScreen\.style\.display\s*=\s*("|')none\4\s*)\s*,\s*2000\s*\)\s*;?\s*}/s);

2
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65afec8f02423144ef136a94.md
View File

@@ -7,7 +7,7 @@ dashedName: step-11
# --description--
The `width` and the `height` of the main player, platforms and checkpoints will be proportional sized relative to the `innerHeight` of the the browser screen. The goal is to make the game responsive and visually consistent across different screen sizes.
The `width` and the `height` of the main player, platforms and checkpoints will be proportional sized relative to the `innerHeight` of the browser screen. The goal is to make the game responsive and visually consistent across different screen sizes.
Inside your `proportionalSize` function, you will need to return a ternary that checks if `innerHeight` is less than `500`. If so, return `Math.ceil((size / 500) * innerHeight)`, otherwise return `size`.

2
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65b2bb4c279af3cd585ba777.md
View File

@@ -368,7 +368,7 @@ const animate = () => {
player.position.y >= checkpoint.position.y,
player.position.y + player.height <=
checkpoint.position.y + checkpoint.height,
isCheckpointCollisionDetectionActive
isCheckpointCollisionDetectionActive,
--fcc-editable-region--
--fcc-editable-region--