javascript - JavaScript 函数没有返回正确数量的答案

Question

我正在做一个测验，但我遇到的一个问题是，无论用户回答错误的问题有多少，结果页面总是指出所有 10 个问题都已正确回答。

我需要它来跟踪有多少问题被错误地回答，然后显示正确的分数。例如：10 人中有 5 人回答正确，10 人中有 7 人回答正确等。有人能够查看我的代码并告诉我需要修复什么吗？

let score = 0;
    let currentQuestion = 0;
    let questions = [{
        title: "At what age was Harry Potter when he received his Hogwarts letter?",
        answers: ['7', '10', '11', '13'],
        correct: 1
      },
      {
        title: "Which is not a Hogwarts house?",
        answers: ['Dunder Mifflin', 'Ravenclaw', 'Slytherin', 'Gryffindor'],
        correct: 0
      },
      {
        title: "Who teaches Transfiguration at Hogwarts?",
        answers: ['Rubeus Hagrid', 'Albus Dumbledore', 'Severus Snape', 'Minerva McGonnagle'],
        correct: 3
      },
      {
        title: "Where is Hogwarts School for Witchcraft and Wizardry located?",
        answers: ['France', 'USA', 'UK', 'New Zealand'],
        correct: 2
      },
      {
        title: "What form does Harry Potter's patronus charm take?",
        answers: ['Stag', 'Eagle', 'Bear', 'Dragon'],
        correct: 0
      },
      {
        title: "What type of animal is Harry's pet?",
        answers: ['Dog', 'Owl', 'Cat', 'Snake'],
        correct: 1
      },
      {
        title: "Who is not a member of the Order of the Phoenix?",
        answers: ['Remus Lupin', 'Siruis Black', 'Lucious Malfoy', 'Severus Snape'],
        correct: 2
      },
      {
        title: "What is not a piece of the Deathly Hallows?",
        answers: ['Elder Wand', 'Cloak of Invisibility', 'Resurrection Stone', 'Sword of Gryffindor'],
        correct: 3
      },
      {
        title: "In which house is Harry sorted into after arriving at Hogwarts?",
        answers: ['Slytherin', 'Ravenclaw', 'Gryffindor', 'Hufflepuff'],
        correct: 2
      },
      {
        title: "What prevented Voldemort from being able to kill Harry Potter when he was a baby?",
        answers: ['Love', 'Anger', 'Friendship', 'Joy'],
        correct: 0
      },
    ];



    $(document).ready(function() {

      $('.start a').click(function(e) {
        e.preventDefault();
        $('.start').hide();
        $('.quiz').show();
        showQuestion();
      });

      $('.quiz ul').on('click', 'li', function() {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
      });

      $('.quiz a').click(function(e) {
        e.preventDefault();
        if ($('li.selected').length) {
          let guess = parseInt($('li.selected').attr('id'));
          checkAnswer(guess);
        } else {
          alert('Please select an answer');
        }
      });

      $('.summary a').click(function(e) {
        e.preventDefault();
        restartQuiz();
      });

    });

    function showQuestion() {
      let question = questions[currentQuestion];
      $('.quiz h2').text(question.title);
      $('.quiz ul').html('');
      for (var i = 0; i < question.answers.length; i++) {
        $('.quiz ul').append(`<li id="${i}">${question.answers[i]}</li>`);
      }
      showProgress();
    }

    function showIncorrectQuestion(guess) {
        let question = questions[currentQuestion];
        $('.quiz h2').text(question.title);
        $('.quiz ul').html('');
        for (var i = 0; i < question.answers.length; i++) {
            let cls = i === question.correct ? "selected" : guess === i ? "wrong" : ""
            $('.quiz ul').append(`<li id="${i}" class="${cls}">${question.answers[i]}</li>`);
        }
        showProgress();
    }

    function checkAnswer(guess) {
        let question = questions[currentQuestion];
        if (question.correct === guess) {
            score++;
            showIsCorrect(true);
            currentQuestion++;
            if (currentQuestion >= questions.length) {
                showSummary();
            } else {
                showQuestion();
            }
        } else {
            showIsCorrect(false);
            showIncorrectQuestion(guess);
        }


    }

    function showSummary() {
      $('.quiz').hide();
      $('.summary').show();
      $('.summary p').text("Thank you for taking the quiz! Here's how you scored. You answered " + score + " out of " + questions.length + " correctly! Care to try again?")
    }

    function restartQuiz() {
      $('.summary').hide();
      $('.quiz').show();
      score = 0;
      currentQuestion = 0;
      showQuestion();
    }

    function showProgress() {
      $('#currentQuestion').html(currentQuestion + " out of " + questions.length);
    }

    function showIsCorrect(isCorrect) {
      var result = "Wrong";
      if (isCorrect) {
        result = "Correct";
      }
      $('#isCorrect').html(result);
    }

