index.html - master - lyuklus/TY

index.html
469 строк13 KB
lyuklus
Create: index.html
23 июл 2026, 14:57
23 июл 2026, 14:5717d3318
<meta charset="UTF-8">
<title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.<meta charset="UTF-8">
<head><html lang="ru"><!DOCTYPE html>
<content>
</path>trainer.html<path>
<write_to_file>Тренажер по таблице умножения</title>
<style> * { margin:
    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: 900px;
        margin: 0 auto;
        background: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    h1 {
        text-align: center;
        color: #667eea;
        margin-bottom: 10px;
        font-size: 2.5em;
    }

    .subtitle {
        text-align: center;
        color: #666;
        margin-bottom: 30px;
        font-size: 1.1em;
    }

    .student-info {
        margin-bottom: 30px;
    }

    label {
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-weight: 600;
        font-size: 1.1em;
    }

    input[type="text"] {
        width: 100%;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 10px;
        font-size: 1em;
        transition: border-color 0.3s;
    }

    input[type="text"]:focus {
        outline: none;
        border-color: #667eea;
    }

    .problems-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
    }

    .problem {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: transform 0.2s;
    }

    .problem:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .problem-text {
        font-size: 1.3em;
        font-weight: 600;
        color: #333;
        min-width: 80px;
    }

    .answer-input {
        width: 70px;
        padding: 8px;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 1.1em;
        text-align: center;
    }

    .answer-input:focus {
        outline: none;
        border-color: #667eea;
    }

    .answer-input.correct {
        background-color: #d4edda;
        border-color: #28a745;
    }

    .answer-input.incorrect {
        background-color: #f8d7da;
        border-color: #dc3545;
    }

    .buttons {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }

    button {
        padding: 15px 30px;
        font-size: 1.1em;
        font-weight: 600;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s;
        color: white;
    }

    .btn-check {
        background: #28a745;
    }

    .btn-check:hover {
        background: #218838;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    }

    .btn-new {
        background: #667eea;
    }

    .btn-new:hover {
        background: #5568d3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-save {
        background: #ffc107;
        color: #333;
    }

    .btn-save:hover {
        background: #e0a800;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    }

    .btn-history {
        background: #17a2b8;
    }

    .btn-history:hover {
        background: #138496;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    }

    .result {
        text-align: center;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
        font-size: 1.3em;
        font-weight: 600;
        display: none;
    }

    .result.show {
        display: block;
        animation: fadeIn 0.5s;
    }

    .result.excellent {
        background: #d4edda;
        color: #155724;
    }

    .result.good {
        background: #fff3cd;
        color: #856404;
    }

    .result.poor {
        background: #f8d7da;
        color: #721c24;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .history {
        margin-top: 30px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 10px;
        display: none;
    }

    .history.show {
        display: block;
        animation: fadeIn 0.5s;
    }

    .history h2 {
        color: #667eea;
        margin-bottom: 15px;
    }

    .history-item {
        background: white;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 8px;
        border-left: 4px solid #667eea;
    }

    .history-item .date {
        color: #666;
        font-size: 0.9em;
        margin-bottom: 5px;
    }

    .history-item .name {
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .history-item .score {
        color: #28a745;
        font-weight: 600;
    }

    .clear-history {
        background: #dc3545;
        margin-top: 15px;
    }

    .clear-history:hover {
        background: #c82333;
    }

    @media (max-width: 600px) {
        .container {
            padding: 20px;
        }

        h1 {
            font-size: 1.8em;
        }

        .problems-container {
            grid-template-columns: 1fr;
        }

        .buttons {
            flex-direction: column;
        }

        button {
            width: 100%;
        }
    }
</style>
<p class="субтитры">
<p class
</h1>
🧮 Тренажёр<h1><div class="контейнер"></head>Таблица умножения для 5 класса</p>
    <div class="student-info">
        <label for="studentName">ФИО ученика:</label>
        <input type="text" id="studentName" placeholder="Введите ваше имя">
    </div>

    <div class="problems-container" id="problemsContainer"></div>

    <div class="result" id="result"></div>

    <div class="buttons">
        <button class="btn-check" onclick="checkAnswers()">✓ Проверить</button>
        <button class="btn-new" onclick="generateProblems()">🔄 Новые примеры</button>
        <button class="btn-save" onclick="saveResult()">💾 Сохранить результат</button>
        <button class="btn-history" onclick="toggleHistory()">📊 История</button>
    </div>

    <div class="history" id="history">
        <h2>История результатов</h2>
        <div id="historyList"></div>
        <button class="clear-history" onclick="clearHistory()">🗑️ Очистить историю</button>
    </div>
</div>

<script>
    let problems = [];
    const NUM_PROBLEMS = 12;

    function generateProblems() {
        problems = [];
        const container = document.getElementById('problemsContainer');
        container.innerHTML = '';

        for (let i = 0; i < NUM_PROBLEMS; i++) {
            const num1 = Math.floor(Math.random() * 9) + 2;
            const num2 = Math.floor(Math.random() * 9) + 2;
            problems.push({ num1, num2, answer: num1 * num2 });

            const problemDiv = document.createElement('div');
            problemDiv.className = 'problem';
            problemDiv.innerHTML = `
                <span class="problem-text">${num1} × ${num2} =</span>
                <input type="number" class="answer-input" id="answer${i}" placeholder="?">
            `;
            container.appendChild(problemDiv);
        }

        document.getElementById('result').classList.remove('show');
    }

    function checkAnswers() {
        let correct = 0;
        const studentName = document.getElementById('studentName').value.trim();

        if (!studentName) {
            alert('Пожалуйста, введите ваше ФИО');
            return;
        }

        for (let i = 0; i < problems.length; i++) {
            const input = document.getElementById(`answer${i}`);
            const userAnswer = parseInt(input.value);

            if (userAnswer === problems[i].answer) {
                input.classList.remove('incorrect');
                input.classList.add('correct');
                correct++;
            } else {
                input.classList.remove('correct');
                input.classList.add('incorrect');
            }
        }

        const percentage = Math.round((correct / problems.length) * 100);
        const resultDiv = document.getElementById('result');
        
        resultDiv.classList.remove('excellent', 'good', 'poor');
        
        if (percentage >= 90) {
            resultDiv.classList.add('excellent');
            resultDiv.innerHTML = `🎉 Отлично! ${correct} из ${problems.length} правильно (${percentage}%)`;
        } else if (percentage >= 70) {
            resultDiv.classList.add('good');
            resultDiv.innerHTML = `👍 Хорошо! ${correct} из ${problems.length} правильно (${percentage}%)`;
        } else {
            resultDiv.classList.add('poor');
            resultDiv.innerHTML = `📚 Нужно потренироваться! ${correct} из ${problems.length} правильно (${percentage}%)`;
        }

        resultDiv.classList.add('show');
    }

    function saveResult() {
        const studentName = document.getElementById('studentName').value.trim();
        const resultDiv = document.getElementById('result');

        if (!studentName) {
            alert('Пожалуйста, введите ваше ФИО');
            return;
        }

        if (!resultDiv.classList.contains('show')) {
            alert('Сначала проверьте ответы');
            return;
        }

        let correct = 0;
        for (let i = 0; i < problems.length; i++) {
            const input = document.getElementById(`answer${i}`);
            const userAnswer = parseInt(input.value);
            if (userAnswer === problems[i].answer) {
                correct++;
            }
        }

        const result = {
            name: studentName,
            date: new Date().toLocaleString('ru-RU'),
            correct: correct,
            total: problems.length,
            percentage: Math.round((correct / problems.length) * 100)
        };

        let history = JSON.parse(localStorage.getItem('mathTrainerHistory') || '[]');
        history.unshift(result);
        
        if (history.length > 20) {
            history = history.slice(0, 20);
        }

        localStorage.setItem('mathTrainerHistory', JSON.stringify(history));
        alert('✅ Результат сохранён!');
        displayHistory();
    }

    function toggleHistory() {
        const historyDiv = document.getElementById('history');
        historyDiv.classList.toggle('show');
        if (historyDiv.classList.contains('show')) {
            displayHistory();
        }
    }

    function displayHistory() {
        const history = JSON.parse(localStorage.getItem('mathTrainerHistory') || '[]');
        const historyList = document.getElementById('historyList');

        if (history.length === 0) {
            historyList.innerHTML = '<p style="text-align: center; color: #666;">История пуста</p>';
            return;
        }

        historyList.innerHTML = history.map(item => `
            <div class="history-item">
                <div class="date">${item.date}</div>
                <div class="name">${item.name}</div>
                <div class="score">Правильных ответов: ${item.correct} из ${item.total} (${item.percentage}%)</div>
            </div>
        `).join('');
    }

    function clearHistory() {
        if (confirm('Вы уверены, что хотите очистить всю историю?')) {
            localStorage.removeItem('mathTrainerHistory');
            displayHistory();
        }
    }

    generateProblems();
</script>
</body>
</</html>
</content>
</write_to_file>