基于JavaScript实现无重复随机选项的问答生成优化需求

原问题 #

现有一段JavaScript代码，基于选项列表生成题目、选项和答案，但存在选项重复问题，且处理大型列表时操作难度极高。需要满足以下要求：

• 选项必须随机
• 答案处于随机位置
• 选项不可重复

优化后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<body onload="generateQuestions()">

<b><label for="fname">选项列表:</label></b><br><br>
  <textarea autocomplete="off" cols="30" id="myList" name="message" rows="10" style="border: 3px solid #73AD21; width: 90%;">
s320/Apple.jpg
s320/Ball.jpg
s320/Cat.jpg
s320/Doll.jpg
s320/Egg.jpg
s320/Frog.jpg</textarea><br><br>
  
  <b><label for="fname">生成的题目+选项+答案:</label></b><br><br>
  <textarea autocomplete="off" cols="30" id="result" name="message" rows="10" style="border: 3px solid #73AD21; width: 90%;"></textarea>
  </body>
  </html>

JavaScript部分 #

function generateQuestions() {
  // 读取并处理输入列表，去掉空行和首尾空白
  const listInput = document.getElementById("myList").value;
  const items = listInput.split("\n")
    .map(line => line.trim())
    .filter(line => line);

  // Fisher-Yates洗牌算法：公平打乱数组顺序
  function shuffleArray(array) {
    const newArr = [...array];
    for (let i = newArr.length - 1; i > 0; i--) {
      const randomIdx = Math.floor(Math.random() * (i + 1));
      [newArr[i], newArr[randomIdx]] = [newArr[randomIdx], newArr[i]];
    }
    return newArr;
  }

  // 生成单道题目的逻辑
  function createSingleQuestion(targetItem, allItems, optionNum = 4) {
    // 筛选出除答案外的其他选项
    const otherOptions = allItems.filter(item => item !== targetItem);
    // 随机选够干扰项数量
    const shuffledOthers = shuffleArray(otherOptions);
    const distractors = shuffledOthers.slice(0, optionNum - 1);
    // 把答案混入干扰项，再打乱顺序
    const finalOptions = shuffleArray([...distractors, targetItem]);
    // 提取文件名（去掉s320/前缀）
    const itemName = targetItem.split("s320/")[1] || targetItem;

    return `new Question("Choose ${itemName} character from below!", [${finalOptions.map(opt => `"${opt.split("s320/")[1] || opt}"`).join(", ")}], "${itemName}"),`;
  }

  // 批量生成所有题目
  const allQuestions = items.map(item => createSingleQuestion(item, items));
  // 输出到结果框
  document.getElementById("result").value = allQuestions.join("\n");
}

核心改进点 #

• 彻底解决重复问题：生成题目时自动排除当前答案作为干扰项，保证选项唯一
• 真正随机的选项与答案位置：用Fisher-Yates洗牌算法实现公平随机，答案每次都在随机位置
• 适配任意大小的列表：不管输入列表有多少项，都能自动生成符合要求的题目，处理大型列表毫无压力
• 代码可维护性提升：拆分出独立的工具函数，逻辑清晰，后续调整选项数量、题目格式都很方便

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