Рецепты JavaScript для Articulate Storyline

    JavaScript – это язык программирования, который на данный момент используется очень широко. Он используется в миллионах сайтов и веб-приложений. Не исключение и курсы, разрабатываемые в Articulate Storyline. Если вы откроете папку с экспортированным курсом, то обнаружите в ней помимо всего прочего файлы с раширением *.js. Это файлы со скриптами. Кроме того, язык JavaScript очень полезен как средство расширения возможностей Articulate Storyline. К примеру, с помощью встроенных средств Articulate Storyline вы не сможете вывести на экран текущую дату и время или напечатать сертификат о прохождении курса (только результаты прохождения теста) или задание. Однако всё это и многое другое вы сможете сделать с помощью JavaScript.

     

    Чтобы добавить на слайд JavaScript, создайте новый триггер и выберите в списке Execute JavaScript. Вы не сможете увидеть, как работает код JavaScript непосредственно в предпросмотре самой программы – придётся опубликовать курс.

     

    Триггеры JavaScript поддерживаются при публикации курсов в HTML5 и Flash. Однако, JavaScript не поддерживается мобильным приложением Articulate Mobile Player.

     

    Для работы с созданными в Articulate Storyline переменными, используйте методы:

    • player.GetVar – для получения значения переменных, созданных в текущем курсе;

    • player.SetVar – для изменения значения переменных, созданных в текущем курсе.

    Иными словами, вы можете вытаскивать значение переменных курса с помощью player.GetVar, присваивать эти значения переменным в рамках кода JavaScript, обрабатывать их, а потом полученные значения присваивать переменным в курсе с помощью player.SetVar.

     

    Не включайте <script type=»text/javascript»> в ваш код.

    Каждый триггер JavaScript может содержать до 32,767 символов.

     

    Нельзя вызвать JavaScript из одного триггера в другом.

     

    Вы можете добавить весь код JavaScript в отдельный файл (.js), и расположить его в папке story_content опубликованного курса, затем потребуется добавить одну строчку кода в файл story_html5.html и/или story_flash.html.

     

    <script LANGUAGE="JavaScript1.2" SRC="story_content/MyJavaScriptFunctions.js" TYPE="text/javascript"></script>

     

    Рецепты кода

    Ниже представлены рецепты кода для Articulate Storyline 3 и 360.

     

    Присваиваем переменной значение текущей даты

    var currentTime = new Date()
    var month = currentTime.getMonth() + 1
    var day = currentTime.getDate()
    var year = currentTime.getFullYear()
    var dateString=day + "." + month + "." + year
    var player = GetPlayer();
    player.SetVar("SystemDate",dateString);

    Всплывающее окно (только текст)

    alert("Your message here...");

     

    Всплывающее окно (текст и переменная из Storyline)

    var player = GetPlayer();
    alert("Welcome back, " + player.GetVar("FirstName") + ".");

     

    Напечатать текущий слайд (только HTML5)

    window.print();

     

    Если использовать только этот код, вы напечатаете слайд полностью и плеер Storyline.

     

    Если хотите распечатать только содержимое слайда без плеера, используйте более сложный код:

     

    if (document.location.href.indexOf('html5') < 0) {
    GetPlayer().printSlide()
    } else {
    if(!window.hasPrintStyle){
    window.hasPrintStyle = true;
    var css = "@media print {div.controls.grid-row.inflexible,div.area-secondary.cs-left.inflexible,header.header-primary.centered-title.extended-height,div.presentation-wrapper:after {display:none !important; visibility:hidden !important;}}";
    head = document.head || document.getElementsByTagName('head')[0];
    style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet){
    style.styleSheet.cssText = css;
    } else {
    style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
    }
    window.print();
    }

     

    Создать новое сообщение электронной почты

    var email="yourAddress@email.com";
    var subject="subject line";
    var body_start="How you want to begin your body.";
    var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_start;
    win=window.open(mailto_link,'emailWin');

     

    Автоматическая прокрутка веб-страницы до нужных координат

    window.scroll(0,150); // горизонтальные и вертикальные координаты

     

    Автоматическая прокрутка веб-страницы относительно текущей позиции

    window.scrollBy(0,150); // сколько пикселей прибавить к текущей позиции

     

    Поменять цвет фона за пределами плеера

    parent.document.body.style.backgroundColor = "#990000";

     

    Поменять фоновое изображение за пределами плеера

    Расположите файл image.jpg в корневой папке опубликованного курса и добавьте следующий код:

    parent.document.body.style.backgroundImage = "url('image.jpg')";
    parent.document.body.style.backgroundSize = "cover";
    parent.document.body.style.backgroundRepeat = "no-repeat";

     

    Генератор случайных чисел

    В этом примере генерируется случайное число от 1 до 10.

    var randomnumber = Math.floor((Math.random()*10)+1);
    var player = GetPlayer();
    player.SetVar("randnum",randomnumber);

     

    Итак, с помощью JavaScript мы можем добиться гораздо более широкого функционала Articulate Storyline. Перечисленные выше инструменты – это только малая часть того, что можно получить, если выйти за рамки стандартного функционала программы. Однако необходимо помнить, что время от времени разработчики веб-браузеров меняют политики безопасности и могут, к примеру, запретить выполнение скриптов в локальном режиме (такое уже случалось с Google Chrome). В такой ситуации необходимо использовать другой браузер или выгружать курс в LMS. Кроме того, отнюдь не всегда стоит стремиться заменить стандартный функционал скриптами (фанаты такого подхода тоже имеются), поскольку в случае ошибок или некорректной работы, вызванной JavaScript, Articulate отказывается оказывать помощь (их можно понять).

     

    В статье использовались примеры из статьи «Storyline 3: JavaScript Best Practices and Examples» (https://articulate.com/support/article/Storyline-3-JavaScript-Best-Practices-and-Examples)

     

    Вернуться к списку новостей