JavaScript JavaScript Basics Working With Numbers The Mad Libs Challenge Revisited

Anyone else totally confused by this? It's like he jumped a few steps ahead and has forgotten we are beginners.

A good teacher is able to separate what he knows from what his student should know at any given time. He's kind of failed here. I'm hoping the rest of this course isn't the same. I've found the rest of the Treehouse teachers fantastic so far, but this guy is so vague. I've been stuck on this for ages and making no progress.

Andreas Nyström
Andreas Nyström
8,857 Points

Hi. Sometimes it might be frustrating not to get the thing the teachers are talking about. But try to keep at it anyway. If there is a problem with any code or you need something more explained, please write the code here so we can provide an explanation.

Take a 5-min breather and go at it again.

9 Answers

Jeff Sanders
PRO
Jeff Sanders
Pro Student 7,101 Points

I didn't feel like there were any gaps here. I see that the confusion was created by the presence of a bracket in the string. The bracket has not function at all. JavaScript only recognizes the bracket ']' as part of the string, hence the quotes. Every skill used in the lesson was explained in previous videos: defining a string, concatenating strings, etc.

Andreas Nyström
Andreas Nyström
8,857 Points
var questionsLeft = ' [' + questions + ' questions left]'; 

If this is what you're referring to I'll try to explain it.

It's about concatenate strings. It's the same thing as saying:

// Variable "a" and "c" holds a string while var "b" holds a number.
var a = '[ ';
var b = 3;
var c = ' questions left] '

However, when you in JavaScript sends a number into a variable with strings, it converts everything to a long string. That means...

// The variable "aBiggerString" now holds the sentence [3 questions left]. 
// The "[]" is just for "design" so that it looks like a box around the 3 questions left-message
//  and doesnt really do anything, as its just a string
var aBiggerString = a + b + c;

An easier example would probably be:

// What would c be here?
var a = 'hello ';
var b = 'world';
var c = a + b;

Hope this helps further, if not. Check out the documentation for concatenating strings. Here's a really easy example by W3Schools: https://www.w3schools.com/js/tryit.asp?filename=tryjs_oper_concatenate

Thanks. I've taken multiple 5 minute breathers, but after reading the rest of the comments on this particular video, it seems that there is a unanimous opinion that there are gaps in the teaching causing lots of students to be completely lost here and unable to move ahead. It's line 2 thats the problem. None of it has been explained and we've never used [] in our code so far and no explanation as to what their purpose is and why + questions + is in quotations.

var questions =3; var questionsLeft = ' [' + questions + ' questions left]'; var adjective = prompt('Please type an adjective' + questionsLeft); questions -= 1; questionsLeft = ' [' + questions + ' questions left]'; var verb = prompt('Please type a verb' + questionsLeft); questions -= 1; questionsLeft = ' [' + questions + ' questions left]'; var noun = prompt('Please type a noun' + questionsLeft); alert('All done. Ready for the message?'); var sentence = "<h2>There once was a " + adjective; sentence += ' programmer who wanted to use JavaScript to ' + verb; sentence += ' the ' + noun + '.</h2>'; document.write(sentence);

Bro, the brackets placed here a merely esthetics or just for design. It dont do anything.

I know, right? He throws that ['.......'] on line two just to demonstrate how the sentence it would look and made it everything confusing! Took me 10 minutes to figure out what he did!

Kimberly Dolcin
Kimberly Dolcin
4,369 Points

i got confused with that as well!

Andreas Nyström
Andreas Nyström
8,857 Points
// This is a variable declaration with the number 3 to tell you that there is 
// 3 questions in total
var questions =3; 

// this is a variable declaration with a string. 
// The "[]"-brackets are just for design as the string actually says here:
// "[3 questions left]"
var questionsLeft = ' [' + questions + ' questions left]'; 

// This is a prompt for the user where you're asking them to type an adjective
// which you store in the variable adjective
var adjective = prompt('Please type an adjective' + questionsLeft); 

// This is removing one from the question variable.
// So now the total amount of questions is 2.
questions -= 1; 

// This is the same as above. 
// He uses the declared variable questionsLeft to change it to say that there is 
// 2 questions left.
// This is just a string saying: 
// "[2 questions left]". As he removed 1 from the questions variable.
questionsLeft = ' [' + questions + ' questions left]'; 

// Now you want the user to type a verb instead of an adjective
//  which you store in the variable "verb"
var verb = prompt('Please type a verb' + questionsLeft); 

// Here he removes 1 again from the variable questions. 
// So now the total amount of questions is 1.
questions -= 1; 

