script.js - master - Vsla/grinberg_a

script.js
397 строк24 KB
vvtuev
init
15 фев 2026, 15:29
15 фев 2026, 15:29bac59f2
const data = [
    { text: "Поваренная соль содержит хлор.", column: 0 },
    { text: "Хлор — сильный окислитель.", column: 1 },
    { text: "Хлор входит в состав минерала галита.", column: 0 },
    { text: "Хлор реагирует даже с золотом.", column: 1 },
    { text: "В хлориде железа (III) по сравнению с хлоридом железа (II) содержится больше хлора.", column: 0 },
    { text: "Впервые кальций был получен Г. Дэви в 1808 г.", column: 1 },
    { text: "Кальций наряду с углеродом и кислородом входит в состав мела.", column: 0 },
    { text: "Сплав кальция с цинком используется в производстве пенобетона.", column: 1 },
    { text: "Яичная скорлупа содержит довольно много кальция.", column: 0 },
    { text: "Кальций получают электролизом расплава его хлорида.", column: 1 },
    { text: "Соли, содержащие литий, окрашивают пламя в карминово-красный цвет.", column: 0 },
    { text: "Литий — наименее активный среди щелочных металлов.", column: 1 },
    { text: "Оксид лития является основным оксидом.", column: 0 },
    { text: "При попадании на влажную кожу литий вызывает ожоги.", column: 1 },
    { text: "Молекула фосфина состоит из трех атомов водорода и одного атома фосфора.", column: 0 },
    { text: "Водород – самый лёгкий газ", column: 1 },
    { text: "Фосфор входит в состав растительных и животных белков.", column: 0 },
    { text: "Азотом наполняют электролампы.", column: 1 },
    { text: "Сера входит в состав некоторых аминокислот.", column: 0 },
    { text: "Красный фосфор не растворяется в сероуглероде.", column: 1 },
    { text: "Четырехвалентное олово образует обширный класс оловоорганических соединений.", column: 0 },
    { text: "Фосфор получают при восстановлении фосфорита углем.", column: 1 },
    { text: "Уран относится к семейству актиноидов.", column: 0 },
    { text: "Уран не имеет стабильных изотопов.", column: 1 },
    { text: "Биологическая роль сурьмы не выяснена, хотя она постоянно присутствует в живых организмах.", column: 0 },
    { text: "Мышьяк химически активен.", column: 1 },
    { text: "Сурьма содержится во многих минералах.", column: 0 },
    { text: "Мышьяк — зеленоватый полуметалл.", column: 1 },
    { text: "В пиротехнике реальгар, в состав которого входит мышьяк, употребляется для получения «греческого» огня или «индийского» (бенгальского) огня.", column: 0 },
    { text: "Мышьяк особой чистоты используется для синтеза полупроводниковых материалов.", column: 1 },
    { text: "У атома мышьяка пять валентных электронов.", column: 0 },
    { text: "Свинец очень ковкий и легко плавится.", column: 1 },
    { text: "Бром содержится в морской воде.", column: 0 },
    { text: "До конца XIX в. алюминий в промышленных масштабах не производился.", column: 1 },
    { text: "Бром принадлежит к VIIA группе — галогенам.", column: 0 },
    { text: "При производстве сплавов для авиационной промышленности используется алюминий.", column: 1 },
    { text: "Иод входит в скелетный белок губок.", column: 0 },
    { text: "Алюминий практически не подвержен коррозии.", column: 1 },
    { text: "Отсутствие или недостаток иода в рационе приводит к заболеваниям.", column: 0 },
    { text: "Впервые фтор был получен А. Муассаном в 1886 г.", column: 1 },
    { text: "Бокситы, в состав которых входит алюминий, являются важнейшей рудой, на которой базируется почти вся мировая алюминиевая промышленность.", column: 0 },
    { text: "Кальций — умеренно твердый металл серебристо-белого цвета.", column: 1 },
    { text: "Натрий — шестой по распространенности в земной коре.", column: 0 },
    { text: "Натрий — мягкий щелочной металл серебристо-белого цвета.", column: 1 },
    { text: "Натрий содержится в морской воде.", column: 0 },
    { text: "Натрий под высоким давлением становится прозрачным и красным, как рубин.", column: 1 },
    { text: "Препараты брома имеют соленый вкус и оказывают седативный и снотворный эффект.", column: 0 },
    { text: "Натрий широко используется в металлургии.", column: 1 },
    { text: "Атомная масса хлора составляет 35,453 а. е. м.", column: 0 },
    { text: "Неон химически инертен.", column: 1 },
    { text: "Молекула соляной кислоты содержит один атом хлора.", column: 0 },
    { text: "Неон используют в качестве охладителя в криогенных установках.", column: 1 },
    { text: "Водород входит в состав большинства органических соединений.", column: 0 },
    { text: "Алюминий — легкий металл серебристо-белого цвета.", column: 1 },
    { text: "Молекула метана содержит четыре атома водорода.", column: 0 },
    { text: "Алюминий легко реагирует с простыми веществами.", column: 1 },
    { text: "Алюминий по распространенности в земной коре занимает третье место, уступая только кислороду и кремнию.", column: 0 },
    { text: "Алюминий восстанавливает металлы из их оксидов (алюминотермия).", column: 1 },
    { text: "Алюминий образует прочную химическую связь с кислородом.", column: 0 },
    { text: "Иод — кристаллы черно-серого цвета с фиолетовым металлическим блеском, легко образует фиолетовые пары.", column: 1 },
    { text: "Бром содержится в морской воде.", column: 0 },
    { text: "До конца XIX в. алюминий в промышленных масштабах не производился.", column: 1 },
    { text: "Бром принадлежит к VIIA группе — галогенам.", column: 0 },
    { text: "Алюминий практически не подвержен коррозии.", column: 1 },
    { text: "Иод входит в скелетный белок губок.", column: 0 },
    { text: "При производстве сплавов для авиационной промышленности используется алюминий.", column: 1 },
    { text: "Отсутствие или недостаток иода в рационе приводит к заболеваниям.", column: 0 },
    { text: "Впервые фтор был получен А. Муассаном в 1886 г.", column: 1 },
    { text: "Бокситы, в состав которых входит алюминий, являются важнейшей рудой, на которой базируется почти вся мировая алюминиевая промышленность.", column: 0 },
    { text: "Фтор реагирует с металлами и неметаллами.", column: 1 },
    { text: "На данный момент не известно ни одно живое существо, использующее алюминий в метаболизме, — это «мертвый» металл.", column: 0 },
    { text: "Кальций — умеренно твердый металл серебристо-белого цвета.", column: 1 },
    { text: "Неон принадлежит к VIIIА группе — инертным газам.", column: 0 },
    { text: "Температура плавления кальция — 838 °C.", column: 1 },
    { text: "Неон — пятый по распространенности во Вселенной.", column: 0 },
    { text: "Кальций широко применяется в металлургии.", column: 1 },
    { text: "Натрий — шестой по распространенности в земной коре.", column: 0 },
    { text: "Жидкую серу хранят в обогреваемых резервуарах и транспортируют в цистернах.", column: 1 },
    { text: "Селен входит в состав активного центра ферментов метаболизма нуклеиновых кислот, липидов, гормонов.", column: 0 },
    { text: "Серу применяют для вулканизации каучука.", column: 1 },
    { text: "Селен — аналог серы и проявляет степени окисления −2, +4 и +6.", column: 0 },
    { text: "Белый фосфор плохо растворяется в воде, но легкорастворим в органических растворителях.", column: 1 },
    { text: "Существование галлия было научно предсказано Д. И. Менделеевым.", column: 0 },
    { text: "Красный фосфор применяют в производстве спичек.", column: 1 },
    { text: "В состав полупроводниковых материалов часто входит галлий.", column: 0 },
    { text: "При хранении на воздухе красный фосфор в присутствии влаги постепенно окисляется.", column: 1 },
    { text: "Алюминий по распространенности в земной коре занимает третье место, уступая только кислороду и кремнию.", column: 0 },
    { text: "Алюминий образует прочную химическую связь с кислородом.", column: 0 },
    { text: "Плавиковая кислота содержит фтор и водород.", column: 0 },
    { text: "Зубная паста содержит фтор.", column: 0 },
    { text: "В земной коре содержится 3,38% кальция.", column: 0 },
    { text: "Карбид кальция состоит из одного атома кальция и двух атомов углерода.", column: 0 },
    { text: "Сера — необходимый элемент питания растений.", column: 0 }
];

