fix(curriculum): cat photo app workshop step 5 to 7 (#56320)

Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bb0b4062b114997f708a.md

@@ -25,13 +25,13 @@ Identify the main section of this page by adding a `<main>` opening tag before t
 Your `main` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
 
 ```js
-assert(document.querySelector('main'));
+assert.exists(document.querySelector('main'));
 ```
 
 Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character.
 
 ```js
-assert(code.match(/<\/main\>/));
+assert.match(code, /<\/main\>/);
 ```
 
 Your `main` element's opening tag should be below the `body` element's opening tag. You have them in the wrong order.
@@ -47,7 +47,7 @@ Your `main` element's opening tag should be above the `h1` element. You have the
 const collection = [...document.querySelectorAll('main,h1')].map(
   (node) => node.nodeName
 );
-assert(collection.indexOf('MAIN') < collection.indexOf('H1'));
+assert.isBelow(collection.indexOf('MAIN'), collection.indexOf('H1'));
 ```
 
 Your `main` element's closing tag should be below the `p` element. You have them in the wrong order.
@@ -55,10 +55,8 @@ Your `main` element's closing tag should be below the `p` element. You have them
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /see more cat photos in our gallery/);
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bd5ad96139157eedf697.md

@@ -25,70 +25,67 @@ The `h1` element, `h2` element and the comment are indented two spaces more than
 Your code should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed.
 
 ```js
-assert(
-  document.querySelector('h2') &&
-    code.match(/<\/h2\>/) &&
-    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
-);
+assert.exists(document.querySelector('h2'));
+assert.match(code, /<\/h2\>/);
+assert.equal(document.querySelector('h2').innerText.toLowerCase(),'cat photos')
 ```
 
 You should not add the `ul` or `li` elements from the example.
 
 ```js
-assert(
-  !document.querySelector('ul') && !document.querySelector('li')
-);
+assert.notExists(document.querySelector('ul'));
+assert.notExists(document.querySelector('li'));
 ```
 
 You should not change the indentation on the line with your `h2` element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation.
 
 ```js
-assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
+assert.match(code.toLowerCase(), /<\/h1\>\s*\n\s{6}<h2>/);
 ```
 
 Your code should have a comment. You removed the comment from an earlier step.
 
 ```js
-assert(code.match(/<!--.*-->/));
+assert.match(code, /<!--.*-->/);
 ```
 
 The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment.
 
 ```js
-assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
+assert.match(code, /<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i);
 ```
 
 You should not change the indentation on the line with your comment element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation.
 
 ```js
-assert(
+assert.match(
   code
-    .toLowerCase()
-    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
+    .toLowerCase(),
+    /<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/
 );
 ```
 
 Your code should have a `p` element. You have removed the `p` element from an earlier step.
 
 ```js
-assert(document.querySelector('p'));
+assert.exists(document.querySelector('p'));
 ```
 
 The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/
 );
 ```
 
 The opening `p` tag should have indentation that matches your `h2` and comment elements. Its opening tag should start 6 spaces over from the start of the line.
 
 ```js
-assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
+assert.match(code.toLowerCase(), /-->\s*\n\s{6}<p>/);
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690be42942f421648b119eb.md

@@ -16,19 +16,19 @@ Add an `img` element below the `p` element. At this point, no image will show up
 Your `img` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
 
 ```js
-assert(document.querySelector('img'));
+assert.exists(document.querySelector('img'));
 ```
 
 Your `img` element should not have a closing tag `</img>`.
 
 ```js
-assert(!code.match(/<\/img\>/));
+assert.notMatch(code, /<\/img\>/);
 ```
 
 You should only have one `img` element. Remove any extras.
 
 ```js
-assert(document.querySelectorAll('img').length === 1);
+assert.lengthOf(document.querySelectorAll('img'), 1);
 ```
 
 Your `img` element should be below the `p` element. You have them in the wrong order.
@@ -37,7 +37,7 @@ Your `img` element should be below the `p` element. You have them in the wrong o
 const collection = [...document.querySelectorAll('p,img')].map(
   (node) => node.nodeName
 );
-assert(collection.indexOf('P') < collection.indexOf('IMG'));
+assert.isBelow(collection.indexOf('P'), collection.indexOf('IMG'));
 ```
 
 # --seed--