测验结束后如何展示错题？isWrong函数失效问题求助

Hey there! Let's figure out why your isWrong() function isn't working and fix it step by step. The core issue right now is that your code doesn't track the user's answers for each question, so you can't compare them to the correct answers later. Plus, the current isWrong() logic uses prompts and recursive calls which aren't suited for showing post-quiz wrong answers.

First, fix answer tracking #

Your Quiz class needs to store every answer the user selects. Let's update it:

function Quiz(questions) {
  this.score = 0;
  this.questions = questions;
  this.questionIndex = 0;
  this.userAnswers = []; // Add this array to track user's choices
}

Then update the guess method to save each answer as the user makes it:

Quiz.prototype.guess = function (answer) {
  this.userAnswers.push(answer); // Save the user's choice
  if (this.getQuestionIndex().isCorrectAnswer(answer)) {
    this.score++;
  }
  this.questionIndex++;
};

Rewrite the wrong answer display function #

The original isWrong() function doesn't fit your use case. Let's replace it with a function that generates clean HTML to show all incorrect answers after the quiz ends:

function getWrongAnswersHTML() {
  let wrongHTML = "<h3>Your Wrong Answers:</h3>";
  let wrongCount = 0;

  for (let i = 0; i < quiz.questions.length; i++) {
    const question = quiz.questions[i];
    const userAnswer = quiz.userAnswers[i];

    if (!question.isCorrectAnswer(userAnswer)) {
      wrongCount++;
      wrongHTML += `
        <div style="margin: 15px 0; padding: 10px; border-left: 3px solid #dc3545;">
          <p><strong>Question ${i+1}:</strong> ${question.text}</p>
          <p>Your Answer: <span style="color: #dc3545;">${userAnswer}</span></p>
          <p>Correct Answer: <span style="color: #28a745;">${question.answer}</span></p>
        </div>
      `;
    }
  }

  if (wrongCount === 0) {
    wrongHTML += "<p style='color: #28a745;'>Great job! You got all questions right!</p>";
  }

  return wrongHTML;
}

Update the score display function #

Right now, showScores() replaces the quiz container's HTML, so calling isWrong() after it won't work. Let's modify showScores() to include the wrong answers directly in the results:

function showScores() {
  let gameOverHTML = "<h1>Result</h1>";
  gameOverHTML += `<h2 id='score'> Your Score: ${quiz.score} / ${quiz.questions.length}</h2>`;
  // Add the wrong answers section
  gameOverHTML += getWrongAnswersHTML();
  
  const element = document.getElementById("quiz");
  element.innerHTML = gameOverHTML;
}

Clean up unused code #

• Remove the old isWrong() function since we replaced it with getWrongAnswersHTML().
• In your populate() function, delete the isWrong() call after showScores() (we now include that content directly in the score display).

Full modified JavaScript code #

function Quiz(questions) {
  this.score = 0;
  this.questions = questions;
  this.questionIndex = 0;
  this.userAnswers = []; // Track user's answers
}

Quiz.prototype.getQuestionIndex = function () {
  return this.questions[this.questionIndex];
};

Quiz.prototype.guess = function (answer) {
  this.userAnswers.push(answer); // Save user's choice
  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();
  } else {
    const element = document.getElementById("question");
    element.innerHTML = quiz.getQuestionIndex().text;

    const choices = quiz.getQuestionIndex().choices;
    for (let i = 0; i < choices.length; i++) {
      const element = document.getElementById("choice" + i);
      element.innerHTML = choices[i];
      guess("btn" + i, choices[i]);
    }

    showProgress();
  }
}

function guess(id, guess) {
  const button = document.getElementById(id);
  button.onclick = function () {
    quiz.guess(guess);
    populate();
  };
}

function getWrongAnswersHTML() {
  let wrongHTML = "<h3>Your Wrong Answers:</h3>";
  let wrongCount = 0;

  for (let i = 0; i < quiz.questions.length; i++) {
    const question = quiz.questions[i];
    const userAnswer = quiz.userAnswers[i];

    if (!question.isCorrectAnswer(userAnswer)) {
      wrongCount++;
      wrongHTML += `
        <div style="margin: 15px 0; padding: 10px; border-left: 3px solid #dc3545;">
          <p><strong>Question ${i+1}:</strong> ${question.text}</p>
          <p>Your Answer: <span style="color: #dc3545;">${userAnswer}</span></p>
          <p>Correct Answer: <span style="color: #28a745;">${question.answer}</span></p>
        </div>
      `;
    }
  }

  if (wrongCount === 0) {
    wrongHTML += "<p style='color: #28a745;'>Great job! You got all questions right!</p>";
  }

  return wrongHTML;
}

function showProgress() {
  const currentQuestionNumber = quiz.questionIndex + 1;
  const element = document.getElementById("progress");
  element.innerHTML = `Question ${currentQuestionNumber} of ${quiz.questions.length}`;
}

function showScores() {
  let gameOverHTML = "<h1>Result</h1>";
  gameOverHTML += `<h2 id='score'> Your Score: ${quiz.score} / ${quiz.questions.length}</h2>`;
  gameOverHTML += getWrongAnswersHTML();
  
  const element = document.getElementById("quiz");
  element.innerHTML = gameOverHTML;
}

const 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
const quiz = new Quiz(questions);

// Show Quiz
populate();

Your HTML can stay unchanged #

The existing structure works perfectly with the modified JavaScript.

Now when the quiz ends, you'll see your score alongside a clear breakdown of any wrong answers—showing exactly what you picked vs. the correct answer.

内容的提问来源于stack exchange，提问作者Sulman Ali