mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-22 21:08:12 +08:00
fix(curriculum): .trim() to textContent for workshop-accessibility-quiz (#62615)
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
This commit is contained in:
parent
e1e2292b69
commit
ee86bccdc7
@ -60,7 +60,7 @@ assert.equal(document.querySelector('img')?.alt, 'freeCodeCamp');
|
||||
You should give the `h1` element the text `HTML/CSS Quiz`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
|
||||
assert.include(document.querySelector('h1')?.innerText.toLowerCase(), 'html/css quiz');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -38,19 +38,19 @@ assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
|
||||
You should give the first `a` element the text `INFO`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')[0]?.textContent.trim(), 'INFO');
|
||||
```
|
||||
|
||||
You should give the second `a` element the text `HTML`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')[1]?.textContent.trim(), 'HTML');
|
||||
```
|
||||
|
||||
You should give the third `a` element the text `CSS`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')[2]?.textContent.trim(), 'CSS');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -76,19 +76,19 @@ assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
|
||||
You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('h2')[0]?.textContent.trim());
|
||||
```
|
||||
|
||||
You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('h2')[1]?.textContent.trim());
|
||||
```
|
||||
|
||||
You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('h2')[2]?.textContent.trim());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -36,19 +36,19 @@ assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
|
||||
You should give the first `label` element an appropriate text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('label')[0]?.textContent.trim());
|
||||
```
|
||||
|
||||
You should give the second `label` element an appropriate text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('label')[1]?.textContent.trim());
|
||||
```
|
||||
|
||||
You should give the third `label` element an appropriate text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('label')[2]?.textContent.trim());
|
||||
```
|
||||
|
||||
You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`.
|
||||
|
||||
@ -40,13 +40,13 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-bl
|
||||
You should give the first `h3` element text of `1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')[0]?.textContent.trim(), '1');
|
||||
```
|
||||
|
||||
You should give the second `h3` element text of `2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')[1]?.textContent.trim(), '2');
|
||||
```
|
||||
|
||||
You should nest one `fieldset` element within each `div.question-block` element.
|
||||
|
||||
@ -40,13 +40,13 @@ assert.equal(document.querySelectorAll('span')[1]?.className, 'sr-only');
|
||||
You should add the `span` element before the number 1 within the first `h3` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('span')?.nextSibling?.textContent, '1');
|
||||
assert.equal(document.querySelector('span')?.nextSibling?.textContent.trim(), '1');
|
||||
```
|
||||
|
||||
You should add the `span` element before the number 2 within the second `h3` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('span')[1]?.nextSibling?.textContent, '2');
|
||||
assert.equal(document.querySelectorAll('span')[1]?.nextSibling?.textContent.trim(), '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -16,13 +16,13 @@ In the second `span` element, add the text `Question`.
|
||||
You should give the first `span` element text of `Question`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('h3 > span')?.textContent, 'Question');
|
||||
assert.equal(document.querySelector('h3 > span')?.textContent.trim(), 'Question');
|
||||
```
|
||||
|
||||
You should give the second `span` element text of `Question`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h3 > span')?.[1]?.textContent, 'Question');
|
||||
assert.equal(document.querySelectorAll('h3 > span')[1]?.textContent.trim(), 'Question');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -40,19 +40,21 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answer
|
||||
You should give the first `legend` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent);
|
||||
assert.isNotEmpty(document.querySelectorAll('legend')[0]?.textContent.trim());
|
||||
```
|
||||
|
||||
You should give the second `legend` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent);
|
||||
assert.isNotEmpty(document.querySelectorAll('legend')[1]?.textContent.trim());
|
||||
```
|
||||
|
||||
You should not use the same text content for both `legend` elements.
|
||||
|
||||
```js
|
||||
assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent);
|
||||
const legends = document.querySelectorAll('legend');
|
||||
assert.lengthOf(legends, 2);
|
||||
assert.notEqual(legends[0]?.textContent.trim(), legends[1]?.textContent.trim());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -26,13 +26,13 @@ assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.quer
|
||||
You should give the first `label` element text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('.formrow > .question-block')[0]?.querySelector('label')?.textContent.trim());
|
||||
```
|
||||
|
||||
You should give the second `label` element text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1);
|
||||
assert.isNotEmpty(document.querySelectorAll('.formrow > .question-block')[1]?.querySelector('label')?.textContent.trim());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -34,7 +34,7 @@ assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')
|
||||
You should give the first `option` element a text content of `Select an option`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent.trim(), 'Select an option');
|
||||
```
|
||||
|
||||
You should give the second `option` element a `value` of `yes`.
|
||||
@ -46,7 +46,7 @@ assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')
|
||||
You should give the second `option` element a text content of `Yes`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent.trim(), 'Yes');
|
||||
```
|
||||
|
||||
You should give the third `option` element a `value` of `no`.
|
||||
@ -58,7 +58,7 @@ assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')
|
||||
You should give the third `option` element a text content of `No`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent.trim(), 'No');
|
||||
```
|
||||
|
||||
You should give the `select` an attribute of `required`.
|
||||
|
||||
@ -38,7 +38,7 @@ assert.exists(document.querySelector('button[type="submit"]') || document.queryS
|
||||
The submit button should display the text `Send`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Send');
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent.trim() ?? document.querySelector('input[type="submit"]')?.value, 'Send');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -23,7 +23,7 @@ The `br` tags will allow each part of the address to be on its own line and are
|
||||
You should add the above text including the `<br />` tags to the `address` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
|
||||
assert.equal(document.querySelector('address')?.innerText.trim(), 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
Loading…
Reference in New Issue
Block a user