Вдохновленный тайным сообществом «Цикада 3301» и моей страстью к головоломкам, я решил создать уникальный «цифровой квест» для своей второй половинки.

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

В данной статье раскрывается процесс создания персонального проекта, основанного на совокупности готовых решений бескодовой разработки.

Пользовательский путь (сценарий)

1. Квест начался с того, что на мобильный телефон поступило загадочное сообщение от анонимного отправителя. Сообщение было приглашением принять участие в интеллектуальном квесте и содержало адрес чат-бота, с которого запускался цикл головоломок.

2. После перехода по ссылке и ввода стандартной команды «/start» последовало знакомство с чат-ботом, ставшим проводником в цифровом квесте. Для повышения антуража, используя технологию «синтеза речи» перед каждой новой загадкой бот отправлял аудио-файл с какими-либо разъяснениями. Пример его голоса можно послушать ниже:

3. Вместе с приветственным аудио-файлом в чат была отправлена первая головоломка с текстовым изображением.

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

«здEыs`‑skrыеы/каkieto‑bукBы‑иlи/цiфРы: И/И/А/С/О/?/Д/Я/Ф/?/А/М→»

5. Последовательность букв «И/И/А/С/О/?/Д/Я/Ф/?/А/М» была месяцами года (с июня по май) с пропуском двух месяцев - Ноябрь (Н) и Март (М).
   
   Правильным ответом служило сообщение: <НМ> или <Ноябрь и март> или <Ноябрь+Март>и т.п. отправленное в чат-бот.

6. Отправка правильной последовательности символов в чат-бот служила триггером для открытия новой загадки.

7. Далее следовала целая серия заданий с использованием чат-бота, а последнее из них содержало зловещее изображение девочки из известного хоррора.

8. Шифр в нижней части изображения – это шрифт Брайля (предназначенный для письма и чтения незрячими и плохо видящим людям). Однако сложность заключалась в том, что за шеститочечной комбинацией скрывались не буквы, а цифры, на что указывала мрачная «девочка из Звонка».

9. Найдя в открытых интернет-источниках систему математических обозначений по Брайлю, можно было довольно быстро конвертировать тактильный шрифт в последовательный набор цифр телефонного номера.

10. Позвонив по указанному номеру телефона (уже неактивен), срабатывал автоответчик и вместо сигнала зуммера (гудков) знакомый синтезированный голос поздравил с успешным прохождением первой части квеста и поведал новую загадку.

11. Новая загадка вела в офф-лайн, где за картиной в гостиной нужно было отыскать конверт. Внутри конверта находился пазл, представленный в виде разрезанного на несколько частей QR-кода.

    

12. Правильно собрав QR-код и наведя на него камеру смартфона, отображалась ссылка ведущая на веб-сайт.

13. На сайте находился приветственный баннер, за которым следовала зашифрованная страница.

    

14. Паролем для входа на зашифрованную страницу служило ключ-слово из книжного шифра в первой части квеста (загадок чат-бота).

15. При вводе верного пароля открывался доступ к викторине, состоявшей из 10 вопросов и с 4-мя вариантами ответа, ограниченных по времени.

    

16. Для успешного прохождения викторины необходимо было правильно ответить на все 10 вопросов в течение 2 минут. В случае неправильного ответа, приходилось пробовать снова.

17. В конечном итоге, ответив верно на все вопросы за отведенное время, открывался финальный слайд, на котором (в моем случае) была фотография пустого багажника нашего автомобиля.

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

Реализация проекта

Чат-бот для telegram

Как можно догадаться по заголовку статьи, чат-бот был создан при помощи конструктора. Существует обширный выбор графических конструкторов ботов, включая как платные, так и бесплатные, а также частично бесплатные. Некоторые из них перечислялись в этой статье, я же использовал бесплатный сервис «Puzzlebot», так как уже работал с ним ранее.

Синтез речи

Синтез речи — это создание звука на основе текста (более подробно про эту технологию можно прочесть здесь).

Сам чат-бот, разумеется, не синтезировал текст, а только отправлял предварительно созданные аудиофайлы. Для преобразования текста в речь с использованием голоса в стилистике видеообращений «Anonymous» я использовал сервис «Freetts».

Текстовое изображение

Для создания изображений, состоящих из символов, букв, цифр, знаков и прочих элементов ASCII-графики отлично подошел сервис «Text-image». Его преимущество заключалось в том, что можно было не только преобразовать готовое изображение в набор случайных символов, но и задать последовательность, а также количество этих символов.

QR-код

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

Web-сайт

Сайт был спроектирован через конструктор, чем-то напоминающий конструктор для создания чат-бота. Конструкторов сайтов довольно большее количество, например «Tilda», «Unit», «Sitebox», с некоторыми из них можно ознакомится подробнее в этой статье. Я предпочел использовать «WIX», так как ранее уже имел опыт работы с ним.

Викторина на сайте

Использовался готовый шаблон викторин «Fyrebox», который легко вставляется в конструктор сайтов «WIX» с помощью функции «Добавить приложение». Этот шаблон викторин позволяет задавать нужное количество вопросов, указывать варианты ответов, устанавливать время прохождения и определять процент правильных ответов. После завершения викторины пользователь может быть автоматически перенаправлен по новой ссылке, что особенно удобно для подобных квестовых заданий.

Телефон с автоответчиком

Этот элемент на пользовательском пути заставил меня приложить немало поисковых усилий. Хотя он не связан с зерокодингом, он придал квесту особую таинственность и загадочность. Для реализации я получил городской номер телефона в одной коммерческой компании. Одно из преимуществ заключалось в том, что в их личном кабинете была функция установки голосового приветствия или музыки для входящих вызовов. Таким образом, при звонке на всегда выключенный номер телефона автоматически воспроизводилось заранее записанное аудио-сообщение длиной около 60-ти секунд, созданное с помощью технологии синтеза речи.

А что по ценам?

• Чат-бот для telegram – бесплатно.

• Синтез речи – бесплатно.

• Текстовое изображение – бесплатно.

• QR-код – бесплатно.

• WEB-сайт – бесплатно.

• Викторина на сайте – бесплатно.

• Телефон с автоответчиком – 99 рублей за подключение + 350 рублей тариф за месяц. Можно обойтись без него.

• Время на подготовку – бесценно.

Итого: 449 рублей. Если исключить телефон с автоответчиком = бесплатно.

Выводы 

Если воспользоваться фантазией и творческим потенциалом, то Зерокодинг (Zero-code, No-code и Low-code), как подход к разработке информационных решений без написания кода, способен создавать яркие впечатления и незабываемые моменты для наших близких.

В моем случае супруга была в восторге от пройденного квеста и наслаждалась каждым шагом своего цифрового путешествия.

Полный перечень всех используемых в квесте загадок и шифров, а также инструкцию по реализации данного проекта можно посмотреть здесь