【加强版】小学数学出题,加减乘除混合运算,支持自定义数字,一键打印

在线预览:在线HTML代码预览和运行工具 - UU在线工具   复制下面代码后到该地址预览即可

 注意:在线预览不能打印。如需打印,在电脑本地上新建文本文档,粘贴代码后保存,然后把文件后缀改为.html运行,出题点击打印就可以了


新增功能:
1、支持加减乘除运算混合多选
2、支持自定义数字运算个数
3、支持自定义出题数量
4、支持一键打印成pdf
5、小学数学没有负数,保证结果不出现负数
6、出题分列展示、新增答案下划线
7、界面美化

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小学生数学题生成器</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;display: block;flex-direction: column;align-items: center;justify-content: center;}#options {display: block;margin: 20px auto;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);padding: 20px;box-sizing: border-box;width: 500px;line-height: 35px;}label {margin-right: 10px;margin-bottom: 10px;font-size: 16px;}button {padding: 5px;background-color: #4caf50;color: #fff;border: none;border-radius: 5px;cursor: pointer;}#questions {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 20px;}.question {width: 48%;box-sizing: border-box;padding: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);margin-bottom: 10px;font-size: 18px;}.answer {display: none;font-size: 16px;}#printHeader {display: none;margin-bottom: 20px;}@media print {#printHeader {display: block;text-align: center;margin-bottom: 30px; }body {margin: 30px; }.column {display: inline-block;width: 48%;box-sizing: border-box;margin-bottom: 20px;break-before: auto; }.question {page-break-inside: avoid; }@page {size: A4;margin: 25mm 10mm 25mm 10mm;}.question:nth-child(n+21) {display: none;}}div#printHeader {text-align: center;margin-bottom: 15px;
}</style>
</head>
<body><div class="hd1" style="text-align:center;font-size:35px;background-color: #4CAF50;min-height: 100px;padding-top: 50px;"><font>小学生数学题生成器</font></div><div id="options">运算符号:<label><input type="checkbox" id="additionCheckbox" checked="checked"> 加法</label><label><input type="checkbox" id="subtractionCheckbox"> 减法</label><label><input type="checkbox" id="multiplicationCheckbox"> 乘法</label><label><input type="checkbox" id="divisionCheckbox"> 除法</label><br><label>数字个数:<input type="number" id="numOfDigits" value="2" min="1" style="width: 50px;"></label> <br><label>允许小数:<input type="checkbox" id="allowDecimal"></label><br><label>数字范围:<label><input type="number" id="minRange" value="1" min="1" style="width: 50px;"></label>-<label><input type="number" id="maxRange" value="100" min="1" style="width: 50px;"></label></label><br><label>出题数量:<input type="number" id="numOfQuestions" value="30" min="1" style="width: 50px;"></label><br><button onclick="generateQuestions()">生成题目</button><button onclick="printQuestions()">一键打印</button><button onclick="toggleAnswers()">显示/隐藏答案</button></div><div id="questions"></div><script>function generateQuestions() {const addition = document.getElementById("additionCheckbox").checked;const subtraction = document.getElementById("subtractionCheckbox").checked;const multiplication = document.getElementById("multiplicationCheckbox").checked;const division = document.getElementById("divisionCheckbox").checked;const numOfDigits = document.getElementById("numOfDigits").value;const allowDecimal = document.getElementById("allowDecimal").checked;const minRange = parseInt(document.getElementById("minRange").value);const maxRange = parseInt(document.getElementById("maxRange").value);const numOfQuestions = document.getElementById("numOfQuestions").value;const questionsContainer = document.getElementById("questions");questionsContainer.innerHTML = "";for (let i = 0; i < numOfQuestions; i++) {let validQuestion = false;let questionText, answerText;while (!validQuestion) {const operators = getRandomOperators(addition, subtraction, multiplication, division, numOfDigits);const numbers = generateNumbers(numOfDigits, allowDecimal, minRange, maxRange);questionText = generateQuestionText(numbers, operators, allowDecimal);answerText = calculateAnswer(numbers, operators, allowDecimal).toFixed(allowDecimal ? 2 : 0);if (!containsNegativeNumber(questionText) && answerText >= 0) {validQuestion = true;}}const questionDiv = document.createElement("div");questionDiv.classList.add("question");questionDiv.innerHTML = `<span>${questionText}</span><span class="answer">${parseFloat(answerText)}</.toFixed(2)}</span>`;questionsContainer.appendChild(questionDiv);}}function getRandomOperators(addition, subtraction, multiplication, division, numOfDigits) {const availableOperators = [];if (addition) availableOperators.push('+');if (subtraction) availableOperators.push('-');if (multiplication && numOfDigits >= 2) availableOperators.push('*');if (division && numOfDigits >= 2) availableOperators.push('/');const selectedOperators = [];for (let i = 0; i < numOfDigits - 1; i++) {const randomOperator = availableOperators[Math.floor(Math.random() * availableOperators.length)];selectedOperators.push(randomOperator);}return selectedOperators;}function generateQuestionText(numbers, operators, allowDecimal) {let questionText = numbers[0].toString();for (let i = 0; i < operators.length; i++) {const operator = operators[i];const num = allowDecimal ? parseFloat(numbers[i + 1]).toFixed(2) : parseInt(numbers[i + 1]);questionText += ` ${operator.replace('*', 'x').replace('/', '÷')} ${num}`;}questionText += ' =';return questionText;}function generateNumbers(numOfDigits, allowDecimal, minRange, maxRange) {const randomNumber = () => allowDecimal ? (Math.random() * (maxRange - minRange) + minRange).toFixed(2): Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange;const numbers = [];for (let i = 0; i < numOfDigits; i++) {numbers.push(randomNumber());}return numbers;}function calculateAnswer(numbers, operators, allowDecimal) {const calculateMulDiv = (nums, ops) => {for (let i = 0; i < ops.length; i++) {if (ops[i] === '*' || ops[i] === '/') {const result = ops[i] === '*' ? nums[i] * nums[i + 1] : nums[i] / nums[i + 1];nums.splice(i, 2, result);ops.splice(i, 1);i--;}}};const nums = numbers.map(num => parseFloat(num));const ops = operators.map(op => op);calculateMulDiv(nums, ops);let result = nums[0];for (let i = 0; i < ops.length; i++) {const num = nums[i + 1];const operator = ops[i];switch (operator) {case '+':result += num;break;case '-':result -= num;break;default:break;}}return allowDecimal? parseFloat(result.toFixed(2)): parseInt(result);}function containsNegativeNumber(questionText) {const parts = questionText.split(' ');for (let i = 0; i < parts.length; i++) {if (parseFloat(parts[i]) < 0) {return true;}}return false;}function printQuestions() {const printWindow = window.open('', '_blank');const printContent = document.getElementById("questions").innerHTML;printWindow.document.write(`<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打印题目</title><style>body {font-family: Arial, sans-serif;margin: 30px; }.column {display: inline-block;width: 48%;box-sizing: border-box;margin-bottom: 20px;}.question {padding: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);margin-bottom: 10px;font-size: 18px;}.answer {display: none;font-size: 16px;}</style></head><body><div id="printHeader" style="text-align: center;margin-bottom: 20px;"><div>姓名:_________ 日期:____月____日 时间:________ 答对:_______题</div></div><div class="column" id="column1"></div><div class="column" id="column2"></div></body></html>`);const column1 = printWindow.document.getElementById("column1");const column2 = printWindow.document.getElementById("column2");const questions = document.querySelectorAll('.question');let countColumn1 = 0;let countColumn2 = 0;questions.forEach((question, index) => {const column = index % 2 === 0 ? column1 : column2;const clonedQuestion = question.cloneNode(true);// Replace answer content with formatted answerconst answerElement = clonedQuestion.querySelector('.answer');const answerText = answerElement.textContent;answerElement.textContent = parseFloat(answerText).toFixed(2);column.appendChild(clonedQuestion);if (index % 2 === 0) {countColumn1++;} else {countColumn2++;}});printWindow.document.close();printWindow.print();}function toggleAnswers() {const answers = document.querySelectorAll('.answer');answers.forEach(answer => {answer.style.display = (answer.style.display === 'none' || answer.style.display === '') ? 'inline' : 'none';});}</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629424.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

haiku实现三角乘法模块

三角乘法&#xff08;TriangleMultiplication&#xff09;是作为一种更对称、更便宜的三角注意力&#xff08;TriangleAttention&#xff09;替代模块。 import jax import haiku import jax.numpy as jnpdef _layer_norm(axis-1, namelayer_norm):return common_modules.Laye…

【CF闯关练习】—— 1400分(C. Make Good、B. Applejack and Storages)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;cf闯关练习 &#x1f48c;其他专栏&#xff1a; &#x1f534;每日一题 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓…

isis小实验

要求: 1.合理规划level1-2 2.r1访问r5走r6且走上面 3.全网可达 个人理解:以重发布的视角:is-level level1即L1可以看做rip,L2可以看做OSPF,L1-2可以看作是既要rip又要OSPF,优点:isis只用在每个路由器上宣告一次 缺点:isis需要每个接口上输isis enable 1(序号)特点:L1-2会自动下…

vue流程图

效果图 组件 <template><div class="processBox" v-if="list.length"><div class="childs"><div class="child" v-for="(item,index) in list" :key="item.id +-child-+index"><div…

C++中的指针、引用和数组

参考文档&#xff1a;《21天学通C&#xff08;第8版&#xff09;》 C中对于指针、引用和数组使用时&#xff0c;充斥着 * 、& 、[]符号&#xff0c;对于像我这样的初学者面对这些符号难免会陷入混乱。 当然&#xff0c;C中对符号 * 、& 、[] 赋予了多重意义也是让人容易…

C //练习 6-5 编写函数undef,它将从由lookup和install维护的表中删除一个变量及其定义。

C程序设计语言 &#xff08;第二版&#xff09; 练习 6-5 练习 6-5 编写函数undef&#xff0c;它将从由lookup和install维护的表中删除一个变量及其定义。 注意&#xff1a;代码在win32控制台运行&#xff0c;在不同的IDE环境下&#xff0c;有部分可能需要变更。 IDE工具&am…

Java http 响应式请求和非响应式请求有什么区别

在Java中&#xff0c;HTTP的响应式请求和非响应式请求有以下区别&#xff1a; HTTP协议本身并不直接支持响应式请求&#xff0c;因为HTTP是基于请求-响应模型的。然而&#xff0c;可以通过使用其他技术和协议来实现响应式请求。 响应方式&#xff1a;响应式请求是指使用响应式编…

SpringBoot 调用错:getWriter() has already been called for this response

这个错误通常表明您尝试从Spring MVC返回一个已使用的HttpServletResponse对象。 原因&#xff1a;这可能是由于直接调用HttpServletResponse的getWriter()或getOutputStream()方法&#xff0c;或者由于在控制器方法中抛出异常而自动调用HttpServletResponse的write()方法。 修…

第10章_多线程扩展练习(Thread类中的方法,线程创建,线程通信)

文章目录 第10章_多线程扩展练习Thread类中的方法1、新年倒计时 线程创建2、奇偶数输出3、强行加塞4、奇偶数打印5、龟兔赛跑友谊赛6、龟兔赛跑冠军赛7、多人过山洞8、奇偶数连续打印9、字母连续打印 线程通信10、奇偶数交替打印11、银行账户-112、银行账户-2 第10章_多线程扩展…

协方差矩阵自适应调整的进化策略(CMA-ES)

关于CMA-ES&#xff0c;其中 CMA 为协方差矩阵自适应(Covariance Matrix Adaptation)&#xff0c;而进化策略&#xff08;Evolution strategies, ES&#xff09;是一种无梯度随机优化算法。CMA-ES 是一种随机或随机化方法&#xff0c;用于非线性、非凸函数的实参数&#xff08;…

SparkSQL——DataFrame

DataFrame Dataframe 是什么 DataFrame 是 SparkSQL中一个表示关系型数据库中 表的函数式抽象, 其作用是让 Spark处理大规模结构化数据的时候更加容易. 一般 DataFrame可以处理结构化的数据, 或者是半结构化的数据, 因为这两类数据中都可以获取到 Schema信息. 也就是说 DataFra…

数据结构之tuple类

前言 tuple 是元组类。tuple 就很有意思了&#xff0c;它和上一篇文章介绍的list 十分相似&#xff0c;都是线性表。最大的不同就是list 可以改变&#xff0c;而tuple 是不可变的。元组就像是列表的补充&#xff0c;我们甚至可以这么理解&#xff1a;元组就是只读的列表。 1.…

自动驾驶模拟器

目录 Carla 自动驾驶模拟器 Udacity自动驾驶模拟器 Carla 自动驾驶模拟器 pip install carla 需要下载地图 Udacity自动驾驶模拟器

一文带你揭秘淘宝终端技术

作者&#xff1a;周杰&#xff08;寻弦&#xff09; 在这个数字化迅速发展的时代&#xff0c;技术的每一次飞跃都不仅仅意味着一个产品的升级&#xff0c;更是对未来世界的一次大胆想象。从 PC 到 iPhone&#xff0c;从 Model 3 到 ChatGPT&#xff0c;都引领了全新的一个行业。…

智慧校园大数据平台功能模块

学校概况模块 智慧校园大数据平台的“学校概况”模块,主要给学校和院系领导使用,能够从宏观、全局把控学校教学、管理、科研、资产等各个方面的整体情况,可以预测学校的发展趋势并且给出决策建议。 比如在消费方面,校领导可以看到近一个月的消费金额和地点的情况,也可以…

AttributeError: module ‘openai‘ has no attribute ‘error‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

我的创作纪念日(730天)

机缘 不知不觉来到CSDN已经730天了&#xff0c;这两年来我收获丰富&#xff0c;从原本的只是从CSDN获取知识&#xff0c;到现在的传播知识&#xff0c;我感觉受益良多&#xff0c;一年多的沉淀&#xff0c;让我在这三个月中绽放&#xff0c;粉丝也从原本的两位数到现在的四千&…

【人工智能与深度学习】当输入层维度为1024,输出层维度为100时,为什么全连接层参数量为1024*100+100

当输入层维度为1024&#xff0c;输出层维度为100时&#xff0c;为什么全连接层参数量为1024*100100 在神经网络中&#xff0c;全连接层&#xff08;也称为稠密层或线性层&#xff09;的参数量计算通常包括权重&#xff08;weights&#xff09;和偏置&#xff08;biases&#x…

【ES6】解构语句中的冒号(:)

在解构赋值语法中&#xff0c;冒号&#xff08;:&#xff09;的作用是为提取的字段指定一个新的变量名。 让我们以示例 const { billCode: code, version } route.query 来说明&#xff1a; { billCode: code, version } 表示从 route.query 对象中提取 billCode 和 version…

每日一记:一个windows的bat脚本工具集

最近在工作上遇到要校验文件的问题&#xff0c;例如&#xff0c;下载了一个文件之后&#xff0c;通过查看文件的md5来校验文件是否完整&#xff0c;这个动作在linux上很简单&#xff0c;但在windows上也不难&#xff0c;可以通过 certutil 命令实现&#xff0c;该命令通常可用于…