Як легко створити інтерактивну історію для уроку

Інтерактивна історія може поєднувати різні шкільні предмети. Авторська ілюстрація, створена за допомогою ШІ.

Практичний посібник для вчителів будь-якого предмета: від першої ідеї та запитів до штучного інтелекту — до безкоштовної публікації готового текстового квесту.

Уявімо початок уроку. Замість звичного «відкрийте підручник» учні бачать повідомлення: «До завершення експедиції залишилося двадцять хвилин. Вашій команді потрібно ухвалити рішення, але даних бракує». На екрані — дві кнопки. Перша веде до архіву документів, друга — до розмови з очевидцем. Учень робить вибір, отримує нову інформацію, помиляється, переглядає рішення і поступово наближається до фіналу.

Так працює інтерактивна історія, або текстовий квест. Це не просто оповідання із запитаннями наприкінці. Відповіді учнів змінюють подальший перебіг подій: ведуть до різних сцен, підказок, наслідків і завершень. Створити такий матеріал можна без програмування, без платної підписки й навіть без власного сайту. Штучний інтелект допоможе придумати сюжет і підготувати тексти, а вчитель визначить навчальну мету, перевірить правильність і збере історію в зручному сервісі.

Де інтерактивна історія справді корисна

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

Для першої спроби достатньо однієї навчальної цілі, шести–восьми сцен, двох-трьох справді змістовних виборів і двох фіналів. Не потрібно одразу створювати величезний сюжет на сотню переходів.

Крок 1. Спроєктуйте навчальний результат, а не «цікавий сюжет»

Перш ніж відкривати чат із ШІ, заповніть короткий «паспорт» майбутнього квесту:

• Тема й клас: наприклад, «Аналіз історичних джерел, 8 клас».

• Результат: після проходження учень розрізняє факт і припущення та обґрунтовує вибір двома доказами.

• Час: 10–15 хвилин на проходження, 5 хвилин на обговорення.

• Головний конфлікт: є проблема, яку неможливо розв’язати одним кліком.

• Правило вибору: кожна кнопка повинна означати конкретну дію або аргумент, а не випадкове «йти ліворуч / праворуч».

• Зворотний зв’язок: неправильна відповідь пояснює причину й пропонує повернутися до інформації, а не просто повідомляє «Ви програли».

Схема 1. Приклад розгалуження, у якому кожен вибір має навчальний наслідок.

Крок 2. Попросіть ШІ побудувати карту історії

Найпоширеніша помилка — одразу замовити «напиши цілий квест». Тоді з’являються красиві, але випадкові сцени, дублікати переходів і фінали, які нічого не перевіряють. Значно надійніше спочатку отримати таблицю переходів, а вже потім тексти.

Промпт № 1. Сценарна карта

Ти — методист і сценарист навчальних інтерактивних історій. Створи план текстового квесту для [ПРЕДМЕТ], [КЛАС], тема [ТЕМА]. Навчальний результат: [ЩО САМЕ ПОВИНЕН УМІТИ УЧЕНЬ]. Тривалість 10–15 хвилин. Запропонуй 7–9 коротких сцен, 3 осмислені вибори, щонайменше 2 фінали та одну можливість виправити помилку. Подай відповідь таблицею: ID сцени, ситуація, знання/вміння, варіант вибору, ID наступної сцени, пояснення наслідку. Кожен перехід має вести до наявного ID. Не пиши поки художній текст. Уникай випадкових рішень, які не пов’язані з темою.

Перевірте отриману таблицю: чи є початкова сцена; чи немає переходів «у нікуди»; чи справді кожен вибір вимагає застосувати знання; чи всі шляхи рано чи пізно приводять до фіналу. Якщо ШІ пропустив сцену, попросіть виправити саме таблицю, а не переписувати все заново.

Промпт № 2. Тексти сцен

Використай погоджену таблицю переходів без зміни ID. Для кожної сцени напиши 60–100 слів живою українською мовою, зрозумілою учням [КЛАС]. Додай короткий опис ситуації, інформацію, потрібну для рішення, та 2–3 кнопки-вибори з чіткими дієсловами. Після неправильного вибору дай змістовний зворотний зв’язок без приниження. Не вигадуй фактичних дат, цитат, наукових даних або посилань: якщо потрібне джерело, познач [ПЕРЕВІРИТИ ЗА ПІДРУЧНИКОМ]. Наприкінці подай повну перевірку всіх переходів.

Крок 3. Перевірте, чи історія навчає

Не варто передавати ШІ остаточне рішення щодо змісту. Особливо уважно перевіряйте дати, історичні події, формули, одиниці вимірювання, цитати з художніх творів, поняття й правила безпеки. Якщо квест пов’язаний з експериментами або здоров’ям, учнівські рішення повинні бути віртуальними, а небезпечні дії не слід пропонувати як реальну практику.

Промпт № 3. Редакторська перевірка

