测验结束时如何显示错误答案？

Question

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>

Answer 1

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();