fix(curriculum): convert to placeholder attr (#44661)

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-038.md

@@ -35,10 +35,10 @@ assert.notEmpty(cols);
 assert.isNotNaN(Number(cols));
 ```
 
-You should give the `textarea` placeholder text describing an example answer.
+You should give the `textarea` a `placeholder` attribute with text describing an example answer.
 
 ```js
-assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.textContent);
+assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('placeholder'));
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-039.md

@@ -139,9 +139,7 @@ assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textar
               <label>Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea rows="5" cols="24">
-Who is flexbox...
-              </textarea>
+              <textarea rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
 --fcc-editable-region--
           </div>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-040.md

@@ -151,9 +151,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-041.md

@@ -134,9 +134,7 @@ assert.exists(document.querySelector('footer > address'));
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-042.md

@@ -135,9 +135,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-043.md

@@ -141,9 +141,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-044.md

@@ -166,9 +166,7 @@ assert.equal(display, 'block');
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-045.md

@@ -163,9 +163,7 @@ for (let elem of document.querySelectorAll('li > a')) {
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-046.md

@@ -159,9 +159,7 @@ assert.equal(cursor, 'pointer');
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-047.md

@@ -146,9 +146,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-048.md

@@ -148,9 +148,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-049.md

@@ -159,9 +159,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-050.md

@@ -164,9 +164,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-051.md

@@ -132,9 +132,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-052.md

@@ -150,9 +150,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-053.md

@@ -230,9 +230,7 @@ assert.isAtLeast(valInPx, 13);
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-054.md

@@ -143,9 +143,7 @@ assert.equal(textAlign, 'left');
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-055.md

@@ -143,9 +143,7 @@ assert.equal(minWidth, '55px');
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-056.md

@@ -153,9 +153,7 @@ assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.inf
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-057.md

@@ -164,9 +164,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-058.md

@@ -150,9 +150,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-059.md

@@ -140,9 +140,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-060.md

@@ -138,9 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-061.md

@@ -178,9 +178,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-062.md

@@ -144,9 +144,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-063.md

@@ -158,9 +158,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-064.md

@@ -156,9 +156,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-065.md

@@ -134,9 +134,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-066.md

@@ -140,9 +140,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-067.md

@@ -152,9 +152,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
               <label for="css-questions">Do you have any questions:</label>
             </div>
             <div class="answer">
-              <textarea id="css-questions" name="css-questions" rows="5" cols="24">
-                Who is flexbox...
-              </textarea>
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
             </div>
           </div>
         </section>
@@ -473,9 +471,7 @@ address {
 						<label for="css-question">Do you have any questions:</label>
 					</div>
 					<div class="answer">
-						<textarea id="css-question" name="css-question" rows="5" cols="24">
-Who is flexbox...
-              </textarea>
+						<textarea id="css-question" name="css-question" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
 					</div>
 				</div>
 			</section>