I'm making a small quiz game in Javascript and have come across an issue with one of the event listeners. I have a $form event listener to check the answer entered by the user, which calls a check() function. I can play the game through once, however when I want to play it again, things go wrong because of the event listener I think. I attempted moving the $form event listener where I have the $start and $again event listeners, however then I have the issue on how to access check() methodThis should be all the relevant code. I have this code working when it wasn't object oriented but I'm a little stuck here as I was switching it over. My question is how can I get the event listener to properly work where it is located in the code currently OR if it is moved with the other event listeners, how can I access the check() method? This should be the relevant code. Any assistance would be greatly appreciated!
//// DOM REFERENCES ////
//// Common convention to begin DOM variables with $ ////
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 $again = document.getElementById("again");
var $timer = document.getElementById("timer");
//Initializations
quiz = {
"name": "Harry Potter Quiz",
"description": "How well do you know the books/movies?",
//"question": "What is that real name of ",
"questions": [
{"question": "What is Harry Potter's House?", "answer": "Gryffendor", "asked": false},
{"question": "With What did Harry catch his first Snitch?", "answer": "Mouth", "asked": false},
{"question": "Which potion do Harry, Ron, and Hermione take in year 2?", "answer": "Polyjuice", "asked": false}
]
};
var score = 0;
var interval = 0;
var i = 0;
//// View Functions ////
function update(element, content, klass) {
//'element' is element to be updated
//'content' is content to be updated with
//A class can be added to content being added --> 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";
}
function random(a, b, callback) {
if (b === undefined) {
//If only one argument is supplied, assme 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;
}
//=============================================================//
//Event Listeners
$start.addEventListener("click", function() { new Game(quiz) }, false);
$again.addEventListener("click", function() { new Game(quiz);
update($feedback, "", "clear");
show($feedback) }, false);
//Hide the form at the start of the game
hide($form);
hide($again);
function Game(quiz){
//Hide button and show form
hide($start);
hide($again);
show($form);
this.questions = quiz.questions;
this.phrase = quiz.qustion;
this.score = 0;
update($score, this.score);
//Initialize time and set up interval that counts down
this.time = 20;
update($timer, this.time);
this.interval = window.setInterval(this.countDown.bind(this), 1000);
//Add event listener to form for when it's submitted
$form.addEventListener("submit", function(event) {
event.preventDefault();
this.check($form[0].value);
}.bind(this), false);
this.chooseQuestion();
}
//Method Definitions
Game.prototype.chooseQuestion = function() {
var questions = this.questions.filter(function(question){
return question.asked === false;
});
//set the current question
this.question = questions[random(questions.length) - 1];
this.ask(this.question);
}
Game.prototype.ask = function(question){
var quiz = this;
alert(quiz.questions.length);
//set the question.asked property to true so it's not asked again
question.asked = true;
update($question, question.question);
$form[0].value = "";
$form[0].focus();
//clear previoues options
//$form.innerHTML = "";
}
Game.prototype.check = function(answer){
if(answer === this.question.answer){
update($feedback, "Correct!", "right");
//increase score by 1
this.score++;
update($score, this.score);
} else {
update($feedback, "Wrong!", "wrong");
}
i++;
if(i === quiz.questions.length){
this.gameOver();
} else {
this.chooseQuestion();
}
//this.chooseQuestion();
}
Aucun commentaire:
Enregistrer un commentaire