数理化随机出题系统HTML源码，适配教育场景，支持自定义题库与难度分级

️ 系统核心功能多学科覆盖支持数学、物理、化学三个学科的题目随机生成难度分级配置可自定义简单、中等、困难三个难度级别的题目占比题库自定义支持手动添加不同学科、不同难度的题目内容一键生成试卷点击即可随机生成指定数量的试卷题目适配多种设备采用响应式布局在电脑、平板、手机上都能正常使用 完整HTML源码Html复制!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数理化随机出题系统/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Microsoft YaHei, sans-serif; } body { background-color: #f5f7fa; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); padding: 30px; } .header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .header h1 { color: #333; margin-bottom: 10px; } .header p { color: #666; } .config-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .config-item { padding: 20px; border: 1px solid #eee; border-radius: 8px; } .config-item h3 { color: #333; margin-bottom: 15px; font-size: 16px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; color: #666; font-size: 14px; } .form-group select, .form-group input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .btn-area { text-align: center; margin-bottom: 30px; } .btn { padding: 10px 30px; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin: 0 10px; transition: background-color 0.3s; } .btn:hover { background-color: #0056b3; } .btn-secondary { background-color: #6c757d; } .btn-secondary:hover { background-color: #545b62; } .question-area { padding: 20px; border: 1px solid #eee; border-radius: 8px; min-height: 300px; } .question-item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .question-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .question-title { font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px; } .question-difficulty { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; color: white; margin-left: 10px; } .difficulty-easy { background-color: #28a745; } .difficulty-medium { background-color: #ffc107; color: #333; } .difficulty-hard { background-color: #dc3545; } .question-content { color: #666; line-height: 1.6; font-size: 14px; } .add-question-area { margin-top: 30px; padding: 20px; border: 2px dashed #ddd; border-radius: 8px; } .add-question-area h3 { color: #333; margin-bottom: 20px; font-size: 16px; } .add-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; } .add-form textarea { grid-column: 1 / -1; height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; font-family: Microsoft YaHei, sans-serif; } /style /head body div classcontainer div classheader h1数理化随机出题系统/h1 p自定义题库 · 难度分级 · 一键生成/p /div div classconfig-area div classconfig-item h3基础设置/h3 div classform-group label选择学科/label select idsubject option valueall全部学科/option option valuemath数学/option option valuephysics物理/option option valuechemistry化学/option /select /div div classform-group label题目数量/label input typenumber idquestionCount value10 min1 max50 /div /div div classconfig-item h3难度配置/h3 div classform-group label简单题占比 (%)/label input typenumber ideasyRatio value40 min0 max100 /div div classform-group label中等题占比 (%)/label input typenumber idmediumRatio value40 min0 max100 /div div classform-group label困难题占比 (%)/label input typenumber idhardRatio value20 min0 max100 /div /div /div div classbtn-area button classbtn onclickgenerateQuestions()生成题目/button button classbtn btn-secondary onclickclearQuestions()清空题目/button /div div classquestion-area idquestionArea p styletext-align: center; color: #999;点击上方按钮生成题目/p /div div classadd-question-area h3添加自定义题目/h3 div classadd-form select idaddSubject option valuemath数学/option option valuephysics物理/option option valuechemistry化学/option /select select idaddDifficulty option valueeasy简单/option option valuemedium中等/option option valuehard困难/option /select textarea idaddContent placeholder请输入题目内容.../textarea button classbtn onclickaddQuestion()添加题目/button /div /div /div script // 默认题库 let questionBank { math: { easy: [ 计算2 3 × 4 ?, 求解方程3x 5 14, 一个正方形边长为5cm求其面积, 计算15 ÷ 3 × 2 ?, 求圆的周长半径为3cmπ取3.14 ], medium: [ 求解方程组{2x y 7, x - 2y 1}, 已知直角三角形两条直角边分别为3和4求斜边长度, 计算(a b)² - (a - b)², 求函数y 2x² 3x - 1的顶点坐标, 计算log₂8 log₃9 ], hard: [ 证明等腰三角形两底角相等, 求解不等式组{3x - 2 4, 2x 1 9}, 计算不定积分∫x²e^x dx, 已知等差数列首项为2公差为3求前10项和, 求曲线y x³ - 3x² 2x在点(1,0)处的切线方程 ] }, physics: { easy: [ 声音在空气中的传播速度大约是多少, 牛顿第一定律的内容是什么, 质量为1kg的物体重力是多少(g9.8N/kg), 光在真空中的传播速度是多少, 什么是杠杆的支点 ], medium: [ 一辆汽车以20m/s的速度行驶紧急刹车后加速度为-5m/s²求刹车距离, 已知电阻R110ΩR220Ω串联后接在30V电源上求电路中的电流, 计算质量为2kg的物体从10m高处自由下落落地时的动能是多少(g10m/s²), 凸透镜成像规律中当物距大于2倍焦距时成什么像, 什么是安培定则如何使用 ], hard: [ 推导动能定理的表达式, 分析匀强电场中带电粒子的运动轨迹, 解释楞次定律的内容和应用, 计算在光滑水平面上两个质量分别为m1和m2的小球发生弹性碰撞求碰撞后的速度, 说明热力学第一定律的内容并解释其物理意义 ] }, chemistry: { easy: [ 水的化学式是什么, 氧气的化学符号是什么, 常见的强酸有哪些列举3种, 什么是化学反应, 金属活动性顺序表中排在氢前面的金属有哪些列举3种 ], medium: [ 写出氢气在氧气中燃烧的化学方程式, 解释什么是化合价并举例说明, 计算100g质量分数为20%的NaCl溶液中含有多少克NaCl, 什么是酸碱中和反应举一个例子, 说明化学平衡的特征 ], hard: [ 推导理想气体状态方程PVnRT, 分析原电池的工作原理并举例说明, 解释化学反应速率的影响因素, 计算将10gNaOH溶解在90g水中求所得溶液的质量分数, 说明化学键的类型并分别举例 ] } }; // 生成题目 function generateQuestions() { const subject document.getElementById(subject).value; const questionCount parseInt(document.getElementById(questionCount).value); const easyRatio parseInt(document.getElementById(easyRatio).value); const mediumRatio parseInt(document.getElementById(mediumRatio).value); const hardRatio parseInt(document.getElementById(hardRatio).value); // 验证比例之和是否为100 if (easyRatio mediumRatio hardRatio ! 100) { alert(难度比例之和必须为100%); return; } // 计算各难度题目数量 const easyCount Math.round(questionCount * easyRatio / 100); const mediumCount Math.round(questionCount * mediumRatio / 100); const hardCount questionCount - easyCount - mediumCount; let questions []; // 根据选择的学科获取题目 if (subject all) { // 从所有学科中随机选择 const subjects [math, physics, chemistry]; const totalEasy easyCount * subjects.length; const totalMedium mediumCount * subjects.length; const totalHard hardCount * subjects.length; subjects.forEach(sub { questions questions.concat(getRandomQuestions(sub, easy, Math.round(totalEasy / subjects.length))); questions questions.concat(getRandomQuestions(sub, medium, Math.round(totalMedium / subjects.length))); questions questions.concat(getRandomQuestions(sub, hard, Math.round(totalHard / subjects.length))); }); } else { questions questions.concat(getRandomQuestions(subject, easy, easyCount)); questions questions.concat(getRandomQuestions(subject, medium, mediumCount)); questions questions.concat(getRandomQuestions(subject, hard, hardCount)); } // 打乱题目顺序 questions shuffleArray(questions); // 显示题目 displayQuestions(questions); } // 获取随机题目 function getRandomQuestions(subject, difficulty, count) { const questions questionBank[subject][difficulty]; const shuffled shuffleArray([...questions]); return shuffled.slice(0, count).map(q ({ content: q, difficulty: difficulty, subject: subject })); } // 打乱数组 function shuffleArray(array) { const newArray [...array]; for (let i newArray.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [newArray[i], newArray[j]] [newArray[j], newArray[i]]; } return newArray; } // 显示题目 function displayQuestions(questions) { const questionArea document.getElementById(questionArea); if (questions.length 0) { questionArea.innerHTML p styletext-align: center; color: #999;没有可用题目请添加自定义题目/p; return; } let html ; questions.forEach((q, index) { const subjectName { math: 数学, physics: 物理, chemistry: 化学 }[q.subject]; const difficultyClass { easy: difficulty-easy, medium: difficulty-medium, hard: difficulty-hard }[q.difficulty]; const difficultyName { easy: 简单, medium: 中等, hard: 困难 }[q.difficulty]; html div classquestion-item div classquestion-title ${index 1}. ${subjectName} span classquestion-difficulty ${difficultyClass}${difficultyName}/span /div div classquestion-content${q.content}/div /div ; }); questionArea.innerHTML html; } // 清空题目 function clearQuestions() { const questionArea document.getElementById(questionArea); questionArea.innerHTML p styletext-align: center; color: #999;点击上方按钮生成题目/p; } // 添加题目 function addQuestion() { const subject document.getElementById(addSubject).value; const difficulty document.getElementById(addDifficulty).value; const content document.getElementById(addContent).value.trim(); if (!content) { alert(题目内容不能为空); return; } questionBank[subject][difficulty].push(content); alert(题目添加成功); document.getElementById(addContent).value ; } /script /body /html 系统使用说明基础设置选择需要生成题目的学科设置题目数量难度配置调整简单、中等、困难题目的占比三者之和需为100%生成题目点击生成题目按钮系统会根据配置随机生成对应题目自定义题库在页面下方的添加自定义题目区域可以添加自己的题目内容选择对应的学科和难度清空题目点击清空题目按钮可以清除当前生成的所有题目✨ 系统优势纯HTML实现无需后端服务器打开网页即可使用轻量化设计代码简洁加载速度快运行流畅高度自定义支持添加任意数量的自定义题目满足个性化需求响应式布局适配各种屏幕尺寸在手机、平板、电脑上都能完美使用免费开源可自由修改代码适配更多教育场景 扩展建议添加题目答案功能生成题目时可附带参考答案增加题目分类标签如按知识点分类添加试卷导出功能可将生成的题目导出为Word或PDF格式增加答题计时和评分功能实现完整的测试流程添加用户注册登录功能实现题库云端同步