所以，我正在为我的学位创建一个CSS动画，并且我有测验设置，以便它循环通过带有具体答案的问题，测验功能齐全等等......但是，我注意到当正确时多次按下答案时，分数会增加，即使已经选择了答案并且已添加初始分数增加。它首先是一个屏幕，上面有文字，为我们正在创建的游戏提供叙述，这也符合预期。

这是一种单页面设置，其中所有页面都位于一个父容器内，并循环调用子容器上的页面。

使用 JQuery 和 HTML 以及 CSS 来设置样式的代码。

    // --------------------------Multiple Choice Page------------------------//

    $("#start-button").click(function() {
      $("#beginning-screen").remove();
      ;})

      $("#start-button-quiz").click(function() {
        $("#beginning-screen-quiz").remove();
        ;})

    $('#answer1').click(function(){
      $(this).addClass("selected");
      setTimeout(function() {
          checkAnswer(1);
      },1000);
    });
    $('#answer2').click(function(){
      $(this).addClass("selected")
      setTimeout(function() {
          checkAnswer(2);
      },1000);
    });
    $('#answer3').click(function(){
      $(this).addClass("selected")
      setTimeout(function() {
          checkAnswer(3);
      },1000);
    });

    $('#next-btn').click(function(){
      nextQuestion();
    });
    nextQuestion();

});

// --------------------------- Multiple Choice Page functions and variables -------------------------------------

// Study Page

var currentBox = 1;
var numBoxes = $('.text-box').length;


// variables here

var quizData = [
  {question:"If the size of a battery in a complete circuit is increased:",
   answers:["the current decreases","the current increases","the voltage stays the same"],
   correctAnswer:2,
   feedback:"An increase in voltage will increase the current flowing in a circuit (if nothing else is changed) Click to next page find out more."
  },
   {question:"The current in a series circuit containing two bulbs:",
   answers:["is the same at every place in the circuit","is larger nearer the battery","is larger between the bulbs"],
   correctAnswer:1,
   feedback:"This is an important point to remember about a series circuit. Click to next page find out more."
  },
  {question:"Two identical bulbs are in parallel in a complete circuit. If one breaks:",
   answers:["the other stays on","the other goes off","the other bulb is brighter"],
   correctAnswer:1,
   feedback:"This is a benefit of a parallel circuit, it is usually easier to find out which component has broken as the rest still work"
  },
  {question:"Wires are usually coated in plastic because:",
   answers:["plastic is an insulator","plastic can be lots of different colours","plastic helps the wires conduct electricity"],
   correctAnswer:1,
   feedback:"Wires used to be covered with rubber as an insulator but rubber perishes faster than plastic."
  },
  {question:"Which of the following statements is true?",
   answers:["A voltmeter is connected in series to measure voltage.","Different sized bulbs in parallel have the same current flowing through them.","In a parallel circuit with four identical bulbs, the current is shared equally between them."],
   correctAnswer:3,
   feedback:"If the four bulbs were NOT identical, the current would still be shared out, but not equally."
  },
  {question:"Wires are normally made from copper. This is because:",
   answers:["copper has a high resistance","copper is cheap","copper is a very good conductor of electricity"],
   correctAnswer:3,
   feedback: "It is also very malleable and can therefore easily be bent to go round corners."
  },
  {question:"Two identical bulbs are in parallel in a complete circuit. A third identical bulb is connected in parallel. What happens?",
   answers:["All the bulbs are dimmer","All the bulbs are the same brightness","The third bulb is brighter"],
   correctAnswer:2,
   feedback:"Adding identical bulbs in parallel uses more current but brightness stays the same."
  },
];


var currentQuestion = 0;
var totalQuestions = quizData.length;
var score = 0;

function showQuestion(){
$("#question").html(quizData[currentQuestion-1].question);
$("#answer1").html(quizData[currentQuestion-1].answers[0]);
$("#answer2").html(quizData[currentQuestion-1].answers[1]);
$("#answer3").html(quizData[currentQuestion-1].answers[2]);
$("#feedback").html(quizData[currentQuestion-1].feedback);
}

function nextQuestion(){
currentQuestion++;

if(score >= 60){
  $("#answersAndFeedback").addClass('hidden');
  $("#question").addClass('hidden');
  $("#game-over").removeClass('hidden');
  $('.p2-button').removeClass('hidden');
  $("#next-btn").addClass("hidden");
  return;
}

if(currentQuestion > totalQuestions){
  // end of quiz
  $("#game-over").removeClass('hidden');
  return;
}

showQuestion();

// hide feedback and next button
$("#next-btn").addClass("hidden");
$("#feedback").addClass("hidden");
// remove all incorrect, correct classes on answer buttons
$('.answer-box').removeClass("correct incorrect");

// add restart button if score is under 60
if(score < 60){
  $("#feedback").append('<button id="restart-btn" onclick="location.reload();">Restart Quiz</button>');
  $('.p2-button').addClass('hidden');
}
}


function checkAnswer(selectedAnswer){
var theCorrectAnswer = quizData[currentQuestion-1].correctAnswer;
// remove the grey selected class
$('.answer-box').removeClass("selected");

// turn the boxes red or green depending on if they are the correct answer
$( ".answer-box" ).each(function( index ) {
  if((index+1)==theCorrectAnswer){
    $( this ).addClass("correct");
  } else {
    $( this ).addClass("incorrect");
  }
});

if(selectedAnswer==theCorrectAnswer){
  // got it correct
  score += 10;
  $(".score").html(score);
} else {
  // got it wrong so do nothing
}
// show feedback and next button
$("#next-btn").removeClass("hidden");
$("#feedback").removeClass("hidden");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Multiple Choice Page -->

<div class="page-multiple-choice">
    <div id="beginning-screen-quiz">
        <h1 id="heading-quiz">Oh no! it looks like you have been locked out of the computer system. You will have to take this quiz in order to regain access, you must get a score of 60 in order to bypass the security system.</h1>
        <button id="start-button-quiz">Hack into security</button>
    </div>
    <h1>Multiple Choice Quiz</h1>
    <div class="p2-button button">
        Fix the circuit
    </div>
    <div class="p-menu-button button">
        Go back to menu
    </div>
    <div id="wrapper">
        <div id="question">Sample question here</div>
        <div id="answersAndFeedback">
            <div id="answer1" class="answer-box">Answer 1</div>
            <div id="answer2" class="answer-box">Answer 2</div>
            <div id="answer3" class="answer-box">Answer 3</div>
            <div id="feedback" class="hidden">Feedback goes here</div>
        </div>
        <div class="score">0</div>
        <div id="next-btn" class="hidden">next</div>
        <div id="game-over" class="hidden">Congratulations! Continue to the next page!</div>
    </div>
</div>

任何如何解决此问题的解释将不胜感激，尽管用户可能找不到该错误，但我仍然想涵盖所有基础并确保它已修复以保证游戏设计的完整性。

我尝试添加：

// Disable all answer boxes to prevent further selection
  $('.answer-box').prop('disabled', true);

但是，在谷歌的开发者模式下出现了一个错误，所以我删除了它，但它仍然无法阻止我遇到的问题，然后这也导致了更多问题，不允许我按下一步按钮，并且会完全按下第一个正确答案后禁用选择过程。