Перевір цей квест як редактор навчального матеріалу. Знайди: 1) фактичні твердження, що потребують підтвердження; 2) сцени, де учень може вгадати відповідь без знань; 3) надто довгі тексти; 4) непрацюючі або циклічні переходи без виходу; 5) фінали без пояснення. Подай таблицю «проблема — сцена — конкретне виправлення». Не змінюй правильні фрагменти й не додавай нових фактів без джерела.

Тепер потрібно перетворити сценарій на сторінку, якою учні зможуть користуватися. Найпростіше зробити це одним із двох способів.

Спосіб 1. Google Forms: квест без програмування

Кому підійде: для першого досвіду, 5–10 сцен, переходів за вибором відповіді та швидкого поширення посилання. Потрібен звичайний обліковий запис Google; окрема платна підписка не потрібна. Обмеження: оформлення й складна ігрова логіка доволі прості.

1. Відкрийте forms.google.com і створіть порожню форму. Назвіть її, наприклад, «Таємниця шкільного архіву».

2. У вступному описі додайте місію та правило: «Читайте текст і вибирайте дію. Від цього залежить наступна сцена».

3. Правою панеллю натисніть «Додати розділ». Створіть окремий розділ для кожної сцени: «Початок», «Архів», «Свідок», «Перевірка», «Фінал».

4. У кожному розділі розмістіть текст ситуації в описі й додайте запитання типу «Один зі списку» (Multiple choice). Як альтернативу можна використати «Спадний список».

5. Натисніть три крапки внизу запитання та виберіть «Перейти до розділу залежно від відповіді». Назви пунктів у різних мовних версіях інтерфейсу можуть трохи відрізнятися.

6. Для кожного варіанта вкажіть потрібний розділ: «Перевірити документ» → «Архів»; «Опитати свідка» → «Свідок».

7. У нижній частині кожного розділу перевірте поле «Після розділу»: інакше читач може випадково потрапити до сцени, яка не відповідає його вибору.

8. Для фіналу налаштуйте завершення форми. Перегляньте історію через кнопку «Попередній перегляд» (значок ока), пройшовши всі можливі маршрути.

9. Відкрийте налаштування доступу: якщо хочете, щоб учні проходили історію без облікового запису, не вмикайте обмеження для однієї організації та вимоги входу. Не збирайте імена чи поштові адреси, якщо вони не потрібні.

10. Натисніть «Надіслати» або опцію поширення та скопіюйте посилання для учнів. Його можна додати в електронний журнал, LMS, презентацію або QR-код.

Важливо: переходи за відповіддю в Google Forms працюють із типами запитань Multiple choice і Dropdown, а не з довільним текстом чи прапорцями. Форма добре показує послідовність рішень, але не замінює повноцінний ігровий рушій і не забезпечує автоматичного оцінювання всіх складних маршрутів. Для коротких квестів цього цілком достатньо.

Ілюстративний макет Google Forms (не реальний скріншот). Посилання на справжній скріншот — у джерелах наприкінці статті.

Спосіб 2. Twine: справжня розгалужена історія

Якщо потрібні красивіші переходи, багато сцен, повторні спроби й власне оформлення, варто спробувати Twine — безкоштовний інструмент із відкритим кодом для нелінійних історій. Він працює в браузері, існує й настільна версія. Для простого квесту не потрібні знання програмування.

1. Перейдіть на twinery.org і відкрийте браузерну версію Twine або завантажте програму.

2. Створіть нову історію (New / + Story) і дайте їй назву.

3. Для прикладів нижче оберіть формат історії Harlowe у налаштуваннях Story Format. Це важливо для сумісності наведеного запису переходів.

4. Відкрийте стартовий блок і назвіть його Start. Кожен блок називається passage — окрема сцена.

5. Вставте текст ситуації та переходи між подвійними квадратними дужками. Наприклад, [[Перевірити документ->Archive]]. Ліворуч — текст кнопки, праворуч — точна назва цільової сцени.

6. Закрийте редактор. Twine відобразить на схемі зв’язки між сценами; створіть або заповніть блоки Archive, Witness, Check, Hasty, Success.

7. Кнопкою Play / Test пройдіть усі маршрути. Якщо посилання веде не туди, перевірте написання назви сцени після ->.

8. За потреби додайте картинки, адаптований шрифт, кольори та зворотні переходи. Для першого проєкту краще не ускладнювати історію змінними й кодом.

9. Відкрийте Build → Publish to File («Опублікувати у файл»). Twine створить HTML-файл, який відкривається у браузері.

10. Збережіть також резервну копію проєкту: браузерна версія Twine зберігає робочі історії локально, і очищення даних браузера може їх видалити.

Мініприклад: квест «Таємниця шкільного архіву». Ось готова основа із шести сцен. Кожен фрагмент вставляється в окремий блок з відповідною назвою.

Сцена Start

У шкільному музеї зник підпис до старого експоната. Вам потрібно з’ясувати, яку інформацію можна вважати надійною. Час обмежений.

[[Знайти письмовий документ->Archive]]

[[Поговорити з очевидцем->Witness]]

Сцена Archive

