Блог
HTML-игры с помощью нейросетей

Как преподавателю создавать интерактивные HTML-игры с помощью нейросетей - без навыков программирования


Если вы видели мои последние материалы, то, возможно, заметили, что я начала добавлять к урокам HTML-файлы. И здесь закономерный вопрос: что это вообще такое и зачем оно преподавателю?
Особенно если вы, как и я, не программист и совершенно не собирались им становиться. На самом деле не так страшен черт, как его малюют.

HTML-файл позволяет превратить обычное задание в маленькую интерактивную игру: студент может перетаскивать карточки, нажимать на предметы, открывать скрытые ответы, восстанавливать последовательность событий, выбирать варианты из выпадающего списка и взаимодействовать с материалом прямо на экране. А благодаря современным нейросетям для создания таких файлов уже не обязательно уметь программировать. Но обо всём по порядку.

Что такое HTML-файл?

Если совсем просто, HTML-файл - это файл, который открывается в браузере и может работать как небольшое интерактивное приложение. Он хранится у вас на компьютере, как обычный PDF, презентация или картинка. Например, у вас есть файл: game.html . Вы нажимаете на него - и он открывается в браузере, который установлен на вашем компьютере. Это может быть Chrome, Safari, Edge, Firefox и т. д. При этом внутри может находиться не просто текст. Там могут быть: кнопки, карточки, изображения, анимация, скрытые ответы, выпадающие списки, задания с выбором ответа, drag & drop, перемещающиеся объекты, счётчики, баллы и др. То есть внешне такой файл может выглядеть скорее как маленькое приложение или интерактивная игра, чем как привычный документ.

Зачем HTML преподавателю, если есть PowerPoint?

Я совершенно не считаю, что теперь нужно выбросить все презентации и срочно делать каждый урок в HTML. Мне как раз нравится сочетать разные форматы. Есть вещи, которые прекрасно работают в обычной презентации и совершенно незачем усложнять. Но иногда при подготовке урока возникает мысль:


"Вот здесь мне хочется, чтобы студент сам это передвинул" или "хочу, чтобы ответ сначала был скрыт, а потом открывался по нажатию".


Вот в таких случаях HTML становится очень удобным. Например, на слайде у меня находятся девять картинок. Я могу попросить студента сказать, в каком порядке они должны располагаться. А могу вынести это задание в HTML, и тогда студент сам физически перетаскивает эти девять карточек и восстанавливает последовательность. Содержание задания практически не изменилось. Мы просто изменили механику взаимодействия с ним. И для меня именно в этом заключается главная ценность HTML.

Нужно ли для этого уметь программировать?

Нет. Я не пишу код самостоятельно. И если бы для создания каждой такой игры мне сначала пришлось изучить HTML, CSS и JavaScript, думаю, на этом бы моё увлечение интерактивными файлами закончилось😅
Сейчас код может написать нейросеть.
Вы объясняете, что хотите получить, а она создаёт HTML-файл. Причём можно попросить её не только создать игру с нуля, но и потом вносить изменения:

"Сделай карточки крупнее, добавь кнопку назад, не разрешай перейти дальше, пока студент не выполнит задание " и тд.


И нейросеть сама меняет код. Получается довольно интересная ситуация: вам не обязательно знать, как технически реализовать функцию. Вам нужно понимать, какую функцию вы хотите получить.

Какие нейросети можно использовать?

Сразу хочу обсудить с вами один насущный вопрос, потому что он возникает одним из первых.
Начать создавать HTML-файлы можно бесплатно. Например, HTML-файлы можно создавать с помощью Gemini. Я пробовала - он это делает. Но лично мне результат Gemini совершенно понравился. Возможно, я просто привыкла к другому результату.
А вот с чатом GPT мы дружим давно. По моему опыту, он лучше понимает довольно длинные сценарии, и мне проще постепенно объяснять ему, что именно нужно изменить в игре. Но здесь обязательно уточню: я работаю с платной версией GPT. Простые HTML-игры можно делать и с помощью бесплатных инструментов и доступных бесплатных версий нейросетей. Поэтому сначала попробуйте сам принцип, а купить подписку всегда успеете.

