[Asm] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小学数学出题系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1E40AF',
secondary: '#3B82F6',
accent: '#60A5FA',
neutral: '#F3F4F6',
glass: 'rgba(255, 255, 255, 0.7)'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
[url=home.php?mod=space&uid=1688376]@layer[/url] utilities {
.content-auto {
content-visibility: auto;
}
.glass-effect {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.border-dashed-rounded {
border-style: dashed;
border-radius: 0.75rem;
}
.btn-dashed {
border-style: dashed;
border-radius: 9999px;
}
.math-icon {
border-radius: 9999px;
border: 2px solid theme('colors.primary');
}
.page-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.scale-hover {
transition: transform 0.2s ease-in-out;
}
.scale-hover:hover {
transform: scale(1.02);
}
.scrollbar-thin {
scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 2px;
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen font-sans">
<!-- 顶部导航栏 -->
<header class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-primary/20">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-calculator text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-primary">小学数学出题系统</h1>
</div>
<!-- 数学图标按钮 -->
<button id="settings-toggle" class="math-icon p-2 bg-white hover:bg-blue-50 transition-colors duration-300">
<i class="fa-solid fa-calculator text-primary text-xl"></i>
</button>
</div>
</header>
<!-- 左侧设置面板 - 默认隐藏 -->
<div id="settings-panel" class="fixed top-0 left-0 h-full w-72 bg-white border-r border-primary/20 transform -translate-x-full transition-transform duration-300 ease-in-out z-40 overflow-y-auto scrollbar-thin">
<div class="p-4 h-full flex flex-col">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-semibold text-primary">题目设置</h2>
<button id="close-settings" class="btn-dashed p-1 border-primary text-primary hover:bg-primary/10 transition-colors">
<i class="fa-solid fa-times"></i>
</button>
</div>
<form id="settings-form" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">班级</label>
<input type="text" id="class-name" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入班级">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
<input type="text" id="student-name" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入姓名">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">年级</label>
<select id="grade" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">每行题目数量</label>
<input type="number" id="problems-per-row" min="1" max="10" value="4" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">每页行数</label>
<input type="number" id="rows-per-page" min="1" max="30" value="10" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">总页数</label>
<input type="number" id="total-pages" min="1" max="20" value="1" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">字体大小 (px)</label>
<input type="number" id="font-size" min="12" max="36" value="16" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
</div>
<button type="button" id="generate-problems" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center">
<i class="fa-solid fa-refresh mr-2"></i> 生成题目
</button>
</form>
<div class="mt-auto pt-4 border-t border-gray-200">
<button id="export-pdf" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center">
<i class="fa-solid fa-file-pdf mr-2"></i> 导出PDF
</button>
<button id="print" class="w-full mt-2 bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center">
<i class="fa-solid fa-print mr-2"></i> 打印
</button>
</div>
</div>
</div>
<!-- 主内容区域 -->
<main class="container mx-auto px-4 pt-20 pb-10">
<!-- 标签页导航 -->
<div class="flex border-b border-gray-200 mb-6">
<button id="problems-tab" class="py-2 px-4 border-b-2 border-primary text-primary font-medium">题目页</button>
<button id="answers-tab" class="py-2 px-4 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium">答案页</button>
</div>
<!-- 题目页 -->
<div id="problems-page" class="space-y-6">
<!-- 标题区域 -->
<div class="glass-effect rounded-xl border border-primary p-4 shadow-sm">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<span class="text-sm text-gray-500">日期：</span>
<span id="current-date" class="font-medium"></span>
</div>
<div>
<span class="text-sm text-gray-500">姓名：</span>
<span id="display-name" class="font-medium">未设置</span>
</div>
<div>
<span class="text-sm text-gray-500">班级：</span>
<span id="display-class" class="font-medium">未设置</span>
</div>
<div>
<span class="text-sm text-gray-500">分数：</span>
<span class="font-medium">________</span>
</div>
</div>
</div>
<!-- 题目预览区域 -->
<div class="space-y-8" id="problems-container">
<!-- 题目将通过JavaScript动态生成 -->
<div class="flex justify-center items-center py-12">
<div class="text-center">
<i class="fa-solid fa-calculator text-gray-300 text-5xl mb-4"></i>
<p class="text-gray-500">请点击右上角设置图标并生成题目</p>
</div>
</div>
</div>
</div>
<!-- 答案页 - 默认隐藏 -->
<div id="answers-page" class="space-y-6 hidden">
<!-- 标题区域 -->
<div class="glass-effect rounded-xl border border-primary p-4 shadow-sm">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<span class="text-sm text-gray-500">日期：</span>
<span id="current-date-answers" class="font-medium"></span>
</div>
<div>
<span class="text-sm text-gray-500">姓名：</span>
<span id="display-name-answers" class="font-medium">未设置</span>
</div>
<div>
<span class="text-sm text-gray-500">班级：</span>
<span id="display-class-answers" class="font-medium">未设置</span>
</div>
<div>
<span class="text-sm text-gray-500">答案：</span>
<span class="font-medium"></span>
</div>
</div>
</div>
<!-- 答案预览区域 -->
<div class="space-y-8" id="answers-container">
<!-- 答案将通过JavaScript动态生成 -->
<div class="flex justify-center items-center py-12">
<div class="text-center">
<i class="fa-solid fa-check-circle text-gray-300 text-5xl mb-4"></i>
<p class="text-gray-500">请先在题目页生成题目</p>
</div>
</div>
</div>
</div>
</main>
<!-- 遮罩层 -->
<div id="overlay" class="fixed inset-0 bg-black/30 z-30 hidden"></div>
<!-- 生成PDF的隐藏容器 -->
<div id="pdf-container" class="hidden">
<div id="pdf-content">
<!-- PDF内容将通过JavaScript动态生成 -->
</div>
</div>
<script>
// 全局变量存储当前题目和答案
let currentProblems = [];
let currentAnswers = [];
// DOM元素
const settingsToggle = document.getElementById('settings-toggle');
const closeSettings = document.getElementById('close-settings');
const settingsPanel = document.getElementById('settings-panel');
const overlay = document.getElementById('overlay');
const problemsTab = document.getElementById('problems-tab');
const answersTab = document.getElementById('answers-tab');
const problemsPage = document.getElementById('problems-page');
const answersPage = document.getElementById('answers-page');
const generateProblemsBtn = document.getElementById('generate-problems');
const exportPdfBtn = document.getElementById('export-pdf');
const printBtn = document.getElementById('print');
const problemsContainer = document.getElementById('problems-container');
const answersContainer = document.getElementById('answers-container');
const pdfContainer = document.getElementById('pdf-container');
const pdfContent = document.getElementById('pdf-content');
// 初始化日期
document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN');
document.getElementById('current-date-answers').textContent = new Date().toLocaleDateString('zh-CN');
// 侧边栏设置面板控制
settingsToggle.addEventListener('click', () => {
settingsPanel.classList.remove('-translate-x-full');
overlay.classList.remove('hidden');
});
closeSettings.addEventListener('click', () => {
settingsPanel.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
overlay.addEventListener('click', () => {
settingsPanel.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
// 标签页切换
problemsTab.addEventListener('click', () => {
problemsTab.classList.add('border-primary', 'text-primary');
problemsTab.classList.remove('border-transparent', 'text-gray-500');
answersTab.classList.add('border-transparent', 'text-gray-500');
answersTab.classList.remove('border-primary', 'text-primary');
problemsPage.classList.remove('hidden');
answersPage.classList.add('hidden');
});
answersTab.addEventListener('click', () => {
answersTab.classList.add('border-primary', 'text-primary');
answersTab.classList.remove('border-transparent', 'text-gray-500');
problemsTab.classList.add('border-transparent', 'text-gray-500');
problemsTab.classList.remove('border-primary', 'text-primary');
answersPage.classList.remove('hidden');
problemsPage.classList.add('hidden');
// 如果还没有生成答案，显示提示
if (currentAnswers.length === 0) {
answersContainer.innerHTML = `
<div class="flex justify-center items-center py-12">
<div class="text-center">
<i class="fa-solid fa-check-circle text-gray-300 text-5xl mb-4"></i>
<p class="text-gray-500">请先在题目页生成题目</p>
</div>
</div>
`;
}
});
// 生成题目
generateProblemsBtn.addEventListener('click', () => {
// 获取设置值并进行验证
const className = document.getElementById('class-name').value || '未设置';
const studentName = document.getElementById('student-name').value || '未设置';
const grade = parseInt(document.getElementById('grade').value);
const problemsPerRow = parseInt(document.getElementById('problems-per-row').value) || 4;
const rowsPerPage = parseInt(document.getElementById('rows-per-page').value) || 10;
const totalPages = parseInt(document.getElementById('total-pages').value) || 1;
const fontSize = parseInt(document.getElementById('font-size').value) || 16;
// 更新显示信息
document.getElementById('display-name').textContent = studentName;
document.getElementById('display-class').textContent = className;
document.getElementById('display-name-answers').textContent = studentName;
document.getElementById('display-class-answers').textContent = className;
// 生成题目
const totalProblems = problemsPerRow * rowsPerPage * totalPages;
[currentProblems, currentAnswers] = generateMathProblems(totalProblems, grade);
// 渲染题目
renderProblems(currentProblems, problemsPerRow, rowsPerPage, totalPages, fontSize);
// 关闭设置面板
settingsPanel.classList.add('-translate-x-full');
overlay.classList.add('hidden');
// 切换到题目页
problemsTab.click();
});
// 导出PDF
exportPdfBtn.addEventListener('click', () => {
if (currentProblems.length === 0) {
alert('请先生成题目');
return;
}
// 显示加载状态
const originalText = exportPdfBtn.innerHTML;
exportPdfBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> 正在生成PDF...';
exportPdfBtn.disabled = true;
try {
const className = document.getElementById('class-name').value || '未设置';
const studentName = document.getElementById('student-name').value || '未设置';
const grade = parseInt(document.getElementById('grade').value);
const problemsPerRow = parseInt(document.getElementById('problems-per-row').value) || 4;
const rowsPerPage = parseInt(document.getElementById('rows-per-page').value) || 10;
const totalPages = parseInt(document.getElementById('total-pages').value) || 1;
const fontSize = parseInt(document.getElementById('font-size').value) || 16;
// 生成PDF内容
generatePdfContent(currentProblems, currentAnswers, className, studentName, problemsPerRow, rowsPerPage, totalPages, fontSize);
// 创建临时元素来保存PDF内容并渲染
const tempElement = document.createElement('div');
tempElement.className = 'fixed top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center';
tempElement.appendChild(pdfContent.cloneNode(true));
document.body.appendChild(tempElement);
// 等待DOM渲染完成
setTimeout(() => {
// 使用html2canvas和jsPDF导出PDF
html2canvas(tempElement.querySelector('#pdf-content'), {
scale: 2,
useCORS: true,
logging: false,
letterRendering: true,
allowTaint: true,
scrollX: 0,
scrollY: 0
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jspdf.jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
});
const imgWidth = 210;
const imgHeight = canvas.height * imgWidth / canvas.width;
// 计算总页数
const totalPdfPages = Math.ceil(imgHeight / 297);
// 添加每一页
for (let i = 0; i < totalPdfPages; i++) {
if (i > 0) pdf.addPage();
const y = i * 297;
pdf.addImage(imgData, 'PNG', 0, -y, imgWidth, imgHeight);
}
pdf.save('数学题目.pdf');
// 移除临时元素
document.body.removeChild(tempElement);
// 恢复按钮状态
exportPdfBtn.innerHTML = originalText;
exportPdfBtn.disabled = false;
}).catch(error => {
console.error('导出PDF失败:', error);
alert('导出PDF时出错，请重试');
// 移除临时元素
document.body.removeChild(tempElement);
// 恢复按钮状态
exportPdfBtn.innerHTML = originalText;
exportPdfBtn.disabled = false;
});
}, 100);
} catch (error) {
console.error('导出PDF时发生错误:', error);
alert('导出PDF时发生错误，请重试');
// 恢复按钮状态
exportPdfBtn.innerHTML = originalText;
exportPdfBtn.disabled = false;
}
});
// 打印功能
printBtn.addEventListener('click', () => {
if (currentProblems.length === 0) {
alert('请先生成题目');
return;
}
window.print();
});
// 生成数学题目
function generateMathProblems(count, grade) {
const problems = [];
const answers = [];
for (let i = 0; i < count; i++) {
let problem, answer;
// 根据年级确定题目类型和难度
if (grade === 1) {
// 一年级：20以内加减法
const op = Math.random() < 0.5 ? '+' : '-';
if (op === '+') {
// 加法：确保结果不超过20
const a = Math.floor(Math.random() * 10) + 1;
const b = Math.floor(Math.random() * (20 - a)) + 1;
problem = `${a} + ${b} =`;
answer = a + b;
} else {
// 减法：确保结果为正数
const a = Math.floor(Math.random() * 10) + 11;
const b = Math.floor(Math.random() * a) + 1;
problem = `${a} - ${b} =`;
answer = a - b;
}
} else if (grade === 2) {
// 二年级：100以内加减法，引入乘法
const ops = ['+', '-', '*'];
const op = ops[Math.floor(Math.random() * ops.length)];
if (op === '+') {
// 加法：确保结果不超过100
const a = Math.floor(Math.random() * 50) + 1;
const b = Math.floor(Math.random() * (100 - a)) + 1;
problem = `${a} + ${b} =`;
answer = a + b;
} else if (op === '-') {
// 减法：确保结果为正数
const a = Math.floor(Math.random() * 50) + 51;
const b = Math.floor(Math.random() * a) + 1;
problem = `${a} - ${b} =`;
answer = a - b;
} else {
// 乘法：确保结果不超过100
const a = Math.floor(Math.random() * 10) + 1;
const b = Math.floor(Math.random() * (100 / a)) + 1;
problem = `${a} × ${b} =`;
answer = a * b;
}
} else if (grade === 3) {
// 三年级：加入除法和混合运算
const ops = ['+', '-', '*', '/', 'mix'];
const op = ops[Math.floor(Math.random() * ops.length)];
if (op === '+') {
// 加法
const a = Math.floor(Math.random() * 50) + 1;
const b = Math.floor(Math.random() * 50) + 1;
problem = `${a} + ${b} =`;
answer = a + b;
} else if (op === '-') {
// 减法
const a = Math.floor(Math.random() * 100) + 1;
const b = Math.floor(Math.random() * a) + 1;
problem = `${a} - ${b} =`;
answer = a - b;
} else if (op === '*') {
// 乘法
const a = Math.floor(Math.random() * 10) + 1;
const b = Math.floor(Math.random() * 10) + 1;
problem = `${a} × ${b} =`;
answer = a * b;
} else if (op === '/') {
// 除法：确保能够整除
const b = Math.floor(Math.random() * 9) + 2; // 除数不能为0或1
const a = b * (Math.floor(Math.random() * 10) + 1); // 被除数是除数的倍数
problem = `${a} ÷ ${b} =`;
answer = a / b;
} else {
// 混合运算
const a = Math.floor(Math.random() * 20) + 1;
const b = Math.floor(Math.random() * 10) + 1;
const c = Math.floor(Math.random() * 10) + 1;
// 随机选择运算顺序
if (Math.random() < 0.5) {
// 先乘除后加减
if (Math.random() < 0.5) {
// 先乘后加
problem = `${a} + ${b} × ${c} =`;
answer = a + b * c;
} else {
// 先除后加
problem = `${a} + ${b * c} ÷ ${b} =`;
answer = a + c;
}
} else {
// 有括号的运算
if (Math.random() < 0.5) {
// 括号内加法
problem = `(${a} + ${b}) × ${c} =`;
answer = (a + b) * c;
} else {
// 括号内减法
problem = `(${a} - ${b}) × ${c} =`;
answer = (a - b) * c;
}
}
}
}
problems.push(problem);
answers.push(answer);
}
return [problems, answers];
}
// 渲染题目
function renderProblems(problems, problemsPerRow, rowsPerPage, totalPages, fontSize) {
problemsContainer.innerHTML = '';
answersContainer.innerHTML = '';
const totalProblems = problems.length;
const problemsPerPage = problemsPerRow * rowsPerPage;
// 计算实际需要的页数
const actualPages = Math.ceil(totalProblems / problemsPerPage);
// 渲染题目页
for (let page = 0; page < actualPages; page++) {
const startIdx = page * problemsPerPage;
const endIdx = Math.min(startIdx + problemsPerPage, totalProblems);
if (startIdx >= totalProblems) break;
const pageProblems = problems.slice(startIdx, endIdx);
const pageElement = document.createElement('div');
pageElement.className = 'glass-effect rounded-xl border border-primary p-6 page-shadow scale-hover';
let pageContent = `<div class="text-center mb-6"><h2 class="text-lg font-semibold">第 ${page + 1} 页</h2></div>`;
// 使用CSS Grid按照每行题目数量排列
pageContent += `<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-${problemsPerRow} gap-4">`;
pageProblems.forEach((problem, idx) => {
pageContent += `
<div class="p-2 border border-gray-200 rounded-lg bg-white">
<span class="text-gray-500">${startIdx + idx + 1}. </span>
<span style="font-size: ${fontSize}px">${problem}</span>
<span class="ml-2">________</span>
</div>
`;
});
pageContent += '</div>';
pageElement.innerHTML = pageContent;
problemsContainer.appendChild(pageElement);
}
// 渲染答案页
for (let page = 0; page < actualPages; page++) {
const startIdx = page * problemsPerPage;
const endIdx = Math.min(startIdx + problemsPerPage, totalProblems);
if (startIdx >= totalProblems) break;
const pageAnswers = currentAnswers.slice(startIdx, endIdx);
const pageProblems = currentProblems.slice(startIdx, endIdx);
const pageElement = document.createElement('div');
pageElement.className = 'glass-effect rounded-xl border border-primary p-6 page-shadow scale-hover';
let pageContent = `<div class="text-center mb-6"><h2 class="text-lg font-semibold">第 ${page + 1} 页答案</h2></div>`;
// 使用CSS Grid按照每行题目数量排列
pageContent += `<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-${problemsPerRow} gap-4">`;
pageAnswers.forEach((answer, idx) => {
pageContent += `
<div class="p-2 border border-gray-200 rounded-lg bg-white">
<span class="text-gray-500">${startIdx + idx + 1}. </span>
<span style="font-size: ${fontSize}px">${pageProblems[idx]}</span>
<span class="ml-2 font-medium">${answer}</span>
</div>
`;
});
pageContent += '</div>';
pageElement.innerHTML = pageContent;
answersContainer.appendChild(pageElement);
}
}
// 生成PDF内容
function generatePdfContent(problems, answers, className, studentName, problemsPerRow, rowsPerPage, totalPages, fontSize) {
pdfContent.innerHTML = '';
const totalProblems = problems.length;
const problemsPerPage = problemsPerRow * rowsPerPage;
// 计算实际需要的页数
const actualPages = Math.ceil(totalProblems / problemsPerPage);
// 设置PDF样式
const styleElement = document.createElement('style');
styleElement.textContent = `
[url=home.php?mod=space&uid=1953840]@page[/url] {
size: A4;
margin: 1.5cm;
}
body {
font-family: 'Inter', system-ui, sans-serif;
}
.pdf-page {
page-break-after: always;
margin-bottom: 20px;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(${problemsPerRow}, 1fr);
gap: 10px;
}
.problem-item {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 5px;
}
.answer-item {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 5px;
}
.title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.page-title {
text-align: center;
font-size: 18px;
font-weight: semibold;
margin-bottom: 15px;
}
`;
pdfContent.appendChild(styleElement);
// 添加题目页
for (let page = 0; page < actualPages; page++) {
const startIdx = page * problemsPerPage;
const endIdx = Math.min(startIdx + problemsPerPage, totalProblems);
if (startIdx >= totalProblems) break;
const pageProblems = problems.slice(startIdx, endIdx);
const pageElement = document.createElement('div');
pageElement.className = 'pdf-page';
let pageContent = `
<div class="title">数学练习题</div>
<div class="info-row">
<div><span class="font-medium">班级：</span>${className}</div>
<div><span class="font-medium">姓名：</span>${studentName}</div>
<div><span class="font-medium">分数：</span>________</div>
</div>
<div class="page-title">第 ${page + 1} 页</div>
<div class="problem-grid">
`;
pageProblems.forEach((problem, idx) => {
pageContent += `
<div class="problem-item">
<span class="text-gray-500">${startIdx + idx + 1}. </span>
<span style="font-size: ${fontSize}px">${problem}</span>
<span class="ml-2">________</span>
</div>
`;
});
pageContent += '</div>';
pageElement.innerHTML = pageContent;
pdfContent.appendChild(pageElement);
}
// 添加分页符
const pageBreak = document.createElement('div');
pageBreak.className = 'page-break';
pageBreak.style.pageBreakAfter = 'always';
pdfContent.appendChild(pageBreak);
// 添加答案页
for (let page = 0; page < actualPages; page++) {
const startIdx = page * problemsPerPage;
const endIdx = Math.min(startIdx + problemsPerPage, totalProblems);
if (startIdx >= totalProblems) break;
const pageAnswers = answers.slice(startIdx, endIdx);
const pageProblems = problems.slice(startIdx, endIdx);
const pageElement = document.createElement('div');
pageElement.className = 'pdf-page';
let pageContent = `
<div class="title">数学练习题答案</div>
<div class="info-row">
<div><span class="font-medium">班级：</span>${className}</div>
<div><span class="font-medium">姓名：</span>${studentName}</div>
<div></div>
</div>
<div class="page-title">第 ${page + 1} 页答案</div>
<div class="problem-grid">
`;
pageAnswers.forEach((answer, idx) => {
pageContent += `
<div class="answer-item">
<span class="text-gray-500">${startIdx + idx + 1}. </span>
<span style="font-size: ${fontSize}px">${pageProblems[idx]}</span>
<span class="ml-2 font-medium">${answer}</span>
</div>
`;
});
pageContent += '</div>';
pageElement.innerHTML = pageContent;
pdfContent.appendChild(pageElement);
}
}
</script>
</body>
</html>
[复制链接]
发表于 2024-11-18 21:26
发表于 2025-5-11 21:15
分享到朋友圈
