HTML无法实现随机抽题，必须依赖JavaScript；推荐用Fisher-Yates算法均匀打乱题库数组，并校验抽取数量避免越界，再通过createElement安全渲染题目。

HTML 本身不能随机抽题或管理题库——它只是静态标记语言，不处理逻辑。真正实现“随机抽题”必须靠 JavaScript；题库数据可以写在 HTML 里（如 <script> 中的数组），也可以从外部 JSON 加载，但所有随机性、计数、题目筛选都得由 JS 控制。

用 JavaScript 的 Math.random() 和 sort() 实现简单随机打乱

这是最常见也最容易出错的方式：很多人直接用 array.sort(() => Math.random() - 0.5)，但它**不是均匀随机**，会导致某些题目被抽中概率偏高。现代推荐用 Fisher-Yates 洗牌算法（原地打乱）。

• 先定义题库为数组，每个元素是一个题目对象：

  const quizBank = [
    { id: 1, question: "HTML 中 <div> 是什么类型元素？", options: ["行内", "块级", "空元素"], answer: 1 },
    { id: 2, question: "CSS 中设置文字颜色用哪个属性？", options: ["font-color", "text-color", "color"], answer: 2 }
  ];

• 用 Fisher-Yates 打乱：

  function shuffle(arr) {
    const copy = [...arr];
    for (let i = copy.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [copy[i], copy[j]] = [copy[j], copy[i]];
    }
    return copy;
  }

• 抽前 N 题：const selected = shuffle(quizBank).slice(0, 5);

抽题数量超过题库总数时的容错处理

如果用户配置抽 10 题，但题库只有 7 道，slice(0, 10) 不会报错，但结果只有 7 道——这容易导致测验页空白或逻辑断裂（比如显示“第 8 题”，却无内容）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 抽题前必须校验：const count = Math.min(desiredCount, quizBank.length);
• 最好给用户明确反馈：if (count < desiredCount) console.warn(`题库仅 ${quizBank.length} 题，实际抽取 ${count} 题`);
• 若业务要求“必须凑够 N 题”，需额外实现重复抽题（带去重）或允许题目复用——但要避免同一题连续出现，得加限制逻辑

把题目渲染到 HTML 页面的最小可行方式

不要用 document.write（已过时且会清空整个页面），也不建议拼接大段 HTML 字符串后 innerHTML 注入（XSS 风险）。推荐用 document.createElement 或模板字符串 + textContent 安全插入。

立即学习“前端免费学习笔记（深入）”；

• 安全渲染单题：

  function renderQuestion(el, q) {
    el.innerHTML = '';
    const h3 = document.createElement('h3');
    h3.textContent = q.question;
    el.appendChild(h3);
  <p>q.options.forEach((opt, i) => {
  const label = document.createElement('label');
  label.innerHTML = <code><input type="radio" name="q${q.id}" value="${i}"> ${opt}</code>;
  el.appendChild(label);
  });
  }

• 调用：renderQuestion(document.getElementById('question-area'), selected[0]);
• 注意：q.options 若含用户可控内容（如从 JSON 文件读取），必须用 textContent 而非 innerHTML 渲染选项文本，防止脚本注入

真正的难点不在“怎么随机”，而在于题干/选项/答案结构是否一致、有没有图片或公式等富内容、是否要记录用户作答状态、是否支持分页或限时——这些都会让“抽题”逻辑迅速脱离纯前端能干净解决的范围。别低估数据结构设计对后续扩展的影响。