Где брать промпты?

Вот здесь, мне кажется, вокруг нейросетей иногда создаётся какая-то совершенно лишняя магия. Нигде.
Не нужно искать в интернете секретный идеальный промпт для создания HTML-игры. Нейросеть сама прекрасно может написать вам технический промпт. Но сначала ей нужно объяснить, что вы хотите сделать. И вот это гораздо сложнее. Самое главное - не промпт. Самое главное - методические продуманный сценарий. Создать сам HTML-файл с помощью нейросети можно довольно быстро. Но перед этим нужно решить:

"А что вообще будет происходить в вашей игре?"


И тут стоит немного подумать. Допустим, я хочу сделать интерактивное задание. Мне нужно решить:
  • что студент увидит на первом экране;
  • что он должен сделать;
  • что произойдёт после его действия;
  • сможет ли он вернуться назад;
  • когда появится кнопка "Дальше";
  • будет ли правильный ответ;
  • что произойдёт при ошибке;
  • можно ли передвигать карточки;
  • нужно ли начислять баллы;
  • нужна ли анимация;
  • будут ли ответы скрыты;
  • в какой момент студент должен перестать выбирать варианты и начать говорить самостоятельно;
  • как одно задание связано со следующим;
  • зачем вообще каждое из этих действий нужно с точки зрения языка.

На это у меня уходит гораздо больше времени, чем на получение самого HTML-файла.

Можно ли попросить ChatGPT придумать сценарий?

Конечно. Можно написать:

"Придумай мне интерактивную игру для отработки предложного падежа для уровня A1"


И нейросеть предложит задания.
Но здесь есть один важный момент. Нейросеть может придумать вам десять очень нарядных интерактивных упражнений.

Десять нарядных упражнений не равно хороший урок.


Нужно понимать, зачем сначала идёт одно задание, потом другое, что мы контролируем, где увеличиваем сложность, где даём опору, а где её убираем. Особенно внимательно я бы относилась к этому начинающим преподавателям. Если у вас пока мало опыта, бывает трудно оценить, действительно ли нейросеть методически хорошо выстроила последовательность или просто предложила набор разных механик. Поэтому я использую ИИ скорее как помощника в разработке, а не как преподавателя, которому я полностью отдаю методическую часть урока. Он может предложить идеи, и очень часто я с ним не согласна. Я могу переставлять задания, добавлять другие, могу просто убрать 90% предложенных заданий. А уже когда я понимаю, что именно хочу получить, можно переходить к технической реализации. Покажу на конкретном примере.

У меня уже есть большая презентация про Василиса и его лето. По сюжету Василис очень насыщенно провёл лето: путешествовал, фотографировал, сохранял разные воспоминания - и в итоге 1 сентября обнаружил, что память его телефона заполнена. Дальше начинается целый урок-квест. Но мне захотелось сделать ещё один небольшой этап перед этой презентацией. Я называю его для себя "препрезентация". 😀
То есть сначала студент ещё не знает Василиса и ничего не знает о его лете. И вместо того чтобы просто сказать: "Это Василис. Летом он путешествовал. Давайте посмотрим, где он был", я решила дать студенту возможность самому постепенно восстановить эту историю.
Так появилась маленькая HTML-игра.

Как устроена игра про Василиса

В ней восемь основных заданий и финальный экран.
Сначала студент видит Василиса с чемоданом и предполагает:

Где Василис был этим летом?


Перед ним разные варианты: море, дом, лес, библиотека, магазин, офис, спортзал, вокзал, Стамбул, аэропорт, Афины, парк, школа. Здесь нет правильного ответа. Мне нужно сначала вызвать предположения.

Дальше - расшифровка. Студент видит три иконки:

такси + водитель + дорога.


Он должен догадаться, что зашифрована за этими иконками, а потом нажать на заблюренную карточку и проверить:

"Василис был в такси".


Следующая комбинация:

