2.8 KiB

Raw Blame History

id	title	challengeType	dashedName
6141fabd6f75610664e908fd	Step 14	0	step-14

--description--

Poiché questo è un quiz, avrai bisogno di un modulo che gli utenti possano usare per inviare le risposte. Puoi separare semanticamente il contenuto all'interno del modulo utilizzando gli elementi section.

All'interno dell'elemento main, crea un modulo con tre elementi section annidati. Quindi, fai inviare il modulo a https://freecodecamp.org/practice-project/accessibility-quiz, utilizzando il metodo corretto.

--hints--

Dovresti annidare un elemento form all'interno del tuo elemento main.

assert.exists(document.querySelector('main > form'));

Dovresti annidare tre elementi section all'interno del tuo elemento form.

assert.equal(document.querySelectorAll('main > form > section')?.length, 3);

Dovresti dare all'elemento form un attributo action.

assert.notEmpty(document.querySelector('main > form')?.action);

Dovresti dare all'attributo action un valore di https://freecodecamp.org/practice-project/accessibility-quiz.

assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');

Dovresti assegnare all'elemento form un attributo method.

assert.notEmpty(document.querySelector('main > form')?.method);

Dovresti assegnare all'elemento form un attributo method con un valore di post.

assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');

--seed--

--seed-contents--

<!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>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
              </ul>
      </nav>
    </header>
--fcc-editable-region--
    <main>

    </main>
--fcc-editable-region--
  </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;
}

2.8 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

2.8 KiB

Raw Blame History