Why am I still failing these user stories?

I am creating my product landing page and I am pretty sure I have completed user story 5 and 12 but why am I still failing them in the test??

This is my project: https://codepen.io/bookworm0618/pen/wxojZQ

User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.

and you have:

      <li class="nav-link"><a href="#about-us">About Us</a></li>

It says that the “clickable element” must have the class. The a tag is the clickable element, not the li.

On the second one, the error text from the test suite says:

… The #email input should have a name attribute : expected false to equal true

This is not explicit in the user stories, but is good practice and was probably covered in the curriculum.

When I move those classnames to the the appropriate place, and add a name attribute of “email” to your email input, it passes.

1 Like

Thank you so much!!! :hugs:

Hello, I just finished putting together the survey page challenge, and I must say the survey page looks presentable - except for the dropdown button which seems to activate when the pointer is off-side. But the main thing is I am not able to pass any of the user stories even though I have added IDs where it is needed. What am I doing wrong?
Here’s my pen:

I see what you are trying to do, but I don’t understand why? Did you consider using the HTML element select?

Hi Kevin,

You mean as far as the tag for the drop-down? No, I haven’t but I will give it a try. This is for the survey form mind you.

But as for the user stories, I only have 2 out of 17 correct. Why are all the other user stories coming up as incorrect? I would think that using id for each element would pass that portion of the test, if you noticed in the code I put together.

Sorry, I got so wrapped up in that that I forgot that you asked about the tests.

The tests are telling you what is wrong. For example, the second test tells you:

  1. I can see a title with id=“title” in H1 sized text. #title should be in H1 sized text : expected ‘DIV’ to equal ‘H1’ AssertionError: #title should be in H1 sized text : expected ‘DIV’ to equal ‘H1’ …

When I look at your code, I see:

<div id="title" >
  <h1>Survey form</h1>

You need the id “title” to be on that h1. That is what it is look for.

The next one says:

  1. I can see a short explanation with id=“description” in P sized text. There should be an element with id=“description” : expected null to not equal null AssertionError: There should be an element with id=“description” : …

I see a description:

  <p><em>A survey for the precentage of people living in New York City</em></p>

but I don’t see the id tag on there.

You need to work through these and read them very carefully. A very important skill for web dev is attention to minute details. I understand this is new to you - but this is what you need to learn to do.

So, with this knowledge, work through these and see how many of them you can solve. Read the original challenge description or better yet, write to the tests, which are telling you what they want.

If you get stuck on some, check back.

Okay…very good! Thank you for the advise. :grinning:

@kevinSmith
For the last challenge - the technical page document, using the 4th user story:

Add an id to the corresponding headers in the section tags, this is what I have managed so far:

But can’t still seem to get that user story correct. What am I doing wrong?

It’s telling you in the test results, exactly what the problem is. Click on the red button that says “Tests (5/16)” and look at the read out for that test:

  1. Each element with the class of “main-section” should also have an id that corresponds with the text of each contained within it. Any spaces should be replaced with underscores (e.g. The that contains the header “Javascript and Java” should have a corresponding id=“Javascript_and_Java”).
    Some “main-section” elements are missing the following ids (don’t forget to replace spaces with underscores!) : JAVASCRIPT_AND_JAVA__TEST1,LOCAL_AND_GLOBAL_SCOPE__TEST2,USE_OF_ARRAYS__THE_USE_OF_ARRAYS_IS_ESSENTIAL_FOR_MIXING_DIFFRENT_DATATYPES,USE_OF_VARIABLES__TEST4,USE_OF_LOOPS__TEST5 : expected 5 to equal 0
    AssertionError: Some “main-section” elements are missing the following ids (don’t forget to replace spaces with underscores!) : JAVASCRIPT_AND_JAVA__TEST1,LOCAL_AND_GLOBAL_SCOPE__TEST2,USE_OF_ARRAYS__THE_USE_OF_ARRAYS_IS_ESSENTIAL_FOR_MIXING_DIFFRENT_DATATYPES,USE_OF_VARIABLES__TEST4,USE_OF_LOOPS__TEST5 : expected 5 to equal 0
    …

Your first section:

<section class="main-section" id="javascript_and_java">
  <header>
      <h1>Javascript and Java</h1>
      <p>test1</p>
  </header>
  ...

It thinks the id should be JAVASCRIPT_AND_JAVA__TEST1.

You have two problems here.

  1. You have included a subtitle inside the header. I’m not sure if this is considered proper or not but would probably be fine except it is causing you to fail the test. If you want the subtitle, you have to include it in the id. Note the double underscore before the subtitle.

  2. It has to exactly match (ignoring capitalization). Computers are not really good at, “Pshhh, it’s close enough, I know what he meant.” For example, the id “local_global_scopes” is not what you have in the header.

OK @kevinSmith I will work on this. Thanks for your pointers…no pun intended :grinning:

