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 Arrays Multidimensional Arrays Improve the Quiz – One Solution

Can't display results to the user

Hi, After cycling through all the questions, nothing appears on the screen (step 4 in the challenge). How do I display the number of correct and incorrect answers to the user once the quiz is completed? Here is my code:


// 1. Create a multidimensional array to hold quiz questions and answers const questions = [ ["What is the capital of Azerbaijan?", "Baku"], ["What is the tallest mountain in the world?", "Mount Everest"], ["Which country has the largest population in the world?", "China"], ["What is the name of the longest river in Africa?", "The Nile"], ["What is the name of the largest country in the world?", "Russia"], ];

// 2. Store the number of questions answered correctly const correct = []; const incorrect = []; let correctAnswers = 0;

/* 3. Use a loop to cycle through each question - Present each question to the user - Compare the user's response to answer in the array - If the response matches the answer, the number of correctly answered questions increments by 1 */

for (let i=0; i <= questions.length; i++) { let question = questions[i][0]; let answer = questions[i][1]; let response = prompt(question);

if (response === answer) {
    correctAnswers ++;
    correct.push(question);
}   else{
    incorrect.push(question);
}

} function createListItems(arr) { let items = ''; for (let i = 0; i < arr.length; i++) { items += <li>${arr[i]}</li>; } return items; }

// 4. Display the number of correct answers to the user let html = ` <h1>You got ${correctAnswers} question(s) correct</h1>; <h2>You got these questions right: </h2> <ol>${createListItems(correct)}</ol>

<h2>You got these questions wrong: </h2>
<ol>${createListItems(incorrect)}</ol>

`;

document.querySelector('main').innerHTML = html;

Thanks! Carmen

2 Answers

In the line for (let i=0; i <= questions.length; i++) {, the first value of i within the for loop body will be 0 and the last value of i within the for loop body will be questions.length, which is 5, for a total of 6 values for i within the for loop. Since you only have questions.length questions and indexing starts at 0, try using < instead of <=.

Thanks again jB30! That did the trick!

Hey Carmen, You forgot to wrap your item with template literal back-ticks like below.

items += `<li>${arr[i]}</li>`; 

Replace this code with what you have before your return item; statement. and it should work.

Thanks for your suggestion Marcos! I"m still getting used to using those backticks! They are so easy to miss!