Vague questions/directions on survey form (edited to show current code)

HTML-CSS
1

Tell us what’s happening:

Not sure, a lot of the questions are vaguely worded and I’m only passing 5 of 17 tests.

Your code so far

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<h1 id="title" title="Free Code Camp Survey Form">Enter to win an all expenses paid trip to Herman Gardens!</h1>
<!--#1 confusing because there is no such thing as a 'title' element in HTML5 specification and 'h1 sized text' makes no sense because h1 is an element, not an attribute-->
<p id="description">Answer all questions correctly and visit the home of automobile giant and cocaine afficionado John De Lorean in beautiful, sunny Detroit!</p>
<!-- #2 confusing wording, 'p sized text' is like saying "span sized text" -->
<form action="submit" id="survey-form">
  <!-- #3 -->
  <div id="input-group">
    <div>
      <label for="name" id="name-label">Name</label>
      <!-- #10 -->
      <input type="text" id="name" placeholder="2 - 30 characters" minlength="2" maxlength="30" required>
      <!-- #4 confusing wording as there is no 'field' element in HTML5 specification, #11 -->
    </div>
    <div>
      <label for="email" id="email-label">Email</label>
      <!-- #10 -->
      <input type="email" id="email" placeholder="user@domain.ext" required>
      <!-- #5, confusing wording same as #4) and #6 no clear definition of "HTML5 validation error". there is no mention of such an element or attribute in the HTML5 specification #11 -->
    </div>
    <div>
      <label for="number" id="number-label">Phone Number</label>
      <!--  USING A TYPE 'NUMBER' FOR A PHONE NUMBER IS BAD PRACTICE AND SHOULD BE AVOIDED, Only there to satisfy an automated test. #10 -->
      <input type="number" id="number" required placeholder="ex: 123-456-7890" minlength="7" maxlength="2">
      <!-- #7, #8, #9 HTML validation occurs on submission of form #11 -->
    </div>
  </div>
  <div id="select">
    <label for="dropdown">What's your favorite way to travel?</label>
    <select id="dropdown"><!-- #12: There is no such element as dropdown. Ambiguous or vague wording can be very confusing to people who are learning -->
    <optgroup label="Air">
      <option value="Plane">Plane</option>
      <option value="Helicopter">Helicopter</option>
      <option value="Catapult">Catapult</option>
      <option value="Falcor">Falcor</option>
    </optgroup>
    <optgroup label="Sea">
      <option value="Private Yacht">Private Yacht</option>
      <option value="Cruise Ship">Cruise Ship</option>
      <option value="Pirate Ship">Pirate Ship</option>
      <option value="Giant Turtle">Giant Turtle</option>
    </optgroup>
    <optgroup label="Land">
      <option value="Car/Truck">Car/Truck</option>
      <option value="Charter bus">Train</option>
      <option value="Train">Shai-Hulud</option>
      <option value="Howl's Moving Castle">Howl's Moving Castle</option>
    </optgroup>   
  </select>
  </div>
  <fieldset id="radio-group">
    <!-- #13 -->
    <legend>What was the dumbest thing George Lucas ever did?</legend>
    <div>
      <input type="radio" id="duck" name="movie" value="duck">
      <label for="duck">Releasing Howard the Duck instead of burning the script and swearing anyone who knew about it to secrecy under penalty of death.</label>
    </div>
    <div>
      <input type="radio" id="jarjar" name="movie" value="jarjar">
      <label for="jarjar">Meesa thinkin maybe da Jar Jar - heesa biggest mistaken Georgey ever makin!</label>
    </div>
    <div>
      <input type="radio" id="midichlorians" name="movie" value="midichlorians">
      <label for="midichlorians">Introducing midichlorians in The Phantom Menace and reducing the ubiquitious force to bacterium.</label>
    </div>
    <div>
      <input type="radio" id="holiday" name="movie" value="holiday">
      <label for="holiday">The 1978 Star Wars Holiday Special. Seriously this one's so bad I can't even joke about it. It's just.... just look it up.</label>
    </div>
  </fieldset>
  <fieldset id="shrodingers-checkboxes">
    <legend>Evaluate the following question or statement.</legend>
    <div>
      <div>
        <fieldset class="tf">
          <input id="t0" type="checkbox" value="t0">
          <!-- #14 -->
          <label for="t0">True</label>
          <input id="f0" type="checkbox" value="f0">
          <!-- #14 -->
          <label for="f0">False</label>
        </fieldset>
        <p class="tip">The following statement is false.<span data="tooltip">This is the Card Paradox, a variant of the Liar Paradox.</span></p>
      </div>
      <hr>
      <div>
        <fieldset class="tf">
          <input id="t1" type="checkbox" value="t1">
          <!-- #14 -->
          <label for="t1">True</label>
          <input id="f1" type="checkbox" value="f1">
          <!-- #14 -->
          <label for="f1">False</label>
        </fieldset>
        <p>The previous statement is true.</p>
      </div>
      <hr>
      <div>
        <fieldset class="tf">
          <input id="t2" type="checkbox" value="t2">
          <!-- #14 -->
          <label for="t2">Autological</label>
          <input id="f2" type="checkbox" value="f2">
          <!-- #14 -->
          <label for="f2">Heterological</label>
        </fieldset>
        <p>Heterological</p>
      </div>
      <hr>
      <div>
        <!-- #14 -->
        <fieldset class="tf">
          <input id="t3" type="checkbox" value="t3">
          <!-- #14 -->
          <label for="t3">Yes</label>
          <input id="f3" type="checkbox" value="f3">
          <!-- #14 -->
          <label for="f3">No</label>
        </fieldset>
        <p>Can God microwave a burrito so hot that he can't eat it?</p>
      </div>
      <hr>
      <div>
        <fieldset class="tf">
          <input id="t4" type="checkbox" value="t4">
          <label for="t4">Alive</label>
          <input id="f4" type="checkbox" value=f4>
          <label for="f4">Dead</label>
        </fieldset>
        <p>Schr&oumldinger's cat</p>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend>Any final words?</legend>
    <textarea name="comments" id="comments" cols="100" rows="10" placeholder="By submitting this form you are entering into a formal agreement that you will not, in any form, submit any forms."></textarea>
    <!-- #15 -->
  </fieldset>
  <button id="submit" type="submit">Submit</button>
  <!-- #16 -->
