Je crée une application de quiz qui extrait les données d'une API, crée une série de questions, puis charge à chaque fois un nombre différent d'"éléments de réponse" sur la page du quiz, en fonction de la question sélectionnée au hasard dans le tableau.

Vous trouverez ci-dessous la fonctionnalité permettant de créer une série de "cartes de joueur" cliquables qui constituent une réponse efficace au style des cartes CSS. L'idée est que l'utilisateur sélectionne une carte puis clique sur le bouton de vérification pour exécuter la fonction afin de vérifier si elle est correcte.

La fonctionnalité fonctionne bien sauf pour une chose. Les utilisateurs peuvent sélectionner toutes les cartes.

Le problème que j'ai est que vous pouvez cliquer sur toutes les réponses et elles obtiennent toutes la classe CSS et les données sont transmises à toutes les cartes/réponses sélectionnées.

Je veux juste que l'utilisateur choisisse une réponse. Ils peuvent cliquer sur n’importe quelle carte puis changer d’avis, mais ils ne peuvent sélectionner qu’une réponse, puis passer par la fonction de vérification des réponses.

Je ne sais pas quoi faire ? Quelqu'un peut-il m'aider à comprendre comment je dois modifier ce code pour y parvenir ?

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);
      });
    });
  }
}