script.js - master - kolpac/russian-project

script.js
919 строк62 KB
kolpac
Create: script.js, styles.css, index.html
18 июн 2026, 22:10
18 июн 2026, 22:1086bdae5
document.addEventListener('DOMContentLoaded', () => {
    // ==========================================================================
    // Navigation (Tabs Switching)
    // ==========================================================================
    const navItems = document.querySelectorAll('.nav-item');
    const tabContents = document.querySelectorAll('.tab-content');

    navItems.forEach(item => {
        item.addEventListener('click', () => {
            const targetTab = item.getAttribute('data-tab');

            // Set active nav item
            navItems.forEach(nav => nav.classList.remove('active'));
            item.classList.add('active');

            // Show target content
            tabContents.forEach(content => {
                content.classList.remove('active');
                if (content.id === targetTab) {
                    content.classList.add('active');
                }
            });

            // Adjust layout for mobile after navigation
            if (window.innerWidth <= 768) {
                window.scrollTo({
                    top: document.querySelector('.content-area').offsetTop - 60,
                    behavior: 'smooth'
                });
            }
        });
    });

    // ==========================================================================
    // Task 1: Accordion Folder Toggle
    // ==========================================================================
    const accordionHeaders = document.querySelectorAll('.accordion-header');

    accordionHeaders.forEach(header => {
        header.addEventListener('click', () => {
            const item = header.parentElement;
            
            // Toggle current item
            item.classList.toggle('active');

            // Optional: Close other items (uncomment if accordion-only behavior is needed)
            /*
            document.querySelectorAll('.accordion-item').forEach(otherItem => {
                if (otherItem !== item) {
                    otherItem.classList.remove('active');
                }
            });
            */
        });
    });

    // ==========================================================================
    // Task 2: Interactive Table & Checking Logic
    // ==========================================================================
    const interactiveRows = document.querySelectorAll('.interactive-row');
    const checkTask2Btn = document.getElementById('check-task2-btn');
    const showTask2Btn = document.getElementById('show-task2-btn');
    const task2Score = document.getElementById('task2-score');
    const t2Rows = document.querySelectorAll('.interactive-row[data-sentence]');

    interactiveRows.forEach(row => {
        row.addEventListener('click', (e) => {
            // Prevent drawer toggle when clicking select elements
            if (e.target.tagName === 'SELECT' || e.target.tagName === 'OPTION') return;

            const sentenceNum = row.getAttribute('data-sentence');
            const detailsRow = document.getElementById(`details-${sentenceNum}`);

            // Toggle active styling on main row
            row.classList.toggle('active');

            // Toggle display on detail row
            if (detailsRow) {
                detailsRow.classList.toggle('show');
            }
        });
    });

    if (checkTask2Btn) {
        checkTask2Btn.addEventListener('click', () => {
            let correctCount = 0;
            let totalCount = t2Rows.length;

            t2Rows.forEach(row => {
                const basesSelect = row.querySelector('.bases-select');
                const typeSelect = row.querySelector('.type-select');
                const sentenceText = row.querySelector('.sentence-text');

                const basesVal = basesSelect.value;
                const basesCorrect = basesSelect.getAttribute('data-correct');
                const typeVal = typeSelect.value;
                const typeCorrect = typeSelect.getAttribute('data-correct');

                let rowCorrect = true;

                // Validate grammatical bases select
                basesSelect.classList.remove('correct', 'incorrect');
                if (basesVal === basesCorrect) {
                    basesSelect.classList.add('correct');
                } else {
                    basesSelect.classList.add('incorrect');
                    rowCorrect = false;
                }

                // Validate sentence type select
                typeSelect.classList.remove('correct', 'incorrect');
                if (typeVal === typeCorrect) {
                    typeSelect.classList.add('correct');
                } else {
                    typeSelect.classList.add('incorrect');
                    rowCorrect = false;
                }

                // Highlight whole row
                row.classList.remove('correct-row', 'incorrect-row');
                if (rowCorrect) {
                    row.classList.add('correct-row');
                    correctCount++;
                } else {
                    row.classList.add('incorrect-row');
                }

                // Highlight grammatical bases in text
                sentenceText.classList.add('highlighted');
            });

            task2Score.textContent = `Результат: ${correctCount} из ${totalCount}`;
        });
    }

    if (showTask2Btn) {
        showTask2Btn.addEventListener('click', () => {
            t2Rows.forEach(row => {
                const basesSelect = row.querySelector('.bases-select');
                const typeSelect = row.querySelector('.type-select');
                const sentenceText = row.querySelector('.sentence-text');

                basesSelect.value = basesSelect.getAttribute('data-correct');
                typeSelect.value = typeSelect.getAttribute('data-correct');

                basesSelect.classList.remove('incorrect');
                basesSelect.classList.add('correct');
                typeSelect.classList.remove('incorrect');
                typeSelect.classList.add('correct');

                row.classList.remove('incorrect-row');
                row.classList.add('correct-row');
                sentenceText.classList.add('highlighted');
            });

            task2Score.textContent = 'Все ответы показаны.';
        });
    }

    // ==========================================================================
    // Task 3: Punctuation Matching Board Logic
    // ==========================================================================
    const checkMatchingBtn = document.getElementById('check-matching-btn');
    const showCorrectMatchingBtn = document.getElementById('show-correct-matching-btn');
    const matchingScoreDisplay = document.getElementById('matching-score');
    const puncSelects = document.querySelectorAll('.punc-select');

    // Check answers
    checkMatchingBtn.addEventListener('click', () => {
        let correctCount = 0;
        let totalCount = puncSelects.length;

        puncSelects.forEach(select => {
            const row = select.closest('.matching-row');
            const selectedVal = select.value;
            const correctVal = select.getAttribute('data-correct');
            const feedbackCol = row.querySelector('.feedback-col');

            if (!selectedVal) {
                feedbackCol.textContent = 'Не выбрано';
                feedbackCol.className = 'feedback-col incorrect';
                return;
            }

            if (selectedVal === correctVal) {
                correctCount++;
                feedbackCol.textContent = 'Правильно! ✓';
                feedbackCol.className = 'feedback-col correct';
            } else {
                feedbackCol.textContent = `Ошибка! (код: ${correctVal})`;
                feedbackCol.className = 'feedback-col incorrect';
            }
        });

        matchingScoreDisplay.textContent = `Результат: ${correctCount} из ${totalCount}`;
    });

    // Auto fill correct answers
    showCorrectMatchingBtn.addEventListener('click', () => {
        puncSelects.forEach(select => {
            const row = select.closest('.matching-row');
            const correctVal = select.getAttribute('data-correct');
            const feedbackCol = row.querySelector('.feedback-col');

            select.value = correctVal;
            feedbackCol.textContent = 'Заполнено';
            feedbackCol.className = 'feedback-col correct';
        });
        matchingScoreDisplay.textContent = `Правильные ответы отображены.`;
    });

    // ==========================================================================
    // Task 4: Interactive Punctuation, Type & Dynamic Syntactic Analysis
    // ==========================================================================
    const t4Data = [
        {
            id: 1,
            full: '<span class="subj">Лес</span> и <span class="subj">горы</span> <span class="pred">слились</span>, <span class="subj">всё</span> <span class="pred">окуталось</span> густым туманом.',
            char: 'Повествоват., невоскл., сложное, БСП. Две грамм. основы: <em>лес и горы слились</em>; <em>всё окуталось</em>.',
        },
        {
            id: 2,
            full: 'То <span class="subj">солнце</span> <span class="pred">ветит</span>, то <span class="pred">идёт</span> <span class="subj">дождь</span>.',
            char: 'Повествоват., невоскл., сложное, ССП (союз <em>то...то</em>). Основы: <em>солнце светит</em>; <em>идёт дождь</em>.',
        },
        {
            id: 3,
            full: '<span class="pred">Прошло</span> <span class="subj">много времени</span> с той зимы, когда <span class="subj">они</span> <span class="pred">разлучились</span>.',
            char: 'Повествоват., невоскл., сложное, СПП (союзное слово <em>когда</em>). Основы: <em>прошло много времени</em>; <em>они разлучились</em>.',
        },
        {
            id: 4,
            full: 'Там <span class="pred">хорошо</span>, <span class="pred">где</span> нас <span class="pred">нет</span>.',
            char: 'Повествоват., невоскл., сложное, СПП (союзное слово <em>где</em>). Основы: <em>хорошо</em> (безличн.); <em>нет</em> (безличн.).',
        },
        {
            id: 5,
            full: '<span class="pred">Будет</span> <span class="subj">день</span> — <span class="pred">будет</span> и <span class="subj">пища</span>.',
            char: 'Повествоват., невоскл., сложное, БСП (тире: условие). Основы: <em>будет день</em>; <em>будет пища</em>.',
        },
        {
            id: 6,
            full: 'За окном <span class="pred">потемнело</span>, <span class="pred">наступила</span> <span class="subj">ночь</span>.',
            char: 'Повествоват., невоскл., сложное, БСП (перечисление). Основы: <em>потемнело</em> (безличн.); <em>наступила ночь</em>.',
        },
        {
            id: 7,
            full: 'Если <span class="subj">чайка</span> <span class="pred">прилетела</span>, то скоро <span class="subj">лёд</span> <span class="pred">тронется</span>.',
            char: 'Повествоват., невоскл., сложное, СПП (союз <em>если...то</em>). Основы: <em>чайка прилетела</em>; <em>лёд тронется</em>.',
        },
        {
            id: 8,
            full: '<span class="subj">Труд</span> человека <span class="pred">кормит</span>, а <span class="subj">лень</span> — <span class="pred">портит</span>.',
            char: 'Повествоват., невоскл., сложное, ССП (союз <em>а</em>). Тире — эллипсис (пропуск слова «человека»). Основы: <em>труд кормит</em>; <em>лень портит</em>.',
        },
        {
            id: 9,
            full: '<span class="pred">Льётся</span> тёплый солнечный <span class="subj">воздух</span> в комнаты, <span class="pred">шумят</span> <span class="subj">воробьи</span> и <span class="subj">синицы</span> на сирени.',
            char: 'Повествоват., невоскл., сложное, БСП (перечисление). Основы: <em>льётся воздух</em>; <em>шумят воробьи и синицы</em>.',
        },
        {
            id: 10,
            full: '<span class="subj">Облака</span> <span class="pred">рассеялись</span>, на тёмно-синем небе ярко <span class="pred">засверкали</span> <span class="subj">звёзды</span>.',
            char: 'Повествоват., невоскл., сложное, БСП (перечисление). Основы: <em>облака рассеялись</em>; <em>засверкали звёзды</em>.',
        },
    ];

    const syntaxAnalysisData = {
        1: {
            title: "Синтаксический разбор предложения №1",
            text: "«Лес и горы слились, всё окуталось густым туманом.»",
            char: "Повествовательное, невосклицательное, сложное, бессоюзное сложное предложение (БСП), состоит из двух простых частей.",
            parts: [
                "<strong>Часть 1:</strong> <em>«Лес и горы слились»</em> — двусоставное, нераспространённое, полное, осложнено однородными подлежащими.",
                "<strong>Часть 2:</strong> <em>«всё окуталось густым туманом»</em> — двусоставное, распространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>Лес</strong>, <strong>горы</strong> — <span class=\"mark subj-mark\">однородные подлежащие</span>, выражены существительными в им. п. <em>(кто? что?)</em>.",
                "<strong>и</strong> — сочинительный соединительный союз.",
                "<strong>слились</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., мн. ч. <em>(что сделали?)</em>.",
                "<strong>всё</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено определительным местоимением в им. п. <em>(кто? что?)</em>.",
                "<strong>окуталось</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., ср. р. <em>(что сделало?)</em>.",
                "<strong>густым</strong> — <span class=\"mark def-mark\">определение</span> (согласованное), выражено прилагательным <em>(каким?)</em>.",
                "<strong>туманом</strong> — <span class=\"mark obs-mark\">дополнение</span> (косвенное), выражено существительным в тв. п. <em>(чем?)</em>."
            ],
            scheme: "[ ── и ── ══ ] , [ ── ══ ] ."
        },
        2: {
            title: "Синтаксический разбор предложения №2",
            text: "«То солнце светит, то идёт дождь.»",
            char: "Повествовательное, невосклицательное, сложное, сложносочинённое предложение (ССП) с разделительным союзом «то... то», состоит из двух простых частей.",
            parts: [
                "<strong>Часть 1:</strong> <em>«То солнце светит»</em> — двусоставное, нераспространённое, полное, неосложнённое.",
                "<strong>Часть 2:</strong> <em>«то идёт дождь»</em> — двусоставное, нераспространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>То... то</strong> — повторяющийся разделительный союз.",
                "<strong>солнце</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п., ед. ч., ср. р. <em>(кто? что?)</em>.",
                "<strong>светит</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в наст. вр., 3-м л., ед. ч. <em>(что делает?)</em>.",
                "<strong>идёт</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в наст. вр., 3-м л., ед. ч. <em>(что делает?)</em>.",
                "<strong>дождь</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п., ед. ч., м. р. <em>(кто? что?)</em>."
            ],
            scheme: "то [ ── ══ ] , то [ ══ ── ] ."
        },
        3: {
            title: "Синтаксический разбор предложения №3",
            text: "«Прошло много времени с той зимы, когда они разлучились.»",
            char: "Повествовательное, невосклицательное, сложное, сложноподчинённое предложение (СПП) с придаточным определительным, состоит из главного и придаточного предложений.",
            parts: [
                "<strong>Главное предложение:</strong> <em>«Прошло много времени с той зимы»</em> — двусоставное, распространённое, полное, неосложнённое.",
                "<strong>Придаточное предложение:</strong> <em>«когда они разлучились»</em> — двусоставное, нераспространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>Прошло</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., ср. р. <em>(что сделало?)</em>.",
                "<strong>много времени</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено количественно-именным словосочетанием.",
                "<strong>с зимы</strong> — <span class=\"mark obs-mark\">обстоятельство времени</span>, выражено существительным в род. п. с предлогом <em>(когда?)</em>.",
                "<strong>той</strong> — <span class=\"mark def-mark\">определение</span> (согласованное), выражено указательным местоимением <em>(какой?)</em>.",
                "<strong>когда</strong> — союзное слово, выражено местоименным наречием в роли <span class=\"mark obs-mark\">обстоятельства времени</span> <em>(когда?)</em>.",
                "<strong>они</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено личным местоимением в им. п. <em>(кто?)</em>.",
                "<strong>разлучились</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., мн. ч. <em>(что сделали?)</em>."
            ],
            scheme: "[ ══ ── ] , (когда ── ══) ."
        },
        4: {
            title: "Синтаксический разбор предложения №4",
            text: "«Там хорошо, где нас нет.»",
            char: "Повествовательное, невосклицательное, сложное, сложноподчинённое предложение (СПП) с придаточным места, состоит из главного и придаточного предложений.",
            parts: [
                "<strong>Главное предложение:</strong> <em>«Там хорошо»</em> — односоставное (безличное), распространённое, полное, неосложнённое.",
                "<strong>Придаточное предложение:</strong> <em>«где нас нет»</em> — односоставное (безличное), распространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>Там</strong> — <span class=\"mark obs-mark\">обстоятельство места</span>, выражено местоименным наречием <em>(где?)</em>.",
                "<strong>хорошо</strong> — <span class=\"mark pred-mark\">сказуемое</span>, выражено словом категории состояния.",
                "<strong>где</strong> — союзное слово, выражено местоименным наречием в роли <span class=\"mark obs-mark\">обстоятельства места</span> <em>(где?)</em>.",
                "<strong>нас</strong> — <span class=\"mark obs-mark\">дополнение</span> (косвенное), выражено личным местоимением в род. п. <em>(кого?)</em>.",
                "<strong>нет</strong> — <span class=\"mark pred-mark\">сказуемое</span>, выражено отрицательным словом."
            ],
            scheme: "[ [там] ═ ] , (где [нет]) ."
        },
        5: {
            title: "Синтаксический разбор предложения №5",
            text: "«Будет день — будет и пища.»",
            char: "Повествовательное, невосклицательное, сложное, бессоюзное сложное предложение (БСП) со значением условия, состоит из двух простых частей (между ними ставится тире).",
            parts: [
                "<strong>Часть 1:</strong> <em>«Будет день»</em> — двусоставное, нераспространённое, полное, неосложнённое.",
                "<strong>Часть 2:</strong> <em>«будет и пища»</em> — двусоставное, нераспространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>Будет</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в буд. вр., 3-м л., ед. ч. <em>(что будет?)</em>.",
                "<strong>день</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п. <em>(что?)</em>.",
                "<strong>будет</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в буд. вр., 3-м л., ед. ч. <em>(что сделает?)</em>.",
                "<strong>и</strong> — усилительная частица.",
                "<strong>пища</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п. <em>(что?)</em>."
            ],
            scheme: "[ ══ ── ] — [ ══ ── ] ."
        },
        6: {
            title: "Синтаксический разбор предложения №6",
            text: "«За окном потемнело, наступила ночь.»",
            char: "Повествовательное, невосклицательное, сложное, бессоюзное сложное предложение (БСП) со значением одновременности/последовательности, состоит из двух простых частей.",
            parts: [
                "<strong>Часть 1:</strong> <em>«За окном потемнело»</em> — односоставное (безличное), распространённое, полное, неосложнённое.",
                "<strong>Часть 2:</strong> <em>«наступила ночь»</em> — двусоставное, нераспространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>За окном</strong> — <span class=\"mark obs-mark\">обстоятельство места</span>, выражено существительным в тв. п. с предлогом <em>(где?)</em>.",
                "<strong>потемнело</strong> — <span class=\"mark pred-mark\">сказуемое</span>, выражено глаголом в безличном значении прош. вр., ср. р. <em>(что сделало?)</em>.",
                "<strong>наступила</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., ж. р. <em>(что сделала?)</em>.",
                "<strong>ночь</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п., ед. ч., ж. р. <em>(что?)</em>."
            ],
            scheme: "[ ══ ] , [ ══ ── ] ."
        },
        7: {
            title: "Синтаксический разбор предложения №7",
            text: "«Если чайка прилетела, то скоро лёд тронется.»",
            char: "Повествовательное, невосклицательное, сложное, сложноподчинённое предложение (СПП) с придаточным условным, состоит из придаточного и главного предложений (союз «если... то»).",
            parts: [
                "<strong>Придаточное предложение:</strong> <em>«Если чайка прилетела»</em> — двусоставное, нераспространённое, полное, неосложнённое.",
                "<strong>Главное предложение:</strong> <em>«то скоро лёд тронется»</em> — двусоставное, распространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>Если... то</strong> — составной подчинительный союз условного значения.",
                "<strong>чайка</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п., ед. ч., ж. р. <em>(кто? что?)</em>.",
                "<strong>прилетела</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., ж. р. <em>(что сделала?)</em>.",
                "<strong>скоро</strong> — <span class=\"mark obs-mark\">обстоятельство времени</span>, выражено наречием <em>(когда?)</em>.",
                "<strong>лёд</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п., ед. ч., м. р. <em>(что?)</em>.",
                "<strong>тронется</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в буд. вр., 3-м л., ед. ч. <em>(что сделает?)</em>."
            ],
            scheme: "(Если ── ══) , [то ── ══] ."
        },
        8: {
            title: "Синтаксический разбор предложения №8",
            text: "«Труд человека кормит, а лень — портит.»",
            char: "Повествовательное, невосклицательное, сложное, сложносочинённое предложение (ССП) с противительным союзом «а», состоит из двух простых частей. Во второй части тире указывает на пропуск дополнения (эллипсис).",
            parts: [
                "<strong>Часть 1:</strong> <em>«Труд человека кормит»</em> — двусоставное, распространённое, полное, неосложнённое.",
                "<strong>Часть 2:</strong> <em>«а лень — портит»</em> — двусоставное, неполное (пропущено дополнение «человека»), распространённое, неосложнённое."
            ],
            members: [
                "<strong>Труд</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п. <em>(что?)</em>.",
                "<strong>человека</strong> — <span class=\"mark obs-mark\">дополнение</span> (прямое), выражено существительным в род./вин. п. <em>(кого?)</em>.",
                "<strong>кормит</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в наст. вр., 3-м л., ед. ч. <em>(что делает?)</em>.",
                "<strong>а</strong> — противительный союз.",
                "<strong>лень</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п. <em>(что?)</em>.",
                "<strong>—</strong> — тире на месте пропуска прямого дополнения («человека»).",
                "<strong>портит</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в наст. вр., 3-м л., ед. ч. <em>(что делает?)</em>."
            ],
            scheme: "[ ── ══ ] , а [ ── — ══ ] ."
        },
        9: {
            title: "Синтаксический разбор предложения №9",
            text: "«Льётся тёплый солнечный воздух в комнаты, шумят воробьи и синицы на сирени.»",
            char: "Повествовательное, невосклицательное, сложное, бессоюзное сложное предложение (БСП) со значением одновременности, состоит из двух простых частей.",
            parts: [
                "<strong>Часть 1:</strong> <em>«Льётся тёплый солнечный воздух в комнаты»</em> — двусоставное, распространённое, полное, неосложнённое.",
                "<strong>Часть 2:</strong> <em>«шумят воробьи и синицы на сирени»</em> — двусоставное, распространённое, полное, осложнено однородными подлежащими."
            ],
            members: [
                "<strong>Льётся</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в наст. вр., 3-м л., ед. ч. <em>(что делает?)</em>.",
                "<strong>тёплый</strong>, <strong>солнечный</strong> — <span class=\"mark def-mark\">определения</span> (неоднородные), выражены прилагательными <em>(какой?)</em>.",
                "<strong>воздух</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п. <em>(что?)</em>.",
                "<strong>в комнаты</strong> — <span class=\"mark obs-mark\">обстоятельство места</span>, выражено существительным в вин. п. с предлогом <em>(куда?)</em>.",
                "<strong>шумят</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом во мн. ч. <em>(что делают?)</em>.",
                "<strong>воробьи</strong>, <strong>синицы</strong> — <span class=\"mark subj-mark\">однородные подлежащие</span>, выражены существительными в им. п. <em>(кто? что?)</em>.",
                "<strong>и</strong> — соединительный союз.",
                "<strong>на сирени</strong> — <span class=\"mark obs-mark\">обстоятельство места</span>, выражено существительным в предл. п. с предлогом <em>(где?)</em>."
            ],
            scheme: "[ ══ ── ] , [ ══ ── и ── ] ."
        },
        10: {
            title: "Синтаксический разбор предложения №10",
            text: "«Облака рассеялись, на тёмно-синем небе ярко засверкали звёзды.»",
            char: "Повествовательное, невосклицательное, сложное, бессоюзное сложное предложение (БСП), состоит из двух простых частей.",
            parts: [
                "<strong>Часть 1:</strong> <em>«Облака рассеялись»</em> — двусоставное, нераспространённое, полное, неосложнённое.",
                "<strong>Часть 2:</strong> <em>«на тёмно-синем небе ярко засверкали звёзды»</em> — двусоставное, распространённое, полное, неосложнённое."
            ],
            members: [
                "<strong>Облака</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п. мн. ч. <em>(кто? что?)</em>.",
                "<strong>рассеялись</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., мн. ч. <em>(что сделали?)</em>.",
                "<strong>на небе</strong> — <span class=\"mark obs-mark\">обстоятельство места</span>, выражено существительным в предл. п. с предлогом «на» <em>(где?)</em>.",
                "<strong>тёмно-синем</strong> — <span class=\"mark def-mark\">определение</span> (согласованное), выражено прилагательным <em>(каком?)</em>.",
                "<strong>ярко</strong> — <span class=\"mark obs-mark\">обстоятельство образа действия</span>, выражено наречием <em>(как?)</em>.",
                "<strong>засверкали</strong> — <span class=\"mark pred-mark\">сказуемое</span> (простое глагольное), выражено глаголом в прош. вр., мн. ч. <em>(что сделали?)</em>.",
                "<strong>звёзды</strong> — <span class=\"mark subj-mark\">подлежащее</span>, выражено существительным в им. п. мн. ч. <em>(кто? что?)</em>."
            ],
            scheme: "[ ── ══ ] , [ ══   ── ] ."
        }
    };

    // DOM Elements for dynamic syntax analysis card
    const syntaxTitle = document.getElementById('syntax-title');
    const syntaxSentenceText = document.getElementById('syntax-sentence-text');
    const syntaxChar = document.getElementById('syntax-char');
    const syntaxParts = document.getElementById('syntax-parts');
    const syntaxMembers = document.getElementById('syntax-members');
    const syntaxSchemeCode = document.getElementById('syntax-scheme-code');
    const syntaxSentenceSelect = document.getElementById('syntax-sentence-select');
    const syntaxSchemeTitle = document.getElementById('syntax-scheme-title');

    function updateSyntaxAnalysis(id) {
        const data = syntaxAnalysisData[id];
        if (!data) return;

        // Update card elements
        if (syntaxTitle) syntaxTitle.textContent = data.title;
        if (syntaxSentenceText) syntaxSentenceText.innerHTML = data.text;
        if (syntaxChar) syntaxChar.textContent = data.char;

        if (syntaxParts) {
            syntaxParts.innerHTML = '';
            data.parts.forEach(part => {
                const li = document.createElement('li');
                li.innerHTML = part;
                syntaxParts.appendChild(li);
            });
        }

        if (syntaxMembers) {
            syntaxMembers.innerHTML = '';
            data.members.forEach(member => {
                const p = document.createElement('p');
                p.innerHTML = member;
                syntaxMembers.appendChild(p);
            });
        }

        if (syntaxSchemeCode) {
            syntaxSchemeCode.textContent = data.scheme;
        }

        if (syntaxSchemeTitle) {
            // Determine type suffix for header
            let type = "БСП";
            if (data.char.includes("ССП")) type = "ССП";
            else if (data.char.includes("СПП")) type = "СПП";
            else if (data.char.includes("СПРВС")) type = "СПРВС";
            else if (data.char.includes("Простое")) type = "простого предложения";
            syntaxSchemeTitle.textContent = `Графическая схема ${type}:`;
        }

        // Keep dropdown in sync
        if (syntaxSentenceSelect) {
            syntaxSentenceSelect.value = id;
        }

        // Highlight the selected row in Task 4 UI
        t4Rows.forEach(r => {
            const rId = parseInt(r.getAttribute('data-t4-id'));
            r.classList.remove('t4-highlight');
            if (rId === parseInt(id)) {
                r.classList.add('t4-highlight');
            }
        });
    }

    // Add expandable details drawers to each row
    const t4Rows = document.querySelectorAll('.t4-row');
    t4Rows.forEach(row => {
        const rowId = parseInt(row.getAttribute('data-t4-id'));
        const data = t4Data.find(d => d.id === rowId);
        if (!data) return;

        const detailsDiv = document.createElement('div');
        detailsDiv.className = 't4-details';
        detailsDiv.innerHTML = `
            <div class="t4-details-inner">
                <p class="t4-full-sentence">${data.full}</p>
                <p class="t4-char">${data.char}</p>
            </div>
        `;
        row.appendChild(detailsDiv);

        // Click on row updates both inline details and bottom card
        row.addEventListener('click', (e) => {
            if (e.target.tagName === 'SELECT' || e.target.tagName === 'OPTION') return;
            
            // Switch bottom syntactic card
            updateSyntaxAnalysis(rowId);

            // Inline accordion behavior if checked/expandable
            if (row.classList.contains('t4-expandable')) {
                detailsDiv.classList.toggle('show');
            }
        });
    });

    // Dropdown selector change event
    if (syntaxSentenceSelect) {
        syntaxSentenceSelect.addEventListener('change', (e) => {
            updateSyntaxAnalysis(parseInt(e.target.value));
        });
    }

    // Initialize syntactic analysis card with sentence 10
    updateSyntaxAnalysis(10);

    const checkTask4Btn = document.getElementById('check-task4-btn');
    const showTask4Btn = document.getElementById('show-task4-btn');
    const task4Score = document.getElementById('task4-score');

    if (checkTask4Btn) {
        checkTask4Btn.addEventListener('click', () => {
            let correct = 0;
            let total = 0;

            t4Rows.forEach(row => {
                const puncSelect = row.querySelector('.punc-inline');
                const typeSelect = row.querySelector('.type-inline');
                const feedback = row.querySelector('.t4-feedback');
                let rowCorrect = true;

                // Check punctuation
                const puncVal = puncSelect.value;
                const puncCorrect = puncSelect.getAttribute('data-t4-correct');
                puncSelect.classList.remove('t4-select-correct', 't4-select-incorrect');
                if (puncVal === puncCorrect) {
                    puncSelect.classList.add('t4-select-correct');
                } else {
                    puncSelect.classList.add('t4-select-incorrect');
                    rowCorrect = false;
                }

                // Check type
                const typeVal = typeSelect.value;
                const typeCorrect = typeSelect.getAttribute('data-t4-type-correct');
                typeSelect.classList.remove('t4-select-correct', 't4-select-incorrect');
                if (typeVal === typeCorrect) {
                    typeSelect.classList.add('t4-select-correct');
                } else {
                    typeSelect.classList.add('t4-select-incorrect');
                    rowCorrect = false;
                }

                // Feedback
                row.classList.remove('t4-correct-row', 't4-incorrect-row');
                if (rowCorrect) {
                    feedback.textContent = '✓ Верно';
                    feedback.className = 't4-feedback correct';
                    row.classList.add('t4-correct-row');
                    correct++;
                } else {
                    feedback.textContent = '✗ Ошибка';
                    feedback.className = 't4-feedback incorrect';
                    row.classList.add('t4-incorrect-row');
                }

                // Mark row as expandable
                row.classList.add('t4-expandable');
                total++;
            });

            task4Score.textContent = `Результат: ${correct} из ${total}`;
        });
    }

    if (showTask4Btn) {
        showTask4Btn.addEventListener('click', () => {
            t4Rows.forEach(row => {
                const puncSelect = row.querySelector('.punc-inline');
                const typeSelect = row.querySelector('.type-inline');
                const feedback = row.querySelector('.t4-feedback');

                puncSelect.value = puncSelect.getAttribute('data-t4-correct');
                typeSelect.value = typeSelect.getAttribute('data-t4-type-correct');

                puncSelect.classList.remove('t4-select-incorrect');
                puncSelect.classList.add('t4-select-correct');
                typeSelect.classList.remove('t4-select-incorrect');
                typeSelect.classList.add('t4-select-correct');
                row.classList.remove('t4-incorrect-row');
                row.classList.add('t4-correct-row', 't4-expandable');

                feedback.textContent = '✓ Заполнено';
                feedback.className = 't4-feedback correct';

                // Open details
                const detailsDiv = row.querySelector('.t4-details');
                if (detailsDiv) detailsDiv.classList.add('show');
            });

            task4Score.textContent = 'Все ответы показаны.';
        });
    }

    // ==========================================================================
    // Creative Task 2: Quiz App Engine
    // ==========================================================================
    const quizQuestions = [
        {
            question: "1. Компьютерная с..стема зависла. Какую букву нужно вставить?",
            options: ["и", "е"],
            correct: 0,
            rule: "Правильно: <strong>система</strong>. Это заимствованное слово с безударной непроверяемой гласной в корне. Написание следует запомнить (словарное слово)."
        },
        {
            question: "2. Мы решили выд..лить память под массив. Какую букву нужно вставить?",
            options: ["и", "е"],
            correct: 1,
            rule: "Правильно: <strong>выделить</strong>. Безударная гласная в корне проверяется ударением. Проверочное слово — <strong>де́лит</strong>."
        },
        {
            question: "3. Процесс скл..нения числительных автоматизирован. Какую букву нужно вставить в корне?",
            options: ["а", "о"],
            correct: 1,
            rule: "Правильно: <strong>склонения</strong>. Безударная гласная в корне проверяется ударением. Проверочное слово — <strong>скло́н</strong>."
        },
        {
            question: "4. Код программы начал стремительно разр..статься. Какую букву пишем в корне?",
            options: ["о", "а"],
            correct: 1,
            rule: "Правильно: <strong>разрастаться</strong>. В корне с чередованием <strong>раст- / ращ- / рос-</strong> перед <strong>ст</strong> и <strong>щ</strong> пишется буква <strong>а</strong>."
        },
        {
            question: "5. Программист пр..шёл на работу вовремя. Какая приставка пишется?",
            options: ["пре-", "при-"],
            correct: 1,
            rule: "Правильно: <strong>пришёл</strong>. Приставка <strong>при-</strong> пишется в значении приближения, присоединения."
        },
        {
            question: "6. Программа пр..рвала выполнение из-за ошибки. Какая приставка пишется?",
            options: ["пре-", "при-"],
            correct: 0,
            rule: "Правильно: <strong>прервала</strong>. Приставка <strong>пре-</strong> пишется, так как близка по значению к приставке <strong>пере-</strong> (синоним: перебила выполнение)."
        },
        {
            question: "7. Мы решили бе..платный тариф заменить на подписку. Какую букву пишем на стыке?",
            options: ["з", "s (с)"],
            correct: 1,
            rule: "Правильно: <strong>бесплатный</strong>. В приставках на з-/с- перед глухими согласными (в данном случае <strong>п</strong>) пишется буква <strong>с</strong>."
        },
        {
            question: "8. Нужно ра..ширить функционал веб-приложения. Какую букву пишем?",
            options: ["з", "с"],
            correct: 1,
            rule: "Правильно: <strong>расширить</strong>. В приставках на з-/с- перед глухими согласными (в данном случае глухая шипящая <strong>ш</strong>) пишется буква <strong>с</strong>."
        },
        {
            question: "9. Не_исправле..ая вовремя ошибка в коде привела к сбою. Как пишется причастие и сколько Н?",
            options: ["неисправленая (слитно, одна Н)", "не исправленная (раздельно, НН)", "неисправленная (слитно, НН)"],
            correct: 1,
            rule: "Правильно: <strong>не исправленная вовремя</strong>. Причастие пишется раздельно с <strong>не</strong>, так как есть зависимое слово <strong>вовремя</strong>. В суффиксе полного причастия пишется <strong>нн</strong>, так как оно образовано от глагола совершенного вида (исправить) и имеет приставку."
        },
        {
            question: "10. База данных была успешно синхронизирова..а. Сколько букв Н?",
            options: ["н", "нн"],
            correct: 0,
            rule: "Правильно: <strong>синхронизирована</strong>. В кратких причастиях прошедшего времени всегда пишется одна буква <strong>н</strong>."
        },
        {
            question: "11. Мы использовали собстве..ый сервер для бэкенда. Сколько букв Н?",
            options: ["н", "нн"],
            correct: 1,
            rule: "Правильно: <strong>собственный</strong>. В отыменных прилагательных, образованных при помощи суффикса <strong>-енн-</strong>, пишется две буквы <strong>н</strong>."
        },
        {
            question: "12. Нам нужен кожа..ый чехол для рабочего ноутбука. Сколько букв Н?",
            options: ["н", "нн"],
            correct: 0,
            rule: "Правильно: <strong>кожаный</strong>. В отыменных прилагательных с суффиксами <strong>-ан- / -ян- / -ин-</strong> пишется одна буква <strong>н</strong> (исключения: оловянный, деревянный, стеклянный)."
        },
        {
            question: "13. Это далеко не_простая задача для джуниора. Как пишется НЕ со словом?",
            options: ["слитно", "раздельно"],
            correct: 1,
            rule: "Правильно: <strong>не простая</strong>. Пишется раздельно, так как присутствует сочетание <strong>далеко не</strong>, усиливающее отрицание."
        },
        {
            question: "14. Не_дописанный код остался в локальном репозитории. Как пишется НЕ со словом?",
            options: ["слитно", "раздельно"],
            correct: 0,
            rule: "Правильно: <strong>недописанный</strong>. Пишется слитно, так как перед нами полное причастие без зависимых слов и противопоставлений."
        },
        {
            question: "15. Причина сбоя веб-сервиса оставалась не_известна. Как пишется НЕ со словом?",
            options: ["слитно", "раздельно"],
            correct: 0,
            rule: "Правильно: <strong>неизвестна</strong>. Краткое прилагательное пишется слитно с <strong>не</strong>, так как его можно заменить синонимом без НЕ (скрыта, неясна) и нет условий для раздельного написания."
        },
        {
            question: "16. Новый алгоритм работает не_быстро, а медленно. Как пишется НЕ со словом?",
            options: ["слитно", "раздельно"],
            correct: 1,
            rule: "Правильно: <strong>не быстро</strong>. Пишется раздельно, так как в предложении есть противопоставление с союзом <strong>а</strong>."
        },
        {
            question: "17. Искусственный интеллект развива..тся стремительно. Какое окончание пишется в глаголе?",
            options: ["ит", "ет"],
            correct: 1,
            rule: "Правильно: <strong>развивается</strong>. Глагол <strong>развиваться</strong> относится к I спряжению. В форме 3-го лица единственного числа пишется окончание <strong>-ет-</strong>."
        },
        {
            question: "18. Опытный тестировщик быстро увид..т баг в интерфейсе. Какое окончание пишется?",
            options: ["ит", "ет"],
            correct: 0,
            rule: "Правильно: <strong>увидит</strong>. Глагол <strong>увидеть</strong> — это глагол-исключение, относится ко II спряжению. В форме 3-го лица ед. ч. пишется личное окончание <strong>-ит-</strong>."
        },
        {
            question: "19. Скрипт выполняется в фоновом режим.. . Какое окончание существительного?",
            options: ["и", "е"],
            correct: 1,
            rule: "Правильно: <strong>режиме</strong>. Существительное мужского рода <strong>режим</strong> относится ко 2-му склонению. В предложном падеже единственного числа пишется окончание <strong>-е</strong>."
        },
        {
            question: "20. Пользователь кликает по клавиш.. мыши. Какое окончание существительного?",
            options: ["и", "е"],
            correct: 1,
            rule: "Правильно: <strong>клавише</strong>. Существительное женского рода <strong>клавиша</strong> относится к 1-му склонению. В дательном падеже единственного числа пишется окончание <strong>-е</strong>."
        }
    ];

    let currentQuestionIdx = 0;
    let quizScore = 0;

    // Quiz UI Elements
    const startScreen = document.getElementById('quiz-start-screen');
    const questionScreen = document.getElementById('quiz-question-screen');
    const resultsScreen = document.getElementById('quiz-results-screen');
    const startQuizBtn = document.getElementById('start-quiz-btn');
    const restartQuizBtn = document.getElementById('restart-quiz-btn');

    const questionText = document.getElementById('question-text');
    const optionsContainer = document.getElementById('options-container');
    const progressFill = document.getElementById('quiz-progress-fill');
    const questionNumber = document.getElementById('question-number');
    const quizScoreDisplay = document.getElementById('quiz-score-display');

    const feedbackCard = document.getElementById('feedback-card');
    const feedbackIcon = document.getElementById('feedback-icon');
    const feedbackTitle = document.getElementById('feedback-title');
    const feedbackExplanation = document.getElementById('feedback-explanation');
    const nextQuestionBtn = document.getElementById('next-question-btn');

    const finalScoreText = document.getElementById('final-score-text');
    const resultBarFill = document.getElementById('result-bar-fill');
    const resultComment = document.getElementById('result-comment');
    const medalIcon = document.getElementById('medal-icon');

    // Event listeners
    startQuizBtn.addEventListener('click', startQuiz);
    restartQuizBtn.addEventListener('click', startQuiz);
    nextQuestionBtn.addEventListener('click', loadNextQuestion);

    function startQuiz() {
        currentQuestionIdx = 0;
        quizScore = 0;
        
        startScreen.classList.remove('active');
        resultsScreen.classList.remove('active');
        questionScreen.classList.add('active');

        updateScoreDisplay();
        loadQuestion();
    }

    function updateScoreDisplay() {
        quizScoreDisplay.textContent = `Баллы: ${quizScore}`;
    }

    function loadQuestion() {
        // Reset feedback
        feedbackCard.classList.add('hidden');
        feedbackCard.className = 'feedback-card hidden';

        const currentQ = quizQuestions[currentQuestionIdx];
        questionText.textContent = currentQ.question;

        // Progress bar
        const progressPercent = ((currentQuestionIdx + 1) / quizQuestions.length) * 100;
        progressFill.style.width = `${progressPercent}%`;
        questionNumber.textContent = `Вопрос ${currentQuestionIdx + 1} из ${quizQuestions.length}`;

        // Clear and add options
        optionsContainer.innerHTML = '';
        currentQ.options.forEach((option, idx) => {
            const btn = document.createElement('button');
            btn.className = 'option-btn animate-fade-in';
            btn.textContent = option;
            btn.addEventListener('click', () => handleOptionClick(idx));
            optionsContainer.appendChild(btn);
        });
    }

    function handleOptionClick(selectedIdx) {
        const currentQ = quizQuestions[currentQuestionIdx];
        const optionButtons = optionsContainer.querySelectorAll('.option-btn');

        // Disable all buttons to freeze selection
        optionButtons.forEach(btn => btn.disabled = true);

        const isCorrect = selectedIdx === currentQ.correct;

        // Visual markup of correct/incorrect options
        optionButtons.forEach((btn, idx) => {
            if (idx === currentQ.correct) {
                btn.classList.add('correct-choice');
            } else if (idx === selectedIdx && !isCorrect) {
                btn.classList.add('incorrect-choice');
            }
        });

        if (isCorrect) {
            quizScore++;
            updateScoreDisplay();
            feedbackIcon.textContent = '🎉';
            feedbackTitle.textContent = 'Абсолютно верно!';
            feedbackCard.classList.add('correct-feedback');
        } else {
            feedbackIcon.textContent = '❌';
            feedbackTitle.textContent = 'Увы, ошибка!';
            feedbackCard.classList.add('incorrect-feedback');
        }

        feedbackExplanation.innerHTML = currentQ.rule;
        feedbackCard.classList.remove('hidden');

        // Smooth scroll to feedback
        feedbackCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function loadNextQuestion() {
        currentQuestionIdx++;
        if (currentQuestionIdx < quizQuestions.length) {
            loadQuestion();
        } else {
            showQuizResults();
        }
    }

    function showQuizResults() {
        questionScreen.classList.remove('active');
        resultsScreen.classList.add('active');

        finalScoreText.textContent = `Вы набрали ${quizScore} из ${quizQuestions.length} очков.`;

        const percent = (quizScore / quizQuestions.length) * 100;
        
        // Animating result progress bar
        setTimeout(() => {
            resultBarFill.style.width = `${percent}%`;
        }, 100);

        // Grade assessments and comments
        if (percent === 100) {
            medalIcon.textContent = '👑';
            resultComment.textContent = 'Идеально! Вы великолепно знаете русский язык и IT-терминологию!';
        } else if (percent >= 80) {
            medalIcon.textContent = '🏆';
            resultComment.textContent = 'Отличный результат! У вас высокий уровень грамотности.';
        } else if (percent >= 60) {
            medalIcon.textContent = '🥈';
            resultComment.textContent = 'Хорошо! Большинство правил вы знаете на отлично.';
        } else {
            medalIcon.textContent = '📚';
            resultComment.textContent = 'Есть к чему стремиться! Рекомендуем повторить правила.';
        }
    }
});