Адаптивные курсы с помощью 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» в путь к файлу, с помощью которого запускается курс. Можно было бы усложнить код, добавив проверку, на каком именно устройстве запущен курс, но в большинстве случаев достаточно и того, что предлагаю я.

Читайте также:

комментария 2

  1. Игорь Беляев:

    Полностью согласен с Олегом Буйловым в комментариях к статье по сравнению редакторов: никому не нужен адаптивный дизайн в курсах. Ваше предложение в этой статье и говорит об этом: делать нужно два разных курса, если вообще делать SCORM-курс. Часто мобильное обучение проводят вообще с помощью мессенджеров. Поэтому это не проблема редактора. Это разница в подходах. Для мобильных лайтовых курсов есть Ariculate Rise. Шире взгляд, коллега. Спасибо за статью. )

  2. Александр:

    «…Можно было бы усложнить код, добавив проверку, на каком именно устройстве запущен курс…»
    Если не затруднит, покажите чайникам пример такого кода.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.