Build a Survey Form (Need Help on User story 10 & 14)

I cant seem to pass this user story:
User Story#10: For the name, email, and number input fields inside the form I can see corresponding labels that describes the purpose of each field with the following ids: id=“name-label” , id=“email-label” , and id=“number-label”.

User Story#14: Inside the form element, I can select several field from a series of checkboxes, each of which must have a value attribute.

Heres my HTML so far:

<!DOCTYPE html>
<html lang="en">
  <div class="container">
  <header class="header">
  <h1 id="title">Garlebs Service Survey Form</h1>
  </header>
    <p id="description">Thank you for taking the time to help us improve our service</p>
  <form id="survey-form">
    <div class="form-control">
      <!-- This creates the label and the input area AKA the space to enter the name -->
      <label for="name" id="label-name">
        Name
      </label>
      <input type="text"
             id="name"
             placeholder="Enter your name" 
             name="name"
             required
             />
    </div>
    <!--  This creates the email label and the input area to insert the email-->
    <div class="form-control">
      <label for="email" id="label-email">
        Email
      </label>
      <input type="email"
             id="email"
             placeholder="Enter your email"
             name="email"
             required
             />
    </div>
    <!--  This creates the age label and the input area to insert the age-->
    <div class="form-control">
      <label for="age" id="label-age">
        Age (optional)
      </label>
      <input type="number"
             id="number"
             placeholder="Age"
             name="age"
             min="18"
             max="99"
             required
             />
    </div>
    <!--  This creates the satisfaction option and the option to choose from-->
    <div class="form-control">
      <label for="satisfaction"> What option best describes the satisfaction of the services provided?
      </label>
      <!-- It create a pull down list -->
      <select id="dropdown" name="satisfaction" id="satisfaction-option">
        <option disabled selected value>Select a satisfaction</option>
        <option value="terrible">Terrible</option>
        <option value="great">Great</option>
        <option value="improvement">Need Improvement</option>
      </select>
        </div> 
         <!-- This creates the radio buttom and label for the type of service provided -->
    <div class="form-control">
      <label>
        What type of service was provided?
      </label>
      <label for="service-1">
        <input type="radio" 
               id="service-1"
               name="service"
               value="pluming" />Pluming
      </label>
      <label for="service-2">
      <input type="radio"
             id="service-2"
             name="service"
             value="gas"/>Gas Installation</label>
      <label for="service-3">
      <input type="radio" 
             id="service-3" 
             name="service"
             value="Gasoline" />Gasoline Refuel
      </label>
</div>
<!-- Creates the area for the suggestions -->
<div class="form-control">
  <label for="suggestion">
    Any comments or suggestions leve them below.
  </label>
  <textarea class="input-textarea"
            name="suggestion" 
            id="suggestion"
            placeholder="Enter Suggestions here"
            ></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">
  Submit
</button>
  </div>
</form>
  </div>
</html>

Heres the CSS so far:

@import url('https://fonts.google.com/specimen/Lora?query=lora');

body{
  font-family: Lora, Times New Roman;
  text-align: center; 
  background-color: #F2E6D8;
  color: #1E1D40;
  font-size: 20px;
}
p{
  color: #1E1D40;
  text-align: center;
}
#title{
  color: #D90D32;
  font-size: 45px;
  text-align: center;
}
form{
  background-color: white;
  margin: 25px auto;
  box-shadow: 2px 5px 10px;
  padding: 15px 15px;
  max-width: 500px;
}
.form-control{
  text-align: left;
  margin-bottom: 15px;
}

.form-control label{
  display: block;
  margin-bottom: 15px;
}
.form-control input,.form-control select, .form-control-textarea{
 border: 1px solid black;
 border-radius: 2px;
 font-family: Lora;
 padding: 10px;
 display: block;
 width: 95%;
}
  .form-control input[type="radio"],
        .form-control input[type="checkbox"] {
            display: inline-block;
            width: auto;
}
button{
  background-color: #4ab0d9;
  border: 1px solid black;
  border-radius: 2px;
  font-family: Lora;
  font-size: 21px;
  width: 100%;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
  cursor: pointer;
}
.input-textarea{
  resize: vertical;
  width: 100%;
  min-height: 150px;
}
        <label for="name" id="name-label">Name</label>
        <input type="text" id="name" value="" placeholder="Enter your name" required>

(For User Story #10) I think you need to assign the id for each label with the corresponding id names as requested. Hope the example, that I’ve given you, helps.

1 Like

Hi @lizz.garleb,
for the User Story#10, you wrote the wrong ids.

<label for="name" id="**label-name**">Name</label>
<label for="email" id="**label-email**">Email</label>
<label for="age" id="**label-age**">Age (optional)</label>

They are “name-label”, “email-label” and “number-label” and not vice-versa.

User Story#14, you need to create a series of checkboxes like you did with radios.

<input id="text" class="some_class" name="name-group" type="checkbox" value="value"/>
<label class="some_class" for="text">Test</label>

:wave:

1 Like

@lizz.garleb, I see someone has given you the answers but in the future when a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

For instance the full text of the first failing message is

For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label".
#name-label is not defined : expected null to not equal null
AssertionError: #name-label is not defined : expected null to not equal null

Notice how the second and third lines provide additional information as to what the test is looking for and why it is failing.

The next full failing message says

Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.
There should be at least 2 checkboxes inside the form : expected 0 to be at least 2
AssertionError: There should be at least 2 checkboxes inside the form : expected 0 to be at least 2

From the above do you understand what the test is looking for and why it is failing?

1 Like

I understanded the what the story user was asking but the squared that specify the problem I didnt understanded.

I’m not sure what you mean by this.
I think you’ve moved on but if there’s something specific you don’t understand please ask and I’ll try and explain it better.

1 Like

Thank you once I stop and read I understanded what was the problem.

Then let me try and explain;
The first line is a repeat of the user story which you understand

The second line is saying #name-label is not defined. The hash-tag as you know means id. It’s not finding `id=“name-label”.
The second part of the message says it didn’t find anything (null) and it didn’t expect to not find anything.

The third line here is a repeat of the second line. It’s asserting that #name-label was not defined. (You can look up the word “assert” if needed)

The lines after that are a stack trace and you don’t need to worry about them.

Now from the user story and error message it was looking for the following, id="name-label" and from your code we find
<label for="name" id="label-name">
Notice that id="label-name" is not the same as id="name-label"

The next test that failed can be read in a similar way. It was expecting to find at least two input elements with a type attribute of checkbox and there are none in the form.

Hope that helps.

1 Like

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