<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>100以内加减法试卷生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            padding: 30px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: #333;
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .subtitle {
            color: #666;
            font-size: 1.2em;
        }

        .controls {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .control-group label {
            font-weight: 600;
            color: #333;
        }

        .control-group input, .control-group select {
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .control-group input:focus, .control-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        .buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            cursor: pointer;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .preview {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            border: 2px dashed #ddd;
        }

        .preview h3 {
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }

        .test-paper {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .test-header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
        }

        .test-title {
            font-size: 2em;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .test-info {
            color: #666;
            font-size: 1.1em;
        }

        .section {
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            padding: 10px;
            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
            border-radius: 8px;
        }

                 .questions-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 20px;
         }

        .question {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fafafa;
            font-size: 1.2em;
            font-weight: 600;
            color: #333;
        }

        .question-line {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .question-number {
            color: #667eea;
            font-weight: bold;
            min-width: 30px;
        }

        .question-text {
            flex: 1;
        }



        @media print {
            body {
                background: white;
                padding: 0;
                margin: 0;
            }
            
            .container {
                box-shadow: none;
                border-radius: 0;
                padding: 0;
                margin: 0;
                max-width: none;
                background: white;
            }
            
            .header, .controls, .buttons, .back-btn, .preview {
                display: none !important;
            }
            
            .test-paper {
                box-shadow: none;
                border: none;
                padding: 20px;
                margin: 0;
                background: white;
            }
            
                         .questions-grid {
                 grid-template-columns: repeat(3, 1fr);
                 gap: 15px;
             }
            
            .question {
                break-inside: avoid;
                page-break-inside: avoid;
                padding: 10px;
                border: 1px solid #ccc;
                background: white;
            }
            
            .section-title {
                background: #f0f0f0;
                padding: 8px;
                margin-bottom: 15px;
            }
        }

                 @media (max-width: 768px) {
             .container {
                 padding: 20px;
             }
             
             .controls {
                 flex-direction: column;
                 align-items: center;
             }
             
             .buttons {
                 flex-direction: column;
                 align-items: center;
             }
             
             .questions-grid {
                 grid-template-columns: repeat(2, 1fr);
             }
             
             .test-title {
                 font-size: 1.5em;
             }
         }
    </style>
</head>
<body>
    <a href="../index.html" class="back-btn">← 返回首页</a>
    
    <div class="container">
        <div class="header">
            <h1>📚 100以内加减法试卷生成器</h1>
            <div class="subtitle">生成适合小学生的数学练习试卷</div>
        </div>

        <div class="controls">
            <div class="control-group">
                <label for="student-name">学生姓名：</label>
                <input type="text" id="student-name" placeholder="请输入学生姓名" value="张三">
            </div>
            <div class="control-group">
                <label for="test-date">考试日期：</label>
                <input type="date" id="test-date">
            </div>
            <div class="control-group">
                <label for="simple-count">普通加减题数量：</label>
                <input type="number" id="simple-count" min="5" max="50" value="20">
            </div>
            <div class="control-group">
                <label for="complex-count">连加连减题数量：</label>
                <input type="number" id="complex-count" min="5" max="30" value="10">
            </div>
        </div>

        <div class="buttons">
            <button class="btn btn-primary" onclick="generateTest()">生成试卷</button>
            <button class="btn btn-secondary" onclick="printTest()">打印试卷</button>
        </div>

        <div class="preview" id="preview">
            <h3>试卷预览</h3>
            <p>点击"生成试卷"按钮开始生成试卷</p>
        </div>

        <div class="test-paper" id="test-paper" style="display: none;">
            <div class="test-header">
                <div class="test-title">100以内加减法练习试卷</div>
                <div class="test-info">
                    <span id="student-info">学生：张三</span> | 
                    <span id="date-info">日期：2024年1月1日</span> | 
                    <span id="score-info">满分：100分</span>
                </div>
            </div>

            <div class="section">
                <div class="section-title">一、普通加减法（共<span id="simple-total">20</span>题，每题3分，共60分）</div>
                <div class="questions-grid" id="simple-questions"></div>
            </div>

            <div class="section">
                <div class="section-title">二、连加连减法（共<span id="complex-total">10</span>题，每题4分，共40分）</div>
                <div class="questions-grid" id="complex-questions"></div>
            </div>
        </div>
    </div>

    <script>
        class TestGenerator {
            constructor() {
                this.setDefaultDate();
                this.generateTest();
            }

            setDefaultDate() {
                const today = new Date();
                const year = today.getFullYear();
                const month = String(today.getMonth() + 1).padStart(2, '0');
                const day = String(today.getDate()).padStart(2, '0');
                document.getElementById('test-date').value = `${year}-${month}-${day}`;
            }

            generateTest() {
                const studentName = document.getElementById('student-name').value || '张三';
                const testDate = document.getElementById('test-date').value;
                const simpleCount = parseInt(document.getElementById('simple-count').value) || 20;
                const complexCount = parseInt(document.getElementById('complex-count').value) || 10;

                // 更新试卷信息
                document.getElementById('student-info').textContent = `学生：${studentName}`;
                document.getElementById('date-info').textContent = `日期：${this.formatDate(testDate)}`;
                document.getElementById('simple-total').textContent = simpleCount;
                document.getElementById('complex-total').textContent = complexCount;

                // 生成普通加减法题目
                this.generateSimpleQuestions(simpleCount);
                
                // 生成连加连减题目
                this.generateComplexQuestions(complexCount);

                // 显示试卷
                document.getElementById('test-paper').style.display = 'block';
                document.getElementById('preview').style.display = 'none';
            }

            formatDate(dateString) {
                const date = new Date(dateString);
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return `${year}年${month}月${day}日`;
            }

            generateSimpleQuestions(count) {
                const container = document.getElementById('simple-questions');
                container.innerHTML = '';

                for (let i = 1; i <= count; i++) {
                    const question = this.generateSimpleQuestion();
                    const questionDiv = document.createElement('div');
                    questionDiv.className = 'question';
                    questionDiv.innerHTML = `
                        <div class="question-line">
                            <span class="question-number">${i}.</span>
                            <span class="question-text">${question.text}</span>
                        </div>
                    `;
                    container.appendChild(questionDiv);
                }
            }

            generateSimpleQuestion() {
                const operations = ['+', '-'];
                const operation = operations[Math.floor(Math.random() * operations.length)];
                
                let num1, num2, result;
                
                if (operation === '+') {
                    // 加法：确保结果不超过100
                    num1 = Math.floor(Math.random() * 50) + 1;
                    num2 = Math.floor(Math.random() * (100 - num1)) + 1;
                    result = num1 + num2;
                } else {
                    // 减法：确保结果不为负数
                    num1 = Math.floor(Math.random() * 50) + 50; // 50-99
                    num2 = Math.floor(Math.random() * num1) + 1;
                    result = num1 - num2;
                }

                return {
                    text: `${num1} ${operation} ${num2} = `,
                    answer: result
                };
            }

            generateComplexQuestions(count) {
                const container = document.getElementById('complex-questions');
                container.innerHTML = '';

                for (let i = 1; i <= count; i++) {
                    const question = this.generateComplexQuestion();
                    const questionDiv = document.createElement('div');
                    questionDiv.className = 'question';
                    questionDiv.innerHTML = `
                        <div class="question-line">
                            <span class="question-number">${i}.</span>
                            <span class="question-text">${question.text}</span>
                        </div>
                    `;
                    container.appendChild(questionDiv);
                }
            }

            generateComplexQuestion() {
                const patterns = [
                    // 连加：a + b + c
                    () => {
                        let a = Math.floor(Math.random() * 30) + 1;
                        let b = Math.floor(Math.random() * 30) + 1;
                        let c = Math.floor(Math.random() * (100 - a - b)) + 1;
                        return {
                            text: `${a} + ${b} + ${c} = `,
                            answer: a + b + c
                        };
                    },
                    // 连减：a - b - c
                    () => {
                        let a = Math.floor(Math.random() * 40) + 60; // 60-99
                        let b = Math.floor(Math.random() * 20) + 1;
                        let c = Math.floor(Math.random() * (a - b)) + 1;
                        return {
                            text: `${a} - ${b} - ${c} = `,
                            answer: a - b - c
                        };
                    },
                    // 加减混合：a + b - c
                    () => {
                        let a = Math.floor(Math.random() * 40) + 1;
                        let b = Math.floor(Math.random() * 30) + 1;
                        let c = Math.floor(Math.random() * Math.min(a + b, 50)) + 1;
                        return {
                            text: `${a} + ${b} - ${c} = `,
                            answer: a + b - c
                        };
                    },
                    // 减加混合：a - b + c
                    () => {
                        let a = Math.floor(Math.random() * 30) + 70; // 70-99
                        let b = Math.floor(Math.random() * 20) + 1;
                        let c = Math.floor(Math.random() * 30) + 1;
                        return {
                            text: `${a} - ${b} + ${c} = `,
                            answer: a - b + c
                        };
                    }
                ];

                const pattern = patterns[Math.floor(Math.random() * patterns.length)];
                return pattern();
            }
        }

        let testGenerator;

        function generateTest() {
            testGenerator = new TestGenerator();
        }

        function printTest() {
            if (!testGenerator) {
                alert('请先生成试卷！');
                return;
            }
            
            // 创建一个新的打印窗口
            const printWindow = window.open('', '_blank');
            const testPaper = document.getElementById('test-paper').cloneNode(true);
            
            printWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>100以内加减法练习试卷</title>
                    <style>
                        body {
                            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                            margin: 0;
                            padding: 20px;
                            background: white;
                        }
                        
                        .test-paper {
                            background: white;
                            padding: 0;
                            margin: 0;
                        }
                        
                        .test-header {
                            text-align: center;
                            margin-bottom: 30px;
                            border-bottom: 2px solid #eee;
                            padding-bottom: 20px;
                        }
                        
                        .test-title {
                            font-size: 2em;
                            font-weight: bold;
                            color: #333;
                            margin-bottom: 10px;
                        }
                        
                        .test-info {
                            color: #666;
                            font-size: 1.1em;
                        }
                        
                        .section {
                            margin-bottom: 40px;
                        }
                        
                        .section-title {
                            font-size: 1.5em;
                            font-weight: bold;
                            color: #333;
                            margin-bottom: 20px;
                            padding: 10px;
                            background: #f0f0f0;
                            border-radius: 8px;
                        }
                        
                                                 .questions-grid {
                             display: grid;
                             grid-template-columns: repeat(3, 1fr);
                             gap: 15px;
                         }
                        
                        .question {
                            padding: 10px;
                            border: 1px solid #ccc;
                            border-radius: 8px;
                            background: #fafafa;
                            font-size: 1.2em;
                            font-weight: 600;
                            color: #333;
                        }
                        
                        .question-line {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                        }
                        
                        .question-number {
                            color: #667eea;
                            font-weight: bold;
                            min-width: 30px;
                        }
                        
                        .question-text {
                            flex: 1;
                        }
                        
                                                 @media print {
                             body {
                                 padding: 10px;
                             }
                             
                             .questions-grid {
                                 display: grid !important;
                                 grid-template-columns: repeat(3, 1fr) !important;
                                 gap: 15px !important;
                             }
                             
                             .question {
                                 break-inside: avoid;
                                 page-break-inside: avoid;
                             }
                         }
                         
                         @media (max-width: 768px) {
                             .questions-grid {
                                 grid-template-columns: repeat(2, 1fr);
                             }
                         }
                         
                         @media (max-width: 480px) {
                             .questions-grid {
                                 grid-template-columns: 1fr;
                             }
                         }
                    </style>
                </head>
                <body>
                    ${testPaper.outerHTML}
                </body>
                </html>
            `);
            
            printWindow.document.close();
            printWindow.focus();
            
            // 等待内容加载完成后打印
            printWindow.onload = function() {
                printWindow.print();
                printWindow.close();
            };
        }

        // 页面加载时自动生成试卷
        window.addEventListener('load', () => {
            testGenerator = new TestGenerator();
        });
    </script>
    
    <!-- 备案信息 -->
    <div style="position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(45deg, #2c3e50, #34495e); color: white; text-align: center; padding: 10px; font-size: 12px; z-index: 1000;">
        <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #bdc3c7; text-decoration: none;">© CopyRight 2002-2025, E3U0.COM, Inc.All Rights Reserved.蜀ICP备16020131号-1</a>
    </div>
</body>
</html>