Как настроить количество символов в поле ввода в Articulate Storyline

По умолчанию Articulate Storyline на данный момент не имеет возможностей по ограничению количества вводимых символов, хотя многие конкуренты такой функционал предлагают. Нам это может пригодиться при разработке тренажеров программного обеспечения, при создании различных заданий и упражнений или даже в тех случаях, когда пользователю предлагается ввести своё имя, которое затем вставляется в текстовые блоки. Слишком длинные слова могут привести к некорректному отображению текста на слайдах, что портит впечатление о курсе.

Как мы уже сказали ранее, Storyline не обладает возможностями по ограничению количества символов, придётся прибегнуть к JavaScript.

Последовательность будет такова:

Шаг 01

Добавляем поля ввода на слайд. В примере мы использовали поля двух видов: два текстовых поля и одно с числовым вводом.

Шаг 02

Нажмём значок “(X)”, чтобы открыть окно работы с переменными.

Шаг 03

В открывшемся диалоговом окне дважды кликните на существующих переменных и поменяйте их названия. В этом примере мы назвали переменные: “twenty_chars”, “twelve_chars” и “fifteen_chars”.

Шаг 04

В полях ввода измените текст по умолчанию и убедитесь, что каждому полю соответствует правильная переменная.

Шаг 05

В панели Триггеров нажмите иконку создания нового триггера.

Шаг 06

В выпадающем списке в графе Action выберите “Execute JavaScript”.

Шаг 07

Нажмите кнопку «…» в графе Script.

Шаг 08

В окне введите следующий код:

var fields = [«twenty_chars», «twelve_chars», «fifteen_chars»];
(function setMaxChars(fields) {
fields.forEach(function (field, field_index) {
$(‘[placeholder=’ + field + ‘]’).attr(‘id’,field);
$(«#twenty_chars»).attr(«maxlength»,»20″);
$(«#twelve_chars»).attr(«maxlength»,»12″);
$(«#fifteen_chars»).attr(«maxlength»,»15″);
$(‘[placeholder=’ + field + ‘]’).attr(‘placeholder’, »);
});
})(fields);

В настройках триггера в графе When выберите «Timeline Starts» — то есть с начала слайда.

Внимание: Если соберётесь добавить или удалить поля ввода, вам придётся добавить или удалить переменную в списке в квадратных скобках.

Пример:

var fields = [«twenty_chars», «twelve_chars»,»fifteen_chars»]

Вот так настраивается максимальная длина переменной:

$(«#twenty_chars»).attr(«maxlength»,»20″);
$(«#twelve_chars»).attr(«maxlength»,»12″);
$(«#fifteen_chars»).attr(«maxlength»,»15″);

Шаг 09

В поле триггеров появится “Execute JavaScript”.

Теперь можно публиковать курс, чтобы посмотреть результат. Помните: JavaScript не работает в режиме Preview.

Спасибо Swift Elearning за идею.

Возникли вопросы? Милости просим в комментарии. Хотите изучить Articulate Storyline? Приходите на наши курсы.

Мы создали новую группу Вконтакте, посвящённую Articulate Storyline — море видео и других уроков. Заходите, подписывайтесь — https://vk.com/articulate_storyline

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

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

  1. Андрей:

    Здравствуйте, спасибо за статью!

    Подскажите, возможно ли в Articulate сделать так, что бы студент самостоятельно написал код(курсы по программированию), а программа его проверила бы, и если ответ правильный — перешла на следующий слайд, а если нет — дала подсказку?

    Спасибо!

    • Здравствуйте! Это довольно просто можно реализовать через стандартный функционал заданий, где пользователю нужно вписать ответ в специальное поле (Feel in blanks). Задаёте правильный ответ или несколько ответов и настраиваете поведение при правильном и неправильном ответе.

  2. Юрий:

    Не работает скрипт. Сделал все по инструкции, но ограничение отсутствует. Почему это может быть?

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

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

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