Technical Documentation Page - Can't Seem to Pass User Story #4

Amber-Pittman · June 22, 2018, 6:48pm

I’ve been working on the Tech Doc Pg for about 6 hours today. Worked on it for several hours yesterday.

However, for whatever reason, I’m not seeing where I’m making my mistake. I’d really appreciate it if a few people could put fresh eyes on it.

I can’t seem to get past User Story 4. Literally, every other test I worked out. But no, not number 4.

For quick reference, here’s what I’m supposed to be doing:
“User Story #4: 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”).”

I’ve looked at multiple other Tech Doc Pg’s on here to maybe get an idea of where I’m mucking things up to no avail. I also checked out w3schools to kind of figure it out by piecing it together.

Again, insight into what I’m overlooking or just didn’t include would be greatly appreciated.

Technical Documentation Page

hbar1st · June 22, 2018, 7:23pm

The issue is exactly as described. You need to add ‘id’ attributes to the section elements within each “main-section”.
For eg. the id is missing here:

 <a id="Hello_World"></a>
      <section id="Hello_World" class="main-section">
        <header>Hello World</header>

And here is the full error:
4. 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”).

Notice also that they don’t expect a ‘Hello World’ section, but are expecting specific sections (in the assertion error it mentions them).

So in your code you would change (as one example) this :

 <a id="JavaScript_and_Java"></a>
      <section id="JavaScript_and_Java" class="main-section">
        <header>JavaScript & Java</header>

to this;

<header id="JavaScript_&_Java">JavaScript & Java</header>

hope this helps.

Amber-Pittman · June 24, 2018, 5:01pm

@hbar1st, thank you for responding!

So, I initially replaced my code with the code you suggested, thinking I was using too much code. Obviously, I’m very “green behind the ears” on all of this. Anyway, so when I did just your code, the test came back with failing User Story 4 again PLUS User Story 10.

User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.

So I went back to it, kept your header code, but added back in my “a id” and “section id and class” codes. It looks like this now:

<a id="Javascript_and_Java"></a>
      <section id="Javascript_and_Java" class="main-section">
<header id="Javascript_and_Java">JavaScript & Java</header>

The result? Passed User Story 10 again. However, still failing User Story #4 but also #13 about the “Hello World” section (even though it was passing before this moment). So I updated all the header sections to that of the header code you suggested.

I’m still not passing #13 but when I click Hello World in the Nav Bar, it takes me to the proper section. I do have a main-doc element with a section element and a header but for some reason, it’ not passing the test now. Main-doc only has to be at the beginning of the main text right? Like this?

</nav>

  <main id="main-doc">
    <a id="Introduction">
      <section id="Introduction" class="main-section">
        <header id="Introduction">Introduction</header>

So, reading the User Story #13 error information (see below)

When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element
(e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding < header>.

AssertionError: Every .nav-link should have an href value that links it to its corresponding .main-section (e.g. href=“#Introduction”). Check that these .main-section ids have corresponding href values : JavaScript_and_Java : expected 1 to equal 0

Since User Story 13 mentioned the Hello World section, here’s what I’ve got going for it:

Navigation Bar

<a class="nav-link" href="#Hello_World" rel="internal">
        <li>Hello World</li>
      </a>

Main Doc

<a id="Hello_World"></a>     
 <section id="Hello_World" class="main-section">
        <header id="Hello_World">Hello World</header>

Then, after reading the Assertion Error mentioning Introduction, I double checked and it does have “main-section” in the Main Doc HTML codes. I also looked at my Nav Bar codes.

Nav Bar:

<a class="nav-link" href="#Introduction" rel="internal">
        <li>Introduction</li>
      </a>

Main Doc:

<a id="Introduction">
      <section id="Introduction" class="main-section">
        <header id="Introduction">Introduction</header>

Needless to say, I’m not sure why User Story #13 is failing just because I changed the header information in an attempt to pass User Story #4. Which, is still failing.

Sidenote: I used blockquotes to keep Nav Bar and Main Doc codes together but separate for ease of reading. Hope that doesn’t add any confusion to this already long post.

UPDATED: Literally copied “Javascript_and_Java” from the nav-link href=“#Javascript_and_Java” to the Main Doc section of the JS and Java code and I passed #13 again. My bad for putting everyone through all that. That was a big Derp moment.

Still taking suggestions for passing User Story 4 though.

Amber-Pittman · June 24, 2018, 5:46pm

Omg, y’all. I didn’t pay super close attention to the error information. And because of that, I didn’t fully comprehend what @hbar1st had explained to me in the simplest of terms. This is clearly a learning moment for me. I hope this helps anyone else in the future struggling with the same issue.

Basically, the error information listed the way it should be written was right there the whole effin time.

For example, in Variable Scope, I had initially written “#Variable_scope” instead of capitalizing the “S” in Scope in both the Nav Bar and the Main Doc.

This now works for me:

Nav Bar

<a class="nav-link" href="#Variable_Scope" rel="internal">
        <li>Variable Scope</li>
      </a>

Main Doc

<a id="Variable_Scope"></a>
      <section id="Variable_Scope" class="main-section">
        <header id="Variable_Scope">Variable Scope</header>

The same is true for the other 2+ worded IDs.

hbar1st · June 25, 2018, 12:50am

We’re glad you figured this out! Way to go!