如何在JavaScript测验应用中随机抽取指定数量的题目进行展示

嗨，我来帮你搞定这个需求！要实现从所有题目里随机挑出指定数量的题目来展示，咱们只需要对现有代码做几个小修改就可以了，步骤很简单：

第一步：写一个公平的随机抽题函数 #

首先咱们添加一个专门的函数，用来从题目数组里随机选出指定数量的题目，用Fisher-Yates洗牌算法能保证每道题被选中的概率完全一致，比简单用sort打乱更公平：

// 参数：原题目数组、需要抽取的题目数量
function getRandomQuestions(questions, pickCount) {
  // 先复制原数组，避免打乱原始题目数据
  const shuffledQuestions = [...questions];
  // Fisher-Yates洗牌算法：从后往前逐个交换随机位置
  for (let i = shuffledQuestions.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [shuffledQuestions[i], shuffledQuestions[randomIndex]] = [shuffledQuestions[randomIndex], shuffledQuestions[i]];
  }
  // 返回打乱后的数组前pickCount个元素
  return shuffledQuestions.slice(0, pickCount);
}

第二步：生成随机题目数组 #

接下来，咱们用上面的函数从你的quizData里选出想要的题目数量——比如你说的从4题里选2题，或者20题里选10题，直接修改第二个参数就行：

// 这里示例选2道题，你可以改成10或者其他你需要的数字
const selectedQuestions = getRandomQuestions(quizData, 2);

第三步：替换代码中原数组的引用 #

现在把代码里所有使用quizData的地方（除了定义它的那部分），全部换成selectedQuestions，确保整个测验逻辑都基于随机抽取的题目：

1. 加载题目逻辑修改：

const loadQuiz = () => {
  deselectAnswers();
  // 改用随机抽取后的题目数组
  const currentQuizData = selectedQuestions[currentQuiz];
  questionElement.innerText = currentQuizData.question;
  a_text.innerText = currentQuizData.a;
  b_text.innerText = currentQuizData.b;
  c_text.innerText = currentQuizData.c;
  d_text.innerText = currentQuizData.d;
};

2. 提交答案逻辑修改：

submitButton.addEventListener("click", () => {
  const answer = getSelected();
  if (answer) {
    // 判断答案是否正确时用随机数组的题目
    if (answer === selectedQuestions[currentQuiz].correct) score++;
    currentQuiz++;
    // 计算错误数量时用随机数组的长度
    let asd = selectedQuestions.length - score;
    let ssrate = (1220 - Math.floor(total_seconds));
    let ggg = "";
    if (ssrate < 12)
      ggg = "good morning";
    else if (ssrate < 16)
      ggg = "ghfgdfgh ning";
    else if (ssrate < 24)
      ggg = "asaasasasa   ng";
    // 计算正确率时用随机数组的长度
    let avg =  Math.round( score * 100 / selectedQuestions.length);
    document.getElementById("myProgress").value = avg ;
    // 判断是否还有下一题时用随机数组的长度
    if (currentQuiz < selectedQuestions.length) loadQuiz();
    else {
      // 修正原代码小bug：timer是setTimeout创建的，要用clearTimeout而非clearInterval
      clearTimeout(timer);
      quiz.innerHTML = "<h2>Total Question : " + selectedQuestions.length +  "<br>" + "Correct Ans : " + score + " <br> Wrong Ans : " + asd  + " <br> Average : " + avg + " %  <br> Time Usage : " + ssrate + " Seconds <br> Average : " + ggg + " %  <br><br>  <br><br> <button onclick='location.reload()'>Play Again</button></h2>"
    }
  }
});

最后测试一下 #

这样修改之后，每次刷新页面，你的测验就会随机展示你指定数量的题目啦！比如把getRandomQuestions(quizData, 2)里的2改成10，就能实现从20道题里随机选10道的需求~

备注：内容来源于stack exchange，提问作者Asma Binta Younus