// Again this is just a string saying  "[1 questions left]". 
// As he removed 1 from the questions variable.
questionsLeft = ' [' + questions + ' questions left]'; 

// Now you want the user to type in a noun which he stores in the variable "noun"
var noun = prompt('Please type a noun' + questionsLeft); 

// Now you alert the user that the game is finished and you will show him a message.
alert('All done. Ready for the message?'); 

// Here you declare a variable with an html H2-tag saying 
// "There one was a" + adjective. 
// if you wrote "red" when you wrote in the adjective the sentence would be 
// "There one was a red"
var sentence = "<h2>There once was a " + adjective; 

// Here you continue the sentece with saying sentence += 
// (which is the same as writing sentence = sentence +).

// So if you wrote "red" into the adjective, 
// "learn" into the verb and 
// "ball" into the noun this sentence would be:
// There once was a red programmer who wanted to use JavaScript to learn the ball
// All wrapped in a h2-tag. Even tho this sentence doesnt make much sense.
sentence += ' programmer who wanted to use JavaScript to ' + verb; 
sentence += ' the ' + noun + '.</h2>'; 

// Here you just write the whole sentence to the document, display it on your page.
document.write(sentence);
Kimberly Dolcin
Kimberly Dolcin
4,369 Points

hey, why dont you put a closing h2 tag in "var sentence = "<h2>There once was a "</h2? + adjective; ?

JAY MICHALEK
JAY MICHALEK
3,404 Points

Kimberly, I believe he placed the closing h2 tag at the end of the code block after + noun + '</h2> instead of after '<h2>There was once a' so that the entire sentence will show up/written as h2 in the browser.

Thanks for taking the time doing that. I still don't get why it say '+ questions +', instead of just ' questions +' but thanks for trying. Maybe you should be teaching this course instead, you are much clearer haha

Antti Lylander
Antti Lylander
9,660 Points

James,

Take a look at this line.

var questionsLeft = ' [' + questions + ' questions left]'; 

"+ questions +" is not in quotes. See how the code is colored? There is a string + variable + string. The strings are enclosed in quotes, not the variable in between. The square brackets are just part of the string and do not have any kind of functional purpose. Don't get frustrated. It is sometimes easy to get stuck on very small things.

Brett Bodofsky
Brett Bodofsky
2,102 Points

"There is a string + variable + string. The strings are enclosed in quotes, not the variable in between." this is the quote that finally made it click for me.

JAY MICHALEK
JAY MICHALEK
3,404 Points

I agree. He seems to be fast forwarding or jumping in too fast on the next topic. It gets confusing. Thanks for anyone who helped explain the code.

Bingo. Thats the best explanation ever. Thanks. I got it!........and you should seriously be teaching this course hahahahahah Thanks again for taking so much time to explain. I really appreciate it.

Andreas Nyström
Andreas Nyström
8,857 Points

Anytime buddy! Happy coding :).

Jiten Mehta
Jiten Mehta
Front End Web Development Techdegree Student 7,929 Points

I agree. The teacher, who so far in this course has been brilliant, seemed to skip through this part really fast.

It was only after reading the comments that I finally understood the syntax. Antti comment made understand the string + variable + string part. I also agree that the code should be commented out so it is more clear. I did the following:

var questions = 3;

// 3 questions left
var questionLeft = '['  + questions + ' questions left]';
var adjective = prompt('Please type an adjective ' + questionLeft);


// 2 questions left
questions -= 1;
questionLeft = ' [' + questions + ' questions left]';
var verb = prompt('Please type a verb' + questionLeft);

// 1 question question

questions -=1;
questionLeft = ' [' + questions + ' question left';
var noun = prompt('Please type a noun' + questionLeft);
Omar Bahaa
PRO
Omar Bahaa
Pro Student 1,801 Points

I know how confusing this is, it took me an hour then i took a break for 5 minutes and start pausing the video for each step. Strangely, i understood, however it seems that there is another way that eliminate the duplication code which we did not reach yet. This can actually help us understand more...

I tried to run this program before watching the video, and i was depending on converting strings to integers using the parseInt() function. However, it seems he didn't use one as he is just using 1 digit instead of more. It would have been nice if he applied them.

Here is my code:

var questions = parseInt('3');

//[3 questions left]


var adjective = prompt('Please type an adjective ' + '[' + questions + ' questions left]');

questions -= 1;

var verb = prompt('Please type a verb ' + '[' + questions + ' questions left]');

questions -= 1;

var noun = prompt('Please type a noun ' + '[' + questions + ' questions left]');


alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);