</form>

------------CSS-------------

:root {
  background-color: #cdcdcd;
}
h1,
legend {
  text-transform: capitalize;
}
input:invalid {
  box-shadow: 0 0 5px 1px green;
}

input:focus:invalid {
  outline: none;
  box-shadow: 0 0 5px 1px red;
}

input:focus {
  outline: none;
  box-shadow: 0 0 5px 1px blue;
}
textarea {
  font-size: 2em;
  width: 100%;
}
p {
  display: inline-block;
}
.tf {
  display: inline-block;
  border-radius: 5px;
}

/** tool tips */
.tip:hover {
  cursor: help;
  position: relative;
}
.tip span {
  display: none;
}
.tip:hover span {
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  padding: 8px;
  display: block;
  z-index: 100;
  background-color: #71b2e8;
  left: 0px;
  margin: 10px;
  width: 250px;
  position: absolute;
  top: 10px;
  text-decoration: none;
  animation: fade-in 200ms linear;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/** end tool tips */```
**Your browser information:**

User Agent is: <code>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36</code>.

**Link to the challenge:**
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form/
2

This is sort of frustrating: I’ve commented my code to explain the issues I’m having but they were all erased when I added the copied code to this site

3

It would be better to put the link to your pen here.

4

I’ve edited your post 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 easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

5

Okay, thanks - here’s the link:survey form

6

Be careful of typos survey-form is not the same as survey_form.

By fixing this, you will solve many other errors all at the same time.

Also, try to correct the other errors by checking what’s required in the test.

7

Thanks, I didn’t realize I had put an underscore in there! And I did check the requirements, ergo the confusion when it told me I didn’t meet them. Also, coding at 1:30am tends to get a little wonky.

If the test component told me which tests I was failing, so I didn’t spend an hour or more trying to figure that out, that would be just great.

8

So, now I’m passing 15/17 after correcting the ‘_’ to ‘-’. I’ve gone over every item one by one and referenced the associated User Story in the commented html, but I can’t figure out which two tests I’m not passing. I have an idea that it may be something to do with either the reference to “dropdown” or “field”. Since neither ‘dropdown’ or ‘field’ are valid html elements. I assumed they were referring to select and input elements, but I can’t be sure. I’ve spent the last two hours trying to figure out which two tests I’m not passing and I just don’t know.

I opened the console and when I run the tests, it displays ‘4’, no explanation or text just a single number so I thought maybe it was referencing the failed test - which I thought might be the associated user story number (again this is all guesswork)

  • User Story #4: Inside the form element, I am required to enter my name in a field with id="name" .

My code related to that reads

    <div>
      <label for="name" id="name-label">Name</label>
      <!-- #10 -->
      <input type="text" id="name" placeholder="2 - 30 characters" minlength="2" maxlength="30" required>
      <!-- #4 confusing wording as there is no 'field' element in HTML5 specification #11 -->
    </div>
9

Stop looking at the user stories, and look at the errors you are getting when you run the tests (or click “Tests */17”). They are in the wells below failing tests with lots of text in red. The first line, before it starts listing filenames and line numbers, is where the meat is:

8:Number field should be HTML5 validated : expected ‘tel’ to equal ‘number’
9: Minimum number should be defined : expected NaN not to be NaN

As mentioned before, changing one thing can fix multiple tests. In this case, I’d focus on 8 and see if it solves 9

10

Hmm…guess you didn’t read before replying. console only showed ‘4’, no other information at all, ever. That being said, thank you for pointing out that I was expected to use an <input type="number"/> instead of <input type="tel"/>, which is bad practice and should be resolved. I will issue a pull request for that, along with several other items pertaining to this project, tonight.

That did fix one error, however my console output is still ‘4’ - nothing more, which was the crux of the problem.

Also, I had to undo all of my purely stylistic changes because they made the test go back to 5/17 from 16/17. All I did was nest some divs, add some color, and make my layout responsive. The forked (reverted) pen is here

Okay Problem Solved! Thanks to vipatron being able to see the console output that for whatever reason wouldn’t show up in my console, the final problem was using minlength and maxlength as they are attributes intended for use with tel and text inputs, not the num type I had to change to - num uses min and max.

11

what browser are you using? I’m using chrome and none of the actual errors show up on mine either.

12

got it just click on the red error button. :duh