index.html - master - Anutka_Buz/Homework

index.html
647 строк31 KB
Anutka_Buz
Create: index.html
15 июл 2026, 21:35
15 июл 2026, 21:35fe29178
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Информатика 7 класс: Компьютер и ТБ</title>
  <style>
    :root {
      --primary: #2c3e50;
      --accent: #3498db;
      --bg: #f4f7f6;
      --card: #ffffff;
      --danger: #e74c3c;
      --success: #2ecc71;
    }
    body {
      font-family: Arial, sans-serif;
      background: var(--bg);
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background: var(--primary);
      color: white;
      padding: 1rem 2rem;
      text-align: center;
    }
    h1 { margin: 0; font-size: 1.6rem; }
    .container {
      max-width: 960px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    section {
      background: var(--card);
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      margin-bottom: 1.5rem;
    }
    h2 { color: var(--primary); border-bottom: 2px solid var(--accent); padding-bottom: 0.4rem; }
    p, li { line-height: 1.5; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

    /* Галерея устройств */
    .devices-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 1rem;
    }
    .device-card {
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
      text-align: center;
      padding-bottom: 1rem;
    }
    .device-img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      background: #eee;
      display: block;
    }

    /* Выпадающие карточки терминов */
    details { margin-bottom: 0.5rem; border: 1px solid #eee; border-radius: 4px; }
    summary {
      padding: 0.6rem 1rem;
      cursor: pointer;
      font-weight: bold;
      background: #fafafa;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: '+';
      float: right;
      font-size: 1.2rem;
      line-height: 1.4rem;
      color: var(--accent);
    }
    details[open] summary::after { content: '−'; }
    .term-desc { padding: 0.8rem 1rem; color: #555; }

    /* Тест */
    .quiz-option {
      display: block;
      padding: 0.6rem 1rem;
      margin: 0.3rem 0;
      background: #eee;
      border: 1px solid #ddd;
      cursor: pointer;
      border-radius: 4px;
    }
    .quiz-option:hover { background: #e0e0e0; }
    .quiz-option input { margin-right: 0.5rem; }

    button.submit-btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 0.7rem 1.2rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
    }
    button.reset-btn {
      background: #95a5a6;
      color: white;
      border: none;
      padding: 0.7rem 1.2rem;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 0.5rem;
    }
    .result-box {
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 6px;
      display: none;
    }
    .result-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .result-bad { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    .result-partial { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

    /* Тест */
    .question-block {
      border-bottom: 1px solid #eee;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
    }
    .question-title {
      font-weight: bold;
      font-size: 1.05rem;
      margin-bottom: 0.6rem;
      color: var(--primary);
    }
    .controls { text-align: center; margin-top: 1.5rem; }
    .score-box {
      font-size: 1.15rem;
      margin: 1rem 0;
      text-align: center;
      font-weight: bold;
    }

    /* Drag-and-drop */
    .dnd-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    @media (max-width: 600px) { .dnd-container { grid-template-columns: 1fr; } }
    .dnd-zone {
      min-height: 160px;
      border: 2px dashed #aaa;
      border-radius: 8px;
      padding: 0.8rem;
      background: #fafafa;
      transition: background 0.2s;
    }
    .dnd-zone.over { background: #e3f2fd; border-color: var(--accent); }
    .dnd-zone.correct { background: #d4edda; border-color: var(--success); }
    .dnd-zone.wrong { background: #f8d7da; border-color: var(--danger); }
    .dnd-zone-title {
      font-weight: bold;
      text-align: center;
      margin-bottom: 0.6rem;
      font-size: 1.1rem;
      color: var(--primary);
    }
    .dnd-items {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
      margin-bottom: 1rem;
      min-height: 40px;
      padding: 0.5rem;
      background: #f0f0f0;
      border-radius: 8px;
    }
    .dnd-item {
      padding: 0.5rem 0.9rem;
      background: #fff;
      border: 2px solid var(--accent);
      border-radius: 6px;
      cursor: grab;
      font-size: 0.9rem;
      user-select: none;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .dnd-item:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
    .dnd-item:active { cursor: grabbing; }
    .dnd-item.dragging { opacity: 0.4; }
    .dnd-item.correct { border-color: var(--success); background: #d4edda; }
    .dnd-item.wrong { border-color: var(--danger); background: #f8d7da; }
    .dnd-zone .dnd-item { margin-bottom: 0.4rem; }
    .dnd-buttons { text-align: center; margin-top: 0.5rem; }

  </style>
</head>
<body>
  <header>
    <h1>Информатика, 7 класс</h1>
    <p>Тема: Компьютер — универсальное вычислительное устройство. Техника безопасности</p>
  </header>

  <div class="container">

    <!-- Что такое компьютер -->
    <section>
      <h2>Что такое компьютер?</h2>
      <p>Компьютер — это универсальное электронное программно управляемое устройство для обработки, хранения и передачи информации.</p>
      <div class="grid-2">
        <div><strong>Универсальность</strong> — компьютер может выполнять разные задачи: текст, графика, видео, звук, управление устройствами.</div>
        <div><strong>Программная управляемость</strong> — все действия определяются программами (набором команд).</div>
      </div>
    </section>

    <!-- Галерея устройств -->
    <section>
      <h2>Основные устройства компьютера</h2>
      <p>Рассмотри устройства и подумай, какую функцию они выполняют: ввод, обработка, хранение или вывод.</p>
      <div class="devices-gallery">
        <div class="device-card">
          <div class="device-img" style="display:flex;align-items:center;justify-content:center;font-size:3rem;background:#e8f4f8;">⌨️</div>
          <p><strong>Клавиатура</strong><br>Ввод текста и команд</p>
        </div>
        <div class="device-card">
          <div class="device-img" style="display:flex;align-items:center;justify-content:center;font-size:3rem;background:#e8f4f8;">🖱️</div>
          <p><strong>Мышь</strong><br>Управление курсором</p>
        </div>
        <div class="device-card">
          <div class="device-img" style="display:flex;align-items:center;justify-content:center;background:#dff0f8;">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- Ножки сверху -->
              <rect x="25" y="5" width="4" height="10" rx="1" fill="#aab7b8"/>
              <rect x="33" y="5" width="4" height="10" rx="1" fill="#aab7b8"/>
              <rect x="41" y="5" width="4" height="10" rx="1" fill="#aab7b8"/>
              <rect x="49" y="5" width="4" height="10" rx="1" fill="#aab7b8"/>
              <!-- Ножки снизу -->
              <rect x="25" y="65" width="4" height="10" rx="1" fill="#aab7b8"/>
              <rect x="33" y="65" width="4" height="10" rx="1" fill="#aab7b8"/>
              <rect x="41" y="65" width="4" height="10" rx="1" fill="#aab7b8"/>
              <rect x="49" y="65" width="4" height="10" rx="1" fill="#aab7b8"/>
              <!-- Ножки слева -->
              <rect x="5" y="25" width="10" height="4" rx="1" fill="#aab7b8"/>
              <rect x="5" y="33" width="10" height="4" rx="1" fill="#aab7b8"/>
              <rect x="5" y="41" width="10" height="4" rx="1" fill="#aab7b8"/>
              <rect x="5" y="49" width="10" height="4" rx="1" fill="#aab7b8"/>
              <!-- Ножки справа -->
              <rect x="65" y="25" width="10" height="4" rx="1" fill="#aab7b8"/>
              <rect x="65" y="33" width="10" height="4" rx="1" fill="#aab7b8"/>
              <rect x="65" y="41" width="10" height="4" rx="1" fill="#aab7b8"/>
              <rect x="65" y="49" width="10" height="4" rx="1" fill="#aab7b8"/>
              <!-- Корпус процессора -->
              <rect x="15" y="15" width="50" height="50" rx="4" fill="#2c3e50" stroke="#1a252f" stroke-width="2"/>
              <!-- Внутренняя область -->
              <rect x="22" y="22" width="36" height="36" rx="2" fill="#5dade2"/>
              <!-- Метка на чипе -->
              <rect x="30" y="30" width="20" height="20" rx="2" fill="#aed6f1"/>
              <text x="40" y="44" text-anchor="middle" font-size="10" font-weight="bold" fill="#2c3e50">CPU</text>
            </svg>
          </div>
          <p><strong>Процессор</strong><br>Обработка данных</p>
        </div>
        <div class="device-card">
          <div class="device-img" style="display:flex;align-items:center;justify-content:center;background:#dff0f8;">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- Экран -->
              <rect x="10" y="10" width="60" height="40" rx="4" fill="#2c3e50" stroke="#1a252f" stroke-width="2"/>
              <rect x="15" y="15" width="50" height="30" rx="2" fill="#5dade2"/>
              <rect x="18" y="18" width="44" height="24" rx="1" fill="#aed6f1"/>
              <!-- Подставка -->
              <rect x="32" y="50" width="16" height="6" rx="1" fill="#aab7b8"/>
              <rect x="26" y="56" width="28" height="5" rx="2" fill="#d5d8dc"/>
              <!-- Индикатор -->
              <circle cx="40" cy="47" r="2" fill="#2ecc71"/>
            </svg>
          </div>
          <p><strong>Монитор</strong><br>Вывод изображения</p>
        </div>
        <div class="device-card">
          <div class="device-img" style="display:flex;align-items:center;justify-content:center;background:#dff0f8;">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- Корпус SSD -->
              <rect x="12" y="20" width="56" height="40" rx="4" fill="#2c3e50" stroke="#1a252f" stroke-width="2"/>
              <!-- Наклейка -->
              <rect x="16" y="24" width="48" height="32" rx="2" fill="#5dade2"/>
              <!-- Надпись SSD -->
              <text x="40" y="44" text-anchor="middle" font-size="14" font-weight="bold" fill="#fff">SSD</text>
              <!-- Контакты -->
              <rect x="50" y="58" width="4" height="6" rx="1" fill="#f1c40f"/>
              <rect x="56" y="58" width="4" height="6" rx="1" fill="#f1c40f"/>
              <rect x="62" y="58" width="4" height="6" rx="1" fill="#f1c40f"/>
            </svg>
          </div>
          <p><strong>Жёсткий диск / SSD</strong><br>Хранение данных</p>
        </div>
        <div class="device-card">
          <div class="device-img" style="display:flex;align-items:center;justify-content:center;font-size:3rem;background:#e8f4f8;">🧠</div>
          <p><strong>Оперативная память</strong><br>Временное хранение данных</p>
        </div>
      </div>
    </section>

    <!-- ТБ -->
    <section>
      <h2>Техника безопасности и правила работы</h2>
      <div class="grid-2">
        <div>
          <h3>Перед началом работы</h3>
          <ul>
            <li>Входить спокойно, без спешки.</li>
            <li>Не включать/выключать компьютеры без разрешения учителя.</li>
            <li>Осмотреть рабочее место: нет ли повреждений, оголённых проводов.</li>
          </ul>
        </div>
        <div>
          <h3>Во время работы</h3>
          <ul>
            <li>Работать только на выделенном компьютере.</li>
            <li>Не трогать разъёмы, кабели, тыльную сторону монитора.</li>
            <li>При неполадках сразу сообщить учителю.</li>
            <li>Соблюдать правильную посадку, расстояние до экрана 50–60 см.</li>
            <li>Делать перерывы каждые 20–30 минут.</li>
          </ul>
        </div>
      </div>
    </section>

    <!-- Термины -->
    <section>
      <h2>Термины</h2>
      <details>
        <summary>Компьютер</summary>
        <div class="term-desc">Универсальное электронное программно управляемое устройство для работы с информацией.</div>
      </details>
      <details>
        <summary>Программа</summary>
        <div class="term-desc">Набор команд, по которым компьютер выполняет действия.</div>
      </details>
      <details>
        <summary>Устройство ввода</summary>
        <div class="term-desc">Позволяет передавать данные в компьютер (клавиатура, мышь, сканер, микрофон).</div>
      </details>
      <details>
        <summary>Устройство вывода</summary>
        <div class="term-desc">Показывает или печатает результаты работы (монитор, принтер, колонки).</div>
      </details>
      <details>
        <summary>Обработка и хранение</summary>
        <div class="term-desc">Процессор и ОЗУ отвечают за обработку и временное хранение; HDD/SSD — за долговременное хранение.</div>
      </details>
      <details>
        <summary>Техника безопасности</summary>
        <div class="term-desc">Правила, которые защищают здоровье ученика и оборудование от повреждений.</div>
      </details>
    </section>

    <!-- В кабинете информатики -->
    <section>
      <h2>В кабинете информатики</h2>
      <p>Перетащи каждое правило в нужную колонку — «Можно» или «Нельзя».</p>

      <div class="dnd-container">
        <div class="dnd-zone" data-zone="can" id="canZone">
          <div class="dnd-zone-title">Можно</div>
        </div>
        <div class="dnd-zone" data-zone="cannot" id="cannotZone">
          <div class="dnd-zone-title">Нельзя</div>
        </div>
      </div>

      <div class="dnd-items" id="dndPool">
        <div class="dnd-item" draggable="true" data-answer="cannot">Есть и пить за рабочим столом</div>
        <div class="dnd-item" draggable="true" data-answer="can">Работать за компьютером по инструкции учителя</div>
        <div class="dnd-item" draggable="true" data-answer="cannot">Самовольно отключать или перезагружать компьютер</div>
        <div class="dnd-item" draggable="true" data-answer="can">Делать перерывы каждые 20–30 минут</div>
        <div class="dnd-item" draggable="true" data-answer="cannot">Трогать кабели и разъёмы без разрешения</div>
        <div class="dnd-item" draggable="true" data-answer="can">Сообщать учителю о неисправностях</div>
        <div class="dnd-item" draggable="true" data-answer="cannot">Работать вдвоём за одним компьютером</div>
        <div class="dnd-item" draggable="true" data-answer="can">Использовать клавиатуру и мышь аккуратно</div>
        <div class="dnd-item" draggable="true" data-answer="cannot">Устанавливать свои программы без разрешения</div>
        <div class="dnd-item" draggable="true" data-answer="can">Выключать компьютер через меню «Пуск»</div>
      </div>

      <div class="dnd-buttons">
        <button class="submit-btn" onclick="checkDnd()">Проверить</button>
        <button class="reset-btn" onclick="resetDnd()">Сбросить</button>
      </div>
      <div id="dndResult" class="result-box"></div>
    </section>

    <!-- Тест -->
    <section>
      <h2>Проверь себя: тест</h2>
      <form id="quizForm">
        <div class="question-block">
          <div class="question-title">1. Что означает «универсальность» компьютера?</div>
          <label class="quiz-option"><input type="radio" name="q1" value="a"> Может выполнять разные задачи: работать с текстом, графикой, звуком и т.д.</label>
          <label class="quiz-option"><input type="radio" name="q1" value="b"> Работает только с числами и вычислениями.</label>
          <label class="quiz-option"><input type="radio" name="q1" value="c"> Не нуждается в программах, сам «понимает», что делать.</label>
        </div>

        <div class="question-block">
          <div class="question-title">2. Что значит «программная управляемость» компьютера?</div>
          <label class="quiz-option"><input type="radio" name="q2" value="a"> Компьютер сам придумывает программы.</label>
          <label class="quiz-option"><input type="radio" name="q2" value="b"> Все действия компьютера определяются программами (набором команд).</label>
          <label class="quiz-option"><input type="radio" name="q2" value="c"> Компьютер работает без программ, только на основе логики.</label>
        </div>

        <div class="question-block">
          <div class="question-title">3. «Мозг» компьютера, который выполняет вычисления, — это:</div>
          <label class="quiz-option"><input type="radio" name="q3" value="a"> Жёсткий диск</label>
          <label class="quiz-option"><input type="radio" name="q3" value="b"> Монитор</label>
          <label class="quiz-option"><input type="radio" name="q3" value="c"> Процессор</label>
        </div>

        <div class="question-block">
          <div class="question-title">4. Основное устройство для ввода текстовой информации:</div>
          <label class="quiz-option"><input type="radio" name="q4" value="a"> Мышь</label>
          <label class="quiz-option"><input type="radio" name="q4" value="b"> Клавиатура</label>
          <label class="quiz-option"><input type="radio" name="q4" value="c"> Сканер</label>
        </div>

        <div class="question-block">
          <div class="question-title">5. Устройство, предназначенное для временного хранения данных во время работы компьютера:</div>
          <label class="quiz-option"><input type="radio" name="q5" value="a"> Оперативная память (ОЗУ)</label>
          <label class="quiz-option"><input type="radio" name="q5" value="b"> Жёсткий диск (HDD)</label>
          <label class="quiz-option"><input type="radio" name="q5" value="c"> Флеш-накопитель</label>
        </div>

        <div class="question-block">
          <div class="question-title">6. Какое правило техники безопасности обязательно соблюдать в кабинете информатики?</div>
          <label class="quiz-option"><input type="radio" name="q6" value="a"> Включать компьютер сразу при входе в кабинет.</label>
          <label class="quiz-option"><input type="radio" name="q6" value="b"> Не трогать кабели и разъёмы; при неполадках сообщать учителю.</label>
          <label class="quiz-option"><input type="radio" name="q6" value="c"> Работать вдвоём за одним компьютером, чтобы экономить технику.</label>
        </div>

        <div class="question-block">
          <div class="question-title">7. К какой группе устройств относится монитор?</div>
          <label class="quiz-option"><input type="radio" name="q7" value="a"> Устройства ввода</label>
          <label class="quiz-option"><input type="radio" name="q7" value="b"> Устройства вывода</label>
          <label class="quiz-option"><input type="radio" name="q7" value="c"> Устройства хранения</label>
        </div>

        <div class="question-block">
          <div class="question-title">8. После выключения компьютера информация исчезает:</div>
          <label class="quiz-option"><input type="radio" name="q8" value="a"> Из оперативной памяти (ОЗУ)</label>
          <label class="quiz-option"><input type="radio" name="q8" value="b"> С жёсткого диска</label>
          <label class="quiz-option"><input type="radio" name="q8" value="c"> С флеш-накопителя</label>
        </div>

        <div class="question-block">
          <div class="question-title">9. Что делает компьютер, если ему не задана программа?</div>
          <label class="quiz-option"><input type="radio" name="q9" value="a"> Сам придумывает, что делать.</label>
          <label class="quiz-option"><input type="radio" name="q9" value="b"> Выполняет любые команды пользователя голосом.</label>
          <label class="quiz-option"><input type="radio" name="q9" value="c"> Ничего не делает: он работает только по заданной программе.</label>
        </div>

        <div class="question-block">
          <div class="question-title">10. Выбери верное утверждение:</div>
          <label class="quiz-option"><input type="radio" name="q10" value="a"> Компьютер может работать без процессора.</label>
          <label class="quiz-option"><input type="radio" name="q10" value="b"> Компьютер может выполнять задачи только по программе и с помощью устройств ввода/вывода/хранения/обработки.</label>
          <label class="quiz-option"><input type="radio" name="q10" value="c"> Компьютер хранит все данные только в оперативной памяти.</label>
        </div>

        <div class="controls">
          <button type="button" class="submit-btn" onclick="checkQuiz()">Проверить тест</button>
          <button type="button" class="reset-btn" onclick="resetQuiz()">Сбросить</button>
        </div>
        <div class="score-box" id="scoreBox"></div>
        <div id="resultBox" class="result-box"></div>
      </form>
    </section>


  </div>

  <script>
    // ==================== ТЕСТ ====================
    const answers = {
      q1: 'a', q2: 'b', q3: 'c', q4: 'b', q5: 'a',
      q6: 'b', q7: 'b', q8: 'a', q9: 'c', q10: 'b'
    };

    const form = document.getElementById('quizForm');
    const resultBox = document.getElementById('resultBox');
    const scoreBox = document.getElementById('scoreBox');

    function checkQuiz() {
      let correct = 0;
      const total = Object.keys(answers).length;

      for (const key of Object.keys(answers)) {
        const selected = form.querySelector(`input[name="${key}"]:checked`);
        if (!selected) {
          resultBox.textContent = 'Пожалуйста, ответьте на все вопросы.';
          resultBox.className = 'result-box result-bad';
          resultBox.style.display = 'block';
          scoreBox.textContent = '';
          return;
        }
        if (selected.value === answers[key]) {
          correct++;
        }
      }

      scoreBox.textContent = `Вы набрали: ${correct} из ${total} баллов.`;
      resultBox.style.display = 'block';

      if (correct === total) {
        resultBox.textContent = 'Отлично! Все ответы верные.';
        resultBox.className = 'result-box result-ok';
      } else if (correct >= Math.ceil(total * 0.7)) {
        resultBox.textContent = 'Хорошо! Есть небольшие ошибки — перечитай теорию.';
        resultBox.className = 'result-box result-ok';
      } else {
        resultBox.textContent = 'Есть ошибки. Обязательно повтори тему и попробуй ещё раз.';
        resultBox.className = 'result-box result-bad';
      }
    }

    function resetQuiz() {
      form.reset();
      resultBox.style.display = 'none';
      scoreBox.textContent = '';
    }

    // ==================== DRAG-AND-DROP ====================
    const dndPool = document.getElementById('dndPool');
    const canZone = document.getElementById('canZone');
    const cannotZone = document.getElementById('cannotZone');
    const dndResult = document.getElementById('dndResult');
    let draggedItem = null;

    document.querySelectorAll('.dnd-item').forEach(item => {
      item.addEventListener('dragstart', function(e) {
        draggedItem = this;
        this.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
      });
      item.addEventListener('dragend', function() {
        this.classList.remove('dragging');
        draggedItem = null;
      });
    });

    [canZone, cannotZone, dndPool].forEach(zone => {
      zone.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        this.classList.add('over');
      });
      zone.addEventListener('dragleave', function() {
        this.classList.remove('over');
      });
      zone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('over');
        if (draggedItem) {
          this.appendChild(draggedItem);
        }
      });
    });

    // Touch support for mobile
    let touchItem = null, touchClone = null, touchOffsetX = 0, touchOffsetY = 0;
    document.querySelectorAll('.dnd-item').forEach(item => {
      item.addEventListener('touchstart', function(e) {
        touchItem = this;
        const rect = this.getBoundingClientRect();
        const touch = e.touches[0];
        touchOffsetX = touch.clientX - rect.left;
        touchOffsetY = touch.clientY - rect.top;
        touchClone = this.cloneNode(true);
        touchClone.style.position = 'fixed';
        touchClone.style.zIndex = '9999';
        touchClone.style.pointerEvents = 'none';
        touchClone.style.opacity = '0.8';
        touchClone.style.width = rect.width + 'px';
        document.body.appendChild(touchClone);
        this.classList.add('dragging');
      }, { passive: true });
      item.addEventListener('touchmove', function(e) {
        if (!touchClone) return;
        e.preventDefault();
        const touch = e.touches[0];
        touchClone.style.left = (touch.clientX - touchOffsetX) + 'px';
        touchClone.style.top = (touch.clientY - touchOffsetY) + 'px';
      }, { passive: false });
      item.addEventListener('touchend', function(e) {
        if (!touchClone || !touchItem) return;
        const touch = e.changedTouches[0];
        touchClone.remove();
        touchClone = null;
        touchItem.classList.remove('dragging');
        const dropTarget = document.elementFromPoint(touch.clientX, touch.clientY);
        const zone = dropTarget?.closest('.dnd-zone, .dnd-items');
        if (zone) zone.appendChild(touchItem);
        touchItem = null;
      });
    });

    function checkDnd() {
      let correct = 0, total = 0;
      document.querySelectorAll('.dnd-item').forEach(item => {
        item.classList.remove('correct', 'wrong');
        total++;
        const answer = item.dataset.answer;
        const parent = item.parentElement;
        if (parent.dataset.zone === answer) {
          item.classList.add('correct');
          correct++;
        } else if (parent.dataset.zone !== undefined) {
          item.classList.add('wrong');
        }
      });
      const placed = document.querySelectorAll('.dnd-zone .dnd-item').length;
      dndResult.style.display = 'block';
      if (correct === total && placed === total) {
        dndResult.className = 'result-box result-ok';
        dndResult.innerHTML = '<strong>Отлично!</strong> Все правила расставлены правильно!';
      } else if (placed < total) {
        dndResult.className = 'result-box result-partial';
        dndResult.innerHTML = `Разместите все правила в колонки. Размещено: ${placed} из ${total}.`;
      } else {
        dndResult.className = 'result-box result-bad';
        dndResult.innerHTML = `Правильно: ${correct} из ${total}. Красным выделены ошибки.`;
      }
    }

    function resetDnd() {
      document.querySelectorAll('.dnd-item').forEach(item => {
        item.classList.remove('correct', 'wrong');
        dndPool.appendChild(item);
      });
      dndResult.style.display = 'none';
    }
  </script>
</body>
</html>