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 trialErik Robles
Courses Plus Student 10,635 PointsImage 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
2 Answers
Steven Parker
231,236 PointsThe 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.
Steven Parker
231,236 PointsI 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
Courses Plus Student 10,635 PointsThank 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.
Erik Robles
Courses Plus Student 10,635 PointsErik Robles
Courses Plus Student 10,635 PointsIt was such an easy solution. I suppose I needed my glasses. Two eyes are better than one. Thanks a million.