如何从国家数组中生成4个不重复随机选项并包含随机位置的正确答案

实现方案 #

核心修改逻辑 #

原有代码的问题在于固定取传入下标前后的元素作为选项，既会出现数组越界的问题，也无法保证正确答案的随机位置，硬编码的numb变量映射规则也不符合完全随机的要求。调整后的逻辑如下：

1. 先从国家数组中随机抽取1个值作为正确答案
2. 从剩余的所有国家中随机抽取3个不重复的值作为干扰项
3. 将1个正确答案和3个干扰项合并后打乱整体顺序，保证正确答案的位置随机
4. 遍历打乱后的选项数组渲染单选按钮

完整代码实现 #

基础变量定义

// 国家数组定义
const randomImage = [
  "Colombia",
  "Argentina",
  "Bolivia",
  "Brazil",
  "Paraguay",
  "Venezuela",
  "Ecuador",
  "Peru",
  "Chile",
  "Uruguay"
];
// 全局存储正确答案，用于后续判题
let correctAnswer = '';

生成随机选项函数

function generateOptions() {
  // 随机生成正确答案下标
  const correctIndex = Math.floor(Math.random() * randomImage.length);
  correctAnswer = randomImage[correctIndex];

  // 生成所有非正确答案的下标作为干扰项池
  const distractorIndexes = Array.from({length: randomImage.length}, (_, i) => i)
    .filter(i => i !== correctIndex);

  // 从干扰项池中随机抽取3个不重复的干扰项
  const selectedDistractors = [];
  while (selectedDistractors.length < 3) {
    const randomPos = Math.floor(Math.random() * distractorIndexes.length);
    const distractorIndex = distractorIndexes.splice(randomPos, 1)[0];
    selectedDistractors.push(randomImage[distractorIndex]);
  }

  // 合并选项并用Fisher-Yates洗牌算法打乱顺序
  const allOptions = [correctAnswer, ...selectedDistractors];
  for (let i = allOptions.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [allOptions[i], allOptions[j]] = [allOptions[j], allOptions[i]];
  }

  return allOptions;
}

渲染选项函数修改

function getQuestions() {
  const options = generateOptions();
  const questionsContainer = document.getElementById("questions");
  // 动态渲染所有选项
  questionsContainer.innerHTML = options.map((option, index) => `
    <div>
      <label>
        ${option}
        <input id="answer${index + 1}" name="ans" type="radio" onclick="getResults()" value="${option}">
      </label>
    </div>
  `).join('') + `
    <div>
      <label>
        None of the above
        <input id="answer5" name="ans" type="radio" onclick="getResults()" value="None of the above">
      </label>
    </div>
  `;
}

参考判题函数

function getResults() {
  const selectedOption = document.querySelector('input[name="ans"]:checked')?.value;
  if (!selectedOption) {
    alert('请先选择一个选项');
    return;
  }
  if (selectedOption === correctAnswer) {
    alert('回答正确');
  } else {
    alert(`回答错误，正确答案是：${correctAnswer}`);
  }
}

调用方式 #

需要渲染题目时直接调用getQuestions()即可，不需要再传入rand参数。

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