Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniel Rollins
Daniel Rollins
3,011 Points

HTML quiz title not showing till end of quiz

Hi guys,

Firstly, I am hugely enjoying these courses - tried to get into coding etc before but never had until now!

I have a small issue on the Javascript Basics course with the quiz on the The Conditional Challenge.

My quiz works fine, absolutely fine - different coding structure to the suggested solution but it works perfectly so I am pleased!

However...I coded my quiz in notepad++ (I downloaded the empty workspace file with the pre-poulated index.html for the quiz). When I run my index.html for the quiz (in chrome) the html title "The Ultimate Quiz Challenge" does not display - my questions all come up but the title is not showing in the background page behind it.

When the quiz ends the title is displayed as are my quiz outputs showing the score and what crown the user has won.

Can anyone tell me why the webpage with the quiz title isn't showing until the end of the quiz? I would expect it to be there throughout.

Thanks

Daniel

2 Answers

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

I'm just guessing here but it's possible that your javascript is being run before the html is fully loaded. Are you placing your javascript at the end of your html or placing the script tags at the bottom of the html body? If not, then you need to use something like this

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    ***ENTER JAVASCRIPT CODE HERE***;
  });
</script>

This code waits for the DOM content (your html and css stuff) to be loaded first before your javascript does.

Daniel Rollins
Daniel Rollins
3,011 Points

Hi Valeshan, I don't think that is the issue (I am a newbie though so what do I know!)

The HTML was already built (part of the exercise):

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>The Ultimate Quiz Challenge</title> </head> <body> <div class="container"> <h1>The Ultimate Quiz Challenge</h1> <script src="quiz.js"></script> </div> </body> </html>

So the quiz.js should load after but I am not seeing this title until the end of the quiz. I am wondering if it is being impacted by the document.write commands that I added to my quiz,js:

var score = (0) document.write ('<h2>Welcome to Daniels Exciting Movie Quiz!</h2>' ); var firstQuestion = prompt('What is the greatest space film of all time?'); //'STAR WARS' var secondQuestion = prompt('In what TV series would you find the character Tyrion Lannister?');//'GAME OF THRONES' var thirdQuestion = prompt('What famous gangster film features the Corleone family?');//'THE GODFATHER' var fourthQuestion = prompt('What film made you believe a man could fly?');//'SUPERMAN' var fifthQuestion = prompt('In what TV series does a dying chemistry teacher become an illegal drug manufacturer?');//'BREAKING BAD'

etc etc...

Thanks

Daniel

Neil McPartlin
Neil McPartlin
14,662 Points

Hi Daniel,

Can anyone tell me why the webpage with the quiz title isn't showing until the end of the quiz? I would expect it to be there throughout.

I'm a fellow newbie and I noticed this too but I didn't think too much about it until I saw your post. It's the same for me both when using workspaces and when working locally.

In fact, in this earlier video by Guil...

https://teamtreehouse.com/library/javascript-basics/making-decisions-with-conditional-statements/introducing-conditional-statements

...at 3:54 you can see the header is already being displayed as the 'prompt' appears.

I thought Valeshan's answer made a lot of sense but I have not been able to get it to work. The JavaScript appears to still run before the DOM has been loaded. You pondered whether 'document.write' could be the trouble but I commented those lines out and still the problem occurs. However, I suspect the problem is with our use of 'prompt' in the quiz.js file and here is why.

https://stackoverflow.com/questions/44998768/why-doesnt-load-or-domcontentloaded-stop-a-prompt-from-firing-before-a-page

In the above link, a user wonders why is his 'prompt' firing even though he is trying to use DOMContentLoaded. In reply, Scott Marcus says...

This is typical behavior when the browser creates a UI element that is not part of the document itself. The browser is a multi-threaded piece of software and a call for a prompt() or an alert() is handled in a different thread than the JavaScript code is running in.

To back this up, if you look here... https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded ..there is a 'Note' that says...

Synchronous JavaScript pauses parsing of the DOM.

So why did this work for Guil some 2 years ago and not for us? Well one suggestion would be that recent browser updates prevent some 'action' that was tolerated back then.

Daniel Rollins
Daniel Rollins
3,011 Points
Daniel Rollins
Daniel Rollins
3,011 Points

Neil, thank you so much for the information! Makes a lot of sense! I shall take on board the information and see if I can fix the issue! (When/if I get chance!)

Much appreciated!

All the best

Daniel