let currentStatements = [];
let draggedStatement = null;
let correctCount = 0;
let incorrectCount = 0;
let gameStarted = false;

// DOM элементы
const startBtn = document.getElementById('startBtn');
const shuffleBtn = document.getElementById('shuffleBtn');
const restartBtn = document.getElementById('restartBtn');
const statementsContainer = document.getElementById('statements-container');
const elementColumn = document.getElementById('element-column');
const substanceColumn = document.getElementById('substance-column');
const correctCountEl = document.getElementById('correctCount');
const incorrectCountEl = document.getElementById('incorrectCount');
const remainingCountEl = document.getElementById('remainingCount');
const percentageEl = document.getElementById('percentage');
const completionMessage = document.getElementById('completionMessage');

// Функция для получения случайных утверждений
function getRandomStatements(count) {
    if (data.length === 0) {
        console.error('Данные не загружены');
        return [];
    }

    if (data.length < count) {
        console.warn(`В базе всего ${data.length} утверждений, запрошено ${count}`);
        count = data.length;
    }

    // Выбираем случайные утверждения из всех данных
    const shuffled = [...data].sort(() => 0.5 - Math.random());
    return shuffled.slice(0, count);
}

// Функция для создания элемента утверждения
function createStatementElement(statement, index) {
    const statementEl = document.createElement('div');
    statementEl.className = 'statement';
    statementEl.textContent = statement.text;
    statementEl.draggable = true;
    statementEl.dataset.index = index;
    statementEl.dataset.column = statement.column;

    // Добавляем номер утверждения
    const numberSpan = document.createElement('span');
    numberSpan.className = 'statement-number';
    numberSpan.textContent = index + 1;
    statementEl.appendChild(numberSpan);

    // Добавляем обработчики событий перетаскивания
    statementEl.addEventListener('dragstart', handleDragStart);
    statementEl.addEventListener('dragend', handleDragEnd);

    return statementEl;
}

