标题重写：我的测验中的错误导致多次按下正确答案时得分无限增加
所以，我正在为我的学位创建一个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);
但是，在谷歌的开发者模式下出现了一个错误，所以我删除了它，但它仍然无法阻止我遇到的问题，然后这也导致了更多问题，不允许我按下一步按钮，并且会完全按下第一个正确答案后禁用选择过程。