Do you have a link with the testing package integrated? What is the testing error you are getting?

At the very least, a link to the source code would be helpful, like a repo.

ça ne fait rien. Seems that the first thread on this post was just the french translation. See @booklion July 21
:grin: :thinking:

Good point. It appears to be just a stealth way to add a spam link. I’m going to delete that message.

@kevinSmith Good morning. It’s 5:41am in the morning in USA and I was just about ready to submit my last challenge when I noticed that I lost some of the user stories. I had 14/16 correct originally. When I began to add the nav-link to each main-section, that’s when I ended up with 12/16 correct :tired_face: When I look at the “Run Test” page, it provides some of the issues as to why it failed. But I am not able to understand it.

Here’s my revised codepen:

Thanks for any suggestions Kevin. You have been an incredible asset.

Again, It’s telling you exactly what is wrong.

  1. Each <section> element with the class of “main-section” should also have an id that corresponds with the text of each <header> contained within it. Any spaces should be replaced with underscores (e.g. The <section> that contains the header “Javascript and Java” should have a corresponding id=“Javascript_and_Java”).

Some “main-section” elements are missing the following ids (don’t forget to replace spaces with underscores!) : JAVASCRIPT_AND_USAGE_OPERATORS_EVENTS_FUNCTIONS_DATA_TYPES_METHODS_AND_OBJECTS__OPERATORS_SERVE_AS_A_WAY_FOR_JS_TO_DO_ARITHMATIC_OPERATIONS._JAVASCRIPT_INTERACTION_THROUGH_HTML_WHEN_A_USER_OR_BROWSER_MANIPULATES_A_PAGE._FUNCTIONS_ARE_THE_SOUL_OF_WHAT_MAKES_JS_WORK._IT_IS_A_WAY_FOR_CODE_TO_BE_COMPRESSED_AND_USED_AGAIN._THE_MAIN_WORKINGS_OF_JS_IS_THE_USE_OF_DATA_TYPE,_SUCH_AS_STRINGS,_NUMBERS,_OBJECT_DEFINITION._METHODS_ARE_FUNCTION_DEFINITIONS_AND_OBJECTS_ARE_WHAT_HELP_GENERATE_METHODS.____JAVASCRIPT_IS_ONE_OF_THE_MOST_POPULAR_PROGRAMMING_LANGUAGES_IN_CODING_TODAY

That is what it is expecting the ID of your section to be:

JAVASCRIPT_AND_USAGE_OPERATORS_EVENTS_FUNCTIONS_DATA_TYPES_METHODS_AND_OBJECTS__OPERATORS_SERVE_AS_A_WAY_FOR_JS_TO_DO_ARITHMATIC_OPERATIONS._JAVASCRIPT_INTERACTION_THROUGH_HTML_WHEN_A_USER_OR_BROWSER_MANIPULATES_A_PAGE._FUNCTIONS_ARE_THE_SOUL_OF_WHAT_MAKES_JS_WORK._IT_IS_A_WAY_FOR_CODE_TO_BE_COMPRESSED_AND_USED_AGAIN._THE_MAIN_WORKINGS_OF_JS_IS_THE_USE_OF_DATA_TYPE,_SUCH_AS_STRINGS,_NUMBERS,_OBJECT_DEFINITION._METHODS_ARE_FUNCTION_DEFINITIONS_AND_OBJECTS_ARE_WHAT_HELP_GENERATE_METHODS.____JAVASCRIPT_IS_ONE_OF_THE_MOST_POPULAR_PROGRAMMING_LANGUAGES_IN_CODING_TODAY

That entire thing. That’s because it is looking inside your header to get the id. This is the code:

<section class="main-section" id="Javascript_and_Usage">
  <header>
    <h1>Javascript and Usage</h1>
    <ul>
      <li>Operators</li>
      <li>Events</li>
      <li>Functions</li>
      <li>Data types</li>
      <li>Methods and Objects</li>
    </ul><br>
    <code>Operators serve as a way for JS to do arithmatic operations.</code></br>
     <code>Javascript interaction through HTML when a user or browser manipulates a page.</code><br>
     <code>Functions are the soul of what makes JS work. It is a way for code to be compressed and used again.</code><br>
     <code>The main workings of JS is the use of data type, such as strings, numbers, object definition.</code><br>
     <code>Methods are function definitions and objects are what help generate methods.</code><br>
    <br>
    <p>Javascript is one of the most popular programming languages in coding today</p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </header>
  </section>

You see all that stuff between the <header> and the </header>? That is where it is getting what it thinks the id is. A header should just be the title of the section, not the whole section. The id should perfectly match what is in your header, with underscores instead of spaces. In the real world, it wouldn’t matter that much, but here it’s how you pass the test.

1 Like

Perfect got that part working again. I now understand what you mean. It would be a heck of a long id for that element. LOL