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

Keith Corona
Keith Corona
9,553 Points
Posted by Keith Corona
Keith Corona
9,553 Points

Code will not display

Even though I followed the resolution to this challenge and changed my code appropriately (to what I believe to be so), my code will not display. I am using Chrome and have been having display problems off and on throughout the day with these challenges and what not but even after clearing the cache, the code won't run properly. Any errors?

var questions = [
  ['How many states are in the United States?', 50],
  ['How many continents are there?', 7],
  ['How many legs does an insect have?', 6]
];
var correctAnswers = 0;
var question;
var answer;
var response;
var correct = [];
var incorrect = [];

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

function buildList(arr) {
  var listHTML = '<ol>';
  for (var i = 0; i < arr.length; i + 1) {
    listHTML += '<li>' + arr[i] + '</li>';
}
  var listHTML += '</ol>';
  return listHTML;
}

for (var i = 0; i < questions.length; i += 1) {
  question = questions[i][0];
  answer = questions[i][1];
  response = prompt(question);
  response = parseInt(response);
  if (response === answer) {
    correctAnswers += 1;
    correct.push(question);
  } else {
    incorrect.push(question);
}

html = "You got " + correctAnswers + " question(s) right.";
html += "<h2>You got these questions right:</h2>";
html += buildList(correct);
html += "<h2>You got these questions wrong:</h2>";
html += buildList(incorrect);
print(html);

1 Answer

Dom Talbot
Dom Talbot
7,686 Points
Dom Talbot
Dom Talbot
7,686 Points

Hey Keith,

The following code should give you the solution I think your after.

I've added comments to help explain what I changed.

Solution code

var questions = [
    ['How many states are in the United States?', 50],
    ['How many continents are there?', 7], 
    ['How many legs does an insect have?', 6]
]; 
var correctAnswers = 0;
var question; 
var answer; 
var response; 
var correct = []; 
var incorrect = [];

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

function buildList(arr) {
    var listHTML = '';
    // The third statement in your for loop should
    // either be i++ or i += 1
    for (var i = 0; i < arr.length; i += 1) { 
        listHTML += '' + arr[i] + '';

        // If you want each question to appear on a new line
        // you can uncomment the following line:
        // listHTML += '' + arr[i] + '<br/>';
    }
    // As listHTML has already been defined above
    // you should not add var again when referencing.
    // By adding var here it creates a brand new listHTML variable, 
    // consequently ignoring the update you made in your for loop.
    listHTML += '';
    return listHTML;
}

for (var i = 0; i < questions.length; i += 1) {
    question = questions[i][0];
    answer = questions[i][1];
    response = prompt(question); 
    response = parseInt(response);
    if (response === answer) {
        correctAnswers += 1;
        correct.push(question);
    } else {
        incorrect.push(question);
    }
// You were missing a closing bracket
}


var html = "You got " + correctAnswers + " question(s) right.";

// To replicate how you showed the titles in your question,
// I've added additional line breaks and formatting.
html += '<br/><br/>';
html += '<b>You got these questions right:</b>';
html += '<br/>';
html += buildList(correct);

html +='<br/><br/>';
html += '<b>You got these questions wrong:</b>';
html += '<br/>';
html += buildList(incorrect);

print(html);

Original code - reformatted

I've added your original code as a comparison.

var questions = [
    ['How many states are in the United States?', 50],
    ['How many continents are there?', 7],
    ['How many legs does an insect have?', 6]
];
var correctAnswers = 0;
var question;
var answer;
var response;
var correct = [];
var incorrect = [];

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

function buildList(arr) {
    var listHTML = '';
    for (var i = 0; i < arr.length; i + 1) {
        listHTML += '' + arr[i] + '';
    } 
    var listHTML += '';
    return listHTML;
}

for (var i = 0; i < questions.length; i += 1) {
    question = questions[i][0];
    answer = questions[i][1];
    response = prompt(question);
    response = parseInt(response);
    if (response === answer) {
        correctAnswers += 1;
        correct.push(question);
    } else {
        incorrect.push(question);
    }

html = "You got " + correctAnswers + " question(s) right.";
html += "";
html += buildList(correct);
html += "";
html += buildList(incorrect);
print(html);
rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

I've changed your comment to an answer so that it may be voted on or marked as best answer.

Keith Corona
Keith Corona
9,553 Points
Keith Corona
Keith Corona
9,553 Points

awesome explanation!