标题重写：Pepijat dalam kuiz saya menyebabkan peningkatan markah tidak terhingga apabila jawapan yang betul ditekan beberapa kali

Question

Jadi, saya sedang mencipta animasi CSS untuk ijazah saya, dan saya telah menyediakan kuiz supaya ia berpusing melalui soalan dengan jawapan khusus, kuiz berfungsi sepenuhnya, dsb... Walau bagaimanapun, saya perasan bahawa apabila betul Apabila menekan jawapan beberapa kali, markah akan meningkat, walaupun jawapan telah dipilih dan peningkatan markah awal telah ditambah. Ia bermula dengan skrin dengan teks padanya untuk menyediakan naratif untuk permainan yang kami cipta, yang juga adalah apa yang diharapkan.

Ini ialah persediaan halaman tunggal di mana semua halaman berada di dalam bekas induk dan melingkari halaman pada bekas anak.

Kod untuk gaya menggunakan JQuery dan HTML dan 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>

Sebarang penjelasan tentang cara membetulkan isu ini amat dihargai, walaupun pengguna mungkin tidak dapat mencari pepijat, saya masih mahu merangkumi semua asas dan memastikan ia dibetulkan untuk integriti reka bentuk permainan.

Saya cuba menambah:

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

Walau bagaimanapun, terdapat pepijat dalam mod pembangun Google, jadi saya mengalih keluarnya, tetapi ia masih tidak menghentikan isu yang saya hadapi, yang kemudiannya turut menyebabkan lebih banyak isu, tidak membenarkan saya menekan butang seterusnya, dan akan melumpuhkan proses pemilihan selepas menekan sepenuhnya jawapan betul pertama.

Answer 1

Saya rasa anda perlu mengulangi kotak jawapan anda.

Menyesuaikan contoh daripada soalan ini dan jawapan di bawah ( gelung jQuery ke atas elemen dengan kelas yang sama ), anda harus menukar kod JS anda kepada:

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

Answer 2

Di sini saya tambahkan pengiraanpelajaran apabila pecahan bertambah

Cuba ini 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");
}

dan tambah nextQuestion() pada permulaan

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