如何使用JavaScript for循环替换重复div并记录每页用户响应

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 配置区：可根据需求自行修改
const totalQuestions = 3; // 题目总数量
// 每道题的正确答案，顺序对应page1到page3的题目
const correctAnswers = ['M', 'F', 'M']; 
// 全局变量
var order = new Array(1,2,3,4);
var current = 0; 
var userAnswers = new Array(totalQuestions).fill(null); // 存储用户每道题的选择

$(document).ready(function(){
  // 动态生成page1到page3
  generatePages();
  ShowTrial(current);
});

// 动态生成重复的page div
function generatePages() {
  for(let i=1; i<=totalQuestions; i++){
    let pageHtml = `
    <div class="page" id="page${i}">
      <img src="${i}.jpg" alt="人脸图片${i}"><br>
      <input type="radio" name="f${i}" value="M"> M
      <input type="radio" name="f${i}" value="F"> F <br>
      <a href="javascript:NextTrial()">下一页</a> 
      <span class="progress"></span>
    </div>
    `;
    // 把生成的page插入到最后一页page4的前面
    $('#page4').before(pageHtml);
  }
}

function ShowTrial(t) {
  $("#page" + order[t]).show();
  var N = t+1; 
  $(".progress").text('('+N+'/'+order.length+')');
}

function NextTrial() {
  // 跳转前先记录当前页用户的选择
  if(current < totalQuestions) {
    let selectedVal = $(`input[name=f${current+1}]:checked`).val();
    userAnswers[current] = selectedVal || null;
  }

  $("#page" + order[current]).hide();
  current++;
  // 跳转到最后一页前先计算准确率
  if(current == order.length -1) {
    calcScore();
  }
  ShowTrial(current);
}

// 计算准确率并渲染到最后一页
function calcScore() {
  let correctCount = 0;
  for(let i=0; i<totalQuestions; i++){
    if(userAnswers[i] === correctAnswers[i]) {
      correctCount++;
    }
  }
  let accuracy = (correctCount / totalQuestions * 100).toFixed(1);
  let resultHtml = `<p>你一共答对了${correctCount}题，准确率为${accuracy}%</p>`;
  $('#page4').prepend(resultHtml);
}
</script>

<style> 
.page {display: none;} 
</style> 
</head>
<body>
请判断这张脸的性别：
<!-- 最后一页提前写好，前面的题目页自动生成 -->
<div class="page" id="page4">
  <h3>全部完成！感谢参与！</h3>
</div>
</body>
</html>

关键逻辑说明 #

• 动态生成page优化
  你之前的错误是把所有题目内容都塞到了同一个page1 div里，反复修改同一个div的id，最终只会生成1个有效page。现在的逻辑是循环生成3个独立的page div，每个page的id、单选框name、图片路径都和循环序号绑定，不会出现重复冲突。
• 用户选择记录
  新增userAnswers数组存储每道题用户的选择，每次点击下一页触发NextTrial时，先获取当前页选中的单选框值存入数组，未选择则存为null。
• 准确率计算
  你可以提前在correctAnswers数组里配置每道题的正确答案，顺序和page1到page3的题目对应。跳转到最后一页前会自动比对用户答案和正确答案，计算准确率后插入到page4的最前面展示。
• 如果你不想依赖jQuery，只需要把代码里的jQuery选择器、DOM操作方法替换为原生JS的querySelector、innerHTML等方法即可。

内容的提问来源于stack exchange，提问作者Leah