index.html - main - dimooon/rep_dimoon

index.html
357 строк15 KB
IceShowBoy
Update index.html
04 сен 2025, 18:23
04 сен 2025, 18:237162880
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой Тест</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f0f0f0;
        }
        #quiz-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .btn {
            margin: 5px;
            padding: 10px 15px;
            background-color: #4c87af;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #367c39;
        }
        .answer-btn {
            display: block;
            width: 100%;
            text-align: left;
            margin: 5px 0;
        }
        .feedback {
            margin: 15px 0;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 18px;
        }
        .correct-feedback {
            background-color: #d4edda;
            color: #155724;
        }
        .incorrect-feedback {
            background-color: #f8d7da;
            color: #721c24;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .correct-row {
            background-color: #d4edda;
        }
        .incorrect-row {
            background-color: #f8d7da;
        }
        .user-answer {
            font-weight: bold;
        }
        .correct-answer {
            color: #28a745;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="quiz-container">
        <h1>Тест</h1>
       <p id="welcome-text">Добро пожаловать! Давай проверим твои знания про Димона.</p>
        
        <div id="question-container" style="display: none;">
            <h2 id="question"></h2>
            <div id="answer-buttons"></div>
            <div id="feedback" class="feedback" style="display: none;"></div>
            <button id="next-btn" class="btn" style="display: none;">Следующий вопрос</button>
        </div>

        <button id="start-btn" class="btn">Начать тест</button>
        
        <div id="result-container" style="display: none;">
            <h2 id="result-text"></h2>
            <div id="results-table"></div>
            <button id="restart-btn" class="btn">Пройти тест снова</button>
        </div>
    </div>

    <script>
        // Массив с вопросами и ответами
        const questions = [
          {
                question: "Какой любимейший цвет у Димона?",
                answers: [
                    { text: "Алый", correct: false },
                    { text: "Лиловый", correct: false },
                    { text: "Синий", correct: true },
                    { text: "Фисташковый", correct: false }
                ]
            },
            {
                question: "Какой фастфудик выберет Димончик на фудкорте?",
                answers: [
                    { text: "Макшнакнес", correct: false },
                    { text: "БК", correct: false },
                    { text: "Франклинс", correct: true },
                    { text: "Киэфси", correct: false },
                    { text: "Крофка Картофка", correct: false }
                ]
            },
            {
                question: "По какой песне сохнет Димон?",
                answers: [
                    { text: "Dame un Grrr (Fantomel, KATE LINN)", correct: false },
                    { text: "MENTE MA (NAKAMA, MC Staff)", correct: false },
                    { text: "Наследство (ICEGERGERT, SKY RAE)", correct: false },
                    { text: "Наследство (Шоугерл, Кристос)", correct: true }
                ]
            },
            {
                question: "Сколько ложек кофи и кубиков сахара Он кладет в чашку?",
                answers: [
                    { text: "0,5 кофи и 1 кубик", correct: false },
                    { text: "1 кофи и 1 кубик", correct: true },
                    { text: "1 кофи и 1,5 кубика", correct: false },
                    { text: "1,5 кофи и 1 кубик", correct: false },
                    { text: "1,5 кофи и 1,5 кубика", correct: false }
                ]
            },
            {
                question: "Что Он кричит, когда оплачивает покупки приложением Сбербанка?",
                answers: [
                    { text: "Сосать Америка, сосать!", correct: true },
                    { text: "Yessssssss!", correct: false },
                    { text: "Ляпота!", correct: false }
                ]
            },
            {
                question: "Что Он выберет?",
                answers: [
                    
                    { text: "Пон", correct: true },
                    { text: "Ясно", correct: false },
                    { text: "Услышал тебя, Родной!", correct: false }
                ]
            },
            {
                question: "Что больше всего любит этот ваш Димон?",
                answers: [
                    { text: "Чай", correct: true },
                    { text: "Кофе", correct: false },
                    { text: "Цикорий", correct: false }
                ]
            },
            
            {
                question: "О каком отдыхе мечтает Димон в 2026 году?",
                answers: [
                    { text: "Лежать в кроватке", correct: false },
                    { text: "Поехать в круиз по Европе", correct: true },
                    { text: "Отправиться на лыжный курорт во Францию", correct: false },
                    { text: "Отдых на Кубе", correct: false }
                ]
            },
            {
                question: "Где раньше жил Димон?",
                answers: [
                    { text: "В Избе", correct: false },
                    { text: "В Икше", correct: true },
                    { text: "В Истре", correct: false },
                    { text: "В согласии и гармонии", correct: false },
                    { text: "В Дмитрове", correct: false }
                ]
            },
            {
                question: "Какой стикер Он постоянно хочет сделать в свой стикерпак, но Шоугерл его постоянно забалтывает?",
                answers: [
                    { text: "Легендарный окей", correct: true },
                    { text: "В стиле 'Um Grrr'", correct: false },
                    { text: "Приветствие", correct: false }
                ]
            }
        ];

        // Переменные для отслеживания состояния
        let currentQuestionIndex = 0;
        let score = 0;
        let userAnswers = [];

        // Получаем элементы со страницы
        const startBtn = document.getElementById('start-btn');
        const welcomeText = document.getElementById('welcome-text');
        const questionContainer = document.getElementById('question-container');
        const questionElement = document.getElementById('question');
        const answerButtonsElement = document.getElementById('answer-buttons');
        const feedbackElement = document.getElementById('feedback');
        const nextBtn = document.getElementById('next-btn');
        const resultContainer = document.getElementById('result-container');
        const resultText = document.getElementById('result-text');
        const resultsTable = document.getElementById('results-table');
        const restartBtn = document.getElementById('restart-btn');

        // Обработчик кнопки "Начать"
        startBtn.addEventListener('click', startGame);

        // Обработчик кнопки "Следующий вопрос"
        nextBtn.addEventListener('click', () => {
            currentQuestionIndex++;
            if (currentQuestionIndex < questions.length) {
                showQuestion();
            } else {
                showResult();
            }
        });

        // Обработчик кнопки перезапуска
        restartBtn.addEventListener('click', startGame);

        function startGame() {
            startBtn.style.display = 'none';
            welcomeText.style.display = 'none';
            questionContainer.style.display = 'block';
            resultContainer.style.display = 'none';
            currentQuestionIndex = 0;
            score = 0;
            userAnswers = [];
            showQuestion();
        }

        // Показывает текущий вопрос
        function showQuestion() {
            resetState();
            const currentQuestion = questions[currentQuestionIndex];
            questionElement.innerText = `Вопрос ${currentQuestionIndex + 1}: ${currentQuestion.question}`;

            currentQuestion.answers.forEach(answer => {
                const button = document.createElement('button');
                button.innerText = answer.text;
                button.classList.add('btn', 'answer-btn');
                button.addEventListener('click', () => selectAnswer(answer));
                answerButtonsElement.appendChild(button);
            });
        }

        // Сбрасывает состояние перед показом нового вопроса
        function resetState() {
            nextBtn.style.display = 'none';
            feedbackElement.style.display = 'none';
            while (answerButtonsElement.firstChild) {
                answerButtonsElement.removeChild(answerButtonsElement.firstChild);
            }
        }

        // Обработчик выбора ответа
        function selectAnswer(answer) {
            const currentQuestion = questions[currentQuestionIndex];
            const correctAnswer = currentQuestion.answers.find(a => a.correct);
            
            // Сохраняем ответ пользователя
            userAnswers.push({
                question: currentQuestion.question,
                userAnswer: answer.text,
                correctAnswer: correctAnswer.text,
                isCorrect: answer.correct
            });

            // Блокируем кнопки после выбора
            Array.from(answerButtonsElement.children).forEach(button => {
                button.disabled = true;
                // Подсвечиваем правильный ответ
                if (button.innerText === correctAnswer.text) {
                    button.style.backgroundColor = '#4CAF50';
                } else if (button.innerText === answer.text && !answer.correct) {
                    button.style.backgroundColor = '#ff4444';
                }
            });

            // Показываем feedback
            feedbackElement.style.display = 'block';
            if (answer.correct) {
                feedbackElement.textContent = "Yeeeeeeeah!";
                feedbackElement.className = "feedback correct-feedback";
                score++;
            } else {
                feedbackElement.textContent = "Писец! Ладно, идем дальше(";
                feedbackElement.className = "feedback incorrect-feedback";
            }

            nextBtn.style.display = 'block';
        }

        // Показывает результат теста
        function showResult() {
            questionContainer.style.display = 'none';
            resultContainer.style.display = 'block';

            // Вариативные надписи в зависимости от результата
            if (score === questions.length) {
                resultText.innerText = "Ты просто БОМБА! Идеальный результат! Скрин скинь мне в тг и переверни телефон для лучшего отображения таблицы.";
            } else if (score >= questions.length * 0.7) {
                resultText.innerText = `Харооооош! Ты ответила правильно на ${score} из ${questions.length} вопросов. Скрин скинь мне в тг и переверни телефон для лучшего отображения таблицы.`;
            } else {
                resultText.innerText = `Пойдет, Бро! Ты ответила правильно на ${score} из ${questions.length} вопросов. Скрин скинь мне в тг и переверни телефон для лучшего отображения таблицы.`;
            }

            // Создаем таблицу с результатами
            createResultsTable();
        }

        // Создает таблицу с результатами
        function createResultsTable() {
            let tableHTML = `
                <table>
                    <tr>
                        <th>Вопрос</th>
                        <th>Ваш ответ</th>
                        <th>Правильный ответ</th>
                        <th>Результат</th>
                    </tr>
            `;

            userAnswers.forEach((answer, index) => {
                const rowClass = answer.isCorrect ? 'correct-row' : 'incorrect-row';
                const resultText = answer.isCorrect ? '✅ Правильно' : '❌ Неправильно';
                
                tableHTML += `
                    <tr class="${rowClass}">
                        <td>${index + 1}. ${answer.question}</td>
                        <td class="user-answer">${answer.userAnswer}</td>
                        <td class="correct-answer">${answer.correctAnswer}</td>
                        <td>${resultText}</td>
                    </tr>
                `;
            });

            tableHTML += '</table>';
            resultsTable.innerHTML = tableHTML;
        }
    </script>
</body>
</html>