index.html - master - shool/test

index.html
663 строки23 KB
shool
Create: index.html
22 июл 2026, 15:29
22 июл 2026, 15:29078f6d8
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест: Всемирная паутина (WWW) и файловые архивы</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: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 10px;
            font-size: 28px;
        }

        .topic {
            text-align: center;
            color: #667eea;
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .instructions {
            background: #f0f4ff;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            border-left: 4px solid #667eea;
        }

        .instructions p {
            color: #555;
            line-height: 1.6;
        }

        .question {
            margin-bottom: 30px;
            padding: 25px;
            background: #f9f9f9;
            border-radius: 12px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .question:hover {
            border-color: #667eea;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
        }

        .question-text {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .option {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .option:hover {
            background: #f0f4ff;
            border-color: #667eea;
        }

        .option input[type="radio"] {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .option label {
            cursor: pointer;
            flex: 1;
            color: #555;
            line-height: 1.5;
        }

        .option.selected {
            background: #e8eeff;
            border-color: #667eea;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease;
            margin-top: 20px;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .result {
            display: none;
            margin-top: 30px;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            animation: fadeIn 0.5s ease;
        }

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

        .result.show {
            display: block;
        }

        .result.excellent {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            color: white;
        }

        .result.good {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .result.satisfactory {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }

        .result.poor {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
            color: white;
        }

        .result h2 {
            font-size: 32px;
            margin-bottom: 15px;
        }

        .result p {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .grade {
            font-size: 48px;
            font-weight: bold;
            margin: 20px 0;
        }

        .retry-btn {
            padding: 12px 30px;
            background: white;
            color: #667eea;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            transition: all 0.2s ease;
        }

        .retry-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .answer-review {
            margin-top: 20px;
            text-align: left;
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 8px;
        }

        .answer-review h3 {
            margin-bottom: 15px;
            font-size: 18px;
        }

        .answer-item {
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.3);
        }

        .correct {
            border-left: 4px solid #4caf50;
        }

        .incorrect {
            border-left: 4px solid #f44336;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            margin-bottom: 30px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            width: 0%;
            transition: width 0.3s ease;
        }

        /* Модальное окно с оценкой */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }

        .modal-overlay.show {
            display: flex;
        }

        .modal {
            background: white;
            border-radius: 25px;
            padding: 50px 40px;
            text-align: center;
            max-width: 450px;
            width: 90%;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }

        @keyframes popIn {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .modal-grade {
            font-size: 140px;
            font-weight: bold;
            line-height: 1;
            margin: 20px 0;
            animation: bounceIn 0.8s ease;
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .modal-grade.grade-5 {
            color: #11998e;
            text-shadow: 0 4px 20px rgba(17, 153, 142, 0.4);
        }

        .modal-grade.grade-4 {
            color: #4facfe;
            text-shadow: 0 4px 20px rgba(79, 172, 254, 0.4);
        }

        .modal-grade.grade-3 {
            color: #fa709a;
            text-shadow: 0 4px 20px rgba(250, 112, 154, 0.4);
        }

        .modal-grade.grade-2 {
            color: #ff6b6b;
            text-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
        }

        .modal-score {
            font-size: 20px;
            color: #666;
            margin-bottom: 10px;
        }

        .modal-message {
            font-size: 18px;
            color: #555;
            margin-bottom: 30px;
            font-weight: 500;
        }

        .modal-emoji {
            font-size: 60px;
            margin-bottom: 15px;
            animation: bounceIn 0.8s ease;
        }

        .modal-close-btn {
            padding: 14px 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .modal-close-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .stars {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 30px;
            letter-spacing: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 Тест</h1>
        <div class="topic">Тема: «Всемирная паутина (WWW) и файловые архивы»</div>
        
        <div class="instructions">
            <p><strong>Инструкция:</strong> Внимательно прочитайте вопросы. Выберите один правильный ответ. После завершения теста вы увидите свой результат.</p>
        </div>

        <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
        </div>

        <form id="quizForm">
            <div class="question" data-question="1">
                <div class="question-text">1. Какой протокол используется для передачи гипертекстовых документов (веб-страниц)?</div>
                <div class="options">
                    <div class="option">
                        <input type="radio" name="q1" id="q1a" value="A">
                        <label for="q1a">A) FTP</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q1" id="q1b" value="B">
                        <label for="q1b">B) HTTP</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q1" id="q1c" value="C">
                        <label for="q1c">C) SMTP</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q1" id="q1d" value="D">
                        <label for="q1d">D) TCP/IP</label>
                    </div>
                </div>
            </div>

            <div class="question" data-question="2">
                <div class="question-text">2. Что такое WWW (Всемирная паутина)?</div>
                <div class="options">
                    <div class="option">
                        <input type="radio" name="q2" id="q2a" value="A">
                        <label for="q2a">A) Это совокупность всех компьютеров в Интернете.</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q2" id="q2b" value="B">
                        <label for="q2b">B) Это сервис, предоставляющий доступ к гипертекстовым документам.</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q2" id="q2c" value="C">
                        <label for="q2c">C) Это протокол передачи данных.</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q2" id="q2d" value="D">
                        <label for="q2d">D) Это программа для работы с электронной почтой.</label>
                    </div>
                </div>
            </div>

            <div class="question" data-question="3">
                <div class="question-text">3. В каком случае вы, скорее всего, попали на файловый архив (FTP-сервер)?</div>
                <div class="options">
                    <div class="option">
                        <input type="radio" name="q3" id="q3a" value="A">
                        <label for="q3a">A) Вы видите красочную веб-страницу с картинками и анимацией.</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q3" id="q3b" value="B">
                        <label for="q3b">B) Вы видите список папок и файлов, а в адресной строке написано ftp://.</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q3" id="q3c" value="C">
                        <label for="q3c">C) Вы видите поисковую строку и рекламу.</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q3" id="q3d" value="D">
                        <label for="q3d">D) Вы видите новостную ленту.</label>
                    </div>
                </div>
            </div>

            <div class="question" data-question="4">
                <div class="question-text">4. Какой из адресов соответствует файловому архиву?</div>
                <div class="options">
                    <div class="option">
                        <input type="radio" name="q4" id="q4a" value="A">
                        <label for="q4a">A) http://txt.org</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q4" id="q4b" value="B">
                        <label for="q4b">B) https://school.ru</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q4" id="q4c" value="C">
                        <label for="q4c">C) ftp://file.net/document.zip</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q4" id="q4d" value="D">
                        <label for="q4d">D) www.google.com</label>
                    </div>
                </div>
            </div>

            <div class="question" data-question="5">
                <div class="question-text">5. Адрес файла task.doc на сервере home.ru по протоколу FTP записывается как:</div>
                <div class="options">
                    <div class="option">
                        <input type="radio" name="q5" id="q5a" value="A">
                        <label for="q5a">A) ftp://task.doc/home.ru</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q5" id="q5b" value="B">
                        <label for="q5b">B) http://home.ru/task.doc</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q5" id="q5c" value="C">
                        <label for="q5c">C) ftp://home.ru/task.doc</label>
                    </div>
                    <div class="option">
                        <input type="radio" name="q5" id="q5d" value="D">
                        <label for="q5d">D) home.ru/ftp://task.doc</label>
                    </div>
                </div>
            </div>

            <button type="submit" class="submit-btn">Завершить тест</button>
        </form>

        <div id="result" class="result">
            <h2 id="resultTitle"></h2>
            <p id="scoreText"></p>
            <div class="grade" id="grade"></div>
            <div class="answer-review" id="answerReview"></div>
            <button class="retry-btn" onclick="location.reload()">Пройти тест заново</button>
        </div>
    </div>

    <!-- Модальное окно с оценкой -->
    <div class="modal-overlay" id="modalOverlay">
        <div class="modal">
            <div class="stars" id="modalStars"></div>
            <div class="modal-emoji" id="modalEmoji"></div>
            <div class="modal-title">Ваша оценка:</div>
            <div class="modal-grade" id="modalGrade"></div>
            <div class="modal-score" id="modalScore"></div>
            <div class="modal-message" id="modalMessage"></div>
            <button class="modal-close-btn" onclick="closeModal()">Посмотреть разбор ответов</button>
        </div>
    </div>

    <script>
        const correctAnswers = {
            1: 'B',
            2: 'B',
            3: 'B',
            4: 'C',
            5: 'C'
        };

        // Обновление прогресс-бара
        function updateProgress() {
            const answered = document.querySelectorAll('input[type="radio"]:checked').length;
            const total = 5;
            const percentage = (answered / total) * 100;
            document.getElementById('progressFill').style.width = percentage + '%';
        }

        // Подсветка выбранного варианта
        document.querySelectorAll('.option').forEach(option => {
            option.addEventListener('click', function() {
                const question = this.closest('.question');
                question.querySelectorAll('.option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                this.classList.add('selected');
                this.querySelector('input[type="radio"]').checked = true;
                updateProgress();
            });
        });

        // Закрытие модального окна
        function closeModal() {
            document.getElementById('modalOverlay').classList.remove('show');
            document.getElementById('result').scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        // Обработка отправки формы
        document.getElementById('quizForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            let score = 0;
            let reviewHTML = '<h3>Разбор ответов:</h3>';

            // Подсчет правильных ответов
            for (let i = 1; i <= 5; i++) {
                const selected = document.querySelector(`input[name="q${i}"]:checked`);
                const userAnswer = selected ? selected.value : 'Не отвечено';
                const correctAnswer = correctAnswers[i];
                const isCorrect = userAnswer === correctAnswer;
                
                if (isCorrect) {
                    score++;
                    reviewHTML += `<div class="answer-item correct">Вопрос ${i}: ✓ Правильно (${userAnswer})</div>`;
                } else {
                    reviewHTML += `<div class="answer-item incorrect">Вопрос ${i}: ✗ Неправильно (ваш ответ: ${userAnswer}, правильный: ${correctAnswer})</div>`;
                }
            }

            // Определение оценки
            let grade = '2';
            let resultClass = 'poor';
            let resultTitle = 'Нужно повторить материал';
            let modalEmoji = '😔';
            let modalMessage = 'Не расстраивайся! Повтори материал и попробуй снова.';
            let stars = '';

            if (score === 5) {
                grade = '5';
                resultClass = 'excellent';
                resultTitle = 'Отлично! 🎉';
                modalEmoji = '🏆';
                modalMessage = 'Превосходный результат! Ты отлично знаешь тему!';
                stars = '⭐⭐⭐⭐⭐';
            } else if (score === 4) {
                grade = '4';
                resultClass = 'good';
                resultTitle = 'Хорошо! 👍';
                modalEmoji = '😊';
                modalMessage = 'Хороший результат! Ещё немного практики — и будет отлично!';
                stars = '⭐⭐⭐⭐';
            } else if (score === 3) {
                grade = '3';
                resultClass = 'satisfactory';
                resultTitle = 'Удовлетворительно';
                modalEmoji = '📚';
                modalMessage = 'Неплохо, но стоит повторить некоторые моменты.';
                stars = '⭐⭐⭐';
            } else {
                stars = '⭐⭐';
            }

            // Отображение результата внизу страницы
            const resultDiv = document.getElementById('result');
            resultDiv.className = `result show ${resultClass}`;
            
            document.getElementById('resultTitle').textContent = resultTitle;
            document.getElementById('scoreText').textContent = `Правильных ответов: ${score} из 5`;
            document.getElementById('grade').textContent = `Оценка: ${grade}`;
            document.getElementById('answerReview').innerHTML = reviewHTML;

            // Показ модального окна с оценкой СРАЗУ
            document.getElementById('modalGrade').textContent = grade;
            document.getElementById('modalGrade').className = `modal-grade grade-${grade}`;
            document.getElementById('modalScore').textContent = `Правильных ответов: ${score} из 5`;
            document.getElementById('modalMessage').textContent = modalMessage;
            document.getElementById('modalEmoji').textContent = modalEmoji;
            document.getElementById('modalStars').textContent = stars;
            
            document.getElementById('modalOverlay').classList.add('show');
        });
    </script>
</body>
</html>