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 Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 1

Krunal Patel
Krunal Patel
1,770 Points

I am getting undefined when showing the questions.

unction print(message) {
  document.write(message);
}

var quiz = [
  [' What color is the circle on the Japanese national flag?','red'],
  [' What is the chemical symbol for Hydrogen?','h'],
  [' How many sides does an octagon have?','8'],
  [' Great Whites and Hammerheads are what type of animals?','shark']
]

function test(choice){
    var count = 0;

    for (var i = 0; i < choice.length; i++){
      var question = prompt(choice[i][0]);
      question = question.toLowerCase();
       var right;
       var wrong;
       var answer = question;
      if ( question === choice[i][1] || question === 'eight'){
        right+= `<ul><li>${choice[i][0]}</li></ul> \n ${answer}`;
        count++; 
      } else {
       wrong+= `<ul><li>${choice[i][0]}</li></ul> \n ${answer}`; 
      }
    }

    print(`You got ${count} question(s) right<br>`);

    print(`<h1>The correct questions you got are</h1> ${right}`);

    print(`<h1>The wrong questions you got are</h1> ${wrong}`);
}

test(quiz);

3 Answers

Steven Parker
Steven Parker
220,853 Points

The first time you use the concatenating assignment operator ("+=") on your "right" and "wrong" variables, their initial state is "undefined". To fix that, just initialize them to the empty string:

       var right = "";

The variable right should be initialized to zero and I think it's best outside of the loop to put all your global scope variables up top for easier reading and understanding.

Steven Parker
Steven Parker
220,853 Points

I agree that it's "best practice" to group globals together at the beginning, but you would not want to initialize the "right" and "wrong" variables with 0, because that would cause a "0" to appear on the page in front of the lists that will be concatenated onto them later. It's best to start them as empty strings.

Yes, in this case, it would be since he is adding a string to right and wrong variable. My explanation was to utilize them as counters and I overlooked the code so yes you are right. I noticed other mistakes along the way where this wouldn't work. the variable question was being changed along the way and I made some changes so you can see where mistakes were made. Mistakes are good because you can learn from correcting them. Take time to digest the code below. This works but there are better ways to keep it DRY (don't repeat yourself) and more readable for others.

function print(message) {
  document.write(message);
}

var quiz = [
  [' What color is the circle on the Japanese national flag?','red'],
  [' What is the chemical symbol for Hydrogen?','h'],
  [' How many sides does an octagon have?','8'],
  [' Great Whites and Hammerheads are what type of animals?','shark']
]

function test(choice){
    var count = 0;
    var right ='';//initialize here
    var wrong = '';

    for (var i = 0; i < choice.length; i++){
      var question = prompt(choice[i][0]);
      var answer = choice[i][1];// moved answer to value of array
      if ( question === answer){// makes more sense
        // you can assign the question part [i][0] to a variable instead of call out the array elements below
        right+= `<ul><li>${choice[i][0]}</li></ul> \n ${answer}`; // now answer works 
        count++;
      } else {
       wrong+= `<ul><li>${choice[i][0]}</li></ul> \n ${answer}`;
      }
    }

    print(`You got ${count} question(s) right<br>`);

    print(`<h1>The correct questions you got are</h1> ${right}`);

    print(`<h1>The wrong questions you got are</h1> ${wrong}`);
}

test(quiz);