JavaScript测验开发需求：从数组8道题中随机抽取4道提问

看起来你正在搭建一个JavaScript测验工具，想要从8道题的题库里随机选出4道来出题对吧？我来帮你完善这个随机抽题的逻辑，结合你已有的代码给出完整的实现方案。

首先，先明确核心需求：从原题目数组中随机选取不重复的4道题，然后基于这4道题来进行测验流程。下面是具体的实现步骤和代码调整：

1. 定义可复用的随机抽题函数 #

这个函数可以灵活适配不同的抽题数量需求，不管以后要抽3道还是5道题都能用：

// 从数组中随机抽取n个不重复元素的函数
function getRandomQuestions(arr, num) {
  // 先复制原数组，避免打乱原题库的原始顺序
  const shuffledArray = [...arr].sort(() => 0.5 - Math.random());
  // 截取前num个元素，得到随机的题目集合
  return shuffledArray.slice(0, num);
}

2. 调整你的初始化代码 #

把你已有的代码和抽题逻辑结合起来，替换原来的总题数逻辑：

var currentQuestion = 0; 
var score = 0; 
// 假设这是你的原始题库（8道题）
const questions = [
  {
    question: "示例题目1：JavaScript中typeof null返回什么？",
    options: ["object", "null", "undefined"],
    correct: 0
  },
  {
    question: "示例题目2：以下哪个不是JavaScript的数据类型？",
    options: ["String", "Boolean", "Float"],
    correct: 2
  },
  // ... 这里补充剩下的6道题
];

// 调用函数抽取4道随机题目
const selectedQuestions = getRandomQuestions(questions, 4);
// 更新总题数为抽取后的数量（现在是4）
var totQuestions = selectedQuestions.length; 

var container = document.getElementById("quizContainer"); 
var questionEl = document.getElementById("question"); 
var opt1 = document.getElementById("opt1"); 
var opt2 = document.getElementById("opt2"); 
var opt3 = document.getElementById("opt3");
// 如果有第4个选项，继续获取opt4的DOM元素

3. 修改题目加载逻辑 #

原来的代码应该是基于整个questions数组加载题目，现在要改成用我们抽取的selectedQuestions数组：

function loadQuestion() {
  // 判断是否已经做完所有题目
  if(currentQuestion >= totQuestions) {
    // 测验结束，展示分数
    container.innerHTML = `<h2>测验完成！你的得分：${score}/${totQuestions}</h2>`;
    return;
  }

  // 获取当前要展示的题目
  const currentQ = selectedQuestions[currentQuestion];
  
  // 渲染题目和选项
  questionEl.textContent = `${currentQuestion + 1}. ${currentQ.question}`;
  opt1.textContent = currentQ.options[0];
  opt2.textContent = currentQ.options[1];
  opt3.textContent = currentQ.options[2];
  // 如果有opt4，继续渲染：opt4.textContent = currentQ.options[3];
}

// 初始化加载第一题
loadQuestion();

一些额外的小提示 #

• 这个抽题方法用了简单的数组打乱逻辑，对于8道题的小题库来说完全够用；如果以后题库变大，也可以换成更高效的Fisher-Yates洗牌算法（不过目前没必要）
• 每次刷新页面都会重新抽取一套新的4道题，如果你想支持不刷新页面重新开始测验，只需要再次调用getRandomQuestions(questions, 4)重新生成题目集合即可
• 确保你的原始questions数组结构和代码里的访问方式一致，比如每道题要有question（题目文本）、options（选项数组）、correct（正确选项的索引）这些属性

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