Learn Accessibility by Building a Quiz - Step 20

HTML-CSS
1

Tell us what’s happening:

I am stucked at step 20 from “Learn Accessibility by Building a Quiz”.

Please help. Thanks.

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" alt="freeCodeCamp" 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">

<!-- User Editable Region -->

        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="name">
            <label for="name">name</label>
            <input id="name">
            <input/>
          </div>
          <div class="email address">
            <label for="email address">email address</label>
            <input id="email">
            <input/>
          </div>
          <div class="date of birth">
            <label for="date of birth">date of birth</label>
            <input id="birth">
            <input/>
          </div>
        </section>

<!-- User Editable Region -->

        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
        </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(10rem, 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;
}

Your browser information:

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

Challenge Information:

Learn Accessibility by Building a Quiz - Step 20

2

the id can’t contain spaces, so you will need to chose a different id

3

Thanks but still not working though…

<section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="name">
            <label for="name">name</label>
            <input id="name">
            <input/>
          </div>
          <div class="email address">
            <label for="email address">email address</label>
            <input id="email">
            <input/>
          </div>
          <div class="date of birth">
            <label for="date of birth">date of birth</label>
            <input id="birth">
            <input/>
          </div>
        </section>
4

Hi,
add ``` before and after your code so we can see the actual code. You can also write your code and select all then ctr + e and it will format it for you.

5

Hi thanks, here is my code:

<section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="name">
            <label for="name">name</label>
            <input id="name">
            <input/>
          </div>
          <div class="email address">
            <label for="email address">email address</label>
            <input id="email">
            <input/>
          </div>
          <div class="date of birth">
            <label for="date of birth">date of birth</label>
            <input id="birth">
            <input/>
          </div>
        </section>
6

The code is above i just put my last version

7

It’s still not formatting.

Here is how to post code in the forum

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

Alright, here is my code then.
…

<section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="name">
            <label for="name">name</label>
            <input id="name">
            <input/>
          </div>
          <div class="email address">
            <label for="email address">email address</label>
            <input id="email">
            <input/>
          </div>
          <div class="date of birth">
            <label for="date of birth">date of birth</label>
            <input id="birth">
            <input/>
          </div>
        </section>

…

9

You have three more empty input elements. One here (<input/>):

and another one here:

and another one after your date of birth input.
It’s worth mentioning that input elements do not need a closing tag, so if you intended to use those (<input/>) tags as closing tags then it won’t work, they are seen as separate input elements.
Overall, there should be three input elements.
Good luck!

10

Alright, fair enough .
Thank you verry much , it works.

1 Like
11

I’ve edited your code for readability. 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

12

the for attribute needs to match the id, here the for attribute has more stuff in it

13

It looks like there are some issues in the form structure, particularly with the input fields inside the “Student Info” section. Each <label> should be correctly associated with a single <input> using the for attribute, but there are duplicate input fields without proper structure. For example, in the name, email address, and date of birth fields, there are extra <input/> tags that should be removed.

Additionally, the for attributes inside <label> should match the corresponding id of the input fields. The label for “email address” currently has for="email address", but the input has id="email", which is inconsistent. Changing it to for="email" will ensure proper accessibility. Fixing these issues should resolve the problem. Keep going, you’re almost there!

14

You didnt add “-” to each “id”, “class” and “for” i think.

For example, trying writing this instead

removed

I apologise if this doesnt work either haha

15

this is what the code should look like. This is from mine,

-removed
16

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

17

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.