Hinweis: Ein Fehler in meinem Quiz führt zu einer unendlichen Erhöhung der Punktzahl, wenn mehrmals auf die richtige Antwort gedrückt wird

Question

Also, ich erstelle eine CSS-Animation für meinen Abschluss und habe das Quiz so eingerichtet, dass es Fragen mit spezifischen Antworten durchläuft, das Quiz voll funktionsfähig ist usw. Allerdings ist mir das aufgefallen, als ich richtig gedrückt habe Wenn Sie eine Antwort mehrmals eingeben, erhöht sich die Punktzahl, auch wenn die Antwort bereits ausgewählt wurde und die anfängliche Punktzahlerhöhung hinzugefügt wurde. Es beginnt mit einem Bildschirm mit Text darauf, der die Erzählung für das Spiel liefert, das wir erstellen, was auch erwartet wird.

Dies ist ein Einzelseiten-Setup, bei dem sich alle Seiten in einem übergeordneten Container befinden und die Seiten in untergeordneten Containern durchlaufen.

Code zum Stylen mit JQuery, HTML und 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>

Jede Erklärung, wie dieses Problem behoben werden kann, wäre sehr dankbar. Auch wenn Benutzer den Fehler möglicherweise nicht finden können, möchte ich dennoch alle Grundlagen abdecken und sicherstellen, dass er behoben wird, um die Integrität des Spieldesigns zu gewährleisten.

Ich habe versucht hinzuzufügen:

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

Allerdings gab es einen Fehler im Entwicklermodus von Google, also habe ich ihn entfernt, aber er hat die Probleme, die ich hatte, immer noch nicht behoben, was dann auch zu weiteren Problemen geführt hat, da ich nicht auf die Schaltfläche „Weiter“ klicken konnte und den deaktiviert habe Auswahlverfahren nach vollständigem Drücken der ersten richtigen Antwort.

Answer 1

我认为你必须迭代你的答案框。

调整此问题的示例和以下答案（ jQuery 循环遍历具有相同类的元素），您应该将 JS 代码更改为：

$('.answer-box').each(function(){
     $(this).prop('disabled', true);
 });

Answer 2

这里我添加了计算分数增加时的课程

试试这个JSFiddle

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 && $(".score").hasClass('calculated') == false) {
        // got it correct
        score += 10;
        $(".score").html(score);
        $(".score").addClass('calculated');
    } else {
        // got it wrong so do nothing
    }
    // show feedback and next button
    $("#next-btn").removeClass("hidden");
    $("#feedback").removeClass("hidden");
}

并在 nextQuestion() 的开头添加

$(".score").removeClass('calculated');