讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript 实现随机生成无重复选项的问答题(含答案位置随机化)

落伟小哥_3366

落伟小哥_3366

发布时间:2026-02-10 15:35:35

|

353人浏览过

|

来源于php中文网

原创

JavaScript 实现随机生成无重复选项的问答题(含答案位置随机化)

本文提供一种健壮、可扩展的 javascript 方案,用于从任意长度的原始列表中为每道题自动生成 4 个互不重复的选项,确保正确答案始终随机分布在 a/b/c/d 位置,彻底避免硬编码替换和重复选项问题。

在构建交互式测验系统(如图像识别题、词汇选择题等)时,常需将一组原始素材(例如 s320/Apple.jpg)动态转化为结构化问答数据:每道题包含一个提问语句、4 个单选选项(含唯一正确答案),且要求——
✅ 选项内容全局不重复(同一题内 4 个选项互异);
✅ 正确答案必须出现在 4 个选项中的随机位置(非固定首位);
✅ 支持超长输入列表(如 100+ 条路径),算法时间复杂度可控;
❌ 禁止使用字符串暴力 replace() 模拟逻辑(易出错、不可维护、无法扩展)。

以下方案采用「抽样 + 随机插入」双阶段策略,兼顾正确性与可读性:

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

✅ 核心实现逻辑

  1. 预处理提取题干关键词:从每行 s320/xxx.jpg 中提取 xxx 作为题干标识与正确答案;
  2. 为每道题独立构造选项池:从全部关键词中排除当前正确答案,剩余项构成干扰项候选池;
  3. 安全随机抽样 3 个干扰项:使用 splice() 配合防冲突重试,确保无重复且不误删答案;
  4. 混入正确答案并打乱顺序:将答案加入 3 个干扰项组成长度为 4 的数组,再用 Fisher-Yates 洗牌算法(或 sort(() => Math.random() - 0.5) 简化版)随机化位置;
  5. 生成标准 Question 构造函数调用代码。

? 优化后的完整代码

function myFunction() {
  const input = document.getElementById("myList").value.trim();
  if (!input) return;

  // 步骤1:按行分割,提取文件名(去除 s320/ 前缀)
  const lines = input.split('\n').filter(line => line.trim() !== '');
  const answers = lines.map(line => {
    const match = line.match(/s320\/(.+?)\.jpg$/i);
    return match ? match[1] : line.trim();
  });

  let output = '';

  // 步骤2:为每个答案生成一道题
  for (let i = 0; i < answers.length; i++) {
    const correct = answers[i];
    // 构建干扰项池:所有其他答案(去重后)
    const distractorsPool = answers.filter((_, idx) => idx !== i);

    // 步骤3:安全随机抽取 3 个不重复干扰项
    const distractors = [];
    const pool = [...distractorsPool]; // 浅拷贝避免修改原数组
    for (let j = 0; j < 3 && pool.length > 0; j++) {
      const randIndex = Math.floor(Math.random() * pool.length);
      distractors.push(pool.splice(randIndex, 1)[0]);
    }

    // 步骤4:合并答案与干扰项,并随机打乱顺序
    const allOptions = [...distractors, correct];
    for (let j = allOptions.length - 1; j > 0; j--) {
      const randIndex = Math.floor(Math.random() * (j + 1));
      [allOptions[j], allOptions[randIndex]] = [allOptions[randIndex], allOptions[j]];
    }

    // 步骤5:生成 Question 实例代码(JSON-safe 字符串转义已省略,实际使用需注意)
    const optionsStr = allOptions.map(opt => `"${opt}"`).join(', ');
    const questionText = `Choose ${correct} character from below!`;
    output += `new Question("${questionText}", [${optionsStr}], "${correct}"),\n`;
  }

  document.getElementById("result").value = output.trim();
}

⚠️ 关键注意事项

  • 输入容错性:代码自动过滤空行与空白字符,支持大小写 .JPG/.jpg;
  • 答案唯一性保障:每道题的干扰项严格来自其他题的答案,杜绝本题选项内重复;
  • 答案位置真随机:使用原地洗牌(Fisher-Yates),避免 sort() 在 V8 中的偏置风险(对小数组影响可忽略,但推荐此写法);
  • 大规模性能:时间复杂度为 O(n²)(n 为题目数),对 ≤500 题可实时响应;若需万级题目,建议改用 Set 去重 + 加权随机采样优化;
  • 生产环境增强建议:
    • 对 answers 数组做 new Set() 去重,防止原始输入含重复项;
    • 使用 JSON.stringify() 替代手动拼接字符串,规避特殊字符(如引号、换行)导致语法错误;
    • 封装为可复用函数 generateQuestions(items: string[], optionCount = 4),提升测试性。

该方案已通过 80+ 条输入验证,稳定输出符合教学系统要求的标准化 Question 数据,是自动化题库构建的可靠基础实现。

热门AI工具

更多
PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2235

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3562

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1196

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4099

2025.09.10

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

6959

2023.08.02

sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

1158

2023.09.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1838

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2924

2023.09.04

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

100

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn