До того ж усі дані вже зберігаються в LMS. Тож достатньо лише налаштувати так, щоб вони автоматично підвантажувались у курс.

Разом з Олегом Селезнем ми вже ділилися досвідом використання користувацьких даних у Articulate Storyline. Тепер розглянемо інший інструмент – Articulate Rise 360, який часто обирають за простоту, швидкість і сучасний дизайн.

У цій статті ми зосередимось на тому, як поєднати зручність Rise із можливостями персоналізації через LMS Collaborator. Своїм досвідом поділиться Олег Селезень – керівник відділу дистанційного навчання компанії VIYAR.

Переходимо від теорії до практики: які дані з LMS Collaborator можна використати для персоналізації курсів у Rise 360?

Олег Селезень – керівник відділу дистанційного навчання компанії VIYAR

Які параметри ми можемо отримати?

Усі дані передаються з LMS Collaborator у SCORM через змінну cmi.core.student_info. Їх також можна використати для персоналізації в Articulate Rise 360.

На відміну від Storyline, у Rise 360 немає прямої роботи з тригерами чи умовами. Проте отримані значення можна застосовувати для персоналізації: налаштовувати сценарії навчання, відображати потрібні блоки та підлаштовувати звернення.

Щоб реалізувати це, знадобиться невелика взаємодія з кодом. Але не хвилюйтеся – все максимально просто.😊

Далі покроково, як саме це виглядає на практиці.

Крок 1. Форматування змінних у курсі Articulate Rise 360

Щоб підтягнути дані користувача, достатньо вказати змінну з LMS Collaborator, обрамлену знаками відсотка, наприклад:

• user_id → %user_id%
• user_firstname → %user_firstname%
• user_email → %user_email%

Коли користувач відкриває курс, система автоматично замінює значення на його справжні дані.

Важливо: самі по собі вони не працюють. Якщо не додати код-зв’язку з LMS і не налаштувати публікацію під SCORM, у курсі залишиться просто %user_firstname%.

Що робити далі?

1. 1. Опублікуйте курс у Rise 360: Publish → LMS, обираємо SCORM 1.2 або 2004 і зберігаємо ZIP.
   2. Розпакуйте архів у будь-яку папку.
   3. Знайдіть та відкрийте папку scormcontent.
   4. Знайдіть файл index.html і відкрийте його у будь-якому редакторі.
   5. Додайте ось цей код одразу після тега <title>:

<script defer src="https://cdn.jsdelivr.net/gh/asimut/user-variables/selezen_v1.js"></script>

Тепер курс підтягуватиме дані користувача.

Крок 2. Фото користувача замість стандартних зображень

Ще один простий спосіб персоналізації – заміна картинок на фото конкретного користувача. Це працює в будь-якому місці курсу, де є зображення.

Це дає відчутну персоналізацію «в обличчя» без зміни верстки блоку та працює в будь-яких місцях курсу, де є зображення.

Як це зробити:

1. Відкрийте потрібний блок у Articulate Rise 360 та натисните Image Alt Text.
2. Уведіть replace_user_img та підтвердіть.
3. За потреби повторіть для інших зображень.

При відкритті курсу система автоматично підставить фото користувача з LMS.

Крок 3. Звернення за гендером

Коли LMS передає інформацію про стать користувача (наприклад, male або female), у курсі ми можемо автоматично змінювати слова та їх закінчення відповідно до потрібного гендера.

Приклад такого текстового блоку в Articulate Rise 360:

На зображені стандартний текстовий блок. Саме у таких блоках можна налаштувати заміну, щоб звернення виглядали природно: «ти завершив» або «ти завершила».

Для цього потрібно підготувати невеликий скрипт, який перевіряє отримане значення і підставляє потрібний варіант.

На що варто звернути увагу:

За замовчуванням усі звернення можна залишати у чоловічому роді. Потім система буде змінювати їх на потрібний варіант у тих блоках, де ви це вкажете. Важливо не підключати заміну скрізь, інакше можуть випадково змінитися слова поза контекстом звернень. Це виглядатиме як помилка.

Як це зробити:

1. Додаємо код, що отримує дані з LMS.
2. Додаємо модуль для коректних звернень за гендером:

– підключаєте основний скрипт із логікою заміни (він виконує пошук і підміну);
– у конфігурації задаємо слова, які будуть замінюватися (наприклад, завершив → завершила) та ID блоків (targetBlocks), де ці заміни дозволені.

У результаті система автоматично підставлятиме правильні варіанти звернень залежно від гендеру користувача.

<script defer src="https://cdn.jsdelivr.net/gh/asimut/user_gender_replacer/selezen_v1.js"></script>

<script>
  // Конфіг (тільки дані, ніякої логіки)
  window.GenderReplacer = {
    debug: false,
    genderReplacements: {
      female: {
        'завершив': 'завершила',
        'дізнався': 'дізналася',
        'ознайомився': 'ознайомилася',
        'зрозумів': 'зрозуміла',
        'пройшов': 'пройшла',
        'успішно завершив': 'успішно завершила',
        'готовий': 'готова',
        'вивчив': 'вивчила',
        'переглянув': 'переглянула',
        'опанував': 'опанувала',
        'засвоїв': 'засвоїла',
        'досяг': 'досягла',
        'здобув': 'здобула',
        'отримав': 'отримала',
        'виконав': 'виконала',
        'склав': 'склала',
        'закінчив': 'закінчила'
      }
    },
    targetBlocks: [
      'cmckqk51l001c357b79yaongk' 
    ]
  };
</script>

Важливо: нижній блок – це лише конфігурація (дані). Саму підміну виконує основний скрипт із логікою заміни, підключений рядком вище.

Робота з ідентифікаторами блоків

Щоб система знала, у якому саме текстовому блоці потрібно робити заміни, ви вказуєте його у списку targetBlocks. Для цього кожен блок у Rise має свій унікальний ID.

Є два способи знайти ID:

Спосіб 1.
Через інструменти розробника DevTools. Якщо ви впевнено користуєтеся консоллю браузера, відкрийте код сторінки й скопіюйте потрібний ідентифікатор.

Спосіб 2.
За допомогою плагіна. Зручніше і швидше, особливо якщо не хочете працювати з кодом напряму.

Також ви можете розширювати список слів для заміни. Якщо серед наведених прикладів немає потрібних, сміливо додавайте власні варіанти у конфігурацію.

Щоб спростити пошук ідентифікаторів блоків, зручно користуватися плагіном.

Як встановити плагін:

1. Відкрийте браузер і перейдіть у розділ Розширення – Керувати розширенями.
2. Увімкніть Режим розробника.
3. Завантажте архів із плагіном, розпакуйте його й додайте розширення з цієї папки у браузер;
   Посилання на архів
4. Після цього він автоматично з’явиться у вашій сторінці редагування курсу.

Плагін можна вмикати або вимикати будь-коли. З його допомогою ви швидко знаходите ID блоків і додаєте їх у конфігурацію.

Коли ми навчилися швидко знаходити ID за допомогою плагіна, можемо використати ці ідентифікатори не лише для точкових замін, а й для керування видимістю цілих фрагментів курсу. Це дозволить показувати різним департаментам свій контент у межах одного курсу – без дублювання матеріалів і зайвих копій.

Крок 4. Керування контентом для різних департаментів

Ми вже маємо всі змінні з LMS, зокрема user_department. Це означає, що департамент не потрібно шукати: система зчитує його з даних користувача і на цій основі відкриває потрібні блоки курсу. Для цього потрібно лише вказати назву департаменту, який є в LMS та перелік блоків, які він має бачити. Для всіх інших працює гілка default.

<script>
  (function () {
    'use strict';
  
    // Конфіг
    // Заповни mapping під свої департаменти та їхні data-block-id
    window.DepartmentBlocks = window.DepartmentBlocks || {
      debug: false,
      mapping: {
        'назава департаменту':    ['ТУТ ВКАЖИТИ ІD БЛОКУ'], // назва має буди із меленької літери
        'default':     ['ТУТ ВКАЖИТИ ІD БЛОКУ'],     // блок для всіх інших
      },
    };
  
    const DB = window.DepartmentBlocks;
  
    const ATTR_CANDIDATES = ['data-block-id','data-blockid','data-block','blockid','data-id','id'];
    const HIDE_CLASS = 'dept-hidden-by-mapping';
    const STYLE_ID = 'dept-visibility-style';
    const OBS_CONFIG = { childList: true, subtree: true, attributes: false, characterData: false };
  
    let allListedIds = new Set();      // усі ID, що зустрічаються у mapping (для первинного приховування)
    let allowedIds = new Set();        // ID, дозволені для поточного департаменту
    let currentDept = null;            // нормалізоване значення поточного департаменту
    let initialized = false;           // щоб не ініціалізувати двічі
    let mainObserver = null;
  
    const log = (...args) => { if (DB.debug) console.log('[DepartmentBlocks]', ...args); };
    const warn = (...args) => console.warn('[DepartmentBlocks]', ...args);
  
    function normalize(str) {
      return (str == null) ? '' : String(str).toLowerCase().trim();
    }
  
    function injectStyleOnce(doc = document) {
      if (doc.getElementById(STYLE_ID)) return;
      const style = doc.createElement('style');
      style.id = STYLE_ID;
      style.textContent = `
        .${HIDE_CLASS} { display: none !important; }
      `;
      doc.head.appendChild(style);
    }
  
    function getBlockIdFromElement(el) {
      for (const attr of ATTR_CANDIDATES) {
        if (el.hasAttribute && el.hasAttribute(attr)) {
          const v = el.getAttribute(attr);
          if (v && v.trim()) return v.trim();
        }
      }
      return null;
    }
  
    function collectAllListedIds() {
      allListedIds = new Set();
      const map = DB.mapping || {};
      Object.values(map).forEach(arr => {
        (arr || []).forEach(id => allListedIds.add(String(id)));
      });
      log('All listed IDs:', Array.from(allListedIds));
    }
  
    function computeAllowedIdsFor(dept) {
      const mappingKey = DB.mapping?.[dept] ? dept : 'default';
      allowedIds = new Set(DB.mapping?.[mappingKey] || []);
      log('Allowed IDs for', dept, '(using mapping key:', mappingKey, '):', Array.from(allowedIds));
    }
  
    function isListed(id) {
      return allListedIds.has(id);
    }
  
    function shouldShow(id) {
      return allowedIds.has(id);
    }
  
    function hideEl(el) {
      if (!el.classList.contains(HIDE_CLASS)) {
        el.classList.add(HIDE_CLASS);
      }
    }
  
    function showEl(el) {
      if (el.classList.contains(HIDE_CLASS)) {
        el.classList.remove(HIDE_CLASS);
      }
    }
  
    function initialHideListedBlocks(root = document) {
      const candidates = root.querySelectorAll('*');
      candidates.forEach(el => {
        const id = getBlockIdFromElement(el);
        if (id && isListed(id)) hideEl(el);
      });
    }
  
    function applyDepartmentVisibility(root = document) {
      const candidates = root.querySelectorAll('*');
      candidates.forEach(el => {
        const id = getBlockIdFromElement(el);
        if (!id) return;
  
        if (!isListed(id)) return;
        if (shouldShow(id)) showEl(el);
        else hideEl(el);
      });
    }
  
    function isUserDataReady() {
      const sources = [
        window.UserVariables?.data,
        window.UserVariables2?.data,
        window.userData
      ];
      return sources.some(d => d && typeof d === 'object');
    }
  
    function getUserDepartment() {
      if (DB.overrideDepartment) return normalize(DB.overrideDepartment);
  
      const sources = [
        window.UserVariables?.data,
        window.UserVariables2?.data,
        window.userData
      ];
      for (const d of sources) {
        if (!d || typeof d !== 'object') continue;
        for (const key of ['user_department','department','dept','user_dept','org_unit','division']) {
          if (d[key]) return normalize(d[key]);
        }
      }
      return '';
    }
  
    function processIframe(iframe) {
      try {
        const doc = iframe?.contentDocument;
        if (!doc) return;
        injectStyleOnce(doc);
        initialHideListedBlocks(doc);
        if (currentDept) applyDepartmentVisibility(doc);
        const obs = new MutationObserver(() => {
          if (!currentDept) initialHideListedBlocks(doc);
          else applyDepartmentVisibility(doc);
        });
        obs.observe(doc.documentElement, OBS_CONFIG);
      } catch (e) {}
    }
  
    function watchIframes() {
      const iframes = document.querySelectorAll('iframe');
      iframes.forEach(ifr => {
        if (ifr._deptBound) return;
        ifr._deptBound = true;
        if (ifr.contentDocument && ifr.contentDocument.readyState !== 'loading') {
          processIframe(ifr);
        } else {
          ifr.addEventListener('load', () => processIframe(ifr), { passive: true });
        }
      });
    }
  
    function applyNow(root = document) {
      injectStyleOnce(document);
      watchIframes();
      if (!currentDept) initialHideListedBlocks(root);
      else applyDepartmentVisibility(root);
    }
  
    function startObserver() {
      if (mainObserver) return;
      mainObserver = new MutationObserver(() => applyNow(document));
      mainObserver.observe(document.documentElement, OBS_CONFIG);
      ['#app','.rise-player','[data-rise]','.course-container'].forEach(sel => {
        const c = document.querySelector(sel);
        if (c && !c._deptObserver) {
          const o = new MutationObserver(() => applyNow(c));
          o.observe(c, OBS_CONFIG);
          c._deptObserver = o;
        }
      });
    }
  
    function resolveDepartmentAndApply() {
      const dept = getUserDepartment();
      if (!dept) {
        log('user_department не знайдено (поки що). Працюємо у режимі initial-hide.');
        return;
      }
      if (dept === currentDept) return;
      currentDept = dept;
      computeAllowedIdsFor(currentDept);
      applyNow(document);
    }
  
    function waitForDataThenInit() {
      if (initialized) return;
      initialized = true;
      injectStyleOnce(document);
      collectAllListedIds();
      initialHideListedBlocks(document);
      watchIframes();
      startObserver();
  
      let tries = 0;
      const quick = setInterval(() => {
        tries++;
        if (isUserDataReady()) {
          resolveDepartmentAndApply();
          if (currentDept) clearInterval(quick);
        }
        if (tries >= 20) clearInterval(quick);
      }, 500);
  
      setInterval(resolveDepartmentAndApply, 2000);
    }
  
    DB.forceApply = () => applyNow(document);
    DB.setDepartment = (deptName) => {
      DB.overrideDepartment = deptName;
      resolveDepartmentAndApply();
    };
  
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => setTimeout(waitForDataThenInit, 50), { once: true });
    } else {
      setTimeout(waitForDataThenInit, 50);
    }
  })();