h1 {
  font-family: 'Poor Story', cursive;
  background-color: #950002;
  padding: 60px;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

h2 {
  font-family: 'Poor Story', cursive;
  font-size: 30px;
  padding: 60px;
  background-color: #950002;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

p {
 font-family: 'Poor Story', cursive;
  background-color: #FFAB0D;
  font-size: 20px;
  font-weight: bold;

}

a {
  border: 1px solid #222F5B;
  padding: 10px;
  background-color: #222F5B;
  color: silver;
  border-radius: 5px;
  margin-top: 50px;
  display: inline-block;
}

a:hover {
  border: 1px solid #000000;
  background-color: #000000;
  color: #FCBF2B;
}

.quiz li {
  cursor: pointer;
  border: 1px solid;
  display: inline-block;
  width: 200px;
  margin: 10px;
  font-family: 'Poor Story', cursive;
  font-size: 26px;
}

#currentQuestion {
  color: #000000;
  font-size: 18px;
  font-family: 'Poor Story', cursive;
  margin-top: 10px;

}

#isCorrect {
  color: white;
  font-family: 'Poor Story', cursive;
  font-weight: bold;
  font-size: 18px;

}

.quiz, .summary {
      display: none;
    }
    
    .quiz ul {
      margin-top: 20px;
      list-style: none;
      padding: 0;
    }
    
    .selected {
      background-color: #398C3F;
    }

