Адаптивные курсы с помощью Articulate Storyline

У любимого многими средства для разработки электронных курсов Articulate Storyline есть одна проблема, которая давно решена в других elearning авторских средствах: нет поддержки разных размеров экранов. Да, в Articulate всячески пытаются решить эту проблему, но она пока что остаётся актуальной. А с учётом того, что обучение на мобильных устройствах становится всё более популярным, проблема становится всё острее и острее. В этой статье я расскажу, как с помощью Articulate Storyline разработать курс с поддержкой и десктопных и мобильных устройств.

Если перед вами стоит задача разработать курс с адаптивным дизайном при помощи Storyline, то в принципе можно создать 2 курса: первый для компьютеров, второй — для мобильных устройств и в начале курса предоставлять пользователю выбор версии. Но всё-таки хотелось бы, чтобы пользователю не нужно было выбирать, какой ему нужен дизайн. Решение в таком случае будет следующее: как и в первом варианте разработать 2 курса с десктопным и мобильным дизайном, а затем объединить их в единый пакет.

Причём мы сделаем так, чтобы сам SCORM-пакет автоматически определял тип экрана и запускал нужный нам курс. Удобство двух курсов в одном пакете ещё и в том, что LMS (СДО) будет определять оба курса как единое целое, что позволит начать курс на компьютере и потом завершить на мобильном устройстве. И это будет один курс!

Для реализации такого решения потребуется две версии курса. Рекомендую для начала полностью разработать десктопный вариант, а затем продублировать его и поменять Story size. Storyline в целом неплохо умеет ресайзить курсы, останется немного вручную расставить некоторые объекты, при необходимости переместить картинки и текстовые блоки.

Как это работает:

Когда пользователь запускает курс, созданный в Storyline 3/360:

• Он загружает в браузер файл index_lms.html.
• Этот файл запускает JavaScript, с помощью которого определяет среду, в которой запущен: это мобильное устройство? Это Android? Установлен ли Flash? И прочее.
• Как только получена информация об окружении, выбирается лучшая версия курса для этого окружения. (Здесь также роль играют настройки публикации курса).
• После этого index_lms.html загружает файл: index_lms_html5.html или index_lms_flash.html и настраивает ряд переменных в зависимости от выбранного файла.

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

Как действуем:

1. В первую очередь, как я уже говорил, потребуется две версии курса.
2. Опубликуйте оба курса.
3. Создайте папку «mobile» в опубликованном десктопном варианте курса.
4. Скопируйте опубликованный мобильный вариант курса в эту папку.
5. Откройте файл index_lms.html (и/или story.html, если вы не используете LMS) в любом редакторе.
6. Замените строку 165 (202 в файле story.html), вставив следующий код:
   var folder = «»;
   var w = window.innerWidth;
   var h = window.innerHeight;
   if(h>w) folder = «mobile/»
   return folder + url;

Вот, собственно и всё! Код, который мы видим выше, сравнивает ширину и высоту экрана. Если экран в вышину больше, чем в ширину, код добавляет папку «mobile» в путь к файлу, с помощью которого запускается курс. Можно было бы усложнить код, добавив проверку, на каком именно устройстве запущен курс, но в большинстве случаев достаточно и того, что предлагаю я.