Simple Quiz Game JavaScript

Question

I'm just learning now. Can you please help me, why am I not getting the correct output. This is my code:

//ask questions
var quiz = [
  ["When is Bulgaria established?", 681],
  ["What year was it before 16 years?", 2000],
  ["When does WWII ends?", 1945]
];

//variables
var answer = [];
var correct = [];
var wrong = [];
var correctAns = 0;
var wrongAns = 0;
var oList = "<ol>";

//function to print the result in ordered list
function printResult(result){
  for(var j = 0; j < result.length; j++){
    oList += "<li>" + result[i] + "</li>";
  }
  oList += "</ol>";
  return oList;
}

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



//looping, adding correct and wrong answeres
for(var i = 0; i < 3; i++) {
  answer[i] = prompt(quiz[i][0]);
  if(parseInt(answer[i]) == quiz[i][1]){
    correct.push(quiz[i][0]);
    correctAns++;
  } else {
    wrong.push(quiz[i][0]);
    wrongAns++;
  }
}


//print logic
if(correct.length < 1 || correct == undefined){
  print("You did not guess any of the quiestions!");
} else if (correct.length >= 1){
  print("You have guessed " + correctAns + " questions.");
  print(printResult(correct));
  print("You have " + wrongAns + " wrong answeres.");
  if(wrongAns > 0){
    print(printResult(wrong));
  }
}

I have watched this code over and over again and I still can't understand why am I getting undefined as a result. In the debugger, after the loop I check my vars and everything seems ok.

well, in this jsfiddle jsfiddle.net/owf1pgay it works. So please give a more specific info about what doesn't seem to work in your code :) — Florian
– Florian, Commented Aug 20, 2016 at 8:46
First error: Your definition of variable quiz is wrong (array of arrays instead of array of objects). Make it: var quiz = [{"When was Bulgaria Established?":"681"},{...}...];. After this fix, try and report if still not working. — FDavidov
– FDavidov, Commented Aug 20, 2016 at 8:47
How is this 'undefined' error manifesting itself? Is it in the console or printed to the page? — jedifans
– jedifans, Commented Aug 20, 2016 at 8:48
@levu in the same jsfiddle I get the same result: 1. undefined 2. undefined Unordered list bullet?! undefined> — test player
– test player, Commented Aug 20, 2016 at 8:51

Ziv Weissman · Accepted Answer · 2016-08-20 09:00:36Z

3

In your printResult function you are using var i instead of j,

Also you better use innerHtml+=message;

//ask questions
var quiz = [
  ["When is Bulgaria established?", 681],
  ["What year was it before 16 years?", 2000],
  ["When does WWII ends?", 1945]
];

//variables
var answer = [];
var correct = [];
var wrong = [];
var correctAns = 0;
var wrongAns = 0;
   

//function to print the result in ordered list
function printResult(result){
//HERE:
 var oList = "<ol>";
  for(var j = 0; j < result.length; j++){
    oList += "<li>" + result[j] + "</li>";
  }
  oList += "</ol>";
  return oList;
}

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



//looping, adding correct and wrong answeres
for(var i = 0; i < 3; i++) {
  answer[i] = prompt(quiz[i][0]);
  if(parseInt(answer[i]) == quiz[i][1]){
    correct.push(quiz[i][0]);
    correctAns++;
  } else {
    wrong.push(quiz[i][0]);
    wrongAns++;
  }
}


//print logic
if(correct.length < 1 || correct == undefined){
  print("You did not guess any of the quiestions!");
} else if (correct.length >= 1){
  print("You have guessed " + correctAns + " questions.");
  print(printResult(correct));
  print("You have " + wrongAns + " wrong answeres.");
  if(wrongAns > 0){
    print(printResult(wrong));
  }
}

<div id="output">
</div>

edited Aug 20, 2016 at 9:00

answered Aug 20, 2016 at 8:52

Ziv Weissman

4,5664 gold badges31 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

test player Over a year ago

Can you please tell me, why am I getting an Unordered list bullet for the wrong answers and not a numbered list? I can't seem to get that and I assume it will be the same stupid mistake as i - j.

Ziv Weissman Over a year ago

Your var oList = "<ol>", put it inside the function, see edit.

test player Over a year ago

I love you! Just changed that and everything works just great as it should!!!! Thank you! Why the heck is this so important, I mean if it is a global var it crashes?

Ziv Weissman Over a year ago

It doesn't matter in this case if it was global or not, but you are initializing it with "ol" outside of the function and when you are in the function for the second time it does not start with "ol" so the final html is missing opening tag.

Nina Scholz · Accepted Answer · 2016-08-20 09:01:30Z

2

Basically you have three problems.

reuse of oList, the variable should be inside declared and used only in printResult.
Inside of printResult, use of i where j have been used and
At print, you replace the actual content with new content.

Just a small hint with variable names for counting. It is good practise to start always with i instead of j and go on with the letters in the alphabet.

var quiz = [["When is Bulgaria established?", 681], ["What year was it before 16 years?", 2000], ["When does WWII ends?", 1945]],
    answer = [],
    correct = [],
    wrong = [],
    correctAns = 0,
    wrongAns = 0;

//function to print the result in ordered list
function printResult(result) {
    var oList = "<ol>"; // !!! move variable inside of the function
    for (var j = 0; j < result.length; j++) {
        oList += "<li>" + result[j] + "</li>"; // !!! use j indstead if i
    }
    oList += "</ol>";
    return oList;
}

function print(message) {
    document.getElementById('output').innerHTML += message; // !!! append message
}

//looping, adding correct and wrong answeres
for (var i = 0; i < 3; i++) {
    answer[i] = prompt(quiz[i][0]);
    if (parseInt(answer[i]) == quiz[i][1]) {
        correct.push(quiz[i][0]);
        correctAns++;
    } else {
        wrong.push(quiz[i][0]);
        wrongAns++;
    }
}

//print logic
if (correct.length < 1 || correct == undefined) {
    print("You did not guess any of the quiestions!");
} else if (correct.length >= 1) {
    print("You have guessed " + correctAns + " questions.");
    print(printResult(correct));
    print("You have " + wrongAns + " wrong answeres.");
    if (wrongAns > 0) {
        print(printResult(wrong));
    }
}

answered Aug 20, 2016 at 9:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

3 Comments

test player Over a year ago

Thanks so much, Nina! :) Can you please explain me, why the oList is so important to be a local and if it's global it crashes. In this example isn't it the same? / it seem's it's not but I can't get why? /

Nina Scholz Over a year ago

you declare the variable global and initialize it with an open ol tag. then with calling printResult, you append the string with more characters and return at the end of the function the string. that works. but for the next call of printResult you have still the content of the last action inside and not only the starting ol tag. and while you do not need the variable outside (remember, you return the content), you better use a local variable for it and prevent that the content of the last action is inside.

test player Over a year ago

Ahaaaaaa! Thank you so much, Nina! :)

Maciej Sikora · Accepted Answer · 2016-08-20 08:53:33Z

2

Your main mistake is using i intead of j:

for(var j = 0; j < result.length; j++){
   oList += "<li>" + result[j] + "</li>";// here was i before
}

answered Aug 20, 2016 at 8:53

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

1 Comment

test player Over a year ago

HAHAHAH, newbie here! :@

Collectives™ on Stack Overflow

Simple Quiz Game JavaScript

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related