Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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!