Step 27 Building a Quiz

Am I entering the true/false values too soon? Should I get rid of the

  • elements? I am just not certain where I am going wrong. Any pointers for step 27 would be greatly appreciated. Thank you.

       **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">
                 <legend>
                   <ul>
                     <li>True</li>
                      <li>False</li>
                   </ul>
                 </legend>
               </fieldset>
             </div>
             <div class="question-block">
               <p>2</p>
               <fieldset class="question">
                 <legend>
                   <ul>
                     <li>True</li>
                      <li>False</li>
                   </ul>
                 </legend>
               </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.5060.53 Safari/537.36 Edg/103.0.1264.37

    Challenge: Step 27

    Link to the challenge:

  • legend should not wrap ul, legend should be before ul

    1 Like

    thank you I think i got it from here