خطأ في تصميم تطبيق Quiz

المشكلة الأساسية في تطبيقك هي كيفية إضافة مستمع للحدث إلى عناصر الاختيار داخل وظيفة ()makeQuiz. حيث في كل مرة يتم النقر فيها على خيار، لا تتم إزالة مستمع الحدث من الأسئلة السابقة، مما يؤدي إلى تكديسهم وتنفيذهم عدة مرات. وهذه يؤدي إلى سلوك غير صحيح في التطبيق، مثل تمييز إجابات متعددة أو تلوين الإجابات الصحيحة بشكل غير صحيح.


قبل إضافة مستمع حدث جديد إلى الاختيار، يجب إزالة المستمع القديم لمنع عدة مستمعين من التكديس على نفس العنصر.

يمكنك تجربة هذه الكود بعد التحسين وحل المشكله
 

const questions = [
  {
    question: "which is largest animal in the world?",
    answers: [
      { text: "Shark", correct: false },
      { text: "Blue whale", correct: true },
      { text: "Elephant", correct: false },
      { text: "Giraffe", correct: false },
    ],
  },
  {
    question: "Which is the smallest continent in the world?",
    answers: [
      { text: "Asia", correct: false },
      { text: "Australia", correct: true },
      { text: "Arctic", correct: false },
      { text: "Africa", correct: false },
    ],
  },
  {
    question: "Which is the smallest country in the world?",
    answers: [
      { text: "Vatican City", correct: true },
      { text: "Bhutan", correct: false },
      { text: "Nepal", correct: false },
      { text: "Shri Lanka", correct: false },
    ],
  },
  {
    question: "Which is the more popular programmation language?",
    answers: [
      { text: "JIK", correct: false },
      { text: "Batata", correct: false },
      { text: "Javascript", correct: true },
      { text: "Youssef", correct: false },
    ]
  }
];

const quiz = document.querySelector(".quiz");
const questionTitle = document.getElementById("quiz-question");
const choices = document.querySelectorAll(".quiz__choice");
const nextButton = document.getElementById("next-button");

const score = document.querySelector(".score");
const scoreNumber = document.getElementById("score-number");
const numberOfQuestions = document.getElementById("score-questionsNumber");

let scoreCounter = 0;
let questionCounter = 0;

const againButton = document.getElementById("score-again");

makeQuiz(0);

nextButton.addEventListener("click", function () {
  if (questionCounter < questions.length) {
    makeQuiz(questionCounter);
    choices.forEach(function (choice) {
      choice.classList.remove("quiz__answer--correct", "quiz__answer--wrong");
    }) 
  } else {
    quiz.style.display = "none";
    score.style.display = "block";
    scoreNumber.textContent = scoreCounter;
    numberOfQuestions.textContent = questions.length;
  }
})

function makeQuiz(questionIndex) {
    // Reset quiz state for the new question
    nextButton.disabled = true;
    choices.forEach(function (choice) {
        choice.classList.remove("quiz__answer--correct", "quiz__answer--wrong");
    });

    questionTitle.textContent = questions[questionIndex].question;
    let answers = questions[questionIndex].answers;

    choices.forEach(function (choice, answersIndex) {
        choice.textContent = answers[answersIndex].text;
        // Remove previous click listeners
        choice.onclick = null; // This line effectively removes any click event listener previously assigned.
        // Assign new click listener
        choice.onclick = function() {
            // Determine if the selected answer is correct
            const isCorrect = answers[answersIndex].correct;
            if (isCorrect) {
                choice.classList.add("quiz__answer--correct");
                scoreCounter++;
            } else {
                choice.classList.add("quiz__answer--wrong");
                // Highlight the correct answer
                choices.forEach(function (item, itemIndex) {
                    if (answers[itemIndex].correct) {
                        item.classList.add("quiz__answer--correct");
                    }
                });
            }
            // Prevent further choices from being clicked
            disableChoices();
            nextButton.disabled = false;
        };
    });

    questionCounter++;
}

function disableChoices() {
    choices.forEach(function(choice) {
        choice.onclick = null; // This disables further clicks on choices.
    });
}

وعليكم السلام ورحمة الله وبركاته .