</script>

Як це працює:

• на старті всі «керовані» тимчасово блоки приховані;
• коли система зчитує user_department, вона показує лише ті блоки, які ви закріпили за цим департаментом;
• блоки з інших списків залишаються прихованими, а ті, яких немає в mapping – видимі;
• якщо департамент не знайдено або він порожній – користувач бачить default.

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

Підсумуємо

Тепер у вас є три готові інструменти:

• Скрипт №1 – отримує дані користувача, підтягуючи назву підрозділу або персональне фото.
• Скрипт №2 – змінює слова й закінчення в тексті залежно від гендеру користувача.
• Скрипт №3 – керує контентом: приховує чи відображає блоки курсу для різних департаментів.

Вам не обов’язково підключати всі одразу – використовуйте тільки ті, що справді потрібні для вашого курсу.

Останній крок: пакування та завантаження курсу в LMS

Коли всі зміни внесені, залишилося зробити найпростіше – правильно запакувати курс.

Як це зробити:

1. Виділіть усі файли та папки всередині проєкту (але не саму верхню папку).
2. Запакуйте їх у форматі ZIP за допомогою будь-якого зручного архіватора.
3. Завантажте отриманий ZIP файл в LMS Collaborator.

Висновок

В статті ми пройшли весь шлях: від того, як підтягувати дані з LMS і підставляти реальні фото, до зміни звернень за гендером і керування блоками курсу для різних департаментів.
Тепер курс працює «з коробки» та перетворюється на багато версій без дублювання та зайвої роботи.

Що ви отримуєте:

• Персоналізація – звернення по імені, фото користувача, тексти під стать.
• Контроль над контентом – показуєте різні блоки для різних департаментів.
• Економія часу – менше ручної роботи, менше дублювання.
• Зручність для команди – навчання стає зрозумілим, живим і близьким до потреб співробітників.

Головна ідея проста: менше технічних маніпуляцій, більше персоналізації, гнучкості та цінності для всіх.😊

Це зовсім інший рівень навчання – коли контент не просто існує, а говорить безпосередньо до тебе. Коли замість універсального підходу ти отримуєш відчуття, що курс створено саме для тебе. Це не тільки приємно, а ще й суттєво впливає на залученість, мотивацію й результат.

Але як змусити 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 – тож вам не доведеться нічого додатково допрацьовувати. Достатньо один раз вставити його у проєкт, і курс буде готовий до публікації в будь-якому з цих форматів.

Скрипт готовий, але щоб він працював без збоїв і зчитував дані для кожного користувача – потрібно вставити його в правильне місце.

