Question game skips questions the second time around
by gacl from LinuxQuestions.org on (#5CB6K)
Hello,
This is from the book Javascript: Novice To Ninja. The game works correctly the first time around (3 questions) but will skip questions in subsequent games. I think it has something to do with the event listener or maybe "this". I've tried enough times to solve this... Here's the code:
HTML:
Code:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="A quiz game for ninjas" />
<meta name="author" content="gacl" />
<title>
Quiz Ninja
</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h1>
Quiz Ninja!
</h1>
<p>
Score: <strong id="score">0</strong>
</p>
<p id="timer"></p>
</header>
<section id="question"></section>
<form id="answer">
</form>
<section id="feedback"></section>
<button id="start">
Click to play Quiz Ninja!
</button>
<script src="js/scripts.js"></script>
</body>
</html>JS:
Code:(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;
element.appendChild(p);
if (klass) {
p.className = klass;
}
}
// Event listeners
$start.addEventListener('click',function() {
new Game(quiz);
},false);
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", "asked": "false"},
{"question": "Wonder Woman", "answer": "Dianna Prince", "asked": "false"},
{"question": "Batman", "answer": "Bruce Wayne", "asked": "false"}
]
};
function hide(element) {
element.style.display = 'none';
}
function show(element) {
element.style.display = 'block';
}
// Hide the form at the start of the game
hide($form);
var score = 0; // Initialize score
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);
}
return result;
}
// Method definitions
Game.prototype.chooseQuestion = function() {
console.log("chooseQuestion() called");
var questions = this.questions.filter(function(question) {
return question.asked === "false";
});
// Added by gacl
if (questions == false) {
return this.gameOver();
}
// Set the current question
this.question = questions[random(questions.length) - 1];
this.ask(this.question);
}
Game.prototype.ask = function(question) {
console.log("ask() called");
var quiz = this;
// Set the question.asked property to true so it's not asked again
question.asked = true;
update($question,this.phrase + question.question + "?");
// Clear the previous options
$form.innerHTML = "";
// Create an array to put the different options in and a button variable
var options = [], button;
var option1 = chooseOption();
options.push(option1.answer);
var option2 = chooseOption();
options.push(option2.answer);
// Add the actual answer at a random place in the options array
options.splice(random(0,2),0,this.question.answer);
// Loop through each option and display it as a button
options.forEach(function(name) {
button = document.createElement("button");
button.value = name;
button.textContent = name;
$form.appendChild(button);
});
// Choose and option from all the possible answers but without choosing the answer or 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;
}
}
Game.prototype.check = function(answer) {
console.log("check() called");
if (answer === this.question.answer) {
update($feedback,"Correct!","right");
// Increase score by 1
this.score++;
update($score,this.score);
} else {
update($feedback,"Wrong!","wrong");
}
this.chooseQuestion();
}
Game.prototype.countDown = function() {
// This is called every second and decreases the time
// Decrease time by 1
this.time--;
// Update the time displayed
update($timer,this.time);
// The game is over if the timer has reached 0
if (this.time <= 0) {
this.gameOver();
}
}
Game.prototype.gameOver = function() {
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 " + this.score + " points");
// Stop the countdown interval
window.clearInterval(this.interval);
hide($form);
show($start);
}
function Game(quiz) {
this.questions = quiz.questions;
// Added by gacl
for (let question of this.questions) {
question.asked = "false";
}
this.phrase = quiz.question;
this.score = 0; // Initialize score
update($score,this.score);
// Initialize timer and set up an interval that counts down
this.time = 20;
update($timer,this.time);
this.interval = window.setInterval(this.countDown.bind(this),1000);
// Hide button and show form
hide($start);
show($form);
// Add event listener to form for when it's submitted
$form.addEventListener('click', function(event) {
event.preventDefault();
this.check(event.target.value);
}.bind(this),false);
this.chooseQuestion();
}
} ())There's a CSS file but I don't think we need it here. Thanks!
This is from the book Javascript: Novice To Ninja. The game works correctly the first time around (3 questions) but will skip questions in subsequent games. I think it has something to do with the event listener or maybe "this". I've tried enough times to solve this... Here's the code:
HTML:
Code:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="A quiz game for ninjas" />
<meta name="author" content="gacl" />
<title>
Quiz Ninja
</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h1>
Quiz Ninja!
</h1>
<p>
Score: <strong id="score">0</strong>
</p>
<p id="timer"></p>
</header>
<section id="question"></section>
<form id="answer">
</form>
<section id="feedback"></section>
<button id="start">
Click to play Quiz Ninja!
</button>
<script src="js/scripts.js"></script>
</body>
</html>JS:
Code:(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;
element.appendChild(p);
if (klass) {
p.className = klass;
}
}
// Event listeners
$start.addEventListener('click',function() {
new Game(quiz);
},false);
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", "asked": "false"},
{"question": "Wonder Woman", "answer": "Dianna Prince", "asked": "false"},
{"question": "Batman", "answer": "Bruce Wayne", "asked": "false"}
]
};
function hide(element) {
element.style.display = 'none';
}
function show(element) {
element.style.display = 'block';
}
// Hide the form at the start of the game
hide($form);
var score = 0; // Initialize score
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);
}
return result;
}
// Method definitions
Game.prototype.chooseQuestion = function() {
console.log("chooseQuestion() called");
var questions = this.questions.filter(function(question) {
return question.asked === "false";
});
// Added by gacl
if (questions == false) {
return this.gameOver();
}
// Set the current question
this.question = questions[random(questions.length) - 1];
this.ask(this.question);
}
Game.prototype.ask = function(question) {
console.log("ask() called");
var quiz = this;
// Set the question.asked property to true so it's not asked again
question.asked = true;
update($question,this.phrase + question.question + "?");
// Clear the previous options
$form.innerHTML = "";
// Create an array to put the different options in and a button variable
var options = [], button;
var option1 = chooseOption();
options.push(option1.answer);
var option2 = chooseOption();
options.push(option2.answer);
// Add the actual answer at a random place in the options array
options.splice(random(0,2),0,this.question.answer);
// Loop through each option and display it as a button
options.forEach(function(name) {
button = document.createElement("button");
button.value = name;
button.textContent = name;
$form.appendChild(button);
});
// Choose and option from all the possible answers but without choosing the answer or 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;
}
}
Game.prototype.check = function(answer) {
console.log("check() called");
if (answer === this.question.answer) {
update($feedback,"Correct!","right");
// Increase score by 1
this.score++;
update($score,this.score);
} else {
update($feedback,"Wrong!","wrong");
}
this.chooseQuestion();
}
Game.prototype.countDown = function() {
// This is called every second and decreases the time
// Decrease time by 1
this.time--;
// Update the time displayed
update($timer,this.time);
// The game is over if the timer has reached 0
if (this.time <= 0) {
this.gameOver();
}
}
Game.prototype.gameOver = function() {
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 " + this.score + " points");
// Stop the countdown interval
window.clearInterval(this.interval);
hide($form);
show($start);
}
function Game(quiz) {
this.questions = quiz.questions;
// Added by gacl
for (let question of this.questions) {
question.asked = "false";
}
this.phrase = quiz.question;
this.score = 0; // Initialize score
update($score,this.score);
// Initialize timer and set up an interval that counts down
this.time = 20;
update($timer,this.time);
this.interval = window.setInterval(this.countDown.bind(this),1000);
// Hide button and show form
hide($start);
show($form);
// Add event listener to form for when it's submitted
$form.addEventListener('click', function(event) {
event.preventDefault();
this.check(event.target.value);
}.bind(this),false);
this.chooseQuestion();
}
} ())There's a CSS file but I don't think we need it here. Thanks!