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 Roudy Antenor
Roudy Antenor
4,124 Points

Creating a trivia game but i am stuck? (beginner)

Hello all I am trying to create a trivia game - where upon the opening of the page the user is greeted by 3 statement in succession - but this code only prints out the last line and fades out -

I want to ask the three question and then go into asking my main questions and wait for a response before the next one is asked...Any help will be greatly appreciated. part of the HTML :

<div class="blackBoard">  </div>

The app.js file: 

function begin () {
    $('.blackBoard').html("<span>Ready for a pop quiz?</span>").delay(2000).fadeOut();
    $('.blackBoard').html("<span>Win cool points!</span>").delay(1000).fadeOut();
    $('.blackBoard').html("<span>Let's begin!</span>").delay(2000).fadeOut();
}
begin();

1 Answer

Moses Finlay
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Moses Finlay
Full Stack JavaScript Techdegree Graduate 24,800 Points
Moses Finlay
.a{fill-rule:evenodd;}techdegree seal-36
Moses Finlay
Full Stack JavaScript Techdegree Graduate 24,800 Points

Here's what's happening. You are setting all of the html code inside of the blackBoard <div></div> to be 

<span>Ready for a pop quiz?</span>

then 

<span>Win cool points!</span>

finally

<span>Let's begin!</span>

Because jQuery's html() attribute will override all of the content inside of the blackBoard div and then set the content you pass it.

This code should work.

HTML

<div class="blackBoard">  
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

JavaScript

function begin () {
    $('.one').html("<span>Ready for a pop quiz?</span>").delay(2000).fadeOut();
    $('.two').html("<span>Win cool points!</span>").delay(1000).fadeOut();
    $('.three').html("<span>Let's begin!</span>").delay(2000).fadeOut();
}
begin();