我正在创建一个测验应用程序，它从API中提取数据，构建一系列问题，然后每次在测验页面上加载不同数量的“答案元素”，具体取决于从数组中随机选择的问题。
下面是创建一系列可点击的“玩家卡片”的功能，这些卡片是CSS卡片样式的有效答案。其思想是用户选择一张卡片，然后点击检查按钮来运行功能以检查是否正确。
除了一件事，该功能运行良好。用户可以选择所有卡。
我遇到的问题是，你可以点击所有答案，它们都会得到CSS类，所有选中的卡片/答案的数据都会被传递。
我只想让用户选择一个答案。他们可以点击任何卡，并改变主意，但他们应该永远只有一个答案，他们可以选择，并反过来处理答案检查功能。
我想不出如何做到这一点？有人能帮助我了解我需要如何改变这个代码发生？

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