Freecodecamp: Define the Head and Body of an HTML Document | Can pass tests without a body tag

Created on 4 Apr 2019 · 12Comments · Source: freeCodeCamp/freeCodeCamp

Describe your problem and how to reproduce it:
The request for this problem is: Edit the markup so there's a head and a body. The head element should only include the title, and the body element should only include the h1 and p.
However, all the tests pass even without a body tag, including these two tests specifically checking for it:

There should be only one body element on the page.
The body element should wrap around both the h1 and p elements.

Code that will pass:

<!DOCTYPE html>
<html>
<head>
    <title>The best page ever</title>
</head>

<h1>The best page ever</h1>
<p>Lorem Ipsum</p>
</html>

Add a Link to the page with the problem:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document

Tell us about your browser and operating system:

Browser Name: Chrome
Browser Version: 73
Operating System: Windows 10

If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
page

learn

Source

AlyxMoon

All 12 comments

Seems to be same as #14683 (although it just mentioned you didn't have to close the tag), however it was closed without resolution.

A comment on that issue mentioned wanting to keep the curriculum more simple and stick to accepting valid code, but if it seems like there are tests running they ought to be correctly testing for behavior. Otherwise the stated expectations should change.

AlyxMoon on 4 Apr 2019

Okay, I'm not sure how one would go about fixing this at the moment. The issue seems to be not with the tests, but with how the challenge preview pane is generated. Everything seems to be put within the body tag of the iframe, while the structure tags (like html, body, head) are ignored. The picture is one I took with the code and the resulting html structure of the iframe.
page with devtools

AlyxMoon on 4 Apr 2019

@freeCodeCamp/moderators can someone please guide them with this?

@AlyxMoon we also have a Contributors Chat room, where you should be able to ask queries and get some feedback on approach here.

raisedadead on 4 Apr 2019

I had a quick look and am not entirely sure how to go about fixing it because the scope of the issue appears to be much larger than just the challenge itself, but thought I'd leave a comment for everyone following this issue.

I tend to agree with @AlyxMoon's assessment that it's not an issue with the tests, and that the tests appear to be running on the code parsed to the preview window.

Following the code (start from this file) seems to indicate that the HTML is parsed somewhere in the buildDOMChallenge function (or somewhere along the stack) and the invalid HTML corrected.

If I'm not mistaken, then this affects all challenges that contain tests for invalid HTML that would not be correct if the tests were performed on code in the input panel.

Edit: Ah, after a second look it seems that the iframe containing the tested code is parsed here.

honmanyau on 4 Apr 2019

I'm so sorry! I accidentally closed the issue with my trackpad while I was typing...

honmanyau on 4 Apr 2019

The key point here is that the user code is parsed by div.innerHTML = source. The browser will try to make sense of source and clean it up as much as possible. In this case, since head and body elements have to have html as their parent, they get stripped.

So, yes, it's not correct to write tests like this to check for invalid html or even otherwise fine html that is not valid inside a div. Essentially, I agree with what @AlyxMoon and @honmanyau were saying.

As for fixing it, the tests would need to be re-written to inspect the user entered code directly. The original source is available to the tests in the code variable. Typically we just use regular expressions to see if the code is as it should be, i.e. testString: assert(/someRegex/.test(code));. I think that's the only way to fix this challenge.

ojeytonwilliams on 4 Apr 2019

👍1

Well I'm not sure at all how tough fixing this will be (I think the best move would be @ojeytonwilliams thought and just changing the tests to check the user code rather than the generated code, to avoid having to rewrite the functionality of generating the preview).
But I'll take a stab at it during my free time this week. Oh and thanks for the link @raisedadead I'll check out the chat room if I need to talk further while working on this.

AlyxMoon on 7 Apr 2019

hello i would like to work on this using @ojeytonwilliams idea with regex , i will try to have an regex for a valid html file format . so can i grab this one ? and i would like also to chat with you guys if there is another way to approach this , thanks !