文章目录一、前言为什么要自建知识库考试系统二、项目架构总览2.1 技术选型2.2 项目结构2.3 核心数据流三、后端服务器详解server.py3.1 功能设计3.2 核心代码解析3.3 启动方式四、前端核心实现index.html4.1 全局状态管理4.2 知识库选择与内容注入4.3 核心出题逻辑4.4 答案均衡算法4.5 逐题模式渲染4.6 错题本机制4.7 直连模式 vs 代理模式五、UI/UX 设计亮点5.1 三种视觉状态5.2 进度与统计联动六、知识库文件的制作技巧6.1 格式建议6.2 出题数量建议6.3 温度参数七、模型兼容性八、完整使用流程九、实战效果演示十、总结与展望10.1 这套系统的优势10.2 可扩展方向10.3 写在最后本文完整项目详见https://download.csdn.net/download/nmdbbzcl/93119959一、前言为什么要自建知识库考试系统在日常学习和备考过程中我们经常会遇到这样的痛点市面上的刷题App题目固定——题库内容陈旧无法覆盖最新知识点想针对特定资料出题——手头有教材笔记、课程讲义、技术文档但没法自动转为练习题逐题作答体验差——大部分在线考试系统一次性展示所有题目无法专注单题做完也不显示解析AI出题不可控——直接问AI出题它可能偏离你的学习资料自己编造超出范围的内容这套系统就是为解决以上痛点而生把你的 txt 知识库文件丢进去AI 严格基于知识库内容生成题目逐题作答、即时显示解析手动控制进度。核心思路System Prompt 中直接注入完整知识库文本约束 AI 只能在知识库范围内出题从根本上杜绝超纲问题。二、项目架构总览2.1 技术选型技术用途Python 标准库http.server轻量后端服务器无任何第三方依赖纯 HTML CSS JavaScript前端单页应用零框架打开即用OpenAI 兼容 API对接大语言模型支持所有兼容接口的模型localStorage浏览器本地持久化存储 API 密钥、错题本2.2 项目结构quiz_system/ ├── index.html # 前端单页应用全部逻辑在此 ├── server.py # 后端服务器API代理 知识库文件管理 └── knowledge_base/ # 知识库文件夹放你的 .txt 文件 ├── 数据结构与算法.txt └── 计算机网络.txt设计原则极简、零依赖。后端只用 Python 标准库前端不引入任何框架或 CDN整个项目就是一个 HTML 一个 Python 文件。2.3 核心数据流用户选择知识库 → 点击开始考试 ↓ 前端读取知识库内容 → 构建 System Prompt注入完整知识库文本 ↓ 调用 AI API → 流式/一次性获取 JSON 格式题目 ↓ 解析 JSON → 验证字段 → 答案均衡算法 ↓ 逐题渲染 → 用户作答 → 即时显示解析 → 点下一题 ↓ 考试完成 → 统计正确率 → 错题自动入错题本三、后端服务器详解server.py3.1 功能设计这个后端虽然只有 173 行代码但承担了三个重要职责静态文件服务器——托管 index.htmlAPI 代理——解决浏览器跨域限制转发请求到 AI 接口知识库文件管理——提供读取和列出 txt 文件的 REST API3.2 核心代码解析1. API 代理实现解决 CORS 痛点浏览器直接调用第三方 API 会遇到跨域限制通过同源代理完美解决def_proxy_api(self,body):将请求转发到AI APIdatajson.loads(body)api_keydata.get(api_key,)pathdata.get(path,chat/completions)api_bodydata.get(body,{})urlf{API_BASE}/{path}headers{Content-Type:application/json,Authorization:fBearer{api_key},}requrllib.request.Request(url,datajson.dumps(api_body).encode(utf-8),headersheaders,methodPOST)responseurllib.request.urlopen(req,timeout120)self.wfile.write(response.read())关键设计点120 秒超时——大模型生成题目耗时较长完整的错误处理链——HTTPError、URLError、JSONDecodeError、timeout 全覆盖前端传什么就透传什么不对模型名做任何限制灵活适配任何 API2. 知识库安全读取防止路径穿越def_read_knowledge_file(self,filename):# 安全校验防止路径穿越filenameos.path.basename(filename)filepathos.path.join(KNOWLEDGE_DIR,filename)ifnotfilepath.startswith(KNOWLEDGE_DIR):self._send_json({error:非法路径},403)return为什么需要 basename防止恶意请求/api/knowledge/read/../../etc/passwd读取敏感文件。3.3 启动方式cdquiz_system python server.py启动后在浏览器访问http://localhost:8080即可。如果不想启动服务器也可以直接双击打开 index.html 使用直连模式——前端将直接调用 AI API内置了两个默认知识库。四、前端核心实现index.html前端是整个系统的精华所在虽然只有一个 HTML 文件但包含了完整的交互逻辑。4.1 全局状态管理varSTATE{questions:[],// 所有题目answers:[],// 正确答案userAnswers:[],// 用户选择answeredStatus:[],// true/false 是否已作答currentIndex:0,// 当前题目索引examGenerated:false,// 是否已生成试题quizFinished:false,// 是否完成了所有题目wrongBook:JSON.parse(localStorage.getItem(quiz_wrong_book)||[]),};所有状态集中管理不分散在 DOM 中逻辑清晰易维护。4.2 知识库选择与内容注入functionselectKB(name){// 高亮选中varitemsdocument.querySelectorAll(#kbList .kb-item);for(vari0;iitems.length;i)items[i].classList.remove(active);vartargetdocument.querySelector(#kbList .kb-item[data-name...]);if(target)target.classList.add(active);// 通过API获取文件内容fetch(/api/knowledge/read/encodeURIComponent(name)).then(function(r){returnr.json();}).then(function(data){// 保存到 dataset 供后续出题使用varactivedocument.querySelector(#kbList .kb-item.active);if(active)active.dataset.contentdata.content;});}知识点使用dataset属性将文件内容缓存在 DOM 元素上避免重复请求。出题时直接从dataset.content读取。4.3 核心出题逻辑这是最关键的部分——如何基于知识库让 AI 出题varsystemPrompt你是一个专业的考试出题专家。请根据以下知识库内容生成 qcount 道单项选择题。\n\n 知识库内容 \nkbContent\n\n 出题要求 \n1. 每道题必须严格基于知识库内容出题不得超出知识库范围\n2. 每道题包含题干和 A、B、C、D 四个选项以及正确答案和详细解析\n3. 正确答案必须在 A/B/C/D 中均匀分布\n4. 解析必须详细解释为什么选这个答案以及每个选项为什么对/错\n5. 输出格式必须是严格的 JSON 数组;Prompt 工程的核心技巧角色设定——“你是一个专业的考试出题专家”让 AI 进入专业模式知识隔离——“严格基于知识库内容出题不得超出知识库范围”这是约束出题范围的关键答案均衡——强制要求正确答案均匀分布避免 AI 倾向选 C 的偏置格式约束——明确要求 JSON 数组格式便于解析解析要求——要求对每个选项都做解释提升学习效果4.4 答案均衡算法AI 在出题时天然倾向于让正确答案出现在特定位置因此需要后处理均衡functionbalanceAnswers(questions,targetCount){// 洗牌打乱for(variquestions.length-1;i0;i--){varjMath.floor(Math.random()*(i1));vartmpquestions[i];questions[i]questions[j];questions[j]tmp;}varresult[];varcounts{A:0,B:0,C:0,D:0};varlimitMath.floor(targetCount/4)1;// 两轮筛选确保每个选项出现次数接近 targetCount/4for(vari0;iquestions.length;i){varansquestions[i].answer;if(counts[ans]limit){result.push(questions[i]);counts[ans];if(result.lengthtargetCount)break;}}// 如果题目不够复制并修改答案来填充while(result.lengthtargetCount){// ... 均衡填充逻辑}returnresult;}这个算法在不改变题目本身质量的前提下通过选择 补充两轮策略确保 A/B/C/D 四个选项的分布尽可能均匀。4.5 逐题模式渲染functionshowQuestion(idx){// ...更新进度条和统计varhtmldiv classquestion-card;htmldiv classq-number;htmlspan 第 (idx1) 题/span;htmlspan classq-progress(answered?✅/❌:请选择答案)/span;html/div;htmldiv classq-textescHtml(q.question)/div;htmldiv classq-options;// 渲染 A/B/C/D 四个选项for(varli0;li4;li){varclsq-option;// 已作答时标记正确/错误状态和正确答案if(answered){if(letterq.answer)cls show-correct;if(userAnsletter)clsuserAnsq.answer? correct: wrong;}htmldiv classcls onclickselectOption(...).../div;}// 解析区域if(answered){htmldiv classexplanation-box show;htmldiv classexp-answer正确答案q.answer/div;htmldiv classexp-textescHtml(q.explanation)/div;html/div;}}交互流程展示单题 → 用户点击选项 → 触发selectOption()selectOption记录答案 → 设置answeredStatus[idx] true→ 重新调用showQuestion(idx)重新渲染时答案区标记正确/错误 解析区域以动画展开用户看完解析手动点击「下一题」按钮4.6 错题本机制错题自动收录使用localStorage持久化functionaddToWrongBook(q,userAnswer){// 检查是否已存在同题合并增加错误次数for(vari0;iSTATE.wrongBook.length;i){if(STATE.wrongBook[i].questionq.question){STATE.wrongBook[i].wrong_count;STATE.wrongBook[i].last_wrongnewDate().toLocaleString();saveWrongBook();return;}}// 新错题STATE.wrongBook.push({question:q.question,option_a:q.option_a,option_b:q.option_b,option_c:q.option_c,option_d:q.option_d,answer:q.answer,explanation:q.explanation,user_answer:userAnswer,wrong_count:1,last_wrong:newDate().toLocaleString(),});saveWrongBook();}设计亮点同题合并——同一道题错多次只累加wrong_count不重复存储记录用户错误答案——复习时可针对性看自己错在哪4.7 直连模式 vs 代理模式前端在初始化时自动判断运行环境varuseProxy(window.location.port8080||window.location.port8000)window.location.hostnamelocalhost;if(useProxy){refreshKnowledgeList();// 通过服务器API获取知识库文件}else{loadBuiltinKnowledge();// 使用内置默认知识库}这个设计让系统有两种运行模式服务器模式推荐python server.py启动支持自定义知识库文件直连模式直接双击index.html打开不需要服务器使用内置知识库五、UI/UX 设计亮点5.1 三种视觉状态每个选项卡片有清晰的视觉反馈待作答灰色边框鼠标悬停变蓝色选中蓝边 蓝色背景正确答案绿边 绿色背景无论用户选没选对错误答案红边 红色背景用户选错的选项这样设计的好处是一屏就能看清正确答案是什么和我选错了什么。5.2 进度与统计联动顶部进度条实时反映答题进度左侧面板实时更新正确率。用户随时可以查看自己的整体表现。六、知识库文件的制作技巧6.1 格式建议知识库文件是 txt 格式建议以下结构一、章节标题 1. 知识点1详细描述 2. 知识点2详细描述 3. 涉及公式、定义、概念 二、章节标题 1. 知识点...几个原则结构化分层——AI 更容易理解知识体系关键点明确——概念定义、公式、特点、区别等要写清楚中长度段落——太短缺乏上下文太长超出 token 限制6.2 出题数量建议出题数建议控制在 5~20 题之间。过少达不到练习效果过多会给 AI 产出质量带来压力。6.3 温度参数推荐温度设置在 0.7 左右系统默认值。温度太高 AI 可能胡编乱造太低则题目过于死板。七、模型兼容性系统使用 OpenAI 兼容 API支持市面上几乎所有大模型 API。目前已内置GPT-5.6-Luna默认GLM-5.2DeepSeek-V4-FlashDeepSeek-V4Gemma-4-26B-A4B-ITKimi-K2.6如果要使用其他模型在index.html的select中新增选项即可无需修改其他代码。八、完整使用流程Step 1准备知识库文件cdquiz_system/knowledge_base/# 放入你的 .txt 文件如高等数学.txt、考研政治.txt、Java面试题.txtStep 2启动服务cdquiz_system python server.py# 输出: [OK] 考试系统服务器已启动# 本地访问: http://localhost:8080Step 3浏览器打开打开http://localhost:8080左侧选择知识库文件填入 API 密钥点击「开始考试」Step 4逐题作答每道题做完立即显示解析点击「下一题」继续全部完成后查看成绩和错题本Step 5巩固复习错题自动收录到错题本可导出试卷为 txt 文件九、实战效果演示以一个「数据结构与算法」知识库为例AI 生成的典型题目可以看到题目完全基于知识库内容解析详尽且覆盖了考点推导过程。十、总结与展望10.1 这套系统的优势零成本部署——一个 Python 文件 一个 HTML 文件不需要数据库、不需要服务器环境知识库自由——任何 txt 格式的学习资料都能直接使用出题质量可控——Prompt 约束 答案均衡算法双保险学习体验好——逐题作答即时解析符合深度学习原理数据持久化——错题本自动保存下次打开还在10.2 可扩展方向多题型支持——增加判断题、填空题、多选题随机选题——从大型知识库中随机抽取知识点出题难度分级——支持选择出题难度易/中/难考试计时——增加倒计时功能知识库更新——通过页面直接上传 txt 文件多人共用——添加简单的账户系统导出格式扩展——支持导出为 Anki 卡片格式本地 LLM 支持——接入 Ollama 等本地推理引擎10.3 写在最后这个项目的核心思想是用 AI 作为出题引擎用知识库作为数据源用逐题模式提升学习体验。不是为了做一个花哨的系统而是真正解决我想基于自己的学习资料做练习这个实际问题。代码虽然不多但每个模块都经过实战检验。如果你也在备考某个考试或者想基于自己的笔记生成练习题不妨试试这套系统。所有代码都在 GitHub 开源欢迎 star 和 PR。项目地址quiz_system/技术栈Python HTML/CSS/JavaScript依赖零外部依赖运行方式python server.py→ 浏览器访问http://localhost:8080