feat(client, learn): add helper functions for common validation operations (#38605)

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md

@@ -33,7 +33,7 @@ Place the area template so that the cell labeled <code>advert</code> becomes an
 ```yml
 tests:
   - text: <code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.
-    testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, ''); assert(removeCssComments(code).match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));
+    testString: assert(__helpers.removeCssComments(code).match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));
 
 ```
 

curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md

@@ -30,7 +30,7 @@ Place an element with the <code>item5</code> class in the <code>footer</code> ar
 ```yml
 tests:
   - text: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.
-    testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(removeCssComments(code).match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
+    testString: assert(__helpers.removeCssComments(code).match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
 
 ```
 

curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md

@@ -33,7 +33,7 @@ Make the item with the class <code>item5</code> consume the last two columns of
 ```yml
 tests:
   - text: <code>item5</code> class should have a <code>grid-column</code> property.
-    testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g));
+    testString: assert(__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-column:.*}/g));
   - text: <code>item5</code> class should have a <code>grid-column</code> property which results in it consuming the last two columns of the grid.
     testString: "
       const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;

curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md

@@ -22,7 +22,7 @@ Make the element with the <code>item5</code> class consume the last two rows.
 ```yml
 tests:
   - text: <code>item5</code> class should have a <code>grid-row</code> property.
-    testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-row:.*}/g));
+    testString: assert(__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g));
   - text: <code>item5</code> class should have a <code>grid-row</code> property which results in it consuming the last two rows of the grid.
     testString: "
       const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;

curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md

@@ -23,7 +23,7 @@ When the viewport width is <code>400px</code> or more, make the header area occu
 ```yml
 tests:
   - text: When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
-    testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, ''); assert(removeCssComments(code).match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));
+    testString: assert(__helpers.removeCssComments(code).match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));
 
 ```