fix(curriculim): improve hints for Cat Photo App step 46 (#47253)
* fix: cleaned up tests * fix: tighten up test on Indoor * refactor: clean up tests on Indoor radio * fix: check for multiple `indoor` ids/reword hints * fix: minor tweakspull/47340/head
parent
d2d1bc8dab
commit
86901091a6
|
@ -11,45 +11,74 @@ Create another radio button below the first one. Nest it inside a `label` elemen
|
|||
|
||||
# --hints--
|
||||
|
||||
You will need to add a new `label` element in which to nest your new radio button. Make sure it has both an opening and closing tag.
|
||||
Only the original `Indoor` radio button `input` should have an `id` set to `indoor`. You can restart the step to get the original HTML back if needed.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#indoor').length < 2);
|
||||
```
|
||||
|
||||
You should not make any changes to the `Indoor` radio button. You can restart the step to get the original HTML back if needed.
|
||||
|
||||
```js
|
||||
const indoorInput = document.querySelectorAll('#indoor');
|
||||
assert(
|
||||
document.querySelectorAll('label').length === 2 &&
|
||||
code.match(/<\/label\>/g).length === 2
|
||||
indoorInput.length == 1 &&
|
||||
indoorInput[0]?.nodeName?.toUpperCase() === 'INPUT' &&
|
||||
indoorInput[0]?.type === 'radio' &&
|
||||
code.match(/<label\s*>\s*<input [^>]*(id=["']?indoor["']?)[^>]*>\s*Indoor\s*<\/label>/)
|
||||
);
|
||||
```
|
||||
|
||||
The text ` Outdoor` should be located directly to the right of your new `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo.
|
||||
You should add exactly one new `input` element nested in a new `label` element. Make sure your new `label` has both an opening and closing tag.
|
||||
|
||||
```js
|
||||
const radioButtons = [...$('input')];
|
||||
assert(document.querySelectorAll('label input').length === 2);
|
||||
```
|
||||
|
||||
You should not add any attributes to either opening `label` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<label\s*>/g).length === 2);
|
||||
```
|
||||
|
||||
Your new `input` should have an `id` attribute with the value `outdoor`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('label input[id="outdoor"]'));
|
||||
```
|
||||
|
||||
Your new `input` should have a `type` attribute with the value `radio`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('label input[id="outdoor"][type="radio"]'));
|
||||
```
|
||||
|
||||
You should not add any new elements other than an `input` nested in a `label`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('label input[id="outdoor"]:only-child'));
|
||||
```
|
||||
|
||||
There should be no text to the left of your new `input`.
|
||||
|
||||
```js
|
||||
const outdoorBtn = document.querySelector('label input[id="outdoor"]');
|
||||
assert(
|
||||
radioButtons.filter((btn) =>
|
||||
btn.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ *Outdoor/i)
|
||||
).length
|
||||
outdoorBtn?.previousSibling?.nodeName !== '#text' ||
|
||||
outdoorBtn?.previousSibling?.nodeValue?.replace(/\s/g, '') === ''
|
||||
);
|
||||
```
|
||||
|
||||
Your new radio button and associated label should be below the first one. You have them in the wrong order.
|
||||
The label text for your new radio button must be exactly `Outdoor`. This includes capitalization.
|
||||
|
||||
```js
|
||||
const collection = [
|
||||
...document.querySelectorAll('input[type="radio"]')
|
||||
].map((node) => node.nextSibling.nodeValue.replace(/\s+/g, ''));
|
||||
assert(collection.indexOf('Indoor') < collection.indexOf('Outdoor'));
|
||||
assert(document.querySelector('label > input[id="outdoor"]')?.nextSibling?.nodeValue?.replace(/^\s+|\s+$/g, '') === 'Outdoor');
|
||||
```
|
||||
|
||||
Your new radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
Your new radio button and label should be immediately below/after the `Indoor` radio button and label. There should be no other tags between them.
|
||||
|
||||
```js
|
||||
assert($('input')[1].hasAttribute('id'));
|
||||
```
|
||||
|
||||
Your new radio button should have an `id` attribute with the value `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.
|
||||
|
||||
```js
|
||||
assert($('input')[1].id.match(/^outdoor$/));
|
||||
assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
Loading…
Reference in New Issue