fix(curriculum): use specific assert methods in flappy penguin workshop (freeCodeCamp#59907)

clarencepenz · web-flow · commit 6ea8c33170b7 · 2025-04-23T19:28:52.000+02:00
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -23,7 +23,7 @@ assert.exists(document.querySelector('link'));
 Your `link` element should be within your `head` element.
 
 ```js
-assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+assert.match(code, /<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i);
 ```
 
 Your `link` element should have a `rel` attribute with the value `stylesheet`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -14,7 +14,7 @@ Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div`
 You should add a new `div` within the `body`.
 
 ```js
-assert.equal(document.querySelectorAll('body > div')?.length, 2);
+assert.lengthOf(document.querySelectorAll('body > div'), 2);
 ```
 
 You should give the `div` a `class` of `penguin`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -16,7 +16,7 @@ Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
 You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('body > div')?.length, 3);
+assert.lengthOf(document.querySelectorAll('body > div'), 3);
 ```
 
 You should give the `div` a `class` of `left-mountain`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -14,7 +14,7 @@ To give the effect of a mountain range, add another mountain, by creating a new
 You should add a new `div` within `body`.
 
 ```js
-assert.equal(document.querySelectorAll('body > div')?.length, 4);
+assert.lengthOf(document.querySelectorAll('body > div'), 4);
 ```
 
 You should give the `div` a `class` of `back-mountain`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -14,7 +14,7 @@ To finish the background, add a sun, by creating a new `div` element immediately
 You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('body > div')?.length, 5);
+assert.lengthOf(document.querySelectorAll('body > div'), 5);
 ```
 
 You should give the new `div` element a `class` of `sun`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -16,7 +16,7 @@ Within `.penguin`, add two new `div` elements. The first with a `class` of `peng
 You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin > div'), 2);
 ```
 
 You should give the first `div` a `class` of `penguin-head`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -14,7 +14,7 @@ Start the penguin's face, by adding two `div` elements within `.penguin-head`, a
 You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div'), 2);
 ```
 
 You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -14,7 +14,7 @@ Below the `.face.right` element, add a `div` element with a `class` of `chin`.
 You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div'), 3);
 ```
 
 You should give the `div` a `class` of `chin`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -14,7 +14,7 @@ Below the `.chin` element, add two `div` elements each with a `class` of `eye`.
 You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div'), 5);
 ```
 
 You should give the first new `div` a `class` of `eye`.
@@ -26,7 +26,7 @@ assert.exists(document.querySelector('.penguin-head > div.eye'));
 You should give the second new `div` a `class` of `eye`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div.eye'), 2);
 ```
 
 You should give the first new `div` a `class` of `left`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -14,13 +14,13 @@ Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
 You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+assert.lengthOf(document.querySelectorAll('.eye.left > div'), 1);
 ```
 
 You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+assert.lengthOf(document.querySelectorAll('.eye.right > div'), 1);
 ```
 
 You should give the first new `div` a `class` of `eye-lid`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -14,7 +14,7 @@ Below the `.eye.right` element, add two `div` elements each with a `class` of `b
 You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div'), 7);
 ```
 
 You should give the first new `div` a `class` of `blush`.
@@ -26,7 +26,7 @@ assert.exists(document.querySelector('.penguin-head > div.blush'));
 You should give the second new `div` a `class` of `blush`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div.blush'), 2);
 ```
 
 You should give the first new `div` a `class` of `left`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -14,7 +14,7 @@ Below the `.blush.right` element, add two `div` elements each with a `class` of
 You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div'), 9);
 ```
 
 You should give the first new `div` a `class` of `beak`.
@@ -26,7 +26,7 @@ assert.exists(document.querySelector('.penguin-head > div.beak'));
 You should give the second new `div` a `class` of `beak`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin-head > div.beak'), 2);
 ```
 
 You should give the first new `div` a `class` of `top`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -14,7 +14,7 @@ The penguin's body looks a bit plain. Spruce him up by adding a `div` element wi
 You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+assert.lengthOf(document.querySelectorAll('.penguin > div'), 3);
 ```
 
 You should give the new `div` a `class` of `shirt`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -14,7 +14,7 @@ Within the `.shirt` element, add a `div` with the following emoji as content: 
 You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+assert.lengthOf(document.querySelectorAll('.shirt > div'), 1);
 ```
 
 You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -14,7 +14,7 @@ Within `.shirt`, after the `div` element, add a `p` element with the following c
 You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+assert.lengthOf(document.querySelectorAll('.shirt > p'), 1);
 ```
 
 You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -16,7 +16,7 @@ Within the `.penguin-body` element, add two `div` elements each with a `class` o
 You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin-body > div'), 2);
 ```
 
 You should give the first new `div` a `class` of `foot`.