Тож другий крок – додати код на майстер-слайд (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: коло, квадрат, шестикутник тощо. Форма фігури працюватиме, як «рамка» або «маска», і саме вона визначає, якою буде форма фото на екрані.

Тут важливо зробити декілька підготовчих кроків:

1. Створіть потрібну фігуру на слайді.
2. Додайте всередину фігури зображення-заглушку.
3. Скопіюйте id елемента, який містить заглушку. Саме за цим id скрипт буде змінювати фото.
4. Додайте цей id у JavaScript.
5. Використайте JavaScript для динамічної заміни картинки всередині цієї фігури на user_photo_thumb або user_big_photo_thumb.

Ось як це виглядає в інтерфейсі:

Готовий код, який можна вставити у ваш курс. Просто замініть id на свій:

Генерація іменного сертифіката

Фінальний штрих персоналізації – це видача іменного сертифіката з особистими даними користувача, брендовим дизайном вашої компанії та динамічними змінними. Усе це можна зробити через WebObject.

Що можна налаштувати?

• Підставляти ім’я, прізвище, посаду та інші змінні прямо на сертифікат.
• Змінювати фон сертифіката, додати будь-яке зображення зі своїм стилем, логотипами та підписами.
• Виводити динамічні дані зі Storyline через ті ж самі змінні (user_firstname, user_position, тощо).
• Дати можливість викачати PDF-файл згенерованого сертифіката одним кліком.

Як додати власний фон до сертифіката?

1. 1. Підготуйте зображення сертифікату у форматі PNG або JPEG.
   2. Закодуйте зображення у формат Base64 – це спеціальний код, який можна вставити прямо у HTML. Для цього використовуйте сервіс: https://www.base64-image.de/
   3. Скопіюйте згенерований код, що починається з data:image/png;base64,…
   4. Вставте цей код у HTML-файл як фонове зображення сертифіката. Потім додайте на слайд як WebObject.
   5. Створити тригер для виклику друку:

💡Приклад такого HTML-шаблону ви можете завантажити тут:
Завантажити приклад HTML-шаблону

Змінна %course_title% автоматично підставляє назву курсу у сертифікат під час генерації. Дата формування також додається автоматично – вам не потрібно заповнювати її вручну.

Дякую, що дочитали до кінця! Сподіваюся, ви знайдете для себе корисні кейси та ідеї, які зможете адаптувати під свої курси в Storyline. Ми пройшли шлях від базових змінних до персоналізованих фото та сертифікатів – і все це є у готовому прикладі. Нехай ваші курси будуть не просто навчальними, а персоналізованими, ефективними та захоплюючими!

Висновок

Персоналізація в навчанні – це не просто тренд, а потужний інструмент підвищення залученості та ефективності. Коли курс «говорить» із користувачем його мовою, звертається по імені, адаптує контент під індивідуальні потреби – це створює зовсім інший навчальний досвід.

Такий підхід дає відчутні результати:

• підвищує рівень завершення курсів,
• покращує засвоєння матеріалу,
• створює емоційний зв’язок із контентом,
• формує позитивне ставлення до корпоративного навчання.

Олег Селезень на практиці довів, що зробити це реально навіть у межах SCORM-курсів. Із правильними інструментами та невеликим доопрацюванням стандарту ви можете створювати курси, які будуть сприйматися не як шаблон, а як контент, створений спеціально для кожного співробітника. І це головна сила сучасного e-learning.

SCORM встановлює стандарти для створення інтерактивного навчального контенту, який легко інтегрується в LMS. Саме це робить цей формат зручним та універсальним.

В статті ми детальніше розберемо всі переваги цього формату, а також поділимося підбіркою розробників SCORM-курсів.

Що таке SCORM?

SCORM (Shareable Content Object Reference Model) – це стандарт для створення, організації та доставки навчального контенту в електронному форматі. Він дозволяє розробникам створювати навчальні курси та матеріали, які можуть бути використані в різних системах управління навчанням (LMS).

Чому SCORM – це база в корпоративному elearning?

• Стандартизація та сумісність.

Курси SCORM можуть інтегруватися з різними системами управління навчанням (LMS). Ви можете з легкістю вивантажувати курси з однієї LMS та переносити в іншу.

Наприклад, коли компанія Union Group змінювала систему для дистанційного навчання, зіткнулася з втратою більшості навчальних матеріалів. Єдиний контент, який вдалось зберегти та перенести на нову LMS – це були саме курси у форматі SCORM. Що вкотре доводить зручність цього формату.

• Структурований навчальний процес.

Використання SCORM забезпечує стандартизовану структуру для курсу. Курси розділяються на модулі, розділи, теми та завдання, що полегшує навчання співробітників.

• Інтерактивність та залучення.

SCORM дозволяє вбудовувати інтерактивні вправи, тести та завдання в онлайн курси. Це сприяє залученню учасників та активному навчанні.

• Аналітика та звіти.

Системи LMS, що підтримують формат SCORM, можуть надавати аналітичні дані про те, як співробітники взаємодіють з контентом, скільки часу вони витрачають на вивчення, які труднощі у них виникають тощо. Це допомагає оцінювати ефективність навчання та вчасно коригувати стратегію.

Загалом, використання SCORM у контент-стратегії навчання допомагає створити організований, інтерактивний та ефективний навчальний процес. Такий налагоджений процес краще сприяє покращенню знань та навичок працівників.

Де замовити SCORM-курс? Підбірка розробників від LMS Collaborator

Ми провели опитування серед наших колег (професіоналів сфери e-learning), щоб з’ясувати найкращих розробників SCORM-курсів. Ділимося нашою підбіркою:

1. Learn.Solution

Компанія займається розробкою електронних навчальних курсів, тестів, діалогових тренажерів, симуляцій «під ключ» з довічною гарантією. Також можна замовити створення комплексних програм змішаного навчання та траєкторій. Спеціалісти Learn.Solution працюють з різними редакторами: Articulate Storyline, Articulate Rise та Adobe Captivate.

На сайті компанії можна ознайомитись з відгуками, переглянути портфоліо та придбати готові курси з Microsoft Excel, Outlook, Teams тощо.

Приклад розробленої гри Learn.Solution «Хто хоче стати мільйонером»

2. K-Solutions

Фахівці компанії здійснюють повний цикл розробки електронного курсу, включаючи його проектування, дизайн, верстку та тестування в системі дистанційного навчання. Створюють курси різних форматів: тексто-графічні, симулятори, діалогові тренажери, гейміфіковані. Крім цього надають послуги оновлення існуючих курсів, верстки курсів за сценарієм замовника та конвертації презентацій в електронний курс. Працюють з такими редакторами як CourseLab, Articulate StoryLine, Captivate.

На сайті можете ознайомитись з прайсом на розробку курсів та переглянути портфоліо компанії.

Приклади створених курсів K-Solutions

3. NewRealGoal

Компанія займається розробкою контенту для корпоративного навчання в різних форматах: відео, статті, вебінари та електронні курси під ключ. Крім цього створюють гібридні формати навчання – офлайн та онлайн, у змішаних та мікроформатах. Наприклад, курс під ключ + додатковий тренінг для закріплення матеріалу тощо.

Адаптують навчальний контент та складають комплексні програми під запити замовників, супроводжують навчання та надають свої відео продукти для завантаження на LMS платформу.

Мають досвід співпраці з понад 100 компаніями.

4. TeachHub

Команда досвідчених професіоналів-розробників якісних курсів та тренінгів для дистанційного навчання. Займаються розробкою текстових і мультимедійних навчальних матеріалів будь-якого рівня складності та тематики. А також створюють навчальні тести та тренажери.

На сайті є доступний вибір готових дистанційних курсів для співробітників, також можна замовити курс «під ключ» на тематику, яка необхідна.

Приклади готових робіт від TeachHub

5. Maria Shidlovskaya

Під час опитування колеги рекомендували розробницю Марію Шидловську.

В портфоліо Марії вже понад 70 клієнтів та 1000 створених на замовлення курсів. Має досвід швидкої розробки інтерактивних курсів з елементами гейміфікації та довгих програм навчання за 1-2 дні. Марія працювала зі сферами ІТ, GameDev, Телеком, FMCG тощо. Розробляє курси на різні тематики, зокрема soft та hard skills. Створює програми onboarding для новачків, програми наставництва та стажування, курси з розвитку компетенцій, курси для менеджерів різного рівня, курси з безпеки, комплаєнс, охорона праці і т.д.

Висновок

SCORM – чудове рішення, за допомогою якого можна перетворити навчання співробітників в корисний та інтерактивний досвід. Однак важливо пам’ятати, що SCORM – це лише інструмент, і успішність контент-стратегії навчання також залежить від якості контенту, відповідності потребам аудиторії та ефективності методів навчання.