9.23 小学口算题卡html

image

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小学生口算题卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Comic Sans MS', '楷体', sans-serif;
            background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 30px;
            border: 3px solid #4fc3f7;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: #0288d1;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 10px;
        }
        
        .header p {
            color: #666;
            font-size: 1.2em;
        }
        
        .student-info {
            background: linear-gradient(45deg, #4fc3f7, #0288d1);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            margin-bottom: 15px;
            display: inline-block;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .student-name, .student-id {
            font-weight: bold;
            font-size: 1.1em;
            margin: 0 10px;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #4fc3f7, #0288d1);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }
        
        .btn-secondary {
            background: linear-gradient(45deg, #ffb74d, #f57c00);
            color: white;
        }
        
        .btn-print {
            background: linear-gradient(45deg, #66bb6a, #2e7d32);
            color: white;
        }
        
        .exercises-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .exercise-card {
            background: #f8f9fa;
            border: 2px solid #e3f2fd;
            border-radius: 15px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .exercise-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-color: #4fc3f7;
        }
        
        .problem {
            font-size: 1.3em;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .answer-input {
            width: 80px;
            padding: 8px;
            border: 2px solid #b3e5fc;
            border-radius: 8px;
            text-align: center;
            font-size: 1.1em;
            outline: none;
        }
        
        .answer-input:focus {
            border-color: #4fc3f7;
            box-shadow: 0 0 5px rgba(79, 195, 247, 0.5);
        }
        
        .score-display {
            text-align: center;
            font-size: 1.2em;
            color: #0288d1;
            font-weight: bold;
            margin-top: 20px;
            padding: 15px;
            background: #e3f2fd;
            border-radius: 10px;
        }
        
        .correct {
            border-color: #66bb6a !important;
            background-color: #e8f5e8 !important;
        }
        
        .incorrect {
            border-color: #f44336 !important;
            background-color: #ffebee !important;
        }
        
        .wrong-questions {
            margin-top: 30px;
            padding: 20px;
            background: #fff3e0;
            border-radius: 15px;
            border: 2px solid #ffb74d;
            display: none;
        }
        
        .wrong-questions h3 {
            color: #f57c00;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .wrong-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        
        .wrong-item {
            background: white;
            padding: 10px;
            border-radius: 8px;
            border-left: 4px solid #f57c00;
        }
        
        .wrong-problem {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .wrong-answer {
            color: #666;
            font-size: 0.9em;
        }
        
        .wrong-user-answer {
            color: #f44336;
            font-size: 0.9em;
        }
        
        @media print {
            .controls, .btn {
                display: none !important;
            }
            
            .container {
                box-shadow: none;
                border: none;
            }
            
            .answer-input {
                border: 1px solid #ccc;
                background: transparent !important;
            }
        }
        
        .animation {
            animation: bounce 0.5s ease;
        }
        
        @keyframes bounce {
            0%, 20%, 60%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            80% {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🧮 小学生口算题卡</h1>
            <p>每次生成50道口算题，锻炼计算能力！</p>
        </div>
        
        <div class="controls">
            <button class="btn btn-primary" onclick="generateExercises()">
                🎯 生成新题目
            </button>
            <button class="btn btn-secondary" onclick="checkAnswers()">
                ✅ 检查答案
            </button>
            <button class="btn btn-print" onclick="window.print()">
                🖨️ 打印题目
            </button>
            <button class="btn" onclick="showWrongQuestions()" style="background: linear-gradient(45deg, #ff9800, #f57c00); color: white;">
                📝 查看错题本
            </button>
        </div>
        
        <div id="exercisesContainer" class="exercises-grid">
            <!-- 题目将在这里生成 -->
        </div>
        
        <div id="scoreDisplay" class="score-display">
            等待生成题目...
        </div>
        
        <div id="wrongQuestions" class="wrong-questions">
            <h3>📚 错题本</h3>
            <div id="wrongList" class="wrong-list">
                <!-- 错题将在这里显示 -->
            </div>
            <div style="text-align: center; margin-top: 15px;">
                <button class="btn" onclick="hideWrongQuestions()" style="background: #9e9e9e; color: white; padding: 8px 16px;">
                    关闭错题本
                </button>
            </div>
        </div>
    </div>

    <script>
        let currentExercises = [];
        let wrongQuestions = []; // 存储错题
        
        // 生成随机整数
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        
        // 生成单个口算题
        function generateSingleExercise() {
            const types = ['addition', 'subtraction', 'multiplication', 'division'];
            const type = types[getRandomInt(0, 3)];
            
            let a, b, problem, answer;
            
            switch(type) {
                case 'addition':
                    a = getRandomInt(1, 100);
                    b = getRandomInt(1, 100);
                    problem = `${a} + ${b} = `;
                    answer = a + b;
                    break;
                    
                case 'subtraction':
                    a = getRandomInt(1, 100);
                    b = getRandomInt(1, a); // 确保结果为正数
                    problem = `${a} - ${b} = `;
                    answer = a - b;
                    break;
                    
                case 'multiplication':
                    a = getRandomInt(2, 9); // 乘数从2开始，避免1×1
                    b = getRandomInt(2, 9); // 乘数从2开始，避免1×1
                    problem = `${a} × ${b} = `;
                    answer = a * b;
                    break;
                    
                case 'division':
                    b = getRandomInt(2, 9); // 除数从2开始，避免÷1
                    answer = getRandomInt(2, 9); // 商从2开始，避免÷1
                    a = b * answer; // 确保整除
                    problem = `${a} ÷ ${b} = `;
                    break;
            }
            
            return { problem, answer, userAnswer: null };
        }
        
        // 生成50道口算题
        function generateExercises() {
            currentExercises = [];
            const container = document.getElementById('exercisesContainer');
            container.innerHTML = '';
            
            for (let i = 0; i < 50; i++) {
                const exercise = generateSingleExercise();
                currentExercises.push(exercise);
                
                const card = document.createElement('div');
                card.className = 'exercise-card';
                card.innerHTML = `
                    <div class="problem">${exercise.problem}</div>
                    <input type="number" class="answer-input" 
                           placeholder="答案" 
                           oninput="updateAnswer(${i}, this.value)"
                           min="0" step="1">
                `;
                
                container.appendChild(card);
            }
            
            document.getElementById('scoreDisplay').textContent = 
                '50道题目已生成！请开始答题，完成后点击"检查答案"按钮。';
            
            // 添加动画效果
            const cards = document.querySelectorAll('.exercise-card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.classList.add('animation');
                    setTimeout(() => card.classList.remove('animation'), 500);
                }, index * 50);
            });
        }
        
        // 更新用户答案
        function updateAnswer(index, value) {
            if (currentExercises[index]) {
                currentExercises[index].userAnswer = value ? parseInt(value) : null;
            }
        }
        
        // 检查答案
        function checkAnswers() {
            let correctCount = 0;
            const inputs = document.querySelectorAll('.answer-input');
            wrongQuestions = []; // 清空之前的错题记录
            
            inputs.forEach((input, index) => {
                const exercise = currentExercises[index];
                if (exercise && exercise.userAnswer !== null) {
                    if (exercise.userAnswer === exercise.answer) {
                        input.parentElement.classList.add('correct');
                        input.parentElement.classList.remove('incorrect');
                        correctCount++;
                    } else {
                        input.parentElement.classList.add('incorrect');
                        input.parentElement.classList.remove('correct');
                        // 记录错题
                        wrongQuestions.push({
                            problem: exercise.problem,
                            correctAnswer: exercise.answer,
                            userAnswer: exercise.userAnswer
                        });
                    }
                } else {
                    input.parentElement.classList.remove('correct', 'incorrect');
                }
            });
            
            const score = Math.round((correctCount / 50) * 100);
            let message = `完成情况：${correctCount}/50 题正确 (`;
            
            if (score >= 90) {
                message += `🎉 优秀！${score}分`;
            } else if (score >= 70) {
                message += `👍 良好！${score}分`;
            } else if (score >= 60) {
                message += `😊 及格！${score}分`;
            } else {
                message += `💪 加油！${score}分`;
            }
            
            message += ')';
            
            if (wrongQuestions.length > 0) {
                message += ` | 有 ${wrongQuestions.length} 道错题，点击"查看错题本"复习`;
            }
            
            document.getElementById('scoreDisplay').textContent = message;
        }
        
        // 显示错题本
        function showWrongQuestions() {
            const wrongContainer = document.getElementById('wrongQuestions');
            const wrongList = document.getElementById('wrongList');
            
            if (wrongQuestions.length === 0) {
                wrongList.innerHTML = '<div style="text-align: center; color: #666;">暂无错题记录，继续加油！💪</div>';
            } else {
                wrongList.innerHTML = wrongQuestions.map((item, index) => `
                    <div class="wrong-item">
                        <div class="wrong-problem">${item.problem}</div>
                        <div class="wrong-answer">正确答案：${item.correctAnswer}</div>
                        <div class="wrong-user-answer">你的答案：${item.userAnswer}</div>
                    </div>
                `).join('');
            }
            
            wrongContainer.style.display = 'block';
            wrongContainer.scrollIntoView({ behavior: 'smooth' });
        }
        
        // 隐藏错题本
        function hideWrongQuestions() {
            document.getElementById('wrongQuestions').style.display = 'none';
        }
        
        // 页面加载时自动生成题目
        window.onload = generateExercises;
        
        // 添加键盘快捷键
        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && event.key === 'Enter') {
                generateExercises();
            } else if (event.ctrlKey && event.key === ' ') {
                checkAnswers();
            }
        });
    </script>
</body>
</html>
posted @ 2026-01-03 00:17  liu某人  阅读(4)  评论(0)    收藏  举报