Javascript Novice to Ninja: Ch 9 p. 257 code alterations trying my own - not working

[karentutor1]

Hi

I have been playing with chapter 9 p. 257.

The following code is JavaScript for ‘ending’ the game subject to the timer reaching a time of zero.

I had wanted to add my own option of ‘ending the game’ subject to the number question asked = number of questions available (i.e. when all the questions are done). I had sought to do this myself. However, it doesn’t seem to work.

What I need is for the object variable var quiz.questions[i] = number of (I think)
This is just for fun. If anyone has ideas (simple) on how to end the game subject to the number of questions being asked, love to see them.

thx
Karen

I had thought to add the following lines:

function ask(question) {
        update($question, quiz.question + question);
        var length = quiz.questions[i].length; // my addition
        if(quiz.questions[i] = length){
        gameOver(); } // till here
        $form[0].value="";
        $form[0].focus();
    }

The original code is;

`var quiz = {
"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" },
{ "question": "Batman", "answer": "Bruce Wayne" },
{ "question": "Wonder Woman", "answer": "Dianna Prince" }
]
}

//// views ////
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;
  element.appendChild(p);
  if(klass) {
    p.className = klass;
  }
}

function hide(element) {
  element.style.display = "none";
}

function show(element) {
  element.style.display = "block";
}

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

// hide the form at the start of the game
hide($form);
  
//// function definitions ////

function play(quiz){
  var score = 0; // initialize score
  update($score,score);
  // initialize time and set up an interval that counts down every second
  var time = 20;
  update($timer,time);
  var interval = window.setInterval( countDown , 1000 );
  // hide button and show form
  hide($start);
  show($form);
  // add event listener to form for when it's submitted
  $form.addEventListener('submit', function(event) { 
    event.preventDefault();
    check($form[0].value);
    }, false);
  var i = 0;
  chooseQuestion();

  // nested functions
  
  function chooseQuestion() {
    var question = quiz.questions[i].question;
    var length = quiz.questions[i].length;
    if (quiz.questions[i] = length) {
        gameOver();
    }
    ask(question);
  }
  
  function ask(question) {
    update($question,quiz.question + question);
    $form[0].value = "";
    $form[0].focus();
  }

  function check(answer) {
    if(answer === quiz.questions[i].answer){
      update($feedback,"Correct!","correct");
      // increase score by 1
      score++;
      update($score,score)
    } else {
      update($feedback,"Wrong!","wrong");
    }
    i++;
    chooseQuestion();
  }
  
  // this is called every second and decreases the time
  function countDown() {
    // decrease time by 1
    time--;
    // update the time displayed
    update($timer,time);
    // the game is over if the timer has reached 0
    if(time <= 0) {
      gameOver();
    }
  }

  function gameOver(){
    // 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
    window.clearInterval(interval);
    hide($form);
    show($start);
  }
}`

[karentutor1]

Apologies, the “original code” has my edits in them. You may just delete them.

original (correct as provided) code is:

  function chooseQuestion() {
    var question = quiz.questions[i].question;
    ask(question);
  }

thx
Karen

[felgall]

@karentutor1

var length = quiz.questions[i].length; // my addition
if(quiz.questions[i] = length){
gameOver(); } // till here

That code gets the length of the current question. It then assigns that length as the value of the last question. It then tests that the current question is not a falsy value (which will be true for all but the first question) and then calls ganeOver (presumably on the second question).

What you probably want based on what you say you are trying to do is:

        var length = quiz.questions.length -1; // my addition
        if(quiz.questions[i] === length){
        gameOver(); } // till here

This sets length to the position of the last question then tests if it is the last question before calling gameOver.

[karentutor1]

oh I see - yes, very clever thanks.

I get your code changes. Well done.

But, it still desn’t work as envisaged, i.e. ending the game when i is the length.

I am wondering if I am calling that code in the wrong place then?

thx
Karen