Русский код: интерактивный квиз о русском языке

БФУ им. И. Канта — ведущий университет, который способствует сохранению и продвижению русской культуры. Системный интегратор «Паравеб» помог балтийскому вузу запустить интерактивный квиз о русском языке, модном и динамично развивающемся феномене, в рамках научно-популярного проекта «Русский код».

Русский код — это уникальный проект, который рассматривает русский язык не только как средство общения, но и как культурное явление, объединяющее миллионы людей по всему миру.

В БФУ им. И. Канта считают, что русский язык — это код, в котором зашифрована мудрость веков: литература, изобразительное искусство, кинематограф, образование и даже культура поведения. Русский язык дает людям возможность выражать свои мысли и чувства, объединяет и становится важнейшей составляющей человеческой жизни, пронизывая все аспекты нашей жизни.

Главная цель инициативы — вдохновить и мотивировать людей открыть для себя величие русского языка и начать исследовать его тайны. Университет стремится сохранить и передать культурное наследие русского языка, включая творчество русских писателей, поэтов и других литературных гениев, которые внесли вклад в мировую литературу.

Российские университеты все чаще используют геймификацию (игрофикацию) — внедрение игровых элементов на сайтах, в приложениях, программах и сервисах, — чтобы привлечь внимание целевой аудитории. БФУ им. И. Канта — один из немногих вузов, который активно поддерживает этот подход и вкладывает ресурсы в развитие интересных геймифицированных проектов.

Новый квиз в игровой форме предлагает пользователям «расшифровать русский код». Пользователи из России могут проверить знания о культуре своей страны, в то время как иностранцы — вдохновиться на дальнейшее изучение русского языка. Напомним, что один из ключевых активов БФУ — это его международное сотрудничество. Университет активно участвует в обмене студентами и преподавателями, имеет партнерские отношения со 197 вузами и организациями по всему миру.

Продукт выполняет не только развлекательную функцию, но и служит эффективным инструментом продвижения университета.

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

С помощью квиза вуз подчеркивает свои сильные стороны в области русской культуры, укрепляя свою позицию.

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

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

БФУ им. И. Канта обратился к нам, чтобы улучшить уже существующий квиз как со стороны дизайна, так и со стороны технической реализации.

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

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

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

В качестве фона мы выбрали паттерн березы, так как это один из наиболее узнаваемых символов России. Чтобы подчеркнуть эту ассоциацию, мы добавили анимированные березовые листья при наведении на неко��орые кнопки.

По всей площадке используется частичная пикселизация, которая отсылает нас к идее, что русский язык — это код. Например, на главной странице в заголовке применяются различные шрифты: некоторые буквы пикселизованы, в то время как другие напоминают буквицу. Это продолжение концепции логотипа, который представляет собой монограмму слова «русский код». Буква «Р» выполнена в классическом рукописном стиле, а «K» состоит из символов кода «/» и «^».

Также главную страницу украшают яркие иллюстрации, которые сразу вызывают у пользователя ассоциации с русской культурой: плакат с Лилей Брик, портрет Пушкина, «Богатыри» Васнецова и фотография балерин на сцене театра.

Все блоки квиза имеют закругленные и мягкие формы — это современный тренд, известный как сквирклморфизм (от англ. «squircles» — квадраты с закругленными углами). Благодаря такому стилю, квиз выглядит дружелюбно и расслабленно, в отличие, например, от тестов на экзамене.

Квиз представляет собой игру на проверку знаний, которая состоит из двух уровней — базового и сложного. Их олицетворяют Юрий Гагарин и Лев Толстой, по ховеру также появляются фразы, которые могли бы сказать эти известные деятели. Базовый уровень ориентирован иностранцев, изучающих русский язык и культуру, а сложный предназначен для русскоговорящих пользователей.

Квиз состоит из нескольких типов вопросов, где необходимо выбирать правильные ответы, перемещать карточки, находить пары. На сложном уровне справляться с заданиями нужно за ограниченное время. Вопросы могут быть как текстовыми, так и содержать изображения, видео и аудиоматериалы.

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

Перед началом каждого раунда игрокам объясняют правила и дают возможность потренироваться. Перед вопросами с более сложной механикой также появляются всплывающие окна с подробными пояснениями и возможностью тренировки.

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

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

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

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

По щелчку на кнопку «Начать игру» пользователь погружается в квиз, визуально похожий на яркий мультфильм. Для создания такой атмосферы была задействована библиотека Barba.js. Необычного эффекта появления страницы с результатами удалось добиться с помощью технологии GSAP и Barba, а также SVG-изображения.

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

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

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

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

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

Ссылка на сайт: https://ruscode.kantiana.ru/