Адаптивные курсы с помощью 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. Александр:

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

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

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

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