WordPress LearnDash环境下MCQ随机数脚本失效问题求助

问题根源与修复方案 #

你遇到的仅第一个问题生效的情况，大概率是因为脚本用了getElementById获取元素——HTML里ID是唯一标识，只能匹配第一个元素，后续同名ID的问题会被直接忽略。下面是适配12个问题的修复代码：

调整后的HTML结构（示例） #

给每个问题统一加类名，确保结构一致：

<!-- 问题1 -->
<div class="mcq-question">
  <p>问题1：请选择对应名称的数字</p>
  <div class="options-container">
    <label><input type="radio" name="q1"> 选项1</label>
    <label><input type="radio" name="q1"> 选项2</label>
    <label><input type="radio" name="q1"> 选项3</label>
    <label><input type="radio" name="q1"> 选项4</label>
    <label><input type="radio" name="q1"> 选项5</label>
  </div>
  <span class="correct-answer" style="display:none;">3</span> <!-- 这里放该问题的正确数字 -->
</div>

<!-- 问题2到12依葫芦画瓢，name属性改成q2到q12，correct-answer里放对应正确数字 -->

修复后的JavaScript脚本 #

把这段代码放在所有MCQ HTML代码的最后：

// 获取页面上所有MCQ问题
const allQuestions = document.querySelectorAll('.mcq-question');

// 逐个处理每个问题
allQuestions.forEach((question, index) => {
  // 取出当前问题的正确答案
  const correctNumber = parseInt(question.querySelector('.correct-answer').textContent);
  // 获取当前问题的所有选项
  const options = question.querySelectorAll('.options-container label');

  // 生成包含正确答案的5个不重复随机数（范围1-12）
  let randomNumbers = [correctNumber];
  while (randomNumbers.length < 5) {
    const num = Math.floor(Math.random() * 12) + 1;
    if (!randomNumbers.includes(num)) {
      randomNumbers.push(num);
    }
  }
  // 打乱数字顺序，避免正确答案固定在某个位置
  randomNumbers.sort(() => Math.random() - 0.5);

  // 将随机数填充到选项中
  options.forEach((option, i) => {
    option.textContent = randomNumbers[i];
    // 标记正确选项（可选，方便后续验证）
    if (randomNumbers[i] === correctNumber) {
      option.dataset.correct = 'true';
    }
  });
});

关键修复点 #

• 用document.querySelectorAll('.mcq-question')批量获取所有问题，替代单个ID选择
• 遍历每个问题独立处理，确保12个问题都能生成随机数
• 每个问题的单选按钮name属性必须唯一（q1到q12），防止不同问题的单选按钮互相干扰

为什么脚本必须放在MCQ代码之后 #

浏览器是从上到下依次解析HTML文档的：

• 如果脚本放在MCQ代码前面，浏览器执行脚本时，后面的MCQ元素还没被加载到DOM树中，脚本找不到需要操作的元素，自然无法生成随机数。
• 虽然可以用DOMContentLoaded事件让脚本等待DOM加载完成再执行，但直接把脚本放在MCQ代码之后，对新手来说更简单直观，不需要额外的事件监听逻辑。

内容的提问来源于stack exchange，提问作者abonne-toiture