fix: insert user html more consistently (#42195)

* fix: use an iframe to preserve head and body

* fix: remove unnecessary parsing of html

The contents gets inserted into the DOM during transformHtml, which
is always part of the build pipeline

* fix: pipe contents through iframe

* refactor: use the same code for both transforms

* fix: try to handle test errors better

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-002.md

@@ -19,13 +19,13 @@ You should create a `meta` element within the `head` element.
 
 ```js
 // TODO: Once builder is fixed so head info is not in body
-assert.exists(document.querySelector('body > meta'));
+assert.exists(document.querySelector('head > meta'));
 ```
 
 You should give the `meta` tag a `charset` of `UTF-8`.
 
 ```js
-assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8');
+assert.equal(document.querySelector('head > meta')?.getAttribute('charset'), 'UTF-8');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-003.md

@@ -16,20 +16,20 @@ Add a `viewport` definition with a `content` attribute detailing the `width` and
 You should create another `meta` element in the `head`.
 
 ```js
-assert.equal(document.querySelectorAll('body > meta')?.length, 2);
+assert.equal(document.querySelectorAll('head > meta')?.length, 2);
 ```
 
 You should give the `meta` a `name` attribute of `viewport`.
 
 ```js
-assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);
+assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1);
 ```
 
 You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.
 
 ```js
 // TODO: Double-check this is the only correct answer
-assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
+assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-005.md

@@ -17,19 +17,19 @@ You should add a `title` element to the `head`.
 
 ```js
 // TODO: Fix once builder puts head in the right place
-assert.exists(document.querySelector('body > title'));
+assert.exists(document.querySelector('head > title'));
 ```
 
 You should not make the `title` longer than 60 characters.
 
 ```js
-assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60);
+assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60);
 ```
 
 Try being more descriptive with your `title` element. _Hint: At least 20 characters_
 
 ```js
-assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20);
+assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 20);
 ```
 
 # --seed--