Im trying to show wrong answers in my function isWrong() but it doesn't work.
If any body know the answer, please let me now what's wrong in my code because i can't find the the method to solve.
Thank you.
JS FILE:
function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function () {
return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function (answer) {
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function () {
return this.questionIndex === this.questions.length;
}
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function (choice) {
return this.answer === choice;
}
function populate() {
if (quiz.isEnded()) {
showScores();
isWrong();
}else {
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function () {
quiz.guess(guess);
populate();
}
};
//Method isWrong() that show wrong answers(it doesn't work), im trying to to compare answer with user question choice but it really doesnt work.
function isWrong(question,index) {
var incorrectA = [];
var answer = prompt(question[0], '');
if(answer == question[1]){
alert("Correct");
}else
incorrectA.push(index);
alert('Sorry. The correct answer is ' + question[1]);
for (var i = 0; i < questions.length; i++) {
isWrong(questions[i], i);
}
}
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
var questions = [
new Question("What is the name of the club where Lionel Messi plays??", ["Fc Barcelona",
"Chelsea",
"Manchester City", "Real Madrid"], "Fc Barcelona"),
new Question("In which league of the world is Crystal Palace?", ["Liga Alemana", "Liga
Francesa","Premier League", "La Liga"], "Premier League"),
new Question("What team is Andrés Iniesta currently playing in??", ["Fc Barcelona", " Club
Fuentealbilla", "Vissel Kobe", "Ninguno de los anteriores"], "Vissel Kobe"),
new Question("Pep Guardiola in which leagues he has trained?", ["La Liga", "Liga Alemana",
"Premier
League", "Todos"], "Todos"),
new Question("Which team won the Champions League in the 2018/2019 season?", ["Real Madrid",
"Liverpool", "Fc Barcelona", "PSG"], "Liverpool")
];
//Create Quiz
var quiz = new Quiz(questions);
//show Quiz
populate();
Here is HTML FILE:
<div class="grid">
<div id="quiz">
<h1>Javascript Quizes</h1>
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<footer>
<p id="progress">Question x of y</p>
</footer>
</div>
</div>
Got it working, I'll explain the updates.
You weren't saving the user's choice, so I added the array userAnswers
and populated that here Question.prototype.isCorrectAnswer = function (choice) {
.
Then I fixed the call to isWrong
, looping the call from the populate()
function.
Then I fixed the isWrong()
function to compare the entry in userAnswers
to the question["answer"]
function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function () {
return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function (answer) {
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function () {
return this.questionIndex === this.questions.length;
}
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function (choice) {
userAnswers.push(choice);
return this.answer === choice;
}
function populate() {
if (quiz.isEnded()) {
showScores();
//isWrong();
for (var i = 0; i < questions.length; i++) {
isWrong(questions[i], i);
}
}
else {
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function () {
quiz.guess(guess);
populate();
}
};
function isWrong(question,index) {
//var incorrectA = [];
//var answer = prompt(question[0], '');
var answer = userAnswers[index];
alert("User answer for question " + (index+1) + ": " + userAnswers[index]);
if(answer == question["answer"]){
alert("Correct");
}
else{
//incorrectA.push(index);
alert('Sorry. The correct answer is ' + question["answer"]);
}
//for (var i = 0; i < questions.length; i++) {
// isWrong(questions[i], i);
//}
}
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
var questions = [
new Question("What is the name of the club where Lionel Messi plays??", ["Fc Barcelona", "Chelsea", "Manchester City", "Real Madrid"], "Fc Barcelona"),
new Question("In which league of the world is Crystal Palace?", ["Liga Alemana", "Liga Francesa","Premier League", "La Liga"], "Premier League"),
new Question("What team is Andrés Iniesta currently playing in??", ["Fc Barcelona", " Club Fuentealbilla", "Vissel Kobe", "Ninguno de los anteriores"], "Vissel Kobe"),
new Question("Pep Guardiola in which leagues he has trained?", ["La Liga", "Liga Alemana", "Premier League", "Todos"], "Todos"),
new Question("Which team won the Champions League in the 2018/2019 season?", ["Real Madrid", "Liverpool", "Fc Barcelona", "PSG"], "Liverpool")
];
var userAnswers = [];
//Create Quiz
var quiz = new Quiz(questions);
//show Quiz
populate();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.