CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-13 21:02:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(curriculum): using heading element for questions 1 and 2 (#55308)

Browse Source
This commit is contained in:
Supravisor 2024-07-08 18:16:46 +12:00 committed by GitHub
parent 925fcab997
commit 7259e42941
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
43 changed files with 97 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
View File

@ -9,7 +9,7 @@ dashedName: step-26
Within the second `section` element, add two `div` elements with a class of `question-block`.
Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
# --hints--
@ -31,22 +31,22 @@ You should give the second new `div` element a class of `question-block`.
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
```
You should nest one `p` element within each `div.question-block` element.
You should nest one `h3` element within each `div.question-block` element.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
```
You should give the first `p` element text of `1`.
You should give the first `h3` element text of `1`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
```
You should give the second `p` element text of `2`.
You should give the second `h3` element text of `2`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
```
You should nest one `fieldset` element within each `div.question-block` element.
@ -55,16 +55,16 @@ You should nest one `fieldset` element within each `div.question-block` element.
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
```
You should place the first `fieldset` element after the first `p` element.
You should place the first `fieldset` element after the first `h3` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
```
You should place the second `fieldset` element after the second `p` element.
You should place the second `fieldset` element after the second `h3` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
```
You should give the first `fieldset` element a class of `question`.

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
View File

@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question"></fieldset>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
View File

@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question">
<legend></legend>
<ul>
@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question">
<legend></legend>
<ul>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
View File

@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
View File

@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
View File

@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
View File

@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
View File

@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
View File

@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>1</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
View File

@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
View File

@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
View File

@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
View File

@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
View File

@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
View File

@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
View File

@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
View File

@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
View File

@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
View File

@ -103,7 +103,7 @@ assert.equal(display, 'block');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -126,7 +126,7 @@ assert.equal(display, 'block');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
View File

@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
View File

@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
View File

@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
View File

@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
View File

@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
View File

@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
View File

@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
View File

@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
View File

@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
View File

@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
View File

@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
View File

@ -84,7 +84,7 @@ document.querySelectorAll('.info label').forEach(el => {
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -107,7 +107,7 @@ document.querySelectorAll('.info label').forEach(el => {
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
View File

@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
View File

@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
View File

@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
View File

@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
View File

@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
View File

@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
View File

@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
View File

@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
View File

@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
View File

@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

8
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
View File

@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
@ -408,7 +408,7 @@ address {
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -431,7 +431,7 @@ address {
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
View File

@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a