.wrong {
    background-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>


  <div class="start">
    <h1>How Well Do You Know Harry Potter?</h1>
    <a href="#">Start Quiz</a>
  </div>


  <div class="quiz">
    <h2>Question Title</h2>
    <ul>
      <li>Choice</li>
      <li>Choice</li>
      <li>Choice</li>
      <li>Choice</li>
    </ul>
    <a href="#">Submit Answer</a>
    <div id="currentQuestion"></div>
    <div id="isCorrect"></div>
  </div>


  <div class="summary">
    <h2>Results</h2>
    <p>Thank you for taking the quiz! Here's how you scored. You answered x out of y correctly! Care to try again?</p>
    <a href="#">Retake Quiz</a>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  

</body>

</html>

标签： javascriptjqueryhtmlcss

Answer 1

我会跟踪一个问题是否已经回答过一次。如果有，按检查答案不会增加分数。

我们可以将“alreadyAnswered”属性存储在当前问题的问题对象中。如果它不存在，那么它是错误的。

代码更改非常简单：

function checkAnswer(guess) {
    let question = questions[currentQuestion];
    if (question.correct === guess) {
        // only update score if not already answered
        if (!question.alreadyAnswered) {
          score++;
        }
        showIsCorrect(true);
        currentQuestion++;
        if (currentQuestion >= questions.length) {
            showSummary();
        } else {
            showQuestion();
        }
    } else {
        showIsCorrect(false);
        showIncorrectQuestion(guess);
    }
    // mark this question as already answered
    question.alreadyAnswered = true;
}

此外，为了解决我们重新参加测验时标记为“已回答”的所有问题的问题：

function restartQuiz() {
  // reset "alreadyAnswered" flags
  questions.forEach(q => q.alreadyAnswered = false);

  $('.summary').hide();
  $('.quiz').show();
  score = 0;
  currentQuestion = 0;
  showQuestion();
}

整个片段：

let score = 0;
    let currentQuestion = 0;
    let questions = [{
        title: "At what age was Harry Potter when he received his Hogwarts letter?",
        answers: ['7', '10', '11', '13'],
        correct: 1
      },
      {
        title: "Which is not a Hogwarts house?",
        answers: ['Dunder Mifflin', 'Ravenclaw', 'Slytherin', 'Gryffindor'],
        correct: 0
      },
      {
        title: "Who teaches Transfiguration at Hogwarts?",
        answers: ['Rubeus Hagrid', 'Albus Dumbledore', 'Severus Snape', 'Minerva McGonnagle'],
        correct: 3
      },
      {
        title: "Where is Hogwarts School for Witchcraft and Wizardry located?",
        answers: ['France', 'USA', 'UK', 'New Zealand'],
        correct: 2
      },
      {
        title: "What form does Harry Potter's patronus charm take?",
        answers: ['Stag', 'Eagle', 'Bear', 'Dragon'],
        correct: 0
      },
      {
        title: "What type of animal is Harry's pet?",
        answers: ['Dog', 'Owl', 'Cat', 'Snake'],
        correct: 1
      },
      {
        title: "Who is not a member of the Order of the Phoenix?",
        answers: ['Remus Lupin', 'Siruis Black', 'Lucious Malfoy', 'Severus Snape'],
        correct: 2
      },
      {
        title: "What is not a piece of the Deathly Hallows?",
        answers: ['Elder Wand', 'Cloak of Invisibility', 'Resurrection Stone', 'Sword of Gryffindor'],
        correct: 3
      },
      {
        title: "In which house is Harry sorted into after arriving at Hogwarts?",
        answers: ['Slytherin', 'Ravenclaw', 'Gryffindor', 'Hufflepuff'],
        correct: 2
      },
      {
        title: "What prevented Voldemort from being able to kill Harry Potter when he was a baby?",
        answers: ['Love', 'Anger', 'Friendship', 'Joy'],
        correct: 0
      },
    ];



    $(document).ready(function() {

      $('.start a').click(function(e) {
        e.preventDefault();
        $('.start').hide();
        $('.quiz').show();
        showQuestion();
      });

      $('.quiz ul').on('click', 'li', function() {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
      });

      $('.quiz a').click(function(e) {
        e.preventDefault();
        if ($('li.selected').length) {
          let guess = parseInt($('li.selected').attr('id'));
          checkAnswer(guess);
        } else {
          alert('Please select an answer');
        }
      });

      $('.summary a').click(function(e) {
        e.preventDefault();
        restartQuiz();
      });

    });

    function showQuestion() {
      let question = questions[currentQuestion];
      $('.quiz h2').text(question.title);
      $('.quiz ul').html('');
      for (var i = 0; i < question.answers.length; i++) {
        $('.quiz ul').append(`<li id="${i}">${question.answers[i]}</li>`);
      }
      showProgress();
    }

    function showIncorrectQuestion(guess) {
        let question = questions[currentQuestion];
        $('.quiz h2').text(question.title);
        $('.quiz ul').html('');
        for (var i = 0; i < question.answers.length; i++) {
            let cls = i === question.correct ? "selected" : guess === i ? "wrong" : ""
            $('.quiz ul').append(`<li id="${i}" class="${cls}">${question.answers[i]}</li>`);
        }
        showProgress();
    }

    function checkAnswer(guess) {
        let question = questions[currentQuestion];
        if (question.correct === guess) {
            if (!question.alreadyAnswered) {
              score++;
            }
            showIsCorrect(true);
            currentQuestion++;
            if (currentQuestion >= questions.length) {
                showSummary();
            } else {
                showQuestion();
            }
        } else {
            showIsCorrect(false);
            showIncorrectQuestion(guess);
        }
        question.alreadyAnswered = true;
    }

    function showSummary() {
      $('.quiz').hide();
      $('.summary').show();
      $('.summary p').text("Thank you for taking the quiz! Here's how you scored. You answered " + score + " out of " + questions.length + " correctly! Care to try again?")
    }

    function restartQuiz() {
      // reset "alreadyAnswered" flags
      questions.forEach(q => q.alreadyAnswered = false);
      
      $('.summary').hide();
      $('.quiz').show();
      score = 0;
      currentQuestion = 0;
      showQuestion();
    }

    function showProgress() {
      $('#currentQuestion').html(currentQuestion + " out of " + questions.length);
    }

    function showIsCorrect(isCorrect) {
      var result = "Wrong";
      if (isCorrect) {
        result = "Correct";
      }
      $('#isCorrect').html(result);
    }

h1 {
  font-family: 'Poor Story', cursive;
  background-color: #950002;
  padding: 60px;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

h2 {
  font-family: 'Poor Story', cursive;
  font-size: 30px;
  padding: 60px;
  background-color: #950002;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

p {
 font-family: 'Poor Story', cursive;
  background-color: #FFAB0D;
  font-size: 20px;
  font-weight: bold;

}

a {
  border: 1px solid #222F5B;
  padding: 10px;
  background-color: #222F5B;
  color: silver;
  border-radius: 5px;
  margin-top: 50px;
  display: inline-block;
}

a:hover {
  border: 1px solid #000000;
  background-color: #000000;
  color: #FCBF2B;
}

.quiz li {
  cursor: pointer;
  border: 1px solid;
  display: inline-block;
  width: 200px;
  margin: 10px;
  font-family: 'Poor Story', cursive;
  font-size: 26px;
}

#currentQuestion {
  color: #000000;
  font-size: 18px;
  font-family: 'Poor Story', cursive;
  margin-top: 10px;

}

#isCorrect {
  color: white;
  font-family: 'Poor Story', cursive;
  font-weight: bold;
  font-size: 18px;

}

.quiz, .summary {
      display: none;
    }
    
    .quiz ul {
      margin-top: 20px;
      list-style: none;
      padding: 0;
    }
    
    .selected {
      background-color: #398C3F;
    }

.wrong {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="start">
    <h1>How Well Do You Know Harry Potter?</h1>
    <a href="#">Start Quiz</a>
  </div>


  <div class="quiz">
    <h2>Question Title</h2>
    <ul>
      <li>Choice</li>
      <li>Choice</li>
      <li>Choice</li>
      <li>Choice</li>
    </ul>
    <a href="#">Submit Answer</a>
    <div id="currentQuestion"></div>
    <div id="isCorrect"></div>
  </div>


  <div class="summary">
    <h2>Results</h2>
    <p>Thank you for taking the quiz! Here's how you scored. You answered x out of y correctly! Care to try again?</p>
    <a href="#">Retake Quiz</a>
  </div>