Learn Accessibility by Building a Quiz - Step 27

Shabana_Asif · October 21, 2022, 10:40am

Tell us what’s happening:
Describe your issue in detail here.

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" 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>
                true
                </li>
                <li>
                  false
                </li>
              </ul>
            </fieldset>

            <fieldset>
              <legend>
                The legend element represents a caption for the content of its
                parent fieldset element
              </legend>

              <ul class="answer-list">
                <li>true</li>
                <li>false</li>
                </ul>
            </fieldset>
          </div>
          </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(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;
}

Your browser information:

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

Challenge: Learn Accessibility by Building a Quiz - Step 27

Link to the challenge:

Why my code is not passed . i am exactly add one legend in first fieldset.

hbar1st · October 21, 2022, 10:44am

Remove the text you added in the legend as it was not requested (for both of them)
Same comment for the li elements. They didn’t ask you to add true or false text.

DobarBREND · October 21, 2022, 10:51am

After the last closing ‘fieldset’ tag you don’t need two closing ‘div’ tags.

Shabana_Asif · October 21, 2022, 10:55am

After removing text. Code is not passed.

hbar1st · October 21, 2022, 10:57am

Remove the true and false text as well .
They didn’t ask for it.

Shabana_Asif · October 21, 2022, 10:59am

???

hbar1st · October 21, 2022, 11:01am

Please post the actual code so we can test it.

Shabana_Asif · October 21, 2022, 11:04am

hbar1st · October 21, 2022, 11:23am

Please post your code in a code block here. I cannot see it otherwise.

```
Code here
```

Shabana_Asif · October 21, 2022, 11:25am

<!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>
              
              </legend>
              <ul class="answers-list">
                <li>
                
                </li>
                <li>
                  
                </li>
              </ul>
            </fieldset>

            <fieldset>
              <legend>
                
              </legend>

              <ul class="answer-list">
                <li></li>
                <li></li>
                </ul>
            </fieldset>
        
          
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

hbar1st · October 21, 2022, 11:26am

Remove the classes from the new elements.
They didn’t ask for these.

Shabana_Asif · October 21, 2022, 11:29am

after removing it can processed

Shabana_Asif · October 21, 2022, 11:30am

<!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>
              
              </legend>
              <ul>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </fieldset>

            <fieldset>
              <legend>  
              </legend>
              <ul>
                <li></li>
                <li></li>
                </ul>
            </fieldset>
          
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

DobarBREND · October 21, 2022, 11:35am

Where is the closing tag for the

?

Shabana_Asif · October 21, 2022, 11:37am

After adding closing tag it is not processed.

Shabana_Asif · October 21, 2022, 11:38am

<!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>
              
              </legend>
              <ul>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </fieldset>

            <fieldset>
              <legend>  
              </legend>
              <ul>
                <li></li>
                <li></li>
                </ul>
            </fieldset>
        </div>
          
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

DobarBREND · October 21, 2022, 12:02pm

It has passed on my side. Try to restart step.

Shabana_Asif · October 22, 2022, 7:12am

I get the same error after restart the step.

hbar1st · October 22, 2022, 8:41am

You seem to have deleted some of the required code that was there at the start.
Please click on the Restart Button.

You will be presented with this code block:

        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
          <div class="question-block">
            <p>1</p>
            <fieldset class="question"></fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <fieldset class="question"></fieldset>
          </div>
        </section>

All the new code should go between the opening and closing tag of the 2 fieldsets.
Do not delete any of the code in between the fieldsets.

system · April 22, 2023, 8:41pm

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

Topic		Replies	Views
Learn Accessibility by Building a Quiz - Step 27 HTML-CSS	3	378	June 7, 2024
Learn Accessibility by Building a Quiz - Step 27 HTML-CSS	3	1025	August 20, 2024
Learn Accessibility by Building a Quiz - Step 27 HTML-CSS	4	495	March 25, 2025
Learn Accessibility by Building a Quiz - Step 27 HTML-CSS	2	277	December 25, 2023
Learn Accessibility by Building a Quiz - Step 27 HTML-CSS	5	573	October 26, 2023

Learn Accessibility by Building a Quiz - Step 27

Related topics