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 JavaScript Basics (Retired) Making Decisions with Conditional Statements The Conditional Challenge

Erik Robles
PLUS
Erik Robles
Courses Plus Student 10,635 Points

Image not appearing in Conditional Quiz challenge

My code is just about perfect (for a nooby) but out of my three rewards that should appear depending on the players score, the second image just does not appear. Any Help would be greatly appreciated. Thank you.

<!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>
          <h2>Your score is:</h2>
          <p id="p1"></p>
          <div id="crownGold"></div>
          <div id="crownSiver"></div>
          <div id="crownBronze"></div>
          <script src="quiz.js"></script>  
  </div>
</body>
</html>
/* 
This is a quiz to test the ability of
the program to keep score and award
a badge to the player at the end
*/


//This block of variables establishes the initial conditions of the answers
var correctAnswerOne = false;
var correctAnswerTwo = false;
var correctAnswerThree = false;
var correctAnswerFour = false;
var correctAnswerFive = false;


// This is the score counter which will keep track of the points throughout the game.
var score = 0;

// This is the start of the Questions

//This is the first block of code
var answerOne = prompt("What is the capital for the state of Washington?");
if (answerOne.toUpperCase() === 'OLYMPIA') {
  alert("Great! You guessed right!");
  correctAnswerOne = true;
  document.getElementById("p1").innerHTML = score += 1;
  } else {
  alert("OOOO! I am soooo sorry but that is not right. The right answer is Olympia");
  }

// This is the second block of code 
var answerTwo = prompt("What is the past tense of drink");
if (answerTwo.toUpperCase() === 'DRANK') {
  alert("Great! You guessed right!");
  correctAnswerTwo = true;
  document.getElementById("p1").innerHTML = score += 1;
  } else {
  alert("OOOO! I am soooo sorry but that is not right. The right answer is drank");
  }

// This is the third code block
var answerThree = prompt("Fuzzy Wuzzy was a bear, Fuzzy Wuzzy had no hair, Fuzzy Wuzzy wasn't fuzzy was he? Answer: Yes or No");
if (answerThree.toUpperCase() === 'NO') {
  alert("Great! You guessed right!");
  correctAnswerThree = true;
  document.getElementById("p1").innerHTML = score += 1;
  } else {
  alert("OOOO! I am soooo sorry but that is not right. The right answer is No");
  }

//This is the fourth code block
var answerFour = prompt("What is the largest planet in our solar system?");
if (answerFour.toUpperCase() === 'JUPITER') {
  alert("Great! You guessed right!");
  correctAnswerFour = true;
  document.getElementById("p1").innerHTML = score += 1;
  } else {
  alert("OOOO! I am soooo sorry but that is not right. The right answer is Jupiter");
  }

//This is the fifth code block
var answerFive = prompt("What is the actor who played the role of Darth Vader's name?");
if (answerFive.toUpperCase() === 'DAVID PROWSE') {
  alert("Great! You guessed right!");
  correctAnswerFive = true;
  document.getElementById("p1").innerHTML = score += 1;
} else {
  alert("OOOO! I am soooo sorry but that is not right. The right answer is David Prowse");
  }

  // This First reward code block tests to see what kind of award the player receives
    if (score === 5) {
      var elem = document.createElement("img");
      document.write("<h1>WOW!!! You have won the Gold Crown Badge!</h1>");
      elem.setAttribute("src", "gold.jpg");
      elem.setAttribute("height", "250");
      elem.setAttribute("width", "250");
      elem.setAttribute("repeat", "no-repeat");
      document.getElementById("crownGold").appendChild(elem);
      elem.src = img;
    } 

  //this is the second reward code block
     else if (score === 4) {
      var elem2 = document.createElement("img");
      document.write("<h1>Great!!! You have won the Silver Crown Badge!</h1>");
      elem2.setAttribute("src", "silvercrown.png");
      elem2.setAttribute("height", "250");
      elem2.setAttribute("width", "250");
      elem2.setAttribute("repeat", "no-repeat");
 document.getElementById("crownSilver").appendChild(elem2);
      elem2.src = img;
     }
// This is the third reward code block

  else if (score === 3) {
      var elem3 = document.createElement("img");
      document.write("<h1>Good. You have won the Silver Bronze Badge!</h1>");
      elem3.setAttribute("src", "bronze.jpg");     
      elem3.setAttribute("height", "250");
      elem3.setAttribute("width", "250");
      elem3.setAttribute("repeat", "no-repeat");
      document.getElementById("crownBronze").appendChild(elem3);
      elem3.src = img;
    } 

    // This is the final Reward code block
    else {
      document.write("<h1>Sorry, you didn't receive any points</h1>"); 
    }

This is an example link

https://w.trhou.se/nijwuckwju

2 Answers

Steven Parker
Steven Parker
231,236 Points

The issue is actually visible in the code posted above, but the snapshot made it much easier to find.

The script attempts to add an image element to an existing element with the ID "crownSilver", but there isn't one like that on the page. There is, however, a div element with the ID of "crownSiver" (no letter "l"). I'd guess that's just a typo.

Erik Robles
Erik Robles
Courses Plus Student 10,635 Points

It was such an easy solution. I suppose I needed my glasses. Two eyes are better than one. Thanks a million.

Steven Parker
Steven Parker
231,236 Points

I can confirm that the image element is added to the page, but to make it possible to test the display of the actual image, you'd need to make a snapshot of your workspace and post the link to it here.

But I noticed two other issues — I don't think image elements have a "repeat" property, and question 2 checks for the answer "DRANK" but if you give something else, the message says "The right answer is drunk".

Erik Robles
Erik Robles
Courses Plus Student 10,635 Points

Thank you for the help Steven. I have added the snapshot. Sorry for being such a nooby. I have updated the post to inlcude the snapshot. Thanks again.