У любимого многими средства для разработки электронных курсов 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 действовать, как нам надо. Потребуется немного кода, с помощью которого мы замерим высоту и ширину экрана, и в зависимости от этих параметров запустим десктопный или мобильный вариант курса.
Как действуем:
- В первую очередь, как я уже говорил, потребуется две версии курса.
- Опубликуйте оба курса.
- Создайте папку "mobile" в опубликованном десктопном варианте курса.
- Скопируйте опубликованный мобильный вариант курса в эту папку.
- Откройте файл index_lms.html (и/или story.html, если вы не используете LMS) в любом редакторе.
- Замените строку 165 (202 в файле story.html), вставив следующий код:
var folder = "";
var w = window.innerWidth;
var h = window.innerHeight;
if(h>w) folder = "mobile/"
return folder + url;
Вот, собственно и всё! Код, который мы видим выше, сравнивает ширину и высоту экрана. Если экран в вышину больше, чем в ширину, код добавляет папку "mobile" в путь к файлу, с помощью которого запускается курс. Можно было бы усложнить код, добавив проверку, на каком именно устройстве запущен курс, но в большинстве случаев достаточно и того, что предлагаю я.