// Функция для отображения утверждений
function displayStatements(statements) {
    statementsContainer.innerHTML = '';
    currentStatements = statements;

    if (statements.length === 0) {
        const message = document.createElement('p');
        message.className = 'initial-message';
        message.textContent = 'Не удалось загрузить утверждения. Проверьте файл data.json';
        statementsContainer.appendChild(message);
        return;
    }

    statements.forEach((statement, index) => {
        const statementEl = createStatementElement(statement, index);
        statementsContainer.appendChild(statementEl);
    });

    // Обновляем статистику
    updateStats();
}

// Обработчики событий перетаскивания
function handleDragStart(e) {
    draggedStatement = e.target;
    draggedStatement.classList.add('dragging');

    // Устанавливаем данные для перетаскивания
    e.dataTransfer.setData('text/plain', draggedStatement.dataset.index);
    e.dataTransfer.effectAllowed = 'move';
}

function handleDragEnd() {
    if (draggedStatement) {
        draggedStatement.classList.remove('dragging');
        draggedStatement = null;
    }
}

// Обработчики событий для зон перетаскивания
function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';

    const columnContent = e.target.closest('.column-content');
    if (columnContent) {
        columnContent.classList.add('drag-over');
    }
}

function handleDragLeave(e) {
    const columnContent = e.target.closest('.column-content');
    if (columnContent && !columnContent.contains(e.relatedTarget)) {
        columnContent.classList.remove('drag-over');
    }
}

function handleDrop(e) {
    e.preventDefault();
    const columnContent = e.target.closest('.column-content');

    if (!columnContent || !gameStarted) return;

    columnContent.classList.remove('drag-over');

    const index = e.dataTransfer.getData('text/plain');
    const statement = currentStatements[index];

    if (!statement) return;

    const targetColumn = parseInt(columnContent.dataset.column);

    // Проверяем, правильно ли размещено утверждение
    const isCorrect = statement.column === targetColumn;

    // Добавляем утверждение в столбец
    addStatementToColumn(statement, index, targetColumn, isCorrect);

    // Удаляем утверждение из контейнера
    const statementEl = document.querySelector(`.statement[data-index="${index}"]:not(.in-column)`);
    if (statementEl) {
        statementEl.remove();
    }

    // Обновляем статистику
    updateStats();

    // Проверяем, завершена ли игра
    checkGameCompletion();
}

// Функция добавления утверждения в столбец
function addStatementToColumn(statement, index, targetColumn, isCorrect) {
    const columnContent = targetColumn === 0 ? elementColumn : substanceColumn;

    const statementEl = document.createElement('div');
    statementEl.className = `statement in-column ${isCorrect ? 'correct' : 'incorrect'}`;
    statementEl.textContent = statement.text;
    statementEl.dataset.index = index;
    statementEl.draggable = false;

    // Добавляем иконку в зависимости от правильности
    const icon = document.createElement('i');
    icon.className = isCorrect ? 'fas fa-check' : 'fas fa-times';
    icon.style.marginRight = '10px';
    icon.style.color = isCorrect ? '#32cd32' : '#ff4500';
    statementEl.prepend(icon);

    // Увеличиваем счетчики
    if (isCorrect) {
        correctCount++;
    } else {
        incorrectCount++;
    }

    columnContent.appendChild(statementEl);

    // Убираем сообщение о пустом столбце
    const emptyMessage = columnContent.querySelector('.empty-message');
    if (emptyMessage) {
        emptyMessage.remove();
    }
}

