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

fix(curriculum): follow W3C convention for radio and checkbox inputs (#62040)

Browse Source
This commit is contained in:
Stuart Mosquera 2025-09-05 06:25:23 -03:00 committed by GitHub
parent 15f9c18c27
commit 902ba8bc8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 308 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md
View File

@ -20,46 +20,46 @@ Here is an example of two radio buttons:
In this example, the radio buttons are grouped together by using the same `name` attribute value. This means that only one radio button can be selected at a time.
Below your `legend` element, add a `label` element with the text `Yes` and a `for` attribute set to `"yes-option"`.
Below your `legend` element, add a `radio` button with the `id` set to `"yes-option"`, and the `name` attribute set to `"hotel-stay"`.
Below your `label` element, add a `radio` button with the `id` set to `"yes-option"`, and the `name` attribute set to `"hotel-stay"`.
Below your `radio` button, add a `label` element with the text `Yes` and a `for` attribute set to `"yes-option"`.
# --hints--
You should have a `label` element below your `legend` element.
You should have a `radio` button below your `legend` element.
```js
assert.exists(document.querySelector('fieldset:nth-of-type(2) legend + label'));
```
Your `label` element should have a `for` attribute set to `"yes-option"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.htmlFor, 'yes-option');
```
Your `label` element should have the text `Yes`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.innerText, 'Yes');
```
You should have a `radio` button below your `label` element.
```js
assert.exists(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]'));
assert.exists(document.querySelector('fieldset:nth-of-type(2) legend + input[type="radio"]'));
```
Your `radio` button should have an `id` attribute set to `"yes-option"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.id, 'yes-option');
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + input[type="radio"]')?.id, 'yes-option');
```
Your `radio` button should have a `name` attribute set to `"hotel-stay"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.name, 'hotel-stay');
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + input[type="radio"]')?.name, 'hotel-stay');
```
You should have a `label` element below your `radio` button.
```js
assert.exists(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label'));
```
Your `label` element should have a `for` attribute set to `"yes-option"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')?.htmlFor, 'yes-option');
```
Your `label` element should have the text `Yes`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')?.innerText?.trim(), 'Yes');
```
# --seed--

34
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md
View File

@ -7,54 +7,54 @@ dashedName: step-20
# --description--
Below your first radio button, add another `label` element with the `for` attribute set to `"no-option"`. The text for the `label` should be `No`.
Below your `label` element, add a `radio` button with the `id` set to `"no-option"`, and the name attribute set to `"hotel-stay"`.
Below your second `label` element, add a `radio` button with the `id` set to `"no-option"`, and the `name` attribute set to `"hotel-stay"`.
Below your new `radio` button, add another `label` element with the `for` attribute set to `"no-option"`. The text for the `label` should be `No`.
When you are finished, you can now try out the radio buttons by selecting one option at a time.
# --hints--
You should have a `label` element below your first radio button.
You should have an `input` element below your first `label` element.
```js
assert.isNotNull(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label'));
assert.isNotNull(document.querySelector('fieldset:nth-of-type(2) label + input'));
```
Your `label` should have a `for` attribute set to `"no-option"`.
Your `input` element should have a `type` attribute of `radio`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')?.htmlFor, "no-option");
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input')?.getAttribute('type'), 'radio');
```
Your `label` should have the text of `No`.
Your `input` element should have an `id` attribute of `"no-option"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label[for="no-option"]')?.textContent, 'No');
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input')?.id, 'no-option');
```
You should have a second `input` below your second `label` element.
Your `input` element should have a `name` attribute of `"hotel-stay"`.
```js
assert.lengthOf(document.querySelectorAll('fieldset:nth-of-type(2) label + input'), 2);
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input')?.name, 'hotel-stay');
```
Your `input` should have a `type` of `radio`.
You should have a second `label` element below your second `input` element.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.getAttribute('type'), 'radio');
assert.isNotNull(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2) + label'));
```
Your `input` should have an `id` of `"no-option"`.
Your `label` element should have a `for` attribute set to `"no-option"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.id, 'no-option');
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2) + label')?.htmlFor, "no-option");
```
Your `input` should have a `name` of `"hotel-stay"`.
Your `label` element should have the text `No`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.name, 'hotel-stay');
assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2) + label')?.textContent?.trim(), 'No');
```
# --seed--
@ -98,8 +98,8 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input
<fieldset>
<legend>Was this your first time at our hotel?</legend>
--fcc-editable-region--
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="yes-option">Yes</label>
--fcc-editable-region--
</fieldset>

4
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md
View File

@ -74,10 +74,10 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend')?.inn
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
--fcc-editable-region--

71
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md
View File

@ -14,62 +14,61 @@ Here is an example of how to work with checkboxes dealing with food options:
```html
<fieldset>
<legend>Food Options</legend>
<label for="pizza">Pizza</label>
<input type="checkbox" id="pizza" name="food" value="pizza">
<label for="burger">Burger</label>
<label for="pizza">Pizza</label>
<input type="checkbox" id="burger" name="food" value="burger">
<label for="burger">Burger</label>
</fieldset>
```
The `value` attribute is used to specify the value that will be sent to the server when the form is submitted.
Below your `legend` element, add a `label` element with the text of `Social Media Ads`. The `for` attribute should be set to `"ads"`.
Below your `legend` element, add a checkbox `input` with the `id`, `name` and `value` attributes set to `"ads"`.
Below your `label` element, add a checkbox input with the `id`, `name` and `value` attributes set to `"ads"`.
Below your checkbox `input`, add a `label` element with the text `Social Media Ads`. The `for` attribute should be set to `"ads"`.
# --hints--
You should have a `label` element below your `legend`.
You should have a checkbox `input` below your `legend` element.
```js
assert.exists(document.querySelector("fieldset:nth-of-type(3) legend + label"));
assert.exists(document.querySelector("fieldset:nth-of-type(3) legend + input[type='checkbox']"));
```
Your `label` element should have the text of `Social Media Ads`.
Your checkbox `input` should have an `id` attribute set to `"ads"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.textContent, "Social Media Ads");
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + input[type='checkbox']")?.id, "ads");
```
Your checkbox `input` should have a `name` attribute set to `"ads"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + input[type='checkbox']")?.name, "ads");
```
Your checkbox `input` should have a `value` attribute set to `"ads"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + input[type='checkbox']")?.value, "ads");
```
You should have a `label` element below your checkbox `input`.
```js
assert.exists(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox'] + label"));
```
Your `label` element should have the text `Social Media Ads`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox'] + label")?.textContent?.trim(), "Social Media Ads");
```
Your `label` element should have a `for` attribute set to `"ads"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.getAttribute("for"), "ads");
```
You should have a checkbox `input` below your `label`.
```js
const inputElement = document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']");
assert.strictEqual(inputElement?.parentElement.tagName, "FIELDSET");
```
Your checkbox should have an `id` attribute set to `"ads"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.id, "ads");
```
Your checkbox should have a `name` attribute set to `"ads"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.name, "ads");
```
Your checkbox should have a `value` attribute set to `"ads"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.value, "ads");
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox'] + label")?.getAttribute("for"), "ads");
```
# --seed--
@ -113,10 +112,10 @@ assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
--fcc-editable-region--

70
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96127422411756204bc1b.md
View File

@ -7,52 +7,52 @@ dashedName: step-23
# --description--
Add another `label` with the text of `Personal Recommendation`. The `for` attribute should be set to `"recommendation"`.
Add another checkbox `input` with the `id`, `name` and `value` attributes set to `"recommendation"`.
Below the `label` element, add another checkbox `input` with the `id`, `name` and `value` attributes set to `"recommendation"`.
Below the checkbox `input`, add another `label` with the text `Personal Recommendation`. The `for` attribute should be set to `"recommendation"`.
# --hints--
You should have a `label` element below your checkbox.
You should have a checkbox `input` below your `label` element.
```js
assert.isNotNull(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label'));
assert.isNotNull(document.querySelector('fieldset:nth-of-type(3) label + input[type="checkbox"]'));
```
Your `label` element should have the text of `Personal Recommendation`.
Your checkbox `input` should have an `id` attribute set to `"recommendation"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.textContent, "Personal Recommendation");
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.id, "recommendation");
```
Your checkbox `input` should have a `name` attribute set to `"recommendation"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.name, "recommendation");
```
Your checkbox `input` should have a `value` attribute set to `"recommendation"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.value, "recommendation");
```
You should have a `label` element below your checkbox `input`.
```js
assert.exists(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox'] + label:nth-of-type(2)"));
```
Your `label` element should have the text `Personal Recommendation`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label:nth-of-type(2)')?.textContent?.trim(), "Personal Recommendation");
```
Your `label` element should have a `for` attribute set to `"recommendation"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.getAttribute("for"), "recommendation");
```
You should have a checkbox `input` below your `label`.
```js
assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']"));
```
Your checkbox should have an `id` set to `"recommendation"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.id, "recommendation");
```
Your checkbox should have a `name` attribute set to `"recommendation"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.name, "recommendation");
```
Your checkbox should have a `value` attribute set to `"recommendation"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.value, "recommendation");
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label:nth-of-type(2)')?.getAttribute("for"), "recommendation");
```
# --seed--
@ -96,19 +96,19 @@ assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
<legend>
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
--fcc-editable-region--
--fcc-editable-region--

108
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md
View File

@ -7,86 +7,86 @@ dashedName: step-24
# --description--
Next, add another `label` element with the text of `Location` and the `for` attribute set to `"location"`.
Next, add another checkbox `input` with the `id`, `name` and `value` attributes set to `"location"`.
For the checkbox `input`, the `id`, `name` and `value` attributes should be set to `"location"`.
For the `label` element, the text of `Location` and the `for` attribute should be set to `"location"`.
Below that `input` element, add another `label` element with the text of `Reputation` and the `for` attribute set to `"reputation"`.
Below that `label` element, add another checkbox `input` with the `id`, `name` and `value` attributes set to `"reputation"`.
For the checkbox `input`, the `id`, `name` and `value` attributes should be set to `"reputation"`.
For the `label` element, the text of `Reputation` and the `for` attribute should be set to `"reputation"`.
# --hints--
You should have a `label` element with the text of `Location`.
You should have a third checkbox `input`.
```js
assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.textContent, 'Location');
assert.exists(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']:nth-of-type(3)"));
```
Your third checkbox `input` should have an `id` attribute set to `"location"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']:nth-of-type(3)")?.getAttribute('id'), 'location');
```
Your third checkbox `input` should have a `name` attribute set to `"location"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']:nth-of-type(3)")?.getAttribute('name'), 'location');
```
Your third checkbox `input` should have a `value` attribute set to `"location"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']:nth-of-type(3)")?.getAttribute('value'), 'location');
```
You should have a `label` element after your checkbox `input` with the text `Location`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[value='location'] + label")?.textContent?.trim(), 'Location');
```
Your `label` should have the `for` attribute set to `"location"`.
```js
assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.getAttribute('for'), 'location');
```
You should have a third checkbox `input` after your `label`.
```js
assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(3)[type='checkbox']"));
```
Your third checkbox input should have an `id` set to `"location"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('id'), 'location');
```
Your third checkbox should have a `name` of `"location"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('name'), 'location');
```
Your third checkbox should have a `value` of `"location"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('value'), 'location');
```
You should have a `label` element with the text of `Reputation` below the location checkbox.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="location"] + label')?.textContent?.trim(), 'Reputation');
```
Your `label` should have the `for` attribute set to `"reputation"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="location"] + label')?.getAttribute('for'), 'reputation');
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="location"] + label')?.getAttribute('for'), 'location');
```
You should have a fourth checkbox `input` below your `label`.
```js
assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(4)[type='checkbox']"));
assert.exists(document.querySelector("fieldset:nth-of-type(3) label:nth-of-type(3) + input[type='checkbox']"));
```
You should have a fourth checkbox `input` with an `id` of `"reputation"`.
You should have a fourth checkbox `input` with an `id` attribute set to `"reputation"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('id'), 'reputation');
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label:nth-of-type(3) + input[type='checkbox']")?.getAttribute('id'), 'reputation');
```
Your fourth checkbox should have a `name` of `"reputation"`.
Your fourth checkbox `input` should have a `name` attribute set to `"reputation"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('name'), 'reputation');
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label:nth-of-type(3) + input[type='checkbox']")?.getAttribute('name'), 'reputation');
```
Your fourth checkbox should have a `value` of `"reputation"`.
Your fourth checkbox `input` should have a `value` attribute set to `"reputation"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('value'), 'reputation');
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label:nth-of-type(3) + input[type='checkbox']")?.getAttribute('value'), 'reputation');
```
You should have a `label` element with the text `Reputation` below the reputation checkbox.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="reputation"] + label')?.textContent?.trim(), 'Reputation');
```
Your `label` should have the `for` attribute set to `"reputation"`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="reputation"] + label')?.getAttribute('for'), 'reputation');
```
# --seed--
@ -130,10 +130,10 @@ assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + in
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -141,16 +141,16 @@ assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + in
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="recommendation">Personal Recommendation</label>
--fcc-editable-region--
--fcc-editable-region--

72
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md
View File

@ -7,50 +7,50 @@ dashedName: step-26
# --description--
For the final `label` and `input` inside this `fieldset`, you will add a `label` element with the text of `Price` and the `for` attribute set to `"price"`.
For the final `input` and `label` inside this `fieldset`, you will add a checkbox `input` with the `id`, `name` and `value` attributes set to `"price"`.
The checkbox `input` should have the `id`, `name` and `value` attributes set to `"price"`.
Then, a `label` element with the text `Price` and the `for` attribute set to `"price"`.
Now you can test out your `form` by selecting the various checkboxes.
# --hints--
You should have a `label` element with the text of `Price`.
You should have a fifth checkbox `input`.
```js
assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.textContent, 'Price');
assert.exists(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"]:nth-of-type(5)'));
```
Your fifth checkbox `input` should have an `id` attribute set to `"price"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']:nth-of-type(5)")?.getAttribute('id'), 'price');
```
Your fifth checkbox `input` should have a `name` attribute set to `"price"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']:nth-of-type(5)")?.getAttribute('name'), 'price');
```
Your fifth checkbox `input` should have a `value` attribute set to `"price"`.
```js
assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']:nth-of-type(5)")?.getAttribute('value'), 'price');
```
You should have a `label` element after your checkbox `input` with the text `Price`.
```js
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="price"] + label')?.textContent?.trim(), 'Price');
```
Your `label` should have the `for` attribute set to `"price"`.
```js
assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.getAttribute('for'), 'price');
```
You should have a fifth checkbox `input` below your `label`.
```js
assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(5)[type='checkbox']"));
assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="price"] + label')?.getAttribute('for'), 'price');
```
You should have a checkbox input with an `id` of `"price"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('id'), 'price');
```
You should have a checkbox input with a `name` of `"price"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('name'), 'price');
```
Your checkbox input should have a `value` of `"price"`.
```js
assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('value'), 'price');
```
# --seed--
## --seed-contents--
@ -92,10 +92,10 @@ assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + in
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -103,21 +103,20 @@ assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + in
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -125,6 +124,7 @@ assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + in
name="reputation"
value="reputation"
/>
<label for="reputation">Reputation</label>
--fcc-editable-region--
--fcc-editable-region--

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md
View File

@ -92,10 +92,10 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + l
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -103,21 +103,20 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + l
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -125,9 +124,10 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + l
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
--fcc-editable-region--

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md
View File

@ -84,10 +84,10 @@ assert.exists(document.querySelector('select[id="service"]'));
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -95,21 +95,20 @@ assert.exists(document.querySelector('select[id="service"]'));
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -117,9 +116,10 @@ assert.exists(document.querySelector('select[id="service"]'));
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md
View File

@ -130,10 +130,10 @@ assert.strictEqual(document.querySelector('option[value="excellent"]')?.textCont
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -141,21 +141,20 @@ assert.strictEqual(document.querySelector('option[value="excellent"]')?.textCont
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -163,9 +162,10 @@ assert.strictEqual(document.querySelector('option[value="excellent"]')?.textCont
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975260401487af226b290.md
View File

@ -66,10 +66,10 @@ assert.exists(document.querySelector('option[value="excellent"][selected]'));
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -77,21 +77,20 @@ assert.exists(document.querySelector('option[value="excellent"][selected]'));
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -99,9 +98,10 @@ assert.exists(document.querySelector('option[value="excellent"][selected]'));
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md
View File

@ -80,10 +80,10 @@ assert.exists(document.querySelector('label + select[name="food"]'));
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -91,21 +91,20 @@ assert.exists(document.querySelector('label + select[name="food"]'));
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -113,9 +112,10 @@ assert.exists(document.querySelector('label + select[name="food"]'));
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md
View File

@ -139,10 +139,10 @@ assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -150,21 +150,20 @@ assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -172,9 +171,10 @@ assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md
View File

@ -66,10 +66,10 @@ assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent,
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -77,21 +77,20 @@ assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent,
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -99,9 +98,10 @@ assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent,
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md
View File

@ -70,10 +70,10 @@ assert.exists(document.querySelector('label + textarea'));
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -81,21 +81,20 @@ assert.exists(document.querySelector('label + textarea'));
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -103,9 +102,10 @@ assert.exists(document.querySelector('label + textarea'));
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

18
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9836b339fed7f9a8fe35a.md
View File

@ -78,10 +78,10 @@ assert.exists(document.querySelector('textarea[rows="10"]'));
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -89,21 +89,20 @@ assert.exists(document.querySelector('textarea[rows="10"]'));
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -111,9 +110,10 @@ assert.exists(document.querySelector('textarea[rows="10"]'));
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

36
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md
View File

@ -76,10 +76,10 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -87,21 +87,20 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -109,9 +108,10 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>
@ -188,10 +188,10 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -199,21 +199,20 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="location">Location</label>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
<input
checked
type="checkbox"
@ -221,9 +220,10 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
name="reputation"
value="reputation"
/>
<label for="price">Price</label>
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="price" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>

12
curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66ad24c7eb8c121000c603a6.md
View File

@ -66,10 +66,10 @@ assert.exists(document.querySelector("input#reputation[checked]"));
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
@ -77,24 +77,24 @@ assert.exists(document.querySelector("input#reputation[checked]"));
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="ads">Social Media Ads</label>
<input type="checkbox" id="ads" name="ads" value="ads" />
<label for="ads">Social Media Ads</label>
<label for="recommendation">Personal Recommendation</label>
<input
type="checkbox"
id="recommendation"
name="recommendation"
value="recommendation"
/>
<label for="recommendation">Personal Recommendation</label>
<label for="location">Location</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="location">Location</label>
<label for="reputation">Reputation</label>
--fcc-editable-region--
<input type="checkbox" id="reputation" name="reputation" value="reputation" />
--fcc-editable-region--
<label for="reputation">Reputation</label>
</fieldset>
</form>
</main>