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

Posted by Anthony Sabberton
Anthony Sabberton
4,864 Points

adding more than one array item as the same list item

I am trying to put the question and the answer as the same list item. What is actually happening is the question and answer appear as separate list items eg.

Correct Answers

  1. what is the capital of England?
  2. London

what I'm trying to accomplish is

Correct Answers

  1. What is the capital of England? London

I cant seem to get it to work. Any help would be really appreciated :)

//Q&A Array
let questionAnswers = [
    ['what is the capital city of Australia', 'canberra'],
    ['What is the capital city of China', 'bejing'],
    ['What is the capital city of England?', 'london']
];

//correct/incorrect answer arrays
let correctAnswers = [];
let inCorrectAnswers = [];

//Counter Var.
let correctAnswerCounter = 0;
let inCorrectAnswerCounter = 0;

//Prompt the user with questions and log their answers to another Array.

for ( let i = 0; i < questionAnswers.length; i++) {
    let userAnswer = prompt(questionAnswers[i][0]);
    if (userAnswer.toLowerCase() === questionAnswers[i][1]) {
        correctAnswerCounter++;
        correctAnswers.push(questionAnswers[i][0], userAnswer)    
    } else {
        inCorrectAnswerCounter++;
        inCorrectAnswers.push(questionAnswers[i][0], userAnswer)
    }
}



//Function to build a list of correct and incorrect answers stored in the answers array.
function buildList(arr) {
    let list = '';
    for ( let i = 0; i < arr.length; i++) {
        list += `<li>${arr[i]}</li>`;
    } 
    return list;
}


// The function will loop and itterate through both correct and incorrect answer arrays.
let correctHTML = buildList(correctAnswers);
let inCorrectHTML = buildList(inCorrectAnswers);


//Display final answers on the webpage.

let HTML = `
    <h1>Correct Answers</h1>
    <p>You got ${correctAnswerCounter} correct.
    <ol>
        ${correctHTML}
    </ol>
    <h2>Incorrect Answers</h2>
    <p>You got ${inCorrectAnswerCounter} incorrect</p>
    <ol>
        ${inCorrectHTML}
    </ol>
`;

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

1 Answer

Steven Parker
Steven Parker
231,141 Points
Steven Parker
Steven Parker
231,141 Points

The question and answer are being added to the same array, and the list is constructed by making each array element a new list item. There are several approaches to resolving this:

  • the question and answer could be pushed as a sub-array, and change buildList to accommodate
  • the question and answer could be pushed onto separate arrays, also with buildList changed
  • buildList could be changed by itself to handle the current array

An example of the last suggestion might have a loop like this:

    for (let i = 0; i < arr.length; i += 2) {    // generate one item for every TWO elements
        list += `<li>${arr[i]} &nbsp; ${arr[i+1]}</li>`;
    }
Anthony Sabberton
Anthony Sabberton
4,864 Points

Cheers Steven. Looks so simple now I see it haha.