билет + самолёт + зал ожидания - "Василис был в аэропорту" и тд.


Постепенно студент получает отдельные фрагменты истории.
Потом нужно восстановить маршрут. Все ситуации превращаются в квадратные карточки и перемешиваются. Теперь студент должен самостоятельно перетащить их и восстановить последовательность:

такси → аэропорт → кафе → самолёт → отель → пляж → парк → магазин → концерт


Потом - найти лишние фотографии.
Среди фотографий появляются места, которых в истории Василиса не было. Студент должен найти их и сказать:

"Василис не был в библиотеке", "Василис не был в офисе".


Следующий этап - соединить действие и место. Например: отдыхал - на пляже, гулял - в парке, покупал сувениры - в магазине и тд. После правильного соединения игра сама собирает полное предложение:

"Василис отдыхал на пляже" и тд.


Потом "Василис всё перепутал".
Появляются предложения с выпадающими вариантами.
Студент выбирает правильное место:

Василис гулял [в парке / в аэропорту / на концерте].


Затем исчезает одно воспоминание. На экране весь маршрут:

такси → аэропорт → кафе → самолёт → отель → ? → парк → магазин → концерт


Студент должен понять, что пропал пляж. А затем ответить:

-Что Василис там делал?

- отдыхал. Василис отдыхал на пляже.


И только после этого убираются практически все опоры.
На экране остаются фотографии в правильном порядке. Никаких подписей. Никаких готовых предложений. И вопрос:

"Лето закончилось. Где был Василис? Что он делал?"


Теперь студент должен сам рассказать всю историю. То есть внутри одной маленькой игры мы несколько раз возвращаемся к одним и тем же конструкциям, но каждый раз студент делает с ними что-то немного другое. А в конце происходит сюжетный поворот. Василис смотрит в телефон и видит:

"Хранилище заполнено".


И вот здесь заканчивается HTML-игра и начинается моя основная презентация.

Почему я не стала сразу просить студента рассказать о своём лете?

Это тоже сознательное решение. Обычно после такой темы вполне логично спросить: "А где вы были этим летом?" Но в данном случае HTML - только начало большого урока. В основной презентации история Василиса продолжается, а уже в её финале студент переходит к собственному опыту и рассказывает о своём лете. Поэтому я не хочу делать один и тот же коммуникативный выход дважды.
HTML здесь выполняет свою конкретную задачу:

познакомить с героем → актуализировать грамматику → дать контролируемую практику → постепенно убрать опоры → вывести в речь → создать интригу перед основной частью урока


Как из сценария получить HTML-файл?

Когда сценарий полностью готов, я прошу нейросеть превратить его в подробное техническое задание.
И вот здесь уже можно прописывать буквально всё. Например:
  • цвет фона;
  • расположение элементов;
  • размер карточек;
  • количество страниц;
  • тексты кнопок;
  • наличие кнопки "Назад";
  • что должно происходить при клике;
  • какие элементы можно перетаскивать;
  • какие нельзя;
  • когда появляется правильный ответ;
  • когда становится доступна следующая страница;
  • нужно ли перемешивать карточки;
  • как выглядит правильный ответ;
  • что происходит при ошибке;
  • какая анимация нужна;
  • как выглядит финальный экран.
Чем конкретнее техническое задание, тем меньше потом приходится объяснять:
"Нет, я имела в виду совсем не это".

Можно ли просто скопировать мой промпт?

Конечно. Если вам нужна похожая структура, берите его за основу, меняйте тему, лексику, персонажей, картинки и содержание заданий. Но я бы не относилась к нему как к универсальному промпту для создания любого HTML-урока. Такого промпта, на мой взгляд, вообще не существует. Потому что в другой игре вам, возможно, не понадобится drag & drop. Зато понадобится кубик, или таймер, или баллы...
Поэтому гораздо полезнее научиться не копировать готовые промпты, а описывать нейросети нужную механику.

Что можно сделать в HTML для урока?

