fix(curriculum): cat photo app workshop step 3 and step 4 (#56319)

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

@@ -16,13 +16,13 @@ The `p` element is used to create a paragraph of text on websites. Create a `p`
 Your `p` element should have an opening tag. Opening tags have the following syntax: `<elementName>`.
 
 ```js
-assert(document.querySelector('p'));
+assert.exists(document.querySelector('p'));
 ```
 
 Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character.
 
 ```js
-assert(code.match(/<\/p\>/));
+assert.match(code, /<\/p\>/);
 ```
 
 Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
@@ -31,7 +31,7 @@ Your `p` element's text should be `See more cat photos in our gallery.` You have
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /see more cat photos in our gallery\.?$/i);
 ```
 
 Your `p` element should be below the `h2` element. You have them in the wrong order.
@@ -40,7 +40,7 @@ Your `p` element should be below the `h2` element. You have them in the wrong or
 const collection = [...document.querySelectorAll('h2,p')].map(
   (node) => node.nodeName
 );
-assert(collection.indexOf('H2') < collection.indexOf('P'));
+assert.isBelow(collection.indexOf('H2'), collection.indexOf('P'));
 ```
 
 # --seed--

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

@@ -24,37 +24,36 @@ Add a comment above the `p` element with this text:
 Your comment should start with `<!--`. You are missing one or more of the characters that define the start of a comment.
 
 ```js
-assert(code.match(/<!--/));
+assert.match(code, /<!--/);
 ```
 
 Your comment should end with `-->`.  You are missing one or more of the characters that define the end of a comment.
 
 ```js
-assert(code.match(/-->/));
+assert.match(code, /-->/);
 ```
 
 Your code should not have extra opening/closing comment characters. You have an extra `<!--` or `-->` displaying in the browser.
 
 ```js
 const noSpaces = code.replace(/\s/g, '');
-assert(noSpaces.match(/<!--/g).length < 2 && noSpaces.match(/-->/g).length < 2);
+assert.isBelow(noSpaces.match(/<!--/g).length, 2)
+assert.isBelow(noSpaces.match(/-->/g).length, 2);
 ```
 
 Your comment should contain the text `TODO: Add link to cat photos`.
 
 ```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);
 ```
 
 Your comment should be above the `p` element. You have them in the wrong order.
 
 ```js
-assert(
+assert.match(
   code
-    .replace(/\s/g, '')
-    .match(
+    .replace(/\s/g, ''),
       /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
 );
 ```