@@ -28,7 +28,7 @@ assert.exists(document.querySelector('.penguin-body > div.foot'));
 You should give the second new `div` a `class` of `foot`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin-body > div.foot'), 2);
 ```
 
 You should give one `div` a `class` of `left`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -16,7 +16,7 @@ Within `.penguin-body`, before the `.foot` elements, add two `div` elements each
 You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+assert.lengthOf(document.querySelectorAll('.penguin-body > div'), 4);
 ```
 
 You should give the first new `div` a `class` of `arm`.
@@ -28,7 +28,7 @@ assert.exists(document.querySelector('.penguin-body > div.arm'));
 You should give the second new `div` a `class` of `arm`.
 
 ```js
-assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+assert.lengthOf(document.querySelectorAll('.penguin-body > div.arm'), 2);
 ```
 
 You should give one `div` a `class` of `left`.
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -14,31 +14,31 @@ Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
 You should add a `10%` waypoint for `@keyframes wave`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+assert.isTrue([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
 ```
 
 You should add a `20%` waypoint for `@keyframes wave`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+assert.isTrue([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
 ```
 
 You should add a `30%` waypoint for `@keyframes wave`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+assert.isTrue([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
 ```
 
 You should add a `40%` waypoint for `@keyframes wave`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+assert.isTrue([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
 ```
 
 You should have 4 waypoints in your keyframe.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+assert.lengthOf([...([...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules || [])], 4);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -19,10 +19,10 @@ const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
 const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
 
 if (rotateProp && transformProp) {
-  assert(rotateProp === '110deg');
-  assert(transformProp === 'scaleX(-1)');
+  assert.equal(rotateProp, '110deg');
+  assert.equal(transformProp, 'scaleX(-1)');
 } else {
-  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+  assert.equal(transformProp, 'rotate(110deg)scaleX(-1)');
 }
 ```
 
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -19,10 +19,10 @@ const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
 const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
 
 if (rotateProp && transformProp) {
-  assert(rotateProp === '130deg');
-  assert(transformProp === 'scaleX(-1)');
+  assert.equal(rotateProp, '130deg');
+  assert.equal(transformProp, 'scaleX(-1)');
 } else {
-  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+  assert.equal(transformProp, 'rotate(130deg)scaleX(-1)');
 }
 ```
 
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -19,10 +19,10 @@ const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
 const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
 
 if (rotateProp && transformProp) {
-  assert(rotateProp === '110deg');
-  assert(transformProp === 'scaleX(-1)');
+  assert.equal(rotateProp, '110deg');
+  assert.equal(transformProp, 'scaleX(-1)');
 } else {
-  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+  assert.equal(transformProp, 'rotate(110deg)scaleX(-1)');
 }
 ```
 
@@ -34,10 +34,10 @@ const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
 const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
 
 if (rotateProp && transformProp) {
-  assert(rotateProp === '130deg');
-  assert(transformProp === 'scaleX(-1)');
+  assert.equal(rotateProp, '130deg');
+  assert.equal(transformProp, 'scaleX(-1)');
 } else {
-  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+  assert.equal(transformProp, 'rotate(130deg)scaleX(-1)');
 }
 ```
 
