Question

我正在做一个测验，需要一些帮助来使任务正确执行。如果用户提交了错误的答案，则会向他们显示结果以及该问题的正确答案。发生这种情况时，我想为我的“提交答案”按钮说“下一个问题”，然后使用户进入下一个问题。我该如何编写可以执行此任务的功能？

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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  background-color: #837F73;
}

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>

Answer 1

您将需要第二个按钮在它们之间切换

 <a class="submit" href="#">Submit Answer</a>
 <a class="navigate" style="display:none;" href="#">Next Question</a>

js

  $('.quiz a.submit').click(function(e) {//change the selector to the answer button only
    e.preventDefault();
    if ($('li.selected').length) {
      let guess = parseInt($('li.selected').attr('id'));
      checkAnswer(guess);
    } else {
      alert('Please select an answer');
    }
  });

function checkAnswer(guess) {
  let question = questions[currentQuestion];
  if (question.correct === guess) {
    if (!question.alreadyAnswered) {
      score++;
    }
    showIsCorrect(true);
     //remove the code for go to the next page
  } else {
    showIsCorrect(false);
    showIncorrectQuestion(guess);
  }
  question.alreadyAnswered = true;
}

function showIsCorrect(isCorrect) {
  var result = "Wrong";
  if (isCorrect) {
    result = "Correct";
  }
  $('#isCorrect').html(result);
  $('.navigate').show();//toggle the buttons
  $('.submit').hide();
}
$('.navigate').click(function() {
  currentQuestion++;//go to the next question or summary
  if (currentQuestion >= questions.length) {
    showSummary();
  } else {
    showQuestion();
  }

  $('.navigate').hide();//toggle the buttons
  $('.submit').show();
  $('#isCorrect').html('');
})

demo

Answer 2

JS：

    $(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);
          $('#submitBtn').text('Next');
        } else {
          alert('Please select an answer');
        }
      });    

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

    function showQuestion() {
      var buttonTxt = $('a#submitBtn').text();
      if (buttonTxt == "Next")
         $('a#submitBtn').text('Submit Answer');
      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() {
      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);

    }

HTML：

<a id="submitBtn" href="#">Submit Answer</a>

在进入下一页之前如何更改按钮的文字？

2 个答案: