Learn Accessibility by Building a Quiz - Step 35

HTML-CSS
1

Tell us what’s happening:

Hello everyone,

I am having trouble figuring out what I need to be doing to get this figured out. I used four div statements and thought I properly nested the div element in the section with a class of fomrow. Can someone help me out please?

Thank you,
Jonathan

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Learn Accessibility by Building a Quiz - Step 35

2

‘<section


CSS


<div class=“question-block”

’

3
Accessibility Quiz

HTML/CSS Quiz

Student Info

Name:
Email:
D.O.B.(Date of Birth)

HTML

1

The legend element represents a caption for the content of its parent fieldset element
  • True
  • False

2

A label element nesting an input element is required to have a for attribute with the same value as the input's id
  • True
  • False
'<section

CSS

<div class="question-block"
'
4

Hi @jpccdirect

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

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

Sorry, I pasted it wrong and I think don’t understand the backticks very well.

8

One of the moderators may convert your post into viewable code.

9

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 (').

10

Hello!

I’d recommend you reset your code.
Then after your h2 element, add a div with the class of ‘formrow’
Then in your formrow add 4 div elements with the class of question-block then answer then question-block then answer

11 
 <section role="region" aria-labelledby="css-questions">
          <h2 <div class="formrow"<div class="question-block"></div><div class="answer"></div><div class="question-block"></div><div class="answer"></div>id="css-questions">CSS</div></h2>

        </section>

Here's my new code. I still got an error. Would you be able to help me see where I'm going wrong. Thank you for providing me with that help anyways.
12

Thanks @Cody_Biggs. I went ahead and used the pre-formatted text and it worked a lot better. I really appreciate that help.

13

Hi @jpccdirect

You appear to have entered your code inside the h2 opening tag.

I edited your code for readability.

After making the changes suggested in the code block, copy the code from the opening div tag with class formrow to the last closing div tag, reset the step to restore the original code, then paste your code back into the editor.

Happy coding

1 Like
14

Hey @Teller. I’m still not understanding. Could you possibly give me some more help? Here’s my new code.

<section role="region" aria-labelledby="css-questions">
  <h2 id="css-questions">CSS</h2>
  <div class="formrow">
    <div class="question-block"></div>
    <div class="answer"></div>
    <div class="question-block"></div>
    <div class="answer"></div>
    <div></div>
  </div>
</section>
15

Hi @jpccdirect

Delete the empty div element.

Happy coding

16

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