// Функция обновления статистики
function updateStats() {
    const remaining = document.querySelectorAll('.statement:not(.in-column)').length;
    const totalPlaced = correctCount + incorrectCount;
    const percentage = totalPlaced > 0 ? Math.round((correctCount / totalPlaced) * 100) : 0;

    correctCountEl.textContent = correctCount;
    incorrectCountEl.textContent = incorrectCount;
    remainingCountEl.textContent = remaining;
    percentageEl.textContent = `${percentage}%`;
}

// Функция проверки завершения игры
function checkGameCompletion() {
    const remaining = document.querySelectorAll('.statement:not(.in-column)').length;

    if (remaining === 0 && gameStarted && currentStatements.length > 0) {
        completionMessage.style.display = 'block';

        // Добавляем дополнительную информацию о результатах
        const total = correctCount + incorrectCount;
        const percentage = Math.round((correctCount / total) * 100);

        let message = '';
        if (percentage === 100) {
            message = 'Идеальный результат! Вы отлично разбираетесь в химии!';
        } else if (percentage >= 80) {
            message = 'Отличный результат! Хорошие знания химии!';
        } else if (percentage >= 60) {
            message = 'Хороший результат! Есть что повторить.';
        } else {
            message = 'Есть над чем поработать. Повторите различия между элементами и веществами.';
        }

        const resultMessage = document.createElement('p');
        resultMessage.textContent = `Вы правильно распределили ${correctCount} из ${total} утверждений (${percentage}%). ${message}`;
        resultMessage.style.marginTop = '15px';
        resultMessage.style.fontSize = '1.2rem';
        completionMessage.appendChild(resultMessage);

        setTimeout(() => {
            completionMessage.scrollIntoView({
                behavior: 'smooth', // Плавная прокрутка
                block: 'center',    // Центрировать элемент по вертикали
                inline: 'center'    // Центрировать по горизонтали
            });
        }, 100);
    }
}

// Функция сброса игры
function resetGame() {
    // Очищаем столбцы
    elementColumn.innerHTML = '<p class="empty-message">Перетащите сюда утверждения о химических элементах</p>';
    substanceColumn.innerHTML = '<p class="empty-message">Перетащите сюда утверждения о простых веществах</p>';

    // Сбрасываем счетчики
    correctCount = 0;
    incorrectCount = 0;

    // Скрываем сообщение о завершении
    completionMessage.style.display = 'none';
    completionMessage.innerHTML = '<i class="fas fa-trophy"></i> Поздравляем! Вы успешно рассортировали все утверждения!';
}

// Функция начала игры
function startGame() {
    resetGame();
    const randomStatements = getRandomStatements(10);
    displayStatements(randomStatements);
    gameStarted = true;

    // Показываем инструкцию для новых утверждений
    const instructions = document.querySelector('.instructions');
}

// Функция обновления утверждений
function shuffleStatements() {
    if (!gameStarted) {
        alert('Сначала начните игру, нажав "Начать игру"');
        return;
    }

    resetGame();
    const randomStatements = getRandomStatements(10);
    displayStatements(randomStatements);

}

// Инициализация обработчиков событий
function initEventListeners() {
    // Обработчики для кнопок
    startBtn.addEventListener('click', startGame);
    shuffleBtn.addEventListener('click', shuffleStatements);
    restartBtn.addEventListener('click', startGame);

    // Обработчики для зон перетаскивания
    elementColumn.addEventListener('dragover', handleDragOver);
    elementColumn.addEventListener('dragleave', handleDragLeave);
    elementColumn.addEventListener('drop', handleDrop);

    substanceColumn.addEventListener('dragover', handleDragOver);
    substanceColumn.addEventListener('dragleave', handleDragLeave);
    substanceColumn.addEventListener('drop', handleDrop);
}

// Основная функция инициализации
function init() {
    // Инициализация обработчиков событий
    initEventListeners();

    // Начальная инициализация
    updateStats();

    console.log('Игра инициализирована. Загружено', data.length, 'утверждений');
}

// Запуск приложения при загрузке страницы
document.addEventListener('DOMContentLoaded', init);