Персоналізований SCORM: гайд з прикладами від Селезень Олега
Sorry, this entry is only available in UA and EN.
Уявіть: ви відкриваєте навчальний курс, а він вітає вас на ім’я, знає вашу посаду, звертається у відповідному роді й навіть підлаштовує приклади під ваш підрозділ. Не магія. Не фантастика. Просто гарно налагоджена система персоналізації.
Це зовсім інший рівень навчання – коли контент не просто існує, а говорить безпосередньо до тебе. Коли замість універсального підходу ти отримуєш відчуття, що курс створено саме для тебе. Це не тільки приємно, а ще й суттєво впливає на залученість, мотивацію й результат.
Але як змусити SCORM працювати більш «людяно»? Або навіть більше адаптувати контент під посаду користувача та автоматично сформувати іменний сертифікат у кінці навчання?
Цим питанням зацікавився Олег Селезень, керівник відділу дистанційного навчання компанії VIYAR. І разом із командою LMS Collaborator знайшли рішення та розробили підхід, який дозволяє «витягувати» додаткові дані з SCORM і адаптувати контент курсу прямо в процесі проходження.
У цій статті – реальний кейс, покрокова інструкція, приклади коду та прості пояснення, які допоможуть вам зробити подібне у своїх курсах.
З чого все почалося?
Історія почалася не з великої ідеї, а з простого, але дуже влучного запиту.
Приблизно рік тому Олег Селезень звернувся до команди LMS Collaborator з проханням: «А можна якось витягнути зі SCORM-курсу більше, ніж просто ім’я та email?». Адже для справжньої персоналізації цього явно замало.
Ідея нас зачепила іі ми вирішили експериментувати. Створили тестовий навчальний портал і почали гратись із межами SCORM. Так з’явилася кастомна змінна cmi.core.student_info. Технічно її немає ні в SCORM 1.2, ні в SCORM 2004, але вона дозволяє передавати додаткові дані: стать, посаду, підрозділ, тощо – усе, що може вплинути на адаптацію контенту.
Олег тим часом написав власний JavaScript-код, який підтягує ці дані з LMS, зберігає їх у змінних і використовує їх уже всередині курсу.
Таким чином ми отримали:
- звернення до користувача в потрібному роді;
- відображення різних блоків залежно від посади;
- налаштування навчальну логіку під роль у компанії.
З простого запиту виріс повноцінний підхід, який сьогодні вже використовується на реальних проєктах. Як саме все працює – далі крок за кроком розповість сам Олег.
Олег Селезень – керівник відділу дистанційного навчання компанії VIYAR
Як отримати й використати дані з LMS
Щоб не витрачати час на здогадки, я зібрав повний список змінних, які LMS Collaborator передає через cmi.core.student_info. А також підготував JavaScript-код, який допоможе зчитати ці дані у курсі.
На стороні LMS Collaborator уже налаштована передача розширеної інформації про користувача. Зокрема, його посада, підрозділ, email, стать, навіть лінк на фото. Уся ця інформація надходить через змінну cmi.core.student_info.
Щоб ці дані працювали у вашому курсі, потрібно створити в Articulate Storyline змінні з правильними назвами та типами. Тоді ви зможете керувати контентом курсу відповідно до профілю кожного користувача.
Змінні, які потрібно створити в Articulate Storyline:
Як це виглядає на практиці: готовий приклад SCORM-курсу з персоналізацією
Для наочності я підготував приклад курсу з вбудованим кодом. У ньому показано, як саме реалізується персоналізація контенту на основі даних із LMS. Усе, про що я розповідав вище:
– звертання до користувача по імені;
– адаптація тексту залежно від статі;
– автоматичне виведення посади та назви підрозділу на екран;
– підвантаження фото користувача з його профілю в LMS;
– генерація іменного сертифіката з автоматичним підставленням персональних даних.
Ви можете легко адаптувати цей приклад під свої курси. Достатньо змінити тексти, кольори чи стилі оформлення.
Завантажуйте приклад файлу, щоб протестувати все на власному курсі або використати його як основу для своїх проєктів: завантажити файл
Практична частина: як налаштувати персоналізацію
Тепер – до технічної реалізації.
Перше – підготовка прикладу JavaScript-коду, який зчитує розширені дані з LMS Collaborator та передає їх у змінні вашого курсу, створеного в Articulate Storyline.
Код працює однаково коректно як у SCORM 1.2, так і в SCORM 2004 – тож вам не доведеться нічого додатково допрацьовувати. Достатньо один раз вставити його у проєкт, і курс буде готовий до публікації в будь-якому з цих форматів.
Приклад готового скрипта
function findLMSAPI(win) {
if (win.hasOwnProperty(«API»)) return win.API;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
}
function getSCORMValue(element) {
try {
var lmsAPI = findLMSAPI(this);
if (lmsAPI) {
let value = null;
if (typeof lmsAPI.LMSGetValue === «function») {
value = lmsAPI.LMSGetValue(element);
}
if (value === «» || value === null) {
}
return value;
} else {
return null;
}
} catch (error) {
return null;
}
}
function setArticulateVar(variable, value) {
var p = GetPlayer();
if (p && typeof p.SetVar === «function») {
p.SetVar(variable, value);
let checkValue = p.GetVar(variable);
}
}
function checkAndSetArticulateVars(studentData) {
var p = GetPlayer();
if (p && typeof p.SetVar === «function») {
const mappings = {
user_id: String(studentData.id),
user_uid: String(studentData.uid),
user_is_chief: studentData.is_chief,
user_position_rank: studentData.position_rank,
user_email: studentData.email,
user_fullname: studentData.fullname,
user_gender: studentData.gender,
user_city: studentData.city,
user_position: studentData.position,
user_department: studentData.department,
user_firstname: studentData.firstname,
user_secondname: studentData.secondname,
user_patronymic: studentData.patronymic,
user_international_name: studentData.international_name,
user_photo_thumb: studentData.photo_thumb,
user_big_photo_thumb: studentData.big_photo_thumb
};
for (const articulateVar in mappings) {
const value = mappings[articulateVar] !== null && mappings[articulateVar] !== undefined ? mappings[articulateVar] : «»;
setArticulateVar(articulateVar, value);
}
} else {
setTimeout(checkAndSetArticulateVars, 500, studentData);
}
}
function Script1() {
try {
var lmsAPI = findLMSAPI(this);
if (lmsAPI) {
var student_info = getSCORMValue(«cmi.core.student_info»);
if (student_info) {
try {
var studentData = student_info;
checkAndSetArticulateVars(studentData);
} catch (parseError) {
}
}
}
} catch (error) {
}
}
setTimeout(function() {
Script1();
}, 1000);
Скрипт готовий, але щоб він працював без збоїв і зчитував дані для кожного користувача – потрібно вставити його в правильне місце.
Тож другий крок – додати код на майстер-слайд (Slide Master) (це найкраще рішення).
Так код буде автоматично запускатися, незалежно від того, з якого слайду користувач почне проходити курс. Вам не потрібно додаткових тригерів чи перевірок — дані з LMS зчитуються одразу.
Персональне звертання та адаптація тексту за статтю
Щоб курс «спілкувався» з користувачем, можна реалізувати два ключові елементи персоналізації: звертання по імені та автоматичу адаптацію тексту залежно від статі. Ось як це зробити:
1. Створіть необхідні змінні у Storyline:
- user_firstname – тип Text, (містить ім’я користувача)
- user_gender – тип Text, (значення: male або female)
Ці змінні автоматично заповнюються даними з LMS через підключений код.
2. Використовуйте змінні у тексті слайдів:
Щоб звернутися до користувача по імені – просто вставте user_firstname у потрібному місці тексту.
Щоб змінювати слова залежно від статі, наприклад, «готовий» «готова», використовуйте Conditions (умови) в тригерах або States (стани) об’єктів.
Як це виглядає на практиці:
Створіть два окремі текстові об’єкти: один зі словом «готовий», інший – «готова». Далі встановіть для кожного з них умову відображення:
- Якщо user_gender дорівнює male – показувати «готовий»
- Якщо user_gender дорівнює female – показувати «готова»
У результаті курс звертається до користувача на ім’я, як це зробив би реальний співрозмовник, і змінює формулювання залежно від статі. Це створює ефект «живого» діалогу й персанолізує досвід навчання – наче курс створений саме для цієї людини.
Адаптація сценарію курсу під кожного користувача
Після отримання значень змінних із LMS, ви можете гнучко керувати сценарієм курсу. Підлаштовувати його під конкретного користувача, щоб кожен бачив лише те, що стосується саме його ролі, підрозділу чи завдань.
Наприклад:
- змінна user_position дозволяє показати певні слайди лише для окремих посад (наприклад, окремо для менеджерів і для продавців);
- user_department відображає різний контент залежно від підрозділу (наприклад, відділ логістики отримає одну версію, відділ продажу зовсім іншу).
За допомогою цих змінних ви можете персоналізувати контент курсу в реальному часі:
– приховувати або показувати окремі об’єкти й блоки контенту,
– запускати різні сценарні гілки в залежності від ролі,
– створювати унікальний досвід для кожного співробітника.
Все це працює без зайвих налаштувань. Достатньо один раз зчитати змінні і далі курс сам підлаштовується під кожного, як персональний асистент.
Відображення фото користувача
Ще один спосіб зробити курс максимально персоналізованим – показати фото користувача просто в його інтерфейсі. Це додає відчуття живого контакту з людиною по той бік екрану.
Для цього потрібні дві змінні:
- user_photo_thumb – мініатюра фото (128×128)
- user_big_photo_thumb – більша версії (180×180)
Але все не так просто. В Storyline ви не можете напряму прив’язати URL до зображення, тому тут допоможе JavaScript.
Є два варіанти, як це реалізувати:
Варіант 1: WebObject
Найлегший шлях – це вставити на слайд готовий HTML-файл із тегом <img src=»…»>, який автоматично підтягне потрібне фото.
Це дуже простий та надійний спосіб, оскільки не потрібно прописувати жодних тригерів чи JavaScript-коду вручну. Достатньо вставити WebObject, і все працює автоматично, щойно змінні user_photo_thumb чи user_big_photo_thumb отримають значення.
Але, як і будь-яке рішення, WebObject має свої особливості:
- WebObject займає весь слайд, тому йому варто задати точний розмір, щоб не перекривати інші елементи (наприклад, 180×180).
- До моменту, поки курс не завантажено в LMS, ви можете бачити чорний квадрат замість фото. Це може трохи ускладнити візуальне позиціонування об’єктів під час дизайну курсу.
За замовчування форма фото квадратна, але ви можете зробити її круглою. Для цього потрібно задати логічну змінну photo_is_round:
- false – квадратного фото;
- true – кругле фото (застосовується стиль border-radius: 50%).
Якщо LMS не передає фото або ви тестуєте курс локально, скористайтесь файлом з заглушкою (placeholder.jpg). За допомогою неї, користувач побачить заздалегідь підготовлену нейтральну іконку, а не порожнє місце.
💡Скачати файл user_photo (.html)
Варіант 2: Заміна фото всередині фігури
Цей спосіб дещо складніший за попередній, але дає повну свободу дизайну та допомагає створити унікальний стиль оформлення фото.
Ви використовуєте будь-яку стандартну фігуру Storyline: коло, квадрат, шестикутник тощо. Форма фігури працюватиме, як «рамка» або «маска», і саме вона визначає, якою буде форма фото на екрані.
Тут важливо зробити декілька підготовчих кроків:
- Створіть потрібну фігуру на слайді.
- Додайте всередину фігури зображення-заглушку.
- Скопіюйте id елемента, який містить заглушку. Саме за цим id скрипт буде змінювати фото.
- Додайте цей id у JavaScript.
- Використайте JavaScript для динамічної заміни картинки всередині цієї фігури на user_photo_thumb або user_big_photo_thumb.
Ось як це виглядає в інтерфейсі:
Готовий код, який можна вставити у ваш курс. Просто замініть id на свій:
JavaScript
(function replaceUserPhoto() {
var player = GetPlayer();
var photoURL = player.GetVar(«user_big_photo_thumb»);
if (!photoURL) {
console.warn(«user_big_photo_thumb порожня або не задана.»);
return;
}
// Вкажи тут потрібний data-model-id вручну
var modelId = «»;
function trySwap() {
var container = document.querySelector(`[data-model-id=»${modelId}»]`);
if (!container) return false;
var img = container.querySelector(«image»);
if (!img) return false;
var currentHref = img.getAttributeNS(«http://www.w3.org/1999/xlink», «href»);
if (currentHref === photoURL) return true; // вже замінено
img.setAttributeNS(«http://www.w3.org/1999/xlink», «href», photoURL);
img.setAttribute(«href», photoURL);
return true;
}
// Чекаємо появи об’єкта в DOM
var attempts = 0;
var maxAttempts = 100;
var poll = setInterval(function () {
if (trySwap() || ++attempts >= maxAttempts) {
clearInterval(poll);
}
}, 30);
})();
Генерація іменного сертифіката
Фінальний штрих персоналізації – це видача іменного сертифіката з особистими даними користувача, брендовим дизайном вашої компанії та динамічними змінними. Усе це можна зробити через WebObject.
Що можна налаштувати?
- Підставляти ім’я, прізвище, посаду та інші змінні прямо на сертифікат.
- Змінювати фон сертифіката, додати будь-яке зображення зі своїм стилем, логотипами та підписами.
- Виводити динамічні дані зі Storyline через ті ж самі змінні (user_firstname, user_position, тощо).
- Дати можливість викачати PDF-файл згенерованого сертифіката одним кліком.
Як додати власний фон до сертифіката?
-
- Підготуйте зображення сертифікату у форматі PNG або JPEG.
- Закодуйте зображення у формат Base64 – це спеціальний код, який можна вставити прямо у HTML. Для цього використовуйте сервіс: https://www.base64-image.de/
- Скопіюйте згенерований код, що починається з data:image/png;base64,…
- Вставте цей код у HTML-файл як фонове зображення сертифіката. Потім додайте на слайд як WebObject.
- Створити тригер для виклику друку:
Код
var iframe = document.querySelector(‘iframe’);
if (iframe && iframe.contentWindow && iframe.contentWindow.generatePdf) {
iframe.contentWindow.generatePdf();
}
💡Приклад такого HTML-шаблону ви можете завантажити тут:
Завантажити приклад HTML-шаблону
Змінна %course_title% автоматично підставляє назву курсу у сертифікат під час генерації. Дата формування також додається автоматично – вам не потрібно заповнювати її вручну.
Дякую, що дочитали до кінця! Сподіваюся, ви знайдете для себе корисні кейси та ідеї, які зможете адаптувати під свої курси в Storyline. Ми пройшли шлях від базових змінних до персоналізованих фото та сертифікатів – і все це є у готовому прикладі. Нехай ваші курси будуть не просто навчальними, а персоналізованими, ефективними та захоплюючими!
Висновок
Персоналізація в навчанні – це не просто тренд, а потужний інструмент підвищення залученості та ефективності. Коли курс «говорить» із користувачем його мовою, звертається по імені, адаптує контент під індивідуальні потреби – це створює зовсім інший навчальний досвід.
Такий підхід дає відчутні результати:
- підвищує рівень завершення курсів,
- покращує засвоєння матеріалу,
- створює емоційний зв’язок із контентом,
- формує позитивне ставлення до корпоративного навчання.
Олег Селезень на практиці довів, що зробити це реально навіть у межах SCORM-|курсів. Із правильними інструментами та невеликим доопрацюванням стандарту ви можете створювати курси, які будуть сприйматися не як шаблон, а як контент, створений спеціально для кожного співробітника. І це головна сила сучасного e-learning.
