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

Tim Do
Tim Do
5,903 Points
Posted by Tim Do
Tim Do
5,903 Points

Just a general question. On what line in the quiz solution does the program knows how to execute/run?

// 3. Select the <main> HTML element - JS Quiz

const main = document.querySelector('main')

3 Answers

Jason Larson
Jason Larson
8,361 Points

OK. I'm with you now. Your original question was "On what line in the quiz solution does the program knows how to execute/run?" I assume by program you mean your javaScript page. I think I see now why you were asking. The javaScript gets loaded when it is referenced in the index.html file on line 10: <script src="js/quiz.js"></script>.

For anybody else reading this that might be curious why this is important: If the javaScript is referenced in the head of the HTML, you will get errors because it won't be able to access the <main> element because the <main> element will not have been loaded. You have to be sure that you either set the 'defer' property on the script element, or load the script element after the <main> element, as they are processed in order.

While looking at your code, I noticed a couple of other things that you should correct. For number 5, you have: if ( correct === 3) { rank = 'Gold'; } else if ( correct => 1) { rank = 'Silver'; } else { rank = 'Bronze'; }. The syntax of your else if should be else if (correct >= 1) {rank='Silver';}. You may have noticed that you never get a rank of Bronze, even if you don't get any answers correct.

Note here also that even with that fixed, if the user gets all 5 questions correct, they are going to get silver instead of gold. You probably wanted:

if (correct >=3) {rank='Gold';}
else if (correct >= 1){rank = 'Silver';}
else {rank = 'Bronze'}

Lastly, you need to be setting main.innerHTML to a string, and since you are using variables in there, you want to surround it with backticks:

main.innerHTML = `<h2> You got ${correct} out of 3 question correct</h2>
<p>Crown earned: <strong>${rank}</strong></p>`;
Jason Larson
Jason Larson
8,361 Points
Jason Larson
Jason Larson
8,361 Points

I'm not 100% clear on your question. You seem to be referring to fill in the blank type questions on quizzes, so I'll answer that first. Quizzes don't run the code in the answers. They are merely checking to see if the information you fill in the blanks matches what is expected.

If you are actually referring to the challenges, that is a little different. The system runs the code like it would be run in a browser, and uses test cases to validate whether or not the code matches the expected results for the test. Sometimes it is looking just at the output, but often it is looking for a specific way of doing something, based on the videos it is challenging you on. As an illustration, for your example, there are multiple ways of doing what you have in your question "Select the <main> HTML element", depending on how the element is defined in the HTML (whether or not it has an ID or Class or other attributes set).

Hopefully that answers your question, but if not, reply back and I'll try to clarify.

Tim Do
Tim Do
5,903 Points
Tim Do
Tim Do
5,903 Points

Thank you for answering. I was referring to the tracks/javascriptfulldevelopment/javascript basics/the conditional challenge/quiz workspace

Tim Do
Tim Do
5,903 Points
Tim Do
Tim Do
5,903 Points

/*

  1. Store correct answers
    • When quiz begins, no answers are correct */

let correct = 0;

// 2. Store the rank of a player

let rank;

// 3. Select the <main> HTML element

const main = document.querySelector('main') /*

  1. Ask at least 5 questions
    • Store each answer in a variable
    • Keep track of the number of correct answers */

const answer1 = prompt('What gem is a program?'); if ( answer1.toUpperCase() === 'RUBY') { correct += 1; }

const answer2 = prompt('What snake is a program?'); if ( answer2.toUpperCase() === 'PYTHON') { correct += 1; }

const answer3 = prompt('What program is name after coffee?'); if ( answer3.toUpperCase() === 'JAVA') { correct += 1; }

const answer4 = prompt('What snake is a program?'); if ( answer4.toUpperCase() === 'PYTHON') { correct += 1; }

const answer5 = prompt('What program is name after coffee?'); if ( answer5.toUpperCase() === 'JAVA') { correct += 1; }

/*

  1. Rank player based on number of correct answers
    • 5 correct = Gold
    • 3-4 correct = Silver
    • 1-2 correct = Bronze
    • 0 correct = No crown */

if ( correct === 3) { rank = 'Gold'; } else if ( correct => 1) { rank = 'Silver'; } else { rank = 'Bronze'; }

// 6. Output results to the <main> element

main.innerHTML = <h2> You got ${correct} out of 3 question correct</h2> <p>Crown earned: <strong>${rank}</strong></p> ;