Если вы хотите попробовать этот формат, вот несколько идей. Можно сделать:
  • карточки, которые студент перетаскивает в нужную категорию;
  • восстановление последовательности событий;
  • найдите лишнее;
  • matching;
  • заблюренные ответы;
  • карточки-перевёртыши;
  • интерактивную карту;
  • игровое поле с фишками;
  • виртуальный кубик;
  • квест по комнатам;
  • задания с выпадающими списками;
  • сортировку слов;
  • восстановление предложения;
  • выбор правильной картинки;
  • шкалу прогресса;
  • игру с баллами;
  • задания, которые открываются только после выполнения предыдущих;
  • интерактивную историю с несколькими вариантами развития событий.

И это далеко не предел.

С чего начать, если вы никогда этого не делали?

Я бы рекомендовала не начинать с идеи: "Сейчас я создам целый интерактивный урок на 40 минут". Возьмите одно уже существующее задание из своей презентации и задайте себе вопрос:

"Что студент мог бы здесь сделать руками?"


Не просто посмотреть или прочитать, а самостоятельно что-то передвинуть. Допустим, у вас есть упражнение: "Расположите события в правильном порядке". Вот вам первая HTML-игра.
Попросите нейросеть сделать несколько перетаскиваемых карточек и проверку последовательности.
Не получилось? Покажите ей результат и объясните, что нужно исправить.
Слишком маленькие карточки? Скажите об этом. Не нравится цвет? Поменяйте. Нужна кнопка Повторить? Добавьте.

Это обычный процесс доработки материала. Нейросеть не отменяет работу преподавателя. Наверное, это главная мысль, которую мне хотелось донести этой статьёй.
Когда смотришь на готовую интерактивную игру, может показаться:

"Ну теперь нейросеть вообще всё делает сама".


И да, технически она действительно делает очень много. Мне не нужно вручную писать сотни строк кода. Но нейросеть не знает, зачем именно моему студенту сейчас это задание. Она не знает автоматически:
  • какой материал он уже проходил;
  • какую лексику знает;
  • где ему нужна опора;
  • когда её пора убрать;
  • насколько сложным должен быть вопрос;
  • зачем это упражнение стоит именно здесь;
  • что я хочу получить от студента в конце.
Вот это всё по-прежнему остаётся работой преподавателя.
И, пожалуй, самый быстрый этап во всей этой цепочке - как раз написание кода.

Итого

HTML-файлы дали мне возможность делать то, чего иногда не хватало в обычных презентациях: добавлять настоящее взаимодействие с материалом. При этом мне не пришлось становиться программистом. И еще мне кажется, это как раз один из тех случаев, когда нейросеть действительно снимает технический барьер. Поэтому, если вам хочется попробовать HTML, я бы начинала не с изучения кода и даже не с поиска идеального промпта.
Я бы начала с вопроса:

"Какую задачу этот HTML-файл должен решать на уроке?"


Это актуализация, проверка, коммуникативная задача, визуализация или способ вовлечь студента в тему? И только потом:

"Что именно должен сделать студент, чтобы эта задача была решена?"


А дальше уже можно объяснить это нейросети.
Код она напишет.

Мой промпт для игры "Где был Василис этим летом?"

Ниже оставляю реальный промпт, по которому создавалась моя игра. Сразу предупреждаю: он длинный и это нормально. Если игра состоит из нескольких страниц с разной механикой, гораздо проще один раз подробно описать каждую страницу, чем потом двадцать раз исправлять результат.
"Создай интерактивную HTML-мини-игру для урока русского языка как иностранного уровня A1.
Тема игры: "Где был Василис этим летом?"
Главный персонаж — молодой мужчина по имени Василис. Вся игра должна быть связана с одним персонажем и представлять собой небольшое последовательное расследование его летнего путешествия.
Основная языковая цель:
  • повторение предложного падежа с вопросом "Где?";
  • конструкции в + предложный падеж / на + предложный падеж;
  • прошедшее время глаголов;
  • модели:
  • Василис был в…
  • Василис был на…
  • Василис пил…
  • Василис гулял…
  • Василис отдыхал…
  • Василис покупал…
  • Василис слушал…
