fix(curriculum): add test cases to ferris-wheel project #45099 (#45134)

* added tests to satisfy first-of-type and last-of-type

* edited hints to require nth-of-type selector

* refactor for readability

curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/step-014.md

@@ -14,19 +14,22 @@ Time to position the cabins around the wheel. Select the first `.cabin` element.
 You should have a `.cabin:nth-of-type(1)` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)'));
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s) 
+assert.exists(def('.cabin:first-of-type') || def('.cabin:nth-of-type(1)'));
 ```
 
 Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.right === '-8.5%');
+const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
+assert.equal(right('.cabin:nth-of-type(1)') || right('.cabin:first-of-type'), '-8.5%');
 ```
 
 Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.top === '50%');
+const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
+assert.equal(top('.cabin:nth-of-type(1)') || top('.cabin:first-of-type'),'50%');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/step-015.md

@@ -92,19 +92,22 @@ assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top ==
 You should have a `.cabin:nth-of-type(6)` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)'));
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s)
+assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type'));
 ```
 
 Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.right === '17%');
+const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
+assert.equal(right('.cabin:nth-of-type(6)') || right('.cabin:last-of-type'),'17%');
 ```
 
 Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.top === '7%');
+const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
+assert.equal(top('.cabin:nth-of-type(6)') || top('.cabin:last-of-type'),'7%');
 ```
 
 # --seed--