Novice to Ninja Chapter11

I am thinking that the chooseOption() function is stuck in a loop. I put a Breakpoint at line120 then go through the function and option always equals undefined. It does not seem to be getting answers in the questions array???


//(function () {
//"use strict";

//// dom references ////
var $question = document.getElementById("question");
var $score = document.getElementById("score");
var $feedback = document.getElementById("feedback");
var $start = document.getElementById("start");
var $form = document.getElementById("answer");
var $timer = document.getElementById("timer");

////view functions ////
function update(element, content, klass) {
    var p = element.firstChild || document.createElement("p");
    p.textContent = content;
    if(klass) {
        p.className = klass;

//// Event Listeners////
$start.addEventListener('click', function() { play(quiz) } , false);

quiz = new Object();

    "name": "Super Hero Name Quiz",
    "description": "How many super heroes can you name?",
    "question" : "What is the real name of ", 
    "questions" : [
        {"question": "Superman", "answer": "Clarke Kent" , "asked": false },
        {"question": "Batman", "answer": "Bruce Wayne" , "asked": false},
        {"question": "Wonder Woman", "answer": "Dianna Prince" , "asked": false}

var score = 0; // initialize score

function hide(element) { = "none";

function show(element) { = "block";

//hide the form at the start of the game

function play(quiz) {
    //hide button and show form
    //main game loop
    //initialize timer and set up an interval that counts down
    var time = 20;
    update($timer, time);
    var interval = window.setInterval (countDown, 1000);
    $form.addEventListener('click', function(event) {
    }, false);
    var question; // current question
    //end of main game loop
    //this is called every second and decreases the time
    function countDown () {
        //decrease time by 1
        //update the time displayed
        //the game is over if the timer has reached 0
        if (time <=0) {
    function chooseQuestion() {
        console.log ("chooseQuestion() called");
        var questions = quiz.questions.filter(function(question) {
            return question.asked === false;
        // set the current question
        question = questions[random(questions.length) -1];
    function ask(question) {
        console.log ("ask() invoked");
        //set the question.asked property to true so it's not asked again
        quiz.question.asked = true;
        update($form, quiz.question + quiz.questions.question + "?");
        //create an array to put the different options in and a button variable
        var options = [], button;
        var option1 = chooseOption();
        var option2 = chooseOption();
        // add the actual answer at a random place in the options array
        options.splice(random(0,2) , 0, question.answer);
        //loop through each option and display it as a button
        options.forEach(function(name) {
            button = document.createElement("button");
            button.value = name;
        //choose an option from all the possible answers but without choosing the same option twice
        function chooseOption() {
            var option = quiz.questions[random(quiz.questions.length) - 1];
            // check to see if the option chosen is the current question or already one of the options
            //  if it is then recursively call this function until it isn't 
            if (option === question || options.indexOf(option.answer) !== -1) {
                return chooseOption();
            return option;
    function check(answer) {
        console.log ("check() invoked");
        console.log (quiz.questions[i].answer);
        update($feedback, "Correct!","right");
        //increase score by 1
        } else {
        update ($feedback, "Wrong!", "wrong");
        if(i===quiz.questions.length) {
        } else {
    function random (a,b,callback) {
        if (b===undefined) {
            //if only one argument is supplied, assume the lower limit is 1
            b=a, a= 1;
        var result = Math.floor( (b-a+1) * Math.random()) +a;
        if (typeof callback === "function") {
            result = callback(result);
    function gameOver() {
        console.log ("gameOver() invoked");
        //inform the player that the game has finished and tell them how many points they have scored
        update($question , "Game Over, you scored " + score + " points");
        //stop the countdown interval


Is this the function you are trying to debug?

function chooseOption() {
  // console.log(quiz.questions);
  var option = quiz.questions[random(quiz.questions.length) - 1];
  // console.log(option);
  if (option === question || options.indexOf(option.answer) !== -1) {
    return chooseOption();
  return option;

Try uncommenting those lines to see if quiz.questions is what you expect.


When I console.log quiz.questions is coming back as Objects. I am thinking I need them to come back one level deeper. They need to loop through quiz[questions].answers. I am struggling on how to set that up.

Option is always coming back as undefined which is causing the infinite loop.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.