Learn Accessibility by Building a Quiz - Step 29

HTML-CSS
1

Tell us what’s happening:

Hello FCC Team, I am having trouble with this piece of code.

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">
        <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">Date of Birth:</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">
            <h3><span class="sr-only">Question</span>1</h3>
            <fieldset class="question" name="html-question-one">
              <legend>
                The legend element represents a caption for the content of its
                parent fieldset element
              </legend>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

            </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(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;
}

.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/131.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 29

2

I have not checked what the step asks to do, but here you are missing a character

3

Doesn’t work :frowning:

You should nest one label element within the third li element.

4

Hi @PieroGentile

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image
image704×698 35.8 KB

You appear to have removed some of the code from the editor.

Please reset the step to restore the seed code and try again.

Also …

The type attribute value is missing the second quote mark.

Happy coding

1 Like
5

Hello @PieroGentile !

Good attempt!

This step is asking us to do the following:

  1. Enter label elements within all four li elements.
  2. Enter input elements within those label elements.
  3. Enter the correct attribute type and value combination within each input element.

We should not enter any text at this point.

You have done a good job of entering the input, along with the attribute type and values in some of the li. Please add these to the remaining li?

It is important to assure all values are enclosed between a set of quotation marks, as mentioned in previous posts.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
6

Thanks I got it :smiley:

2 Likes
7

Happy to hear you got it! :slightly_smiling_face:

Wishing you more good progress on your coding journey. :slightly_smiling_face:

1 Like