Learn Accessibility by Building a Quiz - Step 32

Tell us what’s happening:

there is no menu in this step, I can’t check my code, reset or even ask for help its just the index.html code page with no instructions and I can’t also use control enter to go to the next page

Your code so far

WARNING
v
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.
d

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:

safari on MacBook Air running. (14.0 (23A344))
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Challenge Information:

Learn Accessibility by Building a Quiz - Step 31

Hello and welcome to the community @mohammed.habashe!

Unfortunately, the code is too long to post this way.

Could you please post it using three backticks ``` before and after each the complete html and the css codes?

Thanks!

3 Likes
<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" />
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" />
                  </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" />
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" />
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>
body {
 background: #f5f6f7;
 color: #1b1b32;
 font-family: Helvetica;
 margin: 0;
}

header {
 width: 100%;
 height: 50px;
 background-color: #1b1b32;
 display: flex;
}

#logo {
 width: max(100px, 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;
}

Thank you!

If you are still having issues with the instructions not showing, please try the following steps:

  • Refresh page (F5)
  • Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests.
  • If you are having problems, recommendation is to disable extensions that modify the content or layout of pages, while taking the course.
    • Try a different browser.

Please post, on this same post, to let us know if you need more assistance?

Happy coding @mohammed.habashe !

1 Like

Hello,
I tried a different browser and it worked, thank you and have a great day.

1 Like

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