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

Prakhar Patwa
Prakhar Patwa
11,260 Points
Posted by Prakhar Patwa
Prakhar Patwa
11,260 Points

regarding document.getelementById()

/my code is/

var correctAnswer = 0;
var wrongAnswer = 0;
var correct = [];
var wrong = [];
var questions = [
    ['what is the capital of usa?' , 'Washington'],
    ['what is the capital of India?' , 'delhi'],
    ['what is the capital of Nepal?' , 'kathmandu']
];

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

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

for(var i = 0 ; i < questions.length ; i++){
    var ques = prompt(questions[i][0]);
    if(ques === questions[i][1]){
        correctAnswer += 1;
        correct.push(questions[i][0]);
    }else {
        wrongAnswer += 1;
        wrong.push(questions[i][0]);
    }   
}
print("<p style='color:green'>you gave "+ correctAnswer +" correct answer"+"</p>" +" Correct questons you gave it is:"+"<br>"); 
print  (buildList(correct));
print("<p style='color:red; font-weight:800px'>you gave "+ wrongAnswer +" incorrect answer"+"</p>"); 
print  (buildList(wrong));

==================================================

/*if i am using */

var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message ;

my output is displaying only wrong answers,not getting it.

Gilbert Kennen
Gilbert Kennen
10,661 Points

I'll take a look, but it really does help if you use markdown to display code blocks. For example:

```JavaScript

// your JavaScript code here

```

As it is, some of your code seems to have not survived copy/paste. I have tried a reconstruction:

var correctAnswer = 0;
var wrongAnswer = 0;
var correct = [];
var wrong = [];
var questions = [
  ['what is the capital of usa?' , 'Washington'],
  ['what is the capital of India?' , 'delhi'],
  ['what is the capital of Nepal?' , 'kathmandu']
];

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

function buildList(arr){
  var listHTML = '';
  for(var i = 0 ; i) {
      ' + arr[i] + ';
  }
  listHTML += ' ';
  return listHTML;
}

for (var i = 0 ; i < questions.length ; i++) {
  var ques = prompt(questions[i][0]);
  if (ques === questions[i][1]) {
    correctAnswer += 1;
    correct.push(questions[i][0]);
  } else {
    wrongAnswer += 1;
    wrong.push(questions[i][0]);
  }
}

print("you gave "+ correctAnswer +" correct answer"+"" +" Correct questons you gave it is:"+"");
print (buildList(correct));
print("you gave "+ wrongAnswer +" incorrect answer"+""); print (buildList(wrong));

/*if i am using */
var outputDiv = document.getElementById('output'); outputDiv.innerHTML = message ;

The text inside of the buildList function seems to have mostly disappeared. If you paste it in a code block, it might come through.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Prakhar Patwa, just letting you know I added code blocks around your script to make it easier to view and help with your question.

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

So really the only thing you need to do to use the print function with the 'newer' way that Dave describes is to create and build/append to another variable, such as html, then print that only once. Otherwise with each call of print you would be replacing the entire HTML contents of the output div.

Also note that you don't have to close and concatenate another string before and after each HTML tag, they can be in the middle of strings, as long as you correctly escape any quotes within.

Here's what I had:

var i;
var numCorrect = 0;
var minResponseLength = 5;
var questions = [
  ["What is the largest living land animal?", "african elephant"],
  ["What is the largest living reptile?", "saltwater crocodile"],
  ["What is the largest living fish?", "whale shark"],
  ["What is the largest living bird?", "common ostrich"],
  ["What is the tallest living animal?", "giraffe"]
];
var answeredCorrect = [];
var answeredIncorrect = [];
var html = '';

function print(message) {
  // old school
  // document.write(message);

  // new school
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

// create and return the HTML for an ordered list from an array
function buildOrderedList(list) {
  var listHTML = '<ol>';
  for (i=0; i<list.length; i++) {
    listHTML += '<li>' + list[i] + '</li>';
  }
  listHTML += '</ol>';
  return listHTML;
}

// a function to ask the question and return true if answered correctly
function quizQuestion(questions, questionNumber) {
  // get the user's response to the question being asked, convert to lowercase
  var response = prompt(questions[questionNumber][0]).toLowerCase();
  /* return true if the user's response exists within
     or is equal to the actual answer
     AND the response is greater than or equal to the min characters
     (so they can't cheat with a random letter or two)
     - this allows for responses that aren't the full string in the answer */
  return (
    questions[questionNumber][1].indexOf(response) >= 0
    &&
    response.length >= minResponseLength
  )
}

for (i=0; i<questions.length; i++) {
  if (quizQuestion(questions, i)) {
    numCorrect++;
    answeredCorrect.push(questions[i][0]);
  } else {
    answeredIncorrect.push(questions[i][0]);
  }
}

html += '<p>Out of ' + questions.length + ' questions, you got ' + numCorrect + ' correct and ' + (questions.length - numCorrect) + '  incorrect.</p>';
// only add the HTML for the list of correct questions if there were some
if (numCorrect > 0) {  
  html += '<h2>You got these questions correct:</h2>' + buildOrderedList(answeredCorrect);
}
// only add the HTML for the list of inccorrect questions if there were some
if (numCorrect < questions.length) {
  html += '<h2>You got these questions incorrect:</h2>' + buildOrderedList(answeredIncorrect);
}

print(html);
Prakhar Patwa
Prakhar Patwa
11,260 Points
Prakhar Patwa
Prakhar Patwa
11,260 Points

Thnk you Ian.its really helping me out. Next time i will keep in my mind.