Ви знайшли запис, але його автор не зазначений. Один документ — ще не доказ. Що робитимете?

[[Зіставити запис з іншим джерелом->Check]]

[[Оголосити висновок негайно->Hasty]]

Сцена Witness

Очевидець пригадує подію, але не впевнений у даті. Його слова корисні, проте пам’ять може підводити.

[[Перевірити спогад за документами->Check]]

[[Повірити без перевірки->Hasty]]

Сцена Check

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

[[Сформулювати обережний висновок->Success]]

Сцена Hasty

Поспішне рішення виявилося ненадійним. Один спогад або один запис не завжди дозволяє встановити факт.

[[Повернутися до перевірки доказів->Check]]

Сцена Success

Експонат отримав обґрунтований підпис! Ви не просто знайшли відповідь, а перевірили її. Поміркуйте: який доказ був найпереконливішим і чому?

[[Пройти ще раз->Start]]

Це, звісно, лише каркас. На уроці історії замість експоната можуть бути суперечливі свідчення, на уроці біології — результати спостереження, на математиці — кілька способів розв’язання практичної задачі. Головне, щоб рішення учня спиралося на матеріал теми.

Ілюстративна карта сцен Twine (не реальний скріншот). Справжній скріншот редактора — у переліку джерел.

Реальні скріншоти авторської HTML-демоверсії: зліва — початок, справа — зворотний зв’язок після поспішного рішення.

Крок 4. Де безкоштовно опублікувати готовий квест

Створити файл — лише половина справи. Учневі потрібен зручний доступ, бажано без встановлення програм.

Як опублікувати Twine-квест на itch.io

1. Створіть безкоштовний обліковий запис на itch.io.

2. У панелі автора натисніть Create new project / Upload game.

3. Введіть назву й короткий опис квесту, оберіть категорію Games, тип проєкту HTML.

4. У полі ціни оберіть No payments, якщо хочете, щоб не було навіть пропозицій пожертв.

5. Завантажте один HTML-файл із Twine. Якщо історія складається з HTML, зображень та інших файлів, запакуйте їх у ZIP, а головний файл назвіть index.html.

6. Позначте завантажений файл як такий, що запускається у браузері, і виберіть вбудований перегляд або запуск на весь екран.

7. Спочатку збережіть сторінку як приватну, перевірте гру з комп’ютера та телефона. Потім у параметрах видимості встановіть Public.

8. Якщо в історії використано генеративний ШІ, заповніть відповідне поле AI Disclosure згідно з правилами сервісу.

Не плутайте: Google Drive може зберігати HTML як файл для завантаження, але це не означає, що він автоматично працюватиме як ігровий сайт. Для запуску у браузері простіше скористатися itch.io або хостингом, який підтримує HTML.

У Google Sites можна зробити окрему навчальну сторінку з описом, кнопкою переходу до квесту та іншими матеріалами. Якщо гра вже має загальнодоступну вебадресу, спробуйте команду Вставити → Вбудувати. Однак не кожен зовнішній сайт дозволяє вбудовування, тому звичайне посилання завжди варто залишити як резервний варіант.

Крок 5. Зробіть квест навчальним, а не просто видовищним

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

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

Перед публікацією пройдіть усі гілки та перевірте:

• кожна кнопка відкриває правильну сцену, а кожен маршрут має завершення;

• неправильне рішення містить пояснення або шанс виправитися;

• наукові факти й цитати звірені з надійними джерелами;

• текст читається з телефона, а кнопки достатньо великі;

• учні не мусять розкривати персональні дані;

• учитель має резервну копію вихідного проєкту;

• є коротке запитання для обговорення після фіналу.

Де подивитися, як це виглядає на практиці

Я теж використовую текстові пригоди у власних цифрових освітніх проєктах. Приклади можна знайти, якщо в пошуковій системі ввести «Дмитро Рипич Questora» або «Дмитро Рипич текстові квести», відкрити мій авторський освітній сайт і перейти до розділу Questora. Там можна подивитися, як організовані сюжетні епізоди, переходи між рішеннями та різні фінали, і взяти ідею для власного уроку. Не обов’язково повторювати масштаб такого проєкту: коротка історія з кількома продуманими розгалуженнями теж може чудово працювати.

Замість висновку

Почати можна дуже просто: одна тема, одна навчальна проблема, шість сцен і два фінали. Штучний інтелект допоможе підготувати сценарну карту й тексти, Google Forms — швидко зібрати першу версію, а Twine — зробити повноцінну інтерактивну історію, яку зручно поширювати через браузер.

Цінність такої роботи не в кількості кнопок чи спецефектів. Вона в моменті, коли учень зупиняється перед вибором, пригадує вивчене, перевіряє здогад і починає розуміти, чому саме його рішення привело до певного результату. Саме заради цього й варто спробувати.

Корисні ресурси й джерела

Twine • Довідка Twine • Google Forms • itch.io • Google Sites • Скріншот Twine (CC0) • Скріншот Google Forms (CC BY-SA 4.0)