Learn Accessibility by Building a Quiz - Step 33

HTML-CSS
1

Tell us what’s happening:

Your code so far

I did as instructed but i am still stucked, need assistance

<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>
                </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: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 33

Link to the challenge:

2

challenge : If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time.

Group the relevant inputs together such that only one input from a pair can be selected at a time.

3

above is one pair of inputs that need to be grouped. To group them you must give them the same name attribute value.

(same for the other two)

This will prevent the user from selecting them both at the same time. They must pick one only.

2 Likes
4

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