From 86901091a63d7ac16e31dcfe93551caeed153678 Mon Sep 17 00:00:00 2001
From: Bruce Blaser <bbsmooth@gmail.com>
Date: Sat, 20 Aug 2022 01:36:10 -0700
Subject: [PATCH] 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 tweaks
---
 .../5f05a1d8e233dff4a68508d8.md               | 71 +++++++++++++------
 1 file changed, 50 insertions(+), 21 deletions(-)

diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index 387bdb01eea..5d4541c0f10 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -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--