اولا ساشرح لك لما يحدث الخطأ لديك .

حينما تقوم باضافة مستمع للحدث (event listener) فانت تضيفه على كل الاجابات مع كل سؤال .

اى لو ان لديك 4 اسئله فانت تضيف events listner على كل اجابة 4 مرات . ومع كل click على الاجابة فسيتم تنفيذها بعدد الاسئلة . اى ان فى السؤال الثالث و الاخير فانه يتم تنفيذ الكود الخاص بالتحقق من الاسئلة السابقة ايضا لذلك يظهر اكثر من اجابة صحيحة.

ويحدث الخطأ لديك فى السؤال الثالث والاخير لان الاجابة الصحيحة ليس الاجابة رقم 2 . قم بتبديل مكان الاجابة الصحيحة للسؤال الثانى وسيظهر الخطأ فيه هو ايضا .

والحل لذلك هو حذف الاجابات القديمة وانشاء اجابات جديدة مع كل سؤال .

وهذا هو الكود كاملا بعد التعديل.

const questions = [
  {
    question: "which is largest animal in the world?",
    answers: [
      { text: "Shark", correct: false },
      { text: "Blue whale", correct: true },
      { text: "Elephant", correct: false },
      { text: "Giraffe", correct: false },
    ],
  },
  {
    question: "Which is the smallest continent in the world?",
    answers: [
      { text: "Asia", correct: false },
      { text: "Australia", correct: true },
      { text: "Arctic", correct: false },
      { text: "Africa", correct: false },
    ],
  },
  {
    question: "Which is the smallest country in the world?",
    answers: [
      { text: "Vatican City", correct: true },
      { text: "Bhutan", correct: false },
      { text: "Nepal", correct: false },
      { text: "Shri Lanka", correct: false },
    ],
  },
  {
    question: "Which is the more popular programmation language?",
    answers: [
      { text: "JIK", correct: false },
      { text: "Batata", correct: false },
      { text: "Javascript", correct: true },
      { text: "Youssef", correct: false },
    ]
  }
];

const quiz = document.querySelector(".quiz");
const questionTitle = document.getElementById("quiz-question");
let choices = document.querySelectorAll(".quiz__choice");
const nextButton = document.getElementById("next-button");

const score = document.querySelector(".score");
const scoreNumber = document.getElementById("score-number");
const numberOfQuestions = document.getElementById("score-questionsNumber");

let scoreCounter = 0;
let questionCounter = 0;

const againButton = document.getElementById("score-again");

makeQuiz(0);

nextButton.addEventListener("click", function () {
  if (questionCounter < questions.length) {
    makeQuiz(questionCounter);
    choices = document.querySelectorAll(".quiz__choice");
    choices.forEach(function (choice) {
      choice.classList.remove("quiz__answer--correct", "quiz__answer--wrong");
    })
  } else {
    quiz.style.display = "none";
    score.style.display = "block";
    scoreNumber.textContent = scoreCounter;
    numberOfQuestions.textContent = questions.length;
  }
})

function makeQuiz(questionIndex) {
  questionTitle.textContent = questions[questionIndex].question;
  let answers = questions[questionIndex].answers;
  choices = document.querySelectorAll(".quiz__choice");
  choices.forEach(function (choice, answersIndex) {
    choice.textContent = answers[answersIndex].text;
    var new_element = choice.cloneNode(true);
    choice.parentNode.replaceChild(new_element, choice);
    new_element.addEventListener("click", function () {
      if (answers[answersIndex].correct) {
        new_element.classList.add("quiz__answer--correct");
        scoreCounter++;

      } else {
        new_element.classList.add("quiz__answer--wrong");
        choices = document.querySelectorAll(".quiz__choice");
        choices.forEach(function (item, answersInd) {
          if (answers[answersInd].correct === true) {
            item.classList.add("quiz__answer--correct");
          }
        })

      }
      nextButton.disabled = false;
    });
  });
  questionCounter++;
}

بعد محاولات معينة وإجابات الأعضاء الكرام إكتشفت أن السبب في هذا هو أن Addeventlistener يقبل إضافة العديد من الـ Events للعنصر الواحد, لذلك استخدامي للـ onclick حل المشكلة