Опублікував/ла:

Катасонова Ірина Костянтинівна

Посилання Написати Додати в обране Поскаржитися

Вебквест:

🛡️ Веб-квест: «Цифровий Бункер»

12.03.2026

0 0

Інформатика

10 Клас

8 рівнів

0 підказок

Час виконання: необмежений

Шаблони: Бункер

Провести вебквест серед своїх учнів на основі цього вебквесту призначити в журнал Грати соло

Вміст вебквесту:

Налаштування гри

Доступна загальна кількість невдалих спроб введення ключа: 3 рази

По завершенню гри буде видано сертифікат

Реакція об'єктів при наведенні: Всі об'єкти активні, похитуються при наведенні, а курсор змінюється на вказівний палець

Привітання на початку гри (показується учням)

Ви — технічна група підтримки в останньому підземному бункері. Головний сервер пошкоджено. Щоб відновити зв'язок зі світом та налаштувати систему життєзабезпечення, вам потрібно виправити код керуючої панелі.

Рівень №1 — 🛑 Зупинка 1: «Герметизація коду» переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Драбина Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Зовнішні двері не зачиняться, поки структура коду не буде ідеальною. У головному файлі index.html переплутані блоки.

Завдання: Розставте теги структури в ієрархічному порядку від зовнішнього до внутрішнього: <body>, <html>, <head>.
Питання-код: Який тег закривається найостаннішим у всьому документі?

Ключ:

</html>

Повідомлення після введення ключа:

Системне повідомлення: "Структурну цілісність відновлено! Зовнішні шлюзи заблоковано. Тепер жоден вірус не пробереться всередину. Ви заклали надійний фундамент!"

Рівень №2 — 🛑 Зупинка 2: «Система розпізнавання» (Мета-дані) переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Монітор 3 Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Бортовий комп'ютер замість тексту видає незрозумілі символи («кракозябри»).

Завдання: Знайдіть у тексті атрибут, який відповідає за кодування символів (наприклад, utf-8).
Дія: Запишіть повний рядок тега <meta>, який допоможе системі «прочитати» українську мову.

Правильні варіанти ключа:

charset="utf-8" <meta charset="utf-8">

Повідомлення після введення ключа:

Системне повідомлення: "Кодування прийнято! Термінали більше не видають дивних символів. Команда тепер розуміє звіти комп'ютера. Зв'язок налагоджується!"

Рівень №3 — 🔓 Зупинка 3: Прихований наказ переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Системний блок Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Попередній програміст залишив секретне повідомлення для тих, хто виживе, прямо в коді, щоб його не побачив штучний інтелект на екрані.

Завдання: Як за допомогою символів HTML «сховати» текст так, щоб браузер його ігнорував?
Ключ: Знайдіть на сторінці приклад коментаря про «інші команди» та випишіть символи початку та кінця коментаря.

Ключ:

`` (кінець)

Повідомлення після введення ключа:

Системне повідомлення: "Секретний протокол зчитано! Ви навчилися бачити те, що приховано від очей сторонніх. Ця інформація допоможе нам обійти обмеження штучного інтелекту."

Рівень №4 — 🛑 Зупинка 4: «Інвентаризація складів» (Списки) переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Скриня 8 Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Нам потрібно скласти список запасів їжі.

Завдання: Оберіть, які теги використати для нумерованого списку (де важливий пріоритет споживання), а які — для маркованого (простий перелік).
Питання: Який тег відповідає за створення одного окремого «пункту» в будь-якому з цих списків?

Ключ:

<li>

Повідомлення після введення ключа:

Системне повідомлення: "Склади впорядковано! Тепер ми точно знаємо, скільки ресурсів залишилося. Дякуємо за чіткість — у бункері порядок понад усе!"

Рівень №5 — 🛑 Зупинка 5: «Камери спостереження» (Зображення) переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Телевізор Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Система виводить помилку: «Камера не знайдена». У коді написано: <img src="cam1.png" alt="Вхід до бункера">.

Завдання: Якщо файл зображення cam1.png пошкоджено, що саме побачить оператор на моніторі замість картинки? (Підказка: шукайте опис атрибута alt).

Правильні варіанти ключа:

значення атрибута `alt` `alt` alt

Повідомлення після введення ключа:

Системне повідомлення: "Відеозв’язок відновлено! Навіть якщо камера вийде з ладу, ми знатимемо, що там відбувається. Ми більше не сліпі!"

Рівень №6 — 🔓 Зупинка 6: Журнал доступу переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Акумулятор 3 Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Перед вами таблиця з логами входу. Потрібно додати новий рядок з даними.

Завдання: Який тег ви використаєте, щоб створити новий рядок у таблиці, а який — щоб створити клітинку з іменем відвідувача?

Правильні варіанти ключа:

Рядок: `<tr>`, Клітинка: `<td>` <tr> <td> `<td>` `<tr>` Рядок: `<tr>` Клітинка: `<td>

Повідомлення після введення ключа:

Системне повідомлення: "Базу даних відремонтовано! Кожен крок у бункері тепер фіксується в таблиці логів. Безпека на рівні 100%!"

Рівень №7 — 🛑 Зупинка 7: «Вибір термінала» (Редактори) переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Скриня 10 Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Система запитує, через який інтерфейс ви будете працювати далі.

Завдання: Виберіть між PSPad та WYSIWYG-редактором.
Питання: Який з цих варіантів працює за принципом «що бачиш, те й отримаєш», нагадуючи роботу у звичайному текстовому процесорі?

Правильні варіанти ключа:

WYSIWYG WYSIWYG-редактором.

Повідомлення після введення ключа:

Системне повідомлення: "Систему повністю активовано! Ви обрали ідеальний інструмент для керування бункером. Весь цифровий світ тепер під вашим контролем!"

Рівень №8 — Вихід переглянути шаблон

Цей рівень містить 1 інтерактивний об'єкт:

1 вихід.

Інтерактивні об’єкти на цьому рівні:

Мітка №1/1 Двері Вихід з рівня Щоб вийти потрібен ключ

Повідомлення перед введенням ключа:

Завдання: Щоб отримати Диплом та остаточно перезавантажити систему Бункера, вам потрібно знайти назву спеціального режиму роботи редакторів, про який згадувалося на останній зупинці, та зрозуміти, як він пов'язаний із вашою роботою.

Питання: У тексті згадувався принцип WYSIWYG («Що бачиш, те й отримаєш»). Але професійні адміністратори (наприклад, ті, що працюють із системою Moodle або Joomla!) часто кажуть, що цей режим лише «маскує» справжню структуру сторінки.

Який саме елемент мови HTML (згаданий на самому початку теми 27) є тим самим «будівельним блоком», який WYSIWYG-редактор автоматично додає до тексту, щоб визначити його вигляд, структуру та поведінку?

(Підказка: Це слово з 4 літер, яке записується у кутових дужках < >).

Правильні варіанти ключа:

ТЕГ TAG

Повідомлення після введення ключа:

ОГОЛОШЕННЯ ГЕНЕРАТОРА: "Увага всім секторам! Цифровий Бункер повністю відновлено завдяки команді програмістів-магів. Ви пройшли всі випробування. Світ врятовано! Готуйтеся до отримання заслужених Дипломів!"

Рефлексія від 0 учнів

Сподобався:

Так: 0

Ні: 0

Зрозумілий:

Так: 0

Ні: 0

Потрібні роз'яснення:

Ні: 0

Так: 0