Learn Accessibility by Building a Quiz - Step 33

HTML-CSS
1

Problem I am unsure what this question or hints are asking for?

Test Sorry, your code does not pass. Try again.

Hint You should give the fourth input a name attribute matching the name attribute of the third input.

  <ul class="answers-list">
                <li>
                  <label for="q1-a1">
                    <input type="radio" id="q1-a1" value="true" name="answer"/>
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" value="false"  name="answer"/>
                    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>
                  <label for="q2-a1">
                    <input type="radio" id="q2-a1" value="true" name="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" value="false"  name="false"/>
                    False
                  </label>
                </li>
              </ul>```


**Your browser information:**

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

**Challenge:**  Learn Accessibility by Building a Quiz - Step 33

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-33
2

Could you edit your post and include all the raw code?

Additionally don’t delete link to the lesson

3

It said the code auto deleted due to the load. I am not sure why the lesson deleted either? Here is my copy and paste code



<!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>
                  <label for="q1-a1">
                    <input type="radio" id="q1-a1" value="true" name="answer"/>
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" value="false"  name="answer"/>
                    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>
                  <label for="q2-a1">
                    <input type="radio" id="q2-a1" value="true" name="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" value="false"  name="false"/>
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>
4

Please post a link to the challenge.

5

I can no longer Edit the original post for some reason , hope its ok to just post in comments

6

Look at your name attribute inside your input element

Both for first input and second input must have the same value for the name attribute

Example the first one you have both value for the name attribute is answer,

So the it goes with this one too. You must have the same value like name="true" and name="true"

7

I have switched out my first two inputs to

 <ul class="answers-list">
                <li>
                  <label for="q1-a1">
                    <input type="radio" id="q1-a1" value="true" name="true"/>
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" value="false"  name="false"/>
                    False
                  </label>

However I still get an error message

-freecodecamp-org-learn-2022-responsive-web-design-learn-accessibility-by-building-a-quiz-step-33-2023-01-24-21_41_11
-freecodecamp-org-learn-2022-responsive-web-design-learn-accessibility-by-building-a-quiz-step-33-2023-01-24-21_41_111920×969 94.6 KB

With thanks

8

The name should be the same value if the answers are for the same question.

9

Same value as what? I am not sure what you means as my name and answers both coincide with “true” and “false”. Would you be allowed to share one <input> example line? Thank you

10

the radio buttons both belong to the same question, so you want them to have the same name (attribute and value of that attribute).
This is to prevent the user from selecting both (in this case only select True or False, but not both, correct?)

This method was discussed in an earlier project/step in the Building a Registration Form project. You can look at the final code here https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-63 to see how the radio button name attribute was handled to force the user to pick only one account type.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.