Saya sedang mencipta apl kuiz yang menarik data daripada API, membina satu siri soalan, dan kemudian memuatkan bilangan "elemen jawapan" yang berbeza pada halaman kuiz setiap kali, bergantung pada soalan yang dipilih secara rawak daripada tatasusunan.

Di bawah ialah fungsi untuk mencipta satu siri "kad pemain" boleh klik yang merupakan jawapan yang berkesan untuk penggayaan kad CSS. Ideanya ialah pengguna memilih kad dan kemudian mengklik butang semak untuk menjalankan fungsi untuk menyemak sama ada ia betul.

Ciri ini berfungsi dengan baik kecuali untuk satu perkara. Pengguna boleh memilih semua kad.

Masalah yang saya ada ialah anda boleh mengklik pada semua jawapan dan semuanya mendapat kelas CSS dan data dihantar ke semua kad/jawapan yang dipilih.

Saya hanya mahu pengguna memilih satu jawapan. Mereka boleh mengklik pada mana-mana kad dan kemudian mengubah fikiran mereka, tetapi mereka hanya boleh memilih jawapan dan kemudian meneruskan melalui ciri semakan jawapan.

Saya tak tahu nak buat apa? Bolehkah sesiapa membantu saya memahami bagaimana saya perlu menukar kod ini untuk mencapai ini?

function addClickEvent(answers) {
  const playerCard = document.querySelectorAll(".player-card");
  for (i = 0; i < playerCard.length; i++) {
    playerCard[i].setAttribute("id", [i]);
    playerCard[i].addEventListener("click", (e) => {
      clickedPlayer = e.target;
      clickedPlayer.classList.add("border-lime-500");
      clickedPlayer.classList.add("border-8");
      let userAnswer = answers[clickedPlayer.id];
      
      checkButton.addEventListener("click", () => {
        checkAnswer(userAnswer, answers);
      });
    });
  }
}