JavaScript JavaScript Arrays Multidimensional Arrays Improve the Quiz – One Solution

Daniel Rha
seal-mask
.a{fill-rule:evenodd;}techdegree
Daniel Rha
Front End Web Development Techdegree Student 7,564 Points

Can't see what's wrong with my code.

const quiz = [ ["What is this dog's name?", "Kevin"], ["What is your great great grandma?", "Nanny"], ["List the first three numbers", "123"], ["List the three numbers in reverse", "321"], ];

const rightAnswers = [

];

const wrongAnswers = [

]; let correctAnswers = 0;

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

if ( response === answer) { rightAnswers.push(question);}

else if (response !== answer) {
wrongAnswers.push(question);
}

function createListItems( arr) { let items = ''; for ( let i = 0; i < arr.length; i++) { items += <li>${arr[i]}</li>; } return items; } let html= <h2>These you got right!</h2> <ol>${ createListItems(rightAnswers) }</ol> <h2>These wrong!</h2> <ol>${ createListItems(wrongAnswers) }</ol> ;

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

please help, I think im going to go insane soon

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

Hi Daniel,

Aside from not seeing a closing brace for your initial for loop, I'm not seeing anything that jumps out as wrong with your code. What problem are you having? When you run your script, what happens?

1 Answer

Juan Luna Ramirez
Juan Luna Ramirez
8,944 Points

Here are a few things I see:

  1. The for loop is missing the closing bracket as mentioned by Brandon in the comments.
  2. The html you are putting together to then insert into the page has to be a string in your JavaScript code.
  3. "innerHTMl" should be "innerHTML" with capital "L". Variables and function names are case sensitive.

Check the comments below.

const quiz = [
  ["What is this dog's name?", "Kevin"],
  ["What is your great great grandma?", "Nanny"],
  ["List the first three numbers", "123"],
  ["List the three numbers in reverse", "321"],
];

const rightAnswers = [];
const wrongAnswers = [];
let correctAnswers = 0;

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

  if (response === answer) {
    rightAnswers.push(question);
  } else if (response !== answer) {
    wrongAnswers.push(question);
  }
} // 1. missing this closing bracket here

function createListItems(arr) {
  let items = '';
  for (let i = 0; i < arr.length; i++) {
    items += `<li>${arr[i]}</li>`; // 2. html has to be string
  }
  return items;
}

// 2. again, html has to be a string
let html= `
  <h2>These you got right!</h2>
  <ol>
    ${createListItems(rightAnswers)}
  </ol>
  <h2>These wrong!</h2>
  <ol>
    ${createListItems(wrongAnswers)}
  </ol>`;

// 3. you have to use innerHTML with with a capital "L"
document.querySelector('main').innerHTML = html;
Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

Good catch on the lowercase “l”, as far as the strings though, Daniel seems to be doing that part correct. Because of the markdown capabilities of the forum, the back tics Daniel is using to create the template literals were interpreted as markdown characters to give the content between them a “code-like” feel. That’s why they don’t show up in Daniel's code, but they are there.

If you were to click on ‘edit question’ for the original question, you’ll see them.

Juan Luna Ramirez
Juan Luna Ramirez
8,944 Points

Ah, correct! Good eye reading the code in the question. I actually just copied and pasted into a prettifier which didn't include the back ticks.