Уровень учащихся - A1, поэтому:
  • предложения должны быть короткими;
  • инструкции простыми;
  • новая лексика минимальна;
  • основной акцент на визуальных подсказках;
  • задания должны быть понятны без длинных объяснений.
Игра должна состоять из 9 экранов / страниц.
Переход между страницами - кнопка со стрелкой вправо или кнопка "Дальше".
На каждой странице должен быть один чёткий этап игры.
Общий порядок:
  1. Предположи.
  2. Расшифруй.
  3. Восстанови.
  4. Найди лишнее.
  5. Соедини.
  6. Исправь Василиса.
  7. Найди пропавшее воспоминание.
  8. Расскажи маршрут самостоятельно.
  9. Финальный экран — память телефона переполнена.
ОБЩИЙ ВИЗУАЛЬНЫЙ СТИЛЬ
Дизайн должен быть современным, лёгким, мультяшным, подходящим для учебного материала РКИ.
Основные цвета:
  • светлый холодный голубой фон #d2e1ec;
  • белые карточки;
  • мягкие синие элементы;
  • оранжевые акценты;
  • зелёный цвет для правильного ответа;
  • красный — только для ошибок или предупреждения.
Интерфейс должен выглядеть как современная интерактивная учебная игра, а не как обычный тест.
Не использовать слишком детские элементы.
Все карточки должны иметь:
  • мягкие скруглённые углы;
  • лёгкую тень;
  • аккуратные анимации при наведении;
  • плавное появление текста;
  • адаптацию под экран ноутбука.
Основной формат — горизонтальный, 16:9.
В верхней части каждой страницы можно показывать небольшой прогресс:
1 / 9, 2 / 9, 3 / 9…
или визуальную полоску прогресса.
СТРАНИЦА 1. ПРЕДПОЛОЖИ
Заголовок:
Как вы думаете, где Василис был этим летом?
В центре страницы изображён Василис, рядом большой чемодан.
Он:
  • стоит с чемоданом;
  • второй рукой чешет голову;
  • выглядит немного задумчивым;
  • рядом не должно быть никаких конкретных подсказок о маршруте.
Под персонажем большая рамка с вариантами мест.
Варианты:
  • море
  • дом
  • лес
  • библиотека
  • магазин
  • офис
  • спортзал
  • вокзал
  • Стамбул
  • аэропорт
  • Афины
  • парк
  • школа
Каждый вариант должен выглядеть как отдельная маленькая кликабельная карточка.
Студент может выбрать несколько вариантов.
При клике:
  • карточка подсвечивается;
  • повторный клик снимает выбор.
Здесь нет правильных и неправильных ответов.
Это этап предположения.
После выбора появляется кнопка:
Проверим?
Она переводит на следующую страницу.
СТРАНИЦА 2. РАСШИФРУЙ
Заголовок:
Посмотрите на картинки. Что делал Василис и где он был?
Внизу - посмотрите на картинке и скажите предложение, потом нажмите и проверьте.
Это длинная вертикальная страница, которую можно прокручивать вниз.
На ней расположены несколько блоков.
Каждый блок состоит из:
  1. трёх крупных иконок;
  2. под ними — заблюренная прямоугольная рамка;
  3. при клике на рамку blur плавно исчезает;
  4. появляется правильное предложение.
Очень важно:
  • пока студент не нажал, текст нельзя прочитать;
  • после открытия рамка больше не закрывается.
