← До лабораторії

Пам’ятка викладачу

ROBO LAB · 12–16 років · 45–60 хвилин · інтерфейс українською.

Перед заняттям

  1. Відкрийте лабораторію у звичайному браузері без входу в ChatGPT. Учасникам потрібні комп’ютер, клавіатура та інтернет; телефон незручний для написання коду.
  2. Перевірте, чи доступні DevTools на навчальних пристроях. Якщо їх заблокував адміністратор, у першій місії є запасний перегляд HTML.
  3. Пройдіть маршрут на одному пристрої. На спільному комп’ютері перед новим учасником натисніть «Скинути прогрес». Прогрес зберігається в цьому браузері, без облікового запису; інший пристрій його не отримає.
  4. Покажіть перемикач рівня, підказки та відновлення коду. Не показуйте відповіді до самостійної спроби.

Сценарій на 55 хвилин

  1. 0–5 хв — вступ. Сюжет: лабораторія втратила керування роботом. HTML — структура, CSS — вигляд, JavaScript — поведінка. Помилки є частиною роботи.
  2. 5–12 хв — секрет HTML. Продемонструйте відкриття DevTools (F12 / Ctrl+Shift+I; Mac ⌘⌥I), вкладку Elements та пошук. Запитайте, чому коментар не видно на сторінці й чому він не приховує справжній пароль.
  3. 12–20 хв — HTML. Діти власноруч змінюють текст у тегу. Порівняйте код і результат. Дослідники додають абзац.
  4. 20–28 хв — CSS. Зміна кольору зі збереженням форми й розміру. Дослідники додають рамку. Обговоріть селектор # та id.
  5. 28–38 хв — JavaScript. Спробуйте заряди 0, 50 та 75. Для дослідників: різниця > та >= при battery = 50.
  6. 38–50 хв — полігон. Спочатку сплануйте маршрут словами або на папері, потім напишіть програму. Дослідники скорочують повторення циклом. До 80 розгорнутих команд; цикли без вкладення.
  7. 50–55 хв — підсумок. Збережіть відзнаку через друк у PDF. Запитайте: що змінює HTML, що CSS, для чого if і чим цикл корисніший за копіювання?

Скорочення до 45 хв: 3 хв вступ, місії 6/6/6/8/12 хв, 4 хв підсумок. До 60 хв: додайте взаємне пояснення коду та порівняння маршрутів.

Як допомагати

Спершу попросіть прочитати повідомлення перевірки, потім дайте наступну підказку. Якщо код пошкоджено — «Відновити код» скидає тільки поточну чернетку. «Скинути прогрес» стирає всі місії та чернетки після підтвердження. Якщо сховище браузера недоступне, сайт показує попередження: не закривайте вкладку й скопіюйте код.

Перемикання рівня зберігає вже виконані місії. Рівень — вибір завдань, а не окрема атестація. Оцінюйте пояснення дитини, а не кількість використаних підказок. Ім’я на відзнаці необов’язкове та не зберігається.

Відповіді для викладача
  1. Код: ROBOT2026.
  2. <h2 id="robotName">ROBOT-X01</h2>
<p>Робот готовий до місії.</p>
    Абзац обов’язковий лише дослідникам.
  3. #statusLight {
  background-color: limegreen;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid white;
}
    Рамка обов’язкова лише дослідникам.
  4. let battery = 75;
if (battery > 50) {
  startRobot();
}
    Для дослідників: battery = 50; умова battery >= 50.
  5. forward();
forward();
turnRight();
for (let i = 0; i < 5; i++) {
  forward();
}
turnLeft();
for (let i = 0; i < 3; i++) {
  forward();
}
    12 розгорнутих команд. Новачки можуть замінити цикли повтореними forward();.

Додаткові виклики та запасний план

Попросіть передбачити результат до запуску, пояснити зіткнення та знайти інший маршрут. Довільний JavaScript не виконується: тренажер підтримує лише описану підмножину команд. Справжній JavaScript у браузері має ширші можливості.

Якщо інтернет зник після завантаження сторінки, відкритий тренажер продовжує працювати; не оновлюйте його. Якщо сайт не відкрився, проведіть командне планування маршруту на дошці та поверніться до перевірки після відновлення зв’язку. Для приватного режиму збереження може діяти лише до закриття вікна.