From 4d024f3e4bcbb0a0016e6a6bce01619c25e54dbc Mon Sep 17 00:00:00 2001
From: Seth Falco <seth@falco.fun>
Date: Fri, 21 May 2021 13:18:42 +0200
Subject: [PATCH] fix(curriculum): css and html test issues (#42045)

* fix: css and html issues

* fix: issues with css test

* fix: allow spaces in solution css

* fix: css tests for use-rgb-to-mix-colors
---
 .../applied-visual-design/adjust-the-hue-of-a-color.md    | 6 +++---
 .../basic-css/give-a-background-color-to-a-div-element.md | 2 +-
 .../basic-css/prioritize-one-style-over-another.md        | 2 +-
 .../basic-css/size-your-images.md                         | 4 ++--
 .../basic-css/specify-how-fonts-should-degrade.md         | 2 +-
 .../understand-absolute-versus-relative-units.md          | 2 +-
 .../basic-css/use-a-css-class-to-style-an-element.md      | 2 +-
 .../basic-css/use-abbreviated-hex-code.md                 | 8 ++++----
 .../basic-css/use-hex-code-to-mix-colors.md               | 8 ++++----
 .../basic-css/use-rgb-to-mix-colors.md                    | 8 ++++----
 .../sass/store-data-with-sass-variables.md                | 4 ++--
 .../add-a-hover-effect-to-a-d3-element.md                 | 2 +-
 .../data-visualization-with-d3/add-classes-with-d3.md     | 2 +-
 13 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
index 3ff06f2003..9af8149dca 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
@@ -30,19 +30,19 @@ Change the `background-color` of each `div` element based on the class names (`g
 Your code should use the `hsl()` property to declare the color `green`.
 
 ```js
-assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
+assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
 ```
 
 Your code should use the `hsl()` property to declare the color `cyan`.
 
 ```js
-assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
+assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
 ```
 
 Your code should use the `hsl()` property to declare the color `blue`.
 
 ```js
-assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
+assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
 ```
 
 The `div` element with class `green` should have a `background-color` of green.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
index d38ed600e5..9b29ee1a86 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
@@ -40,7 +40,7 @@ assert($('div').css('background-color') === 'rgb(192, 192, 192)');
 A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property.
 
 ```js
-assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
+assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
index 780c3a770f..2f040b7d6a 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
@@ -32,7 +32,7 @@ assert($('h1').hasClass('pink-text'));
 Your `<style>` should have a `pink-text` CSS class that changes the `color`.
 
 ```js
-assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
+assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
 ```
 
 Your `h1` element should be pink.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
index c9d49dca69..c1e7b85f02 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
@@ -31,8 +31,8 @@ Your `img` element should have the class `smaller-image`.
 
 ```js
 assert(
-  $("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
-    'smaller-image'
+  $("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
+    .trim().split(/\s+/g).includes('smaller-image')
 );
 ```
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
index 313cfb81ed..9c845ed413 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
@@ -47,7 +47,7 @@ Your h2 element should degrade to the font `monospace` when `Lobster` is not ava
 
 ```js
 assert(
-  /\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
+  /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
     code
   )
 );
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
index eff6910e79..f9e32b8b40 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
@@ -37,7 +37,7 @@ assert(
 Your `red-box` class should give elements 1.5em of `padding`.
 
 ```js
-assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
+assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
index ea5eefb56e..04afa43ecd 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
@@ -46,7 +46,7 @@ assert($('h2').hasClass('red-text'));
 Your stylesheet should declare a `red-text` class and have its color set to `red`.
 
 ```js
-assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
+assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
 ```
 
 You should not use inline style declarations like `style="color: red"` in your `h2` element.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
index 405a5dcea5..562f498da5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
@@ -32,7 +32,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
 The abbreviated `hex code` for the color red should be used instead of the hex code `#FF0000`.
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
+assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
 ```
 
 Your `h1` element with the text `I am green!` should be given the `color` green.
@@ -44,7 +44,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
 The abbreviated `hex code` for the color green should be used instead of the hex code `#00FF00`.
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
+assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
 ```
 
 Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
@@ -56,7 +56,7 @@ assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
 The abbreviated `hex code` for the color cyan should be used instead of the hex code `#00FFFF`.
 
 ```js
-assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
+assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
 ```
 
 Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia.
@@ -68,7 +68,7 @@ assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
 The abbreviated `hex code` for the color fuchsia should be used instead of the hex code `#FF00FF`.
 
 ```js
-assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
+assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
index de8c591815..c72783eba8 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
@@ -36,7 +36,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
 The `hex code` for the color red should be used instead of the word `red`.
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
+assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
 ```
 
 Your `h1` element with the text `I am green!` should be given the `color` green.
@@ -48,7 +48,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
 The `hex code` for the color green should be used instead of the word `green`.
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
+assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
 ```
 
 Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue.
@@ -60,7 +60,7 @@ assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
 The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`.
 
 ```js
-assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
+assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
 ```
 
 Your `h1` element with the text `I am orange!` should be given the `color` orange.
@@ -72,7 +72,7 @@ assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
 The `hex code` for the color orange should be used instead of the word `orange`.
 
 ```js
-assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
+assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
index 91b62ec982..65af4b7769 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
@@ -30,7 +30,7 @@ You should use `rgb` for the color red.
 ```js
 assert(
   code.match(
-    /\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
+    /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
   )
 );
 ```
@@ -46,7 +46,7 @@ You should use `rgb` for the color orchid.
 ```js
 assert(
   code.match(
-    /\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
+    /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
   )
 );
 ```
@@ -62,7 +62,7 @@ You should use `rgb` for the color blue.
 ```js
 assert(
   code.match(
-    /\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
+    /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
   )
 );
 ```
@@ -78,7 +78,7 @@ You should use `rgb` for the color sienna.
 ```js
 assert(
   code.match(
-    /\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
+    /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
   )
 );
 ```
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md
index 2482800b00..b106a6fb84 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md
@@ -39,13 +39,13 @@ Create a variable `$text-color` and set it to `red`. Then change the value of th
 Your code should have a Sass variable declared for `$text-color` with a value of `red`.
 
 ```js
-assert(code.match(/\$text-color:\s*?red;/g));
+assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
 ```
 
 Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items.
 
 ```js
-assert(code.match(/color:\s*?\$text-color;/g));
+assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
 ```
 
 Your `.blog-post` element should have a `color` of red.
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md
index 85a34c34a1..beb4f34992 100644
--- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md
+++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md
@@ -21,7 +21,7 @@ Use the `attr()` method to add a class of `bar` to all the `rect` elements. This
 Your `rect` elements should have a class of `bar`.
 
 ```js
-assert($('rect').attr('class') == 'bar');
+assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
index 7a85c01796..a2911cf178 100644
--- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
+++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
@@ -27,7 +27,7 @@ Add the `attr()` method to the code in the editor and put a class of `bar` on th
 Your `div` elements should have a class of `bar`.
 
 ```js
-assert($('div').attr('class') == 'bar');
+assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
 ```
 
 Your code should use the `attr()` method.