当前位置:首页 > JavaScript

js实现随机题库

2026-04-07 07:14:29JavaScript

实现随机题库的基本思路

使用JavaScript实现随机题库的核心在于数据结构的设计和随机算法的应用。题库通常以数组或对象形式存储,随机抽取题目可通过数组的随机索引或洗牌算法实现。

数据结构设计

建议将题库设计为对象数组,每个对象包含题目、选项和答案等属性:

const questionBank = [
  {
    question: "问题1",
    options: ["选项A", "选项B", "选项C"],
    answer: 0 // 正确答案的索引
  },
  {
    question: "问题2",
    options: ["选项A", "选项B", "选项C"],
    answer: 1
  }
  // 更多题目...
];

随机抽取单题

通过生成随机索引从题库中抽取题目:

function getRandomQuestion() {
  const randomIndex = Math.floor(Math.random() * questionBank.length);
  return questionBank[randomIndex];
}

随机排序整个题库

使用Fisher-Yates洗牌算法实现题库的随机排序:

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

const shuffledQuestions = shuffleArray([...questionBank]);

避免重复抽题

当需要保证不重复抽取时,可结合数组操作实现:

function getUniqueQuestions(count) {
  const shuffled = shuffleArray([...questionBank]);
  return shuffled.slice(0, count);
}

题目难度分级

对题目进行难度分级后随机抽取:

js实现随机题库

const questionBank = {
  easy: [...], // 简单题
  medium: [...], // 中等题
  hard: [...] // 难题
};

function getQuestionByDifficulty(difficulty) {
  const pool = questionBank[difficulty];
  return pool[Math.floor(Math.random() * pool.length)];
}

完整示例代码

const questionBank = [
  { question: "1+1=?", options: ["1", "2", "3"], answer: 1 },
  { question: "2+2=?", options: ["2", "4", "6"], answer: 1 },
  { question: "3+3=?", options: ["3", "6", "9"], answer: 1 }
];

function getRandomQuiz(num) {
  const shuffled = [...questionBank].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, num);
}

// 获取2道随机题目
const quiz = getRandomQuiz(2);
console.log(quiz);

标签: 题库js
分享给朋友:

相关文章

js 实现vue

js 实现vue

实现 Vue 的核心功能 在 JavaScript 中实现 Vue 的核心功能需要模拟数据绑定、虚拟 DOM 和响应式系统。以下是一个简化版的实现思路: 响应式系统 通过 Object.define…

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <di…