fix(curriculum) : update head step 4 (#55882)

Co-authored-by: Lasse Jørgensen <28780271+lasjorg@users.noreply.github.com>

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md

@@ -14,13 +14,20 @@ Within the `head`, nest a `meta` element with a `charset` of `UTF-8`, a `title`
 You should create a `meta` element within the `head` element.
 
 ```js
-assert.exists(document.querySelector('head > meta'));
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('meta'));
 ```
 
 You should give the `meta` tag a `charset` of `UTF-8`.
 
 ```js
-assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
+const linkElement = document.querySelector('meta');
+const charset = linkElement?.getAttribute("charset").toLowerCase();
+assert.strictEqual(charset, 'utf-8');
 ```
 
 Your code should have a `title` element.
@@ -33,7 +40,12 @@ assert.exists(title);
 The `title` element should be within the `head` element.
 
 ```js
-assert.exists(document.querySelector('head > title'));
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('title'));
 ```
 
 Your project should have a title of `City Skyline`.
@@ -53,41 +65,46 @@ assert.equal(title.text, 'City Skyline');
 Your code should have a `link` element.
 
 ```js
-assert.match(code, /<link/)
+assert.isNotNull(document.querySelector('link'));
 ```
 
 You should not change your existing `head` tags. Make sure you did not delete the closing tag.
 
 ```js
-const heads = document.querySelectorAll('head');
-assert.equal(heads?.length, 1);
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
 ```
 
 You should have one void `link` element.
 
 ```js
-assert(document.querySelectorAll('link').length === 1);
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
 ```
 
 Your `link` element should be within your `head` element.
 
 ```js
-assert.exists(document.querySelector('head > link'));
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
 ```
 
 Your `link` element should have a `rel` attribute with the value `stylesheet`.
 
 ```js
-const link_element = document.querySelector('link');
-const rel = link_element.getAttribute("rel");
-assert.equal(rel, "stylesheet");
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
 ```
 
 Your `link` element should have an `href` attribute with the value `styles.css`.
 
 ```js
-const link = document.querySelector('link');
-assert.equal(link.dataset.href, "styles.css");
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
 ```
 
 # --seed--