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

Question

我试图在我的 function isWrong() 中显示错误的答案，但它不起作用。

如果有人知道答案，请告诉我我的代码有什么问题，因为我找不到解决方法。

谢谢你。

JS文件：

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

//显示错误答案的方法isWrong（）（它不起作用），我试图将答案与用户问题选择进行比较，但它真的不起作用。

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

这是 HTML 文件：

     <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

得到它的工作，我会解释更新。

您没有保存用户的选择，因此我添加了数组userAnswers并在此处填充Question.prototype.isCorrectAnswer = function (choice) { 。

然后我修复了对isWrong的调用，从populate() function 循环调用。

然后我修复了isWrong() function 以将userAnswers中的条目与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();