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

已于 2024-01-16 15:56:38 修改
阅读量585 收藏 6
点赞数 8
分类专栏： JavaScript 文章标签： 前端
于 2024-01-16 15:25:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q1424966670/article/details/135626136
版权

在线预览：在线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 answer
                const 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>
陈皮太
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python输出3位数加减法（随机）
cwx530260的博客
10-11 2321
使用python输出3位数加减法等式（含答案），随机生成等式（随机数字和随机加减号）
终版小学数学出题器，加减乘除混合运算，支持自定义数字，支持答案显示
最新发布
03-10
直接使用！下载即用！
html实现计算器源码
xcLeigh
11-21 1838
html实现计算器源码，计算器源码，简易计算器功能实现，加减乘除，平方，根号等基本算数功能实现，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
简单实现查找题库随机出题, 且可点击查看对应答案
hzf1105的博客
07-22 1696
因为要考驾照,科目一里的扣分题目和罚款题目,老是记不住或者记混,就写了个简单的页面,可以点击按钮,随机拿到一个题目,自己想完答案,可以再点击按钮,查看答案是否正确。下面是代码，PC或移动端都可以。...
数学试卷题目生成器 小学数学出题源码 加减乘除混合出题神器
软希网分享源码的博客
01-28 688
数学试卷题目生成器 小学数学出题源码 加减乘除混合出题神器
小学数学加减乘除出题工具
01-29
小学数学加减乘除出题工具是一款专为小学生设计的数学练习软件，旨在帮助孩子们巩固和提高他们的四则运算能力。这款工具具有多种题型和出题方式，以适应不同阶段的学习需求，同时具备打印和批卷功能，使得教学过程...
数学试卷题目生成器 小学数学出题源码 加减乘除混合出题神器.zip
01-23
加减乘除混合运算，支持自定义数字、小数、混合运算，支持加减乘除运算混合多选（一道题中同时随机出现加减乘除运算符）支持自定义出题数量，支持一键打印成pdf，支持隐藏选项功能，打印纯净试卷，小学数学没有负数...
全六年级小学数学四则运算加减乘除出题软件.exe
01-08
小学数学计算训练最新版是专为小学生而开发的一款数学学习软件，小学数学计算训练最新版拥有口算、估算、竖式计算、脱式计算、简便计算、解方程、单位换算等功能，可以轻松生成多套不同风格的小学数学计算能力训练题...
小学生作业随机加减乘除运算计算习题答案 html源码
08-08
小学生作业随机加减乘除运算计算习题答案 html源码 这道题目提供了多种选项,包括运算符和输入的运算数范围。题目数量也可以选择。如果你选择好了选项,就可以点击出题按钮进行练习。 为了方便,题目答案可以打印出来...
html静态网页：自动出题评分系统
全栈川川
08-01 1939
效果： 学习交流群：970353786非常勿扰 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0;
随机生成加减乘除混合运算加减乘除数学式子题目答案批量生成工具软件使用方法
FL1623863129的博客
07-14 1万+
欢迎使用由未来自主研究中心(FIRC)强力打造的小学生加减乘除数学计算工具，使用方法如下： 最大数 最大数是指数学式子中可能出现的最大数字，注意这里是可能，也就是说式子中最大只可能是指定的数字，例如选择10以内，则最大出现只能是10，例如式子1+3+4,1+10-2等，如果选择100以内则是最大出现只能是100。当然也可以自定义，注意自定义优先级最高，如果自定义填写则以自定义的数字为准，而此时
源代码jQuery简单数学计算器Web页面html
qq_44394562的博客
05-27 497
今天给大家分享jQuery数学计算器html的源代码：（源码来自网络，分享给大家） 先看一下效果图： html代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="wid
四则运算题目生成
weixin_44057376的博客
02-07 744
四则运算题目生成——李安琪 PSP表格 PSP2.1 Personal Software Process Stages 预估耗时（分钟） 实际耗时（分钟） Planning 计划 5 20 · Estimate · 估计这个任务需要多少时间 5 5 Development 开发 1210 1295 · Analysis · 需求分析 (包括学习新技术) 30 30 · Design Spec · 生成设计文档 60 50 · Design Review · 设计复审 (和
小学数学计算出题小程序（Excel版）
thinkersky123的博客
08-14 1966
一个用来自动生成小学生数学练习题的Excel程序，支持加减乘除及混合运算。可指定最大数，最小数，因子个数，保证计算结果总是整数，不会出现除不尽小数的问题。可根据调整列数自动排版，每次自动生成A4大小的习题，无需编辑可直接打印出来。可根据需要混合出题，自己定义组合类型，生成习题的同时还能显示答案。可以自己添加应用题题库，随机出题。链接：https://pan.baidu.com/s/1iSGXzdZVBp08o971wRMvbQ提取码：254m...
JS手动实现一个new操作符
热门推荐
q1424966670的博客
06-19 3万+
要手动实现一个 new 操作符，首先要知道 new 操作符都做了什么事，即构造函数的内部原理： 1.创建一个新对象； 2.链接到原型（将构造函数的 prototype 赋值给新对象的 __proto__）； 3.绑定this（构造函数中的this指向新对象并且调用构造函数） 4.返回新对象 这样我们就可以手动实现一个 new 方法了 function realizeNew () { /...
js检查数据类型的方法
q1424966670的博客
06-19 3万+
1.typeof 这是最常用的基本数据类型检测的方法 console.log(typeof ""); // string console.log(typeof 1); // number console.log(typeof true); // boolean console.log(typeof undefined); // undefined c...
ES2019 的新功能 flat()
q1424966670的博客
03-18 3万+
flat()方法会递归到指定深度将所有子数组连接，并返回一个新数组。 浏览器支持版本： //depth指定嵌套数组中的结构深度，默认值为1。 var newArray = arr.flat(depth) var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]...
DOM全屏Api requestFullscreen
q1424966670的博客
03-13 2万+
设置全屏 /** * [requestFullScreen 设置全屏] */ function requestFullScreen(id) { var de = document.getElementById(id); if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScr...
python随机出题加减乘除
05-24
下面是一个简单的Python程序，...这个程序会随机生成10道加减乘除的数学题目，每道题目的数字都在1到100之间。如果生成的是除法题目，且不能整除，则会重新生成题目。用户输入答案后，程序会判断是否正确，并计算得分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值