使用JavaScript更新测验跟踪答案div

我正在开发一个简单的测验应用程序，其中包含香草JavaScript和HTML。知道所选答案是否正确并显示一些反馈的功能正在发挥作用，但当选择问题的单选按钮时，将

.quick\u marker

div的数据属性设置为“correct”或“increct”的功能不起作用。我的简化代码包含在下面的代码段中

我已将

.quick\u标记

div设置为绿色或红色，具体取决于选择的答案是否正确。如您所见，当选择单选按钮时，所有圆圈都设置为绿色或红色

我应该如何调整我的JS代码，使其只对单个圆圈应用颜色更改？另外，我需要实现什么才能在整个测验期间保持颜色

我一边学习JavaScript。香草JS答案优先

干杯

更新-包括完整的quick.js以供审查

function answerTracker() {
  const tracker = document.querySelector(".quiz__tracker");
  // Each quiz contains eight or less questions
  const questions = 8;
  for (let i = 1; i <= questions; i++) {
    let trackerMarker = document.createElement("div");
    trackerMarker.className = "quiz__marker";
    trackerMarker.id = "marker_" + i;
    trackerMarker.setAttribute("data-answer", "");
    tracker.appendChild(trackerMarker);
  }
}

function questionMarkers() {
  let labels = document.querySelectorAll("div[class*='rsform-block-question'] .formControlLabel");
  let count = labels.length;
  for (let i = 0; i < count; i++) {
    let marker = `<span class="question-marker">${i + 1}</span>`;
    labels[i].insertAdjacentHTML("beforebegin", marker);
  }
}

const runQuiz = (() => {
  // Generate tracker
  answerTracker();

  // Append question markers to labels
  questionMarkers();

  // Set quiz score to zero
  let score = 0;

  let markers = document.querySelectorAll(".quiz__marker");

  let answers = document.querySelectorAll(".rsform-radio");
  answers.forEach(function (answer) {
    answer.addEventListener("click", (e) => {
      let target    = e.target;
      let container = target.closest(".formContainer");
      let correct   = container.querySelector("div[class$='true']");
      let wrong     = container.querySelector("div[class$='false']");
      let feedback  = container.querySelector("div[class$='feedback']");
      let question  = container.querySelector("div[class*='rsform-block-question']");
      let next      = container.querySelector(".js-btn--next.success");
      let submit    = container.querySelector(".js-btn--submit.rsform-submit-button");

      if (e.target.value == "t") {
        // If answer is correct, increment the user's score by one
        score++;
        correct.style.display = "block";
        wrong.style.display = "none";
        feedback.style.display = "block";
        document.getElementById("marker_" + e.target.dataset.num).setAttribute("data-answer", "Correct");
      } else {
        correct.style.display = "none";
        wrong.style.display = "block";
        feedback.style.display = "block";
        document.getElementById("marker_" + e.target.dataset.num).setAttribute("data-answer", "Incorrect");
      }
  
      if (next !== null && next !== "") {
        next.style.display = "block";
      }
  
      if (submit !== null && submit !== "") {
        submit.style.display = "block";
      }
      question.style.display = "none";
    });
  });
  // If this is the final question in the quiz, assign the score variable to the final-score hidden HTML field
  // document.getElementById("final-score").value = score;
})();

吸引配偶


保护自己免受捕食者的攻击


标记他们的领土


因为他们喜欢这味道

正确


不错的尝试

臭鼬散发出一种极为令人厌恶的气味，让捕食者离开，让他们独处。如果他们感到自己的生命处于危险之中，他们就没有其他防御手段，因为他们不能跑得快，不能爬，不能在地下挖洞，也不能战斗

下一个
一杯


源源不断


2汤匙


1茶匙

正确


不错的尝试

臭鼬只有2汤匙（30毫升）的喷雾，需要一周多的时间才能补充。它们不能每天喷洒，因为它们很快就会用完。臭鼬使用喷雾剂作为最后的手段，就好像它们用完了一样，它们无法抵御捕食者

下一个

您需要为测验标记添加一些特征“标记”，例如带有问题编号的id：

  for (let i = 1; i <= questions; i++) {
    let trackerMarker = document.createElement("div");
    trackerMarker.className = "quiz__marker";
    trackerMarker.id = "marker_" + i; // specific id for each marker
    trackerMarker.setAttribute("data-answer", "");
    tracker.appendChild(trackerMarker);
  }

我看不到要处理的代码，单击next按钮，但这与问题无关

function answerTracker（）{
const tracker=document.querySelector（“.quick_u边栏”）；
//每个测验包含八个问题
常量问题=8；
for（设i=1；i{
//生成答案跟踪器
回答者（）；
//将测验分数设置为零
分数=0；
//获取.quick\u标记div的节点列表
让markers=document.queryselectoral（“.quick\uu marker”）；
//获取应答单选按钮的节点列表
让答案=document.queryselectoral（“.rsform radio”）；
答案。forEach（函数（答案）{
答案。添加的列表（“单击”，（e）=>{
设target=e.target；
让container=target.closest（“.formContainer”）；
让correct=container.querySelector（“div[class$='true']”）；
让错误=container.querySelector（“div[class$='false']”）；
让feedback=container.querySelector（“div[class$='feedback']”）；
让question=container.querySelector（“div[class*='rsform-block-question']”）；
let next=container.querySelector（“.js btn--next.success”）；
如果（e.target.value==“t”）{
//如果答案正确，则将用户的分数增加1
分数++；
correct.style.display=“block”；
error.style.display=“无”；
feedback.style.display=“block”；
document.getElementById（“marker_”+e.target.dataset.num）.setAttribute（“数据应答”、“正确”）；
}否则{
correct.style.display=“无”；
错误的.style.display=“block”；
feedback.style.display=“block”；
document.getElementById（“marker_”+e.target.dataset.num）.setAttribute（“数据应答”，“不正确”）；
}
//如果问题已回答，则显示“下一步”按钮
如果（下一步！==null&&next！==“”）{
next.style.display=“block”；
}
});
});
//如果这是测验中的最后一个问题，请将分数变量指定给final score hidden HTML字段
//document.getElementById（“最终分数”）.value=分数；
})（）；

。测验工具条。测验标记{
显示：内联块；
宽度：20px；
高度：20px；
利润率：6px；
背景颜色：灰色；
边界半径：50%；
}
.quick\uu侧边栏。quick\uu标记[data answer=“Correct”]{
背景颜色：绿色；
}
.quick\uu侧边栏.quick\uu标记[数据回答=“不正确”]{
背景色：红色；
}
form.quick\u form.formHidden，
form.quick_uuform div[class$=“true”]，
form.quick_uuform div[class$=“false”]，
form.quick_uuform div[class$=“feedback”]，
form.quick\uuu form.rsform block.rsform按钮{
显示：无；
}

吸引配偶


保护自己免受捕食者的攻击


标记他们的领土


因为他们喜欢这味道

正确！


不错的尝试

臭鼬散发出一种极具攻击性的气味，让捕食者走开，让他们独处。如果它们觉得自己的生命处于危险之中，它们就没有其他防御手段，因为它们不能快速奔跑、攀爬、在地下挖洞或战斗

下一个
一杯


源源不断


2汤匙


1 ts
document.getElementById("marker_" + questionNumber).setAttribute("data-answer", "Correct");