小学数学出题，网页版
本帖最后由 melodyy 于 2023-10-24 09:56 编辑几天前看到这个贴子，因为本家里没打印机，所有修改了一下用手机来玩还不错
有打印机的可以看看这原贴https://www.52pojie.cn/forum.php?mod=viewthread&tid=1843105&highlight=%D0%A1%D1%A7
下面是我改后用手机玩的效果图
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.header {
position: fixed; /* 添加固定定位 */
top: 0; /* 将标题固定在页面顶部 */
left: 0;
width: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
padding: 5px 0;
}
.container {
max-width: 800px;
margin: 100px auto; /* 为产生滚动条留出空间 */
background-color: #fff;
padding: 50px 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.hidden {
display: none;
}
#options {
margin-bottom: 20px;
line-height: 28px;
}
input {
max-width: 50px;
}
label {
margin-right: 10px;
}
#questions {
margin-top: 20px;
}
.question {
border: 1px solid #ccc;
padding: 10px;
max-width: 100%;
margin-bottom: 10px;
color: #000;
display: flex;
align-items: center;
}
.question p {
font-size: 18px;
line-height: 18px;
margin-right: 10px;
}
.question .answer-container {
display: flex;
align-items: center;
}
.question .answer-container input {
width: 50px;
margin-left: 10px;
}
.question .answer-container .grade {
display: inline-block;
font-size: 20px;
padding-left: 10px;
vertical-align: middle;
}
.slider {
width: 100%;
}
</style>
<title>小学数学出题器</title>
</head>
<body>
<div class="header">
<h1>小学数学出题器</h1>
<button>选项开关</button>
<button>生成题目</button>
<button>查看答案</button>
</div>
<div class="container">
<div id="options" class="hidden">
<label>运算符:</label>
<input type="checkbox" id="addition" checked> 加法
<input type="checkbox" id="subtraction" checked> 减法
<input type="checkbox" id="multiplication" checked> 乘法
<input type="checkbox" id="division" checked> 除法
<br>
<label>数字个数:</label>
<input type="number" id="numDigits" value="2">
<br>
<label>允许小数:</label>
<input type="checkbox" id="allowDecimal"> 是
<br>
<label>题目数量:</label>
<input type="number" id="numQuestions" value="10">
<br>
<label>数字范围:</label>
<input type="number" id="minRange" value="1">
<span>-</span>
<input type="number" id="maxRange" value="100">
<br>
<label>文字颜色:</label>
<input type="color" id="textColor" value="#000000">
<br>
<label>字体大小:</label>
<input type="range" class="slider" id="fontSizeSlider" min="12" max="24" step="2">
<br>
</div>
<div id="questions" class="hidden"></div>
<div style="position: relative; top: 10000px;"></div> <!-- 在最后添加一个足够长的空白元素，以便产生滚动条 -->
</div>
<script>
// script.js
function toggleOptions() {
const content = document.getElementById("options");
content.classList.toggle("hidden");
}
function generateQuestions() {
const operators = getSelectedOperators();
const numDigits = parseInt(document.getElementById("numDigits").value);
const allowDecimal = document.getElementById("allowDecimal").checked;
const numQuestions = parseInt(document.getElementById("numQuestions").value);
const minRange = parseInt(document.getElementById("minRange").value);
const maxRange = parseInt(document.getElementById("maxRange").value);
const textColor = document.getElementById("textColor").value;
const fontSize = document.getElementById("fontSizeSlider").value;
const questionsContainer = document.getElementById("questions");
questionsContainer.style.color = textColor;
questionsContainer.innerHTML = "";
for (let i = 0; i < numQuestions; i++) {
const question = generateQuestion(
operators,
numDigits,
allowDecimal,
minRange,
maxRange
);
const questionElement = document.createElement("div");
questionElement.className = "question";
// 创建题目元素
const questionTextElement = document.createElement("p");
questionTextElement.textContent = `题${i + 1}：${question}`;
questionTextElement.style.fontSize = fontSize + "px";
// 创建填空输入框和评分元素的容器
const answerContainer = document.createElement("div");
answerContainer.className = "answer-container";
const answerInput = document.createElement("input");
answerInput.type = "text";
answerInput.dataset.question = question;
answerInput.style.fontSize = fontSize + "px";
const gradeElement = document.createElement("span");
gradeElement.className = "grade";
gradeElement.style.fontSize = fontSize + "px";
// 将题目元素和填空输入框添加到题目容器中
answerContainer.appendChild(answerInput);
answerContainer.appendChild(gradeElement);
questionElement.appendChild(questionTextElement);
questionElement.appendChild(answerContainer);
// 将题目添加到题目容器中
questionsContainer.appendChild(questionElement);
}
questionsContainer.classList.remove("hidden");
}
function getSelectedOperators() {
const operators = [];
if (document.getElementById("addition").checked) operators.push("+");
if (document.getElementById("subtraction").checked) operators.push("-");
if (document.getElementById("multiplication").checked) operators.push("*");
if (document.getElementById("division").checked) operators.push("/");
return operators;
}
function generateRandomNumber(min, max, allowDecimal) {
const randomNumber = Math.random() * (max - min) + min;
return allowDecimal ? randomNumber.toFixed(2) : Math.floor(randomNumber);
}
function generateQuestion(operators, numDigits, allowDecimal, minRange, maxRange) {
const numbers = Array.from({ length: numDigits }, () =>
generateRandomNumber(minRange, maxRange, allowDecimal)
);
const operatorArray = Array.from({ length: numDigits - 1 }, () =>
operators
);
let questionString = numbers.toString();
for (let i = 1; i < numDigits; i++) {
questionString += ` ${operatorArray} ${numbers}`;
}
let result = eval(questionString);
while (
(!allowDecimal && (result % 1 !== 0 || result < 0)) ||
result < 0
) {
numbers.forEach((_, index) => {
numbers = generateRandomNumber(
minRange,
maxRange,
allowDecimal
);
});
operatorArray.forEach((_, index) => {
operatorArray =
operators;
});
questionString = numbers.toString();
for (let i = 1; i < numDigits; i++) {
questionString += ` ${operatorArray} ${numbers}`;
}
result = eval(questionString);
}
return questionString + " = ";
}
function gradeQuestions() {
const questionsContainer = document.getElementById("questions");
const questionElements = questionsContainer.getElementsByClassName(
"question"
);
for (let i = 0; i < questionElements.length; i++) {
const questionElement = questionElements;
const answerInput = questionElement.querySelector(
"input"
);
const gradeElement = questionElement.querySelector(".grade");
gradeElement.innerHTML = "";
if (answerInput.value === "") {
continue; // 跳过未填写答案的题目
}
const question = answerInput.dataset.question;
const answer = eval(question.split("="));
const userInput = parseFloat(answerInput.value);
if (userInput === answer) {
gradeElement.innerText = "正确 ";
gradeElement.style.color = "green";
} else {
gradeElement.innerText = "错误 ";
gradeElement.style.color = "red";
}
gradeElement.innerHTML += answer;
}
}
function updateFontSize() {
const fontSize = document.getElementById("fontSizeSlider").value;
const questionElements = document.getElementsByClassName("question");
for (let i = 0; i < questionElements.length; i++) {
const questionElement = questionElements;
const questionTextElement = questionElement.querySelector("p");
const answerInput = questionElement.querySelector(
"input"
);
const gradeElement = questionElement.querySelector(".grade");
questionTextElement.style.fontSize = fontSize + "px";
answerInput.style.fontSize = fontSize + "px";
gradeElement.style.fontSize = fontSize + "px";
}
}
</script>
</body>
</html>
bachelor66 发表于 2023-10-17 13:48
打开除了三个按钮，什么都没有，这是为什么呢？
选项开关点一下，选项被隐藏了 良有益 发表于 2023-10-18 11:46
小学数学出题器
选项开关
生成题目
<div class="header">
<h1>小学数学出题器</h1>
<button onclick="toggleOptions()">选项开关</button>
<button onclick="generateQuestions()">生成题目</button>
<button onclick="gradeQuestions()">查看答案</button>
</div>
搞定！ melodyy 发表于 2023-10-17 14:33
选项开关点一下，选项被隐藏了
<div class="header">
<h1>小学数学出题器</h1>
<button>选项开关</button>
<button>生成题目</button>
<button>查看答案</button>
</div>
代码里少了定位，所以没用，需要添加 牛逼，正好需要 来晚了！！！！！！！！！！！真可惜 感谢分享，手机版更方便。 支持一下，大佬太强了啊 小朋友们高兴坏了 厉害👍 小朋友们说我不服{:1_918:} 支持一下，大佬牛牪犇 哈哈谢谢大佬可怕