From 902ba8bc8e136873de8e7cff78ade24207d01d81 Mon Sep 17 00:00:00 2001 From: Stuart Mosquera Date: Fri, 5 Sep 2025 06:25:23 -0300 Subject: [PATCH] fix(curriculum): follow W3C convention for radio and checkbox inputs (#62040) --- .../66a9521bc70162712caf118d.md | 48 ++++---- .../66a954b2bcddba72076c1857.md | 34 +++--- .../66a9577022877d72d8f43b4f.md | 4 +- .../66a95d0eff8168747805f1f3.md | 71 ++++++------ .../66a96127422411756204bc1b.md | 70 ++++++------ .../66a962954f4e0d76223b37ed.md | 108 +++++++++--------- .../66a9689b1bf24b7750898a1b.md | 72 ++++++------ .../66a969951120be7818d8ee49.md | 18 +-- .../66a96b01f33ef178dfca9e42.md | 18 +-- .../66a972137acd1179fa3fe8a0.md | 18 +-- .../66a975260401487af226b290.md | 18 +-- .../66a975c259525b7bc2d5c776.md | 18 +-- .../66a97ca8c4cbae7d0bb6e0ad.md | 18 +-- .../66a97f40ddd40d7deb0618b7.md | 18 +-- .../66a9824ac5d9f77ec304969f.md | 18 +-- .../66a9836b339fed7f9a8fe35a.md | 18 +-- .../66a9843525e9fa8046d709b7.md | 36 +++--- .../66ad24c7eb8c121000c603a6.md | 12 +- 18 files changed, 308 insertions(+), 309 deletions(-) diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md index cd7eb69ff6c..9557b9aa03a 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md @@ -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-- diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md index 9c178d6be69..bc54ea0321a 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md @@ -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
Was this your first time at our hotel? --fcc-editable-region-- - + --fcc-editable-region--
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md index da467950ccb..47fb30188f8 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md @@ -74,10 +74,10 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend')?.inn
Was this your first time at our hotel? - - + +
--fcc-editable-region-- diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md index 061e48214b4..daba6fec048 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md @@ -14,62 +14,61 @@ Here is an example of how to work with checkboxes dealing with food options: ```html
Food Options - - + +
``` 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
Was this your first time at our hotel? - - + +
--fcc-editable-region-- diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96127422411756204bc1b.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96127422411756204bc1b.md index 6b91ea33fb1..a786932b972 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96127422411756204bc1b.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96127422411756204bc1b.md @@ -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
Was this your first time at our hotel? - - + +
Why did you choose to stay at our hotel? (Check all that apply) - - + + --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md index 035f3197655..4830e4c7739 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md @@ -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
Was this your first time at our hotel? - - + +
@@ -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) - + - + --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md index e7b2eb6810f..fe486890786 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md @@ -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
Was this your first time at our hotel? - - + +
@@ -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) - + - - - + + + - + --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md index 42af5596eb2..ab76a49d54a 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md @@ -92,10 +92,10 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + l
Was this your first time at our hotel? - - + +
@@ -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) - + - - - + + + - - - + + +
--fcc-editable-region-- diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md index 0c2be06f297..306f881d92c 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md @@ -84,10 +84,10 @@ assert.exists(document.querySelector('select[id="service"]'));
Was this your first time at our hotel? - - + +
@@ -95,21 +95,20 @@ assert.exists(document.querySelector('select[id="service"]')); Why did you choose to stay at our hotel? (Check all that apply) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md index 5e468ac8489..d5f922d0a07 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md @@ -130,10 +130,10 @@ assert.strictEqual(document.querySelector('option[value="excellent"]')?.textCont
Was this your first time at our hotel? - - + +
@@ -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) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975260401487af226b290.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975260401487af226b290.md index bcc7c37db57..f5da9a4634c 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975260401487af226b290.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975260401487af226b290.md @@ -66,10 +66,10 @@ assert.exists(document.querySelector('option[value="excellent"][selected]'));
Was this your first time at our hotel? - - + +
@@ -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) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md index afc444162d5..0185467913d 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md @@ -80,10 +80,10 @@ assert.exists(document.querySelector('label + select[name="food"]'));
Was this your first time at our hotel? - - + +
@@ -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) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md index 247573172ba..5dbda0c67f6 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md @@ -139,10 +139,10 @@ assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option
Was this your first time at our hotel? - - + +
@@ -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) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md index 81a78d34a90..8bc094f638b 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md @@ -66,10 +66,10 @@ assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent,
Was this your first time at our hotel? - - + +
@@ -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) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md index 738dc0c2fc0..01b002b6ca7 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md @@ -70,10 +70,10 @@ assert.exists(document.querySelector('label + textarea'));
Was this your first time at our hotel? - - + +
@@ -81,21 +81,20 @@ assert.exists(document.querySelector('label + textarea')); Why did you choose to stay at our hotel? (Check all that apply) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9836b339fed7f9a8fe35a.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9836b339fed7f9a8fe35a.md index a0f8d688cb8..a383830c9bf 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9836b339fed7f9a8fe35a.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9836b339fed7f9a8fe35a.md @@ -78,10 +78,10 @@ assert.exists(document.querySelector('textarea[rows="10"]'));
Was this your first time at our hotel? - - + +
@@ -89,21 +89,20 @@ assert.exists(document.querySelector('textarea[rows="10"]')); Why did you choose to stay at our hotel? (Check all that apply) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md index 2a00e890a98..1368205c10f 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md @@ -76,10 +76,10 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
Was this your first time at our hotel? - - + +
@@ -87,21 +87,20 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit'); Why did you choose to stay at our hotel? (Check all that apply) - + - - - + + + - - - + + +
@@ -188,10 +188,10 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit');
Was this your first time at our hotel? - - + +
@@ -199,21 +199,20 @@ assert.strictEqual(document.querySelector('button')?.textContent, 'Submit'); Why did you choose to stay at our hotel? (Check all that apply) - + - - - + + + - - - + + +
diff --git a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66ad24c7eb8c121000c603a6.md b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66ad24c7eb8c121000c603a6.md index df161cf439c..69435c9c63f 100644 --- a/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66ad24c7eb8c121000c603a6.md +++ b/curriculum/challenges/english/blocks/workshop-hotel-feedback-form/66ad24c7eb8c121000c603a6.md @@ -66,10 +66,10 @@ assert.exists(document.querySelector("input#reputation[checked]"));
Was this your first time at our hotel? - - + +
@@ -77,24 +77,24 @@ assert.exists(document.querySelector("input#reputation[checked]")); Why did you choose to stay at our hotel? (Check all that apply) - + - + - + - --fcc-editable-region-- --fcc-editable-region-- +