Использовать следующие комбинации.
Блок 1
Иконки:
такси — водитель — дорога
Скрытое предложение:
Василис был в такси.
Блок 2
Иконки:
билет — самолёт — зал ожидания
Скрытое предложение:
Василис был в аэропорту.
Блок 3
Иконки:
кафе — кофе — Василис
Скрытое предложение:
Василис пил кофе в кафе.
Блок 4
Иконки:
самолёт — еда — кресло самолёта
Скрытое предложение:
Василис был в самолёте.
Блок 5
Иконки:
кровать — ресепшионист — ключи
Скрытое предложение:
Василис был в отеле.
Блок 6
Иконки:
море — шезлонг зонтик для пляжа — коктейль
Скрытое предложение:
Василис был на пляже.
Блок 7
Иконки:
дерево — лавочка (не стул!) — тропинка
Скрытое предложение:
Василис был в парке.
Блок 8
Иконки:
пакет — сувениры — деньги
Скрытое предложение:
Василис был в магазине.
Блок 9
Иконки:
концерт — микрофон — билет
Скрытое предложение:
Василис был на концерте.
После открытия всех блоков становится активной кнопка:
Дальше
Назад
Она переводит на предыдущую страницу.
СТРАНИЦА 3. ВОССТАНОВИ
Заголовок:
Восстановите маршрут Василиса.
Подзаголовок:
Что было сначала? А что потом?
Здесь должны появиться все места и ситуации со страницы 2, но уже не в виде маленьких иконок.
Каждая карточка должна быть квадратной и содержать полноценную иллюстрацию.
Карточки:
  1. такси
  2. аэропорт
  3. кофе
  4. самолёт
  5. отель
  6. пляж
  7. парк
  8. магазин
  9. концерт
Под каждой картинкой должна быть подпись:
  • в такси
  • в аэропорту
  • в кафе
  • в самолёте
  • в отеле
  • на пляже
  • в парке
  • в магазине
  • на концерте
Все карточки изначально расположены в случайном порядке.
Студент должен перетаскивать их мышкой.
Использовать drag & drop.
Над карточками пустая горизонтальная или зигзагообразная дорожка из 9 ячеек.
Студент должен восстановить правильную последовательность:
  1. такси
  2. аэропорт
  3. кофе
  4. самолёт
  5. отель
  6. пляж
  7. парк
  8. магазин
  9. концерт
Когда студент ставит карточку:
  • она фиксируется в ячейке;
  • её можно снова передвинуть.
Когда все карточки стоят правильно:
  • дорожка подсвечивается;
  • появляется сообщение:
Отлично! Маршрут восстановлен.
После этого становится активной кнопка "Дальше".
Назад
Она переводит на предыдущую страницу.
СТРАНИЦА 4. НАЙДИ ЛИШНЕЕ
Заголовок:
Какие фотографии не относятся к лету Василиса?
Инструкция:
Найдите лишние фотографии.
На экране сетка из 12 квадратных фотографий.
Правильные фотографии, связанные с уже известным маршрутом:
  • Василис в такси;
  • Василис в аэропорту;
  • Василис пьёт кофе;
  • Василис в самолёте;
  • Василис в отеле;
  • Василис на пляже;
  • Василис в парке;
  • Василис в магазине;
  • Василис на концерте.
Добавить три лишние фотографии:
  • Василис в библиотеке;
  • Василис в офисе;
  • Василис в банке.
Лишние фотографии должны быть достаточно реалистичными, чтобы студенту пришлось подумать.
При клике на лишнюю фотографию:
  • появляется зелёная рамка;
  • фотография слегка уменьшается;
  • появляется подпись:
Верно! Василис там не был.
При клике на фотографию из реального маршрута:
  • лёгкая красная анимация;
  • текст:
Неверно! Василис там был.
Когда найдены все три лишние фотографии, появляется вопрос:
Где Василис не был?
И студент должен устно сказать:
  • Василис не был в библиотеке.
  • Василис не был в офисе.
  • Василис не был в школе.
После этого преподаватель нажимает "Дальше".
Назад
Она переводит на предыдущую страницу.
СТРАНИЦА 5. СОЕДИНИ
Заголовок:
Что Василис делал и где?
Соедините действия и место. Скажите предложение, потом проверьте.
Задание основано на drag & drop.
Слева располагаются карточки с действиями:
  • пил кофе
  • отдыхал
  • гулял
  • покупал сувениры
  • слушал музыку
Справа — карточки с местами:
  • в аэропорту
  • на пляже
  • в парке
  • в магазине
  • на концерте
