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 Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2 Solution

Posted by Jules Al
Jules Al
1,096 Points

Quiz code isn't working, unsure why

This is my code so far. After the user enters the responses, no lists of the array values are printed to HTML. Not sure what the issue is. Assistance is greatly appreciated!

var quiz = [
['What is 2 + 2?', 4],
['What is 3 + 3?', 6],
['What is 4 + 4?', 8]
];

var correctQuestions = [];
var wrongQuestions = [];
var correctAnswers = 0;
var question;
var answer;
var response;

function print(message) {
  var outputDiv = document.getElementById('output');
}
function buildList(arr){
 var listHTML = '<ol>';
 for(var i = 0; i < arr.length; i++) {
 listHTML += '<li>' + arr[i] + '</li>'; 
 }
  listHTML += '</ol>';
  return listHTML;
}
for(var i = 0; i < quiz.length; i++){
 question = quiz[i][0];
 answer = quiz[i][1];
 response = prompt(question);
 response = parseInt(response);
 if(response === answer){
  correctQuestions.push(question);
 }else{
  wrongQuestions.push(question);
 }
}
html = 'You got ' + correctAnswers + 'question(s) right.';
html += '<h2>You got these questions correct:</h2>';
html += buildList(correctQuestions);
html += '<h2>You got these questions wrong:</h2>';
html += buildList(wrongQuestions);
print(html);

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Julian,

I've figured it out! :)

http://codepen.io/webdesignerjon/pen/KdrMaK

It's not enough to just select the element that outputs the string. You have to provide the code to specify what to do with the message parameter. So if you print function should look like this

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML=message;
}

You're adding the text so that it renders as HTML in the browser. :-)

Jules Al
Jules Al
1,096 Points

Ah yes, that was it! Thanks, Jonathan. Fixed a couple other bugs I found along the way and now it's working perfectly. Thanks for your help.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I believe you're missing a few semi colons in your condition statement and one concatenation and in your print function.

if(response === answer){
  correctQuestions.push(question);
 }else{
  wrongQuestions.push(question);
 }

html = 'You got ' + correctAnswers + 'question(s) right.';
html += '<h2>You got these questions correct:</h2>';

function print(message) {
  var outputDiv = document.getElementById('output');
}

Try adding these in and see if this helps!

Jules Al
Jules Al
1,096 Points

Thanks for that! I made those revisions but it's still not loading properly.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

When you say not loading properly, is anything loading to the browser at all?

I've checked the code and it looks legit to me :)

Is it displaying to the correct element at all. It should be viewed okay in a div element that has the id of "output" :-)

Jules Al
Jules Al
1,096 Points

After I enter the responses into the prompt boxes, the only thing that pops up on the web page is the 'Javascript Quiz' title. None of the ordered lists are printing. My html appears correct, but not sure. Take a look:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Quiz</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>JavaScript Quiz</h1>
<div id="output">
</div>
<script src="js/quiz.js"></script>
</body>
</html>