Tell us what’s happening: @cody_Biggs help out. To the best of my ability, have managed to apply the instructions but I keep getting an error/hint text that I should place the first label text content after the input element which have already done. Thanks in advance! Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Challenge: Learn Accessibility by Building a Quiz - Step 32
Your code was too large to bring over from the challenge. So what you will have to do is use the format button that looks like
</>
When you reply, and paste your code between the lines the button gives you. Note that you will need to use the button once for your html, and then once again for your css
It looks like you are trying to manually use </>. Its actually a button in your editor when you reply. And should be up top. It looks like </>
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
Above is the code snippet that I was talking about. The issue is this " You should place the first label text content after the input element." while have done that repeatedly. Thanks.
<ul class="answers-list">
<li>
<input type="radio" id="q1-a1" name="q1-a1" value="True" />
<label for="q1-a1">True</label>
</li>
<li>
<input type="radio" id="q1-a2" name="q1-a2" value="False" />
<label for="q1-a2">False</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<input type="radio" id="q2-a1" name="q2-a1" value="True" />
<label for="q2-a1">True</label>
</li>
<li>
<input type="radio" id="q2-a2" name="q2-a2" value="False"/>
<label for="q2-a2">False</label>
</li>
</li>
</ul>
Notice how when you first start the challenge the code is like this
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" />
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" />
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" />
</label>
</li>
</ul>
Notice how the input is nested inside the label? It needs to stay this way, you just add the text after the end of the input and then give the input the appropriate value