Студент перетаскивает действия к правильным местам.
Правильные пары:
пил кофе → в аэропорту
отдыхал → на пляже
гулял → в парке
покупал сувенир → в магазине
слушал музыку → на концерте
Когда пара составлена правильно, две карточки объединяются в одно предложение.
Например:
Василис пил кофе в аэропорту.
Василис отдыхал на пляже.
Василис гулял в парке.
Василис покупал сувенир в магазине.
Василис слушал музыку на концерте.
Если пара неправильная:
  • карточка мягко возвращается назад;
  • никакого резкого сигнала ошибки.
Когда все пары составлены правильно, появляется кнопка "Дальше".
Назад
Она переводит на предыдущую страницу.
СТРАНИЦА 6. ИСПРАВЬ ВАСИЛИСА
Заголовок:
Василис устал и всё перепутал. Помогите ему!
На странице 6 предложений.
В каждом предложении есть выпадающий список.
1
Василис пил кофе [выберите место].
Варианты:
  • в кафе
  • на пляже
  • в магазине
Правильно:
в кафе
2
Василис отдыхал [выберите место].
Варианты:
  • на пляже
  • в самолёте
  • в магазине
Правильно:
на пляже
3
Василис гулял [выберите место].
Варианты:
  • в парке
  • в аэропорту
  • на концерте
Правильно:
в парке
4
Василис покупал сувенир [выберите место].
Варианты:
  • в магазине
  • в парке
  • в самолёте
Правильно:
в магазине
5
Василис слушал музыку [выберите место].
Варианты:
  • на концерте
  • в отеле
  • в такси
Правильно:
на концерте
6
Василис спал [выберите место].
Варианты:
  • в отеле
  • в магазине
  • на концерте
Правильно:
в отеле
После выбора правильного варианта появляется зелёная галочка.
После неправильного — студент может выбрать снова.
Когда все ответы правильные:
Готово! Теперь Василис всё вспомнил.
Когда все пары составлены правильно, появляется кнопка "Дальше"
Назад
Она переводит на предыдущую страницу.
СТРАНИЦА 7. НАЙДИ ПРОПАВШЕЕ ВОСПОМИНАНИЕ
Заголовок:
Одна фотография пропала. Какая?
На экране показан маршрут Василиса в виде картинок:
такси → аэропорт → кофе → самолёт → отель → ? → парк → магазин → концерт
На месте пляжа расположен большой знак вопроса.
Внизу четыре фотографии:
  • пляж
  • библиотека
  • магазин
  • офис
Студент должен нажать на фотографию пляжа.
После правильного выбора:
  • фотография пляжа плавно перемещается на место знака вопроса;
  • появляется второй вопрос:
Что Василис там делал?
Варианты:
  • отдыхал
  • работал
  • учился
  • покупал
Правильный ответ:
отдыхал
После выбора появляется полное предложение:
Василис отдыхал на пляже.
И кнопка "Дальше".
Назад
Она переводит на предыдущую страницу.
СТРАНИЦА 8. РАССКАЖИ МАРШРУТ САМОСТОЯТЕЛЬНО
Заголовок:
Лето закончилось. Где был Василис? Что он делал?
На странице располагаются все фотографии маршрута в правильном порядке:
  1. такси
  2. аэропорт
  3. кофе
  4. самолёт
  5. отель
  6. пляж
  7. парк
  8. магазин
  9. концерт
ВАЖНО:
Под фотографиями не должно быть никаких подписей.
Не должно быть готовых предложений.
Это устное задание.
Студент должен самостоятельно восстановить историю по изображениям.
Можно добавить только небольшую опору внизу:
Сначала…
Потом…
После этого…
В конце…
Но не давать готовые формы мест.
Студент должен сам говорить:
  • Василис был в такси.
  • Потом он был в аэропорту.
  • Он пил кофе в кафе.
  • Потом он был в самолёте.
  • Он был в отеле.
  • Он отдыхал на пляже.
  • Он гулял в парке.
  • Он покупал сувенир в магазине.
  • Он был на концерте / слушал музыку на концерте.
