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

Posted by Daniel Dougherty
Daniel Dougherty
6,934 Points

How to show the correct answers next to the questions that were answered incorrectly

How would you code it so you can show the person the correct answers next to the ones they got wrong? I'm trying to figure it out but nothing i seem to be doing works right.

9 Answers

<noob />
<noob />
17,062 Points

You can add an alert message to the else block

alert("You're wrong!, the correct answer is " + answer);

this should show u the correct answer.

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

I dont saw the video but for this kind of task u need to do the following: you need an array or object that contain a question and a answer. You also need an empty array for storing the correct question the user have answered You need to use an if statement to check if the answer is correct.if the answer is correct and ur using a for loop u can simply add the iterated question into the empty array with .push() method. if u want to display the wrong questions the user entered u do the same

Daniel Dougherty
Daniel Dougherty
6,934 Points

Yes I have that all figured out, but what I also want to do is show the correct answer for the ones the user gets wrong. So if they get the answer wrong to a question like "how many legs does a cat have?" I want the correct answer to be shown, "4".

Daniel Dougherty
Daniel Dougherty
6,934 Points 
var questions = [
    ['How many states are in the United States?', 50],
    ['How many continents are there?', 7],
    ['How many legs do dogs have?', 4]
];

var correctAnswers = 0;
var question;
var answer;
var response;
var html;
var correct = [];
var wrong = [];

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

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

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

html = "You got " + correctAnswers + " question(s) right.";
html += '<h2>You got these questions correct:</h2>';
html += buildList(correct);
html += '<h2>You got these questions wrong:</h2>'
html += buildList(wrong);
print(html);
Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

I'm not sure about this (only just did the exercise too), but I just tried to do this and this is how I got it to work (I did declare a new answers variable at the top):

for ( let i = 0; i < questions.length; i += 1 ) { 
  question = questions[i][0];
  answer = questions[i][1];
  response = parseInt(prompt(question));
  if ( response === answer ) {
    counter += 1;
    correctQ.push(question);
  } else {
    wrongQ.push(question);
  }
  answers.push(answer);
}

html = '<p>You got ' + counter + ' question(s) right.</p>';
html += '<h2>These are the questions you got right:</h2>' + buildList(correctQ);
html += '<h2>These are the questions you got wrong:</h2>' + buildList(wrongQ);
html += '<h2>These were the correct answers:</h2>' + buildList(answers);
print(html);

Now, the thing is that the correct answers will be in an ordered list (1, 2, 3), in the order that the questions were asked. That's fine by itself, but since buildList() builds a new <ol> every time it's called, the questions won't have the correct numbers on the page unless the user answered all questions either correct or wrong. Otherwise it'll be like this:

Right:

  1. How many states are in the US?
  2. How many legs does an insect have?

Wrong:

  1. How many continents are there?

and it's confusing to the user to match these to the correct answer. I'm curious if anyone else would know how to fix this, or how one would go about editing buildList() to include the correct answer next to the questions. :)

EDIT: I tried doing this last bit by editing buildList() like this:

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

but then when called like this:

html = '<p>You got ' + counter + ' question(s) right.</p>';
html += '<h2>These are the questions you got right:</h2>' + buildList(correctQ, answers);
html += '<h2>These are the questions you got wrong:</h2>' + buildList(wrongQ, answers);

the function will loop through all items in the answers array again so in my example, it could list '50' as the correct number of legs an insect has. How do I fix that?

@Daniel, sorry for hijacking your question ;)

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Can u include your snapshot?

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

Of the code or of the page in the browser?

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

I read your post again. What's wrong with the condition ur into right now? you have a ol for correct and wrong answers thats ok

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

Yeah all seems to be working well! It's just that if I want to add the correct answers next to the question as Daniel suggested (ex. 1. How many states are in the US? 50), I'm not sure how to do that and have the correct answer printed next to it. Right now if I answer the last question wrong it'll give me this

These are the questions you got right:

  1. How many states are in the US? 50
  2. How many continents are there? 7

These are the questions you got wrong:

  1. How many legs does an insect have? 50

and I'm not sure how to code it so that that last bit will say '6' as it should. I understand why it's saying 50 (as in the function it'll loop through all answers in the array). Should I not be editing the buildList function at all, but instead edit the for loop in which the questions are prompted?

Btw, thanks for your super quick response!

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

You want to display the correct answer in the wrong answer div?

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

Yes exactly! I think that's what Daniel was getting at initially as well :)

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

can u upload the code into workspaces and link me to a snapshot?

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

https://w.trhou.se/o8lzj88vk5

First time I'm uploading a snapshot so I hope this works.

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

I'm sorry it took me that long. It took me some time to get into the code and do some expirements. However all u had to do is to add 2 arrays. if the response is correct i add the answer to the good answers, if not to the bad answers.

snapshot: https://w.trhou.se/ezdgyeivs4

i think that is what u tried to do?

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

So sorry for this super late reply! Thanks for the explanation. That makes total sense and was also a very obvious solution in hindsight... hahaha. Occam's razor.