Accessibility Quiz Step 19

HTML-CSS
1

Firstly, I am really grateful for this opportunity to have this platform to learn from. However, I feel the instructions are EXTREMELY poorly written. I find the instructions lacking on at least, and furthermore the help-hints usually give poor information. But I have met my match on this one.

Step 19

Filling out the content of the quiz, below #student-info, add three div elements with a class of info.
Then, within each div nest one label element, and one input element.

Test: Sorry, your code does not pass. Keep trying.

Hint: You should nest three div elements below the h2#student-info element.

I have tried so many different versions of this code to no avail. Here are 3 examples, but I have tried it many more.

    <section role="region" aria-labelledby="student-info">
      <h2 id="student-info">Student Info</h2>
      <div class="info">
        <label><input></label>
        <div class="info">
          <label><input></label>
          <div class="info">
            <label><input></label>
          </div>       
        </div>
      </div>
    </section>

  1.  <section role="region" aria-labelledby="student-info">
   <h2 id="student-info">Student Info</h2>
   <div class="info">
     <label><input></label>
   </div>
   <div class="info">
     <label><input></label>
   </div>
   <div class="info">
     <label><input></label>
   </div>
 </section>

  2.  <section role="region" aria-labelledby="student-info">
   <h2 id="student-info">Student Info</h2>
   <div class="info">
     <label><input>
   </div>
   <div class="info">
     <input>
   </div>
   <div class="info">
     <input></label>
   </div>
 </section>
2

Figured it out. I guess there was an error and after I restarted the step it accepted my code which I have tried previously numerous times, putting the input after the label.

3

I’m very happy that you figured it out, and about the platform, FCC is just a start to your coding journey, you need to read and to watch other courses and to practice a lot and a lot

4

Omg I was about to lose my head, but yea, sometimes instructions can be a bit tricky. I wonder If they do it in purpose just to tell if you’re paying attention, lol.

Upon taking a closer look it says to place the input element AFTER the label, not in between.But so far we’ve only used inputs nested INSIDE labels… maybe it’s just inertia?

5

Yes. I did that first, but it didn’t work. The nested inside ones were the last ones I tried, because I remembered we did that before, and thought; “maybe the instructions were bad?” I think something had a problem or glitched out, because I had to “restart step” and then it finally worked.

I think they may do it on purpose also to get us used to “googling the answer” as that was a big step of learning C# for me, and I still do from time to time. From a teaching standpoint, I think they are just trying to show you that you can do achieve the same output a hundred different ways. That way you can just find what works best for you and use that.

6

Student Info

This is the code you were looking for
7

Student Info

8

what is the code? ive also tired what feels like at least a thousand different ways to do it.

9

You need to use a label closing tag immediately after creating it, after your label closing tag use the input tag and you should be good!

1 Like
10

This is the code that worked for me. I hope it works for you too:

Mod edit: solution redacted

2 Likes
11

Talk about overthinking it. I did the same and practically pulled my hair out. Solution is always simple after you’ve seen the right answer. Thanks to the responders.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.