На этой странице нет автоматической проверки.
Кнопка:
Что было дальше?
переходит на финальный экран.
Назад
Она переводит на предыдущую страницу.
СТРАНИЦА 9. ФИНАЛЬНЫЙ ЭКРАН И ПЕРЕХОД К ОСНОВНОЙ ПРЕЗЕНТАЦИИ
Эта страница должна создавать интригу и плавно подводить к продолжению истории.
На экране Василис стоит и смотрит в телефон.
Он выглядит шокированным.
На экране телефона или рядом с ним появляется системное сообщение:
Память телефона переполнена
или:
Хранилище заполнено
Визуально это должно напоминать системное предупреждение смартфона.
Под ним текст:
Кажется, путешествие закончилось…
Затем через небольшую паузу появляется:
Но у Василиса осталась ещё одна проблема.
После этого:
В телефоне слишком много фотографий, сообщений и воспоминаний.
Следующая строка:
Что сохранить, а что удалить?
Затем крупный финальный текст:
История Василиса продолжается…
Под ним можно добавить:
Помогите Василису разобраться с его летними воспоминаниями.
Не раскрывать:
  • имена других персонажей;
  • реальные дальнейшие события;
  • геолокации из основной презентации;
  • бывшую девушку;
  • содержание сообщений;
  • фотографии;
  • конкретный маршрут из основной презентации.
Финальный экран должен только создавать мост к дальнейшему уроку.
Кнопка внизу:
Продолжить историю
Она не должна вести на другую страницу внутри этой игры.
Можно сделать её как декоративную кнопку или ссылку-заглушку с href="#", чтобы преподаватель мог позже вставить свою ссылку на презентацию.
В HTML-коде рядом с кнопкой оставить комментарий:
<!-- Здесь преподаватель может вставить ссылку на полную презентацию -->
ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ
HTML-файл должен быть полностью автономным.
Использовать:
  • HTML;
  • CSS;
  • JavaScript.
Не использовать внешние библиотеки, если без них можно обойтись.
Все интерактивные механики должны работать непосредственно в браузере.
Обязательно реализовать:
  • переходы между страницами без перезагрузки;
  • drag & drop;
  • кликабельные изображения;
  • заблюренные ответы;
  • раскрытие текста по клику;
  • выпадающие списки;
  • проверку ответов;
  • визуальную обратную связь;
  • возможность перетаскивать карточки мышью;
  • возможность пользоваться игрой на сенсорном экране, если это возможно средствами JavaScript;
  • плавные анимации;
  • адаптивное масштабирование.
Для страницы 3 порядок карточек должен при каждом новом открытии игры перемешиваться случайно.
Не использовать alert() для обратной связи.
Все сообщения должны появляться внутри интерфейса.
Не блокировать переход назад.
Добавить кнопки:
← Назад
Дальше →
На странице 1 кнопки «Назад» нет.
На странице 9 кнопки "Дальше" нет. Есть кнопка "Повторить игру".
ВАЖНЫЕ МЕТОДИЧЕСКИЕ ОГРАНИЧЕНИЯ
Не усложнять уровень выше A1.
Не использовать:
  • причастия;
  • деепричастия;
  • сложные временные конструкции;
  • глаголы движения с большим количеством приставок;
  • сложную лексику.
Основная грамматическая модель всей игры:
Кто? + что делал? + где?
И:
Василис был + где?
Повторять предложный падеж естественно, через разные механики, а не через однотипные упражнения.
История должна ощущаться цельной:
сначала студент предполагает → потом получает визуальные подсказки → восстанавливает маршрут → проверяет детали → соединяет действия и места → исправляет ошибки → находит пропавшее воспоминание → самостоятельно рассказывает историю → получает клиффхэнгер с переполненной памятью телефона.
Не превращать игру в обычный тест.
Главное ощущение - студент постепенно восстанавливает лето одного персонажа."

Кристина | Давай о русском

TG-канал

VK