Step 29 Learn Accessibility by Building a Quiz

Tell us what’s happening:
Describe your issue in detail here.
I have tried every thing I can think of and everytime I get the same error: You should nest one label element within the first li element. I just don’t see why I’d get that error sense there is a label element within the first line element >:( Help please :3

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav>
       <ul>
         <li><a href="#student-info">INFO</a></li>
         <li><a href="#html-questions">HTML</a></li>
         <li><a href="#css-questions">CSS</a></li>
			  </ul>
     </nav>
   </header>
   <main>
     <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
       <section role="region" aria-labelledby="student-info">
         <h2 id="student-info">Student Info</h2>
         <div class="info">
           <label for="student-name">Name:</label>
           <input type="text" name="student-name" id="student-name" />
         </div>
         <div class="info">
           <label for="student-email">Email:</label>
           <input type="email" name="student-email" id="student-email" />
         </div>
         <div class="info">
           <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
           <input type="date" name="birth-date" id="birth-date" />
         </div>
       </section>
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
           <p>1</p>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
               parent fieldset element
             </legend>
             <ul class="answers-list">
               <li></li>
               <li></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="question"><input type="radio" id="question" /></label></li>
               <li><label for="question"><input type="radio" id="question" /></label></li>
             </ul>
           </fieldset>
         </div>
       </section>
       <section role="region" aria-labelledby="css-questions">
         <h2 id="css-questions">CSS</h2>
       </section>
     </form>
   </main>
 </body>
</html>

/* file: styles.css */
body {
 background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

header {
 width: 100%;
	height: 50px;
	background-color: #1b1b32;
	display: flex;
}

#logo {
 width: max(100px, 18vw);
	background-color: #0a0a23;
 aspect-ratio: 35 / 4;
	padding: 0.4rem;
}

h1 {
 color: #f1be32;
	font-size: min(5vw, 1.2em);
}

nav {
 width: 50%;
	max-width: 300px;
	height: 50px;
}

nav > ul {
 display: flex;
	justify-content: space-evenly;
}

h1,
h2 {
 font-family: Verdana, Tahoma;
}

h2 {
 border-bottom: 4px solid #dfdfe2;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Step 29

Link to the challenge:

HI @jadefalkenhan04 !

Welcome to the forum!

The challenge wants you to add true and false options for the two questions in the quiz.

You need to complete this part here

and then this part here shouldn’t have duplicate ids

Remember that you can’t have duplicate ids because they have to be unique.
This is incorrect

Hope that helps!

Edit: While you can pass this challenge by adding the for attribute , and ids, the test just wants the label and inputs.

You can simplify your code by just providing the label and radio inputs without adding extra stuff.

Hope that helps!

Thank you! I tried it with just those things and I’m still getting an error message?

<ul class="answers-list">
                <li><label><input type="radio" />True</label></li>
                <li><label><input type="radio" />False</label></li>
              </ul>

Is there still something wrong with this?

It works for me.

Did you put your code for both questions?

2

HI @esra-tansuk !

If you need help with a challenge, please create a new post with your code and challenge link and people can help you there.

Thanks :slight_smile:

2 Likes

Paste this code into the elements

  • because now you have pasted only into 3rd and 4th
  • .
    ))