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)