Делаем любую HTML страницу CMI5 курсом
На прошедшей недавно конференции Elearning Elements 2019 мы выступили с мастер классом про то, как из любого HTML контента можно сделать CMI5-совместимый электронный курс.
Попробуем кратко пересказать это выступление.
Что такое CMI5 и зачем он нужен?
CMI5 - новый стандарт для взаимодействия электронного контента с LMS/LRS системами. Этот стандарт призван заменить/дополнить существующий стандарт SCORM, обладающий рядом ограничений (весь контент на одном сервере, отсутствие поддержки мобильных приложений,...).Про основные различия между SCORM и CMI5 - читайте здесь: http://blog.websoft.ru/2019/04/cmi5-vs-scorm.html
Что сделали мы?
Мы разработали открытую JavaScript библиотеку, позволяющую превратить любую HTML страницу в CMI5-совместимый контент.
Концептуальная схема взаимодействия между контентом, LMS и LRS
Зачем мы это сделали?
Стандарт CMI5 открыт и документирован, но схема обмена данными между LMS, LRS и контентом не такая простая. Чтобы каждому разработчику не пришлось программировать схему взаимодействия самостоятельно, мы сделали простую библиотеку из 3 функций, которая все сделает за вас.
Процедура обмена данными по стандарту CMI5 (о которой не нужно думать пользователям библиотеки)
Как это работает
1. Включаете в HTML (расположенный на любом сервере) несколько строчек кода на JavaScript2. Создаете в системе WebTutor учебный модуль типа "CMI5", указав в нем URL вашей HTML страницы
3. Включаете модуль в структуру электронного курса
4. Назначаете курс обучаемому
5. В процессе обучения, открывая модуль курса, пользователь будет переходить на вашу страницу, а страница (с помощью библиотеки) будет отправлять данные в LRS WebTutor
6. Если отправленные данные будут содержать информацию об успешном изучении
Какие задачи можно решить с помощью CMI5?
- Интеграция с внешними провайдерами контента
- Интеграция с симуляторами, онлайн-играми и сервисами
- Использование в качестве учебного контента любых сайтов и любого внешнего HTML-контента
С помощью описанной технологии можно сделать элементом электронного курса практически любой контент или сервис:
- Лендинг
- Статью блога
- Страницу сайта
- Симулятор или онлайн-игра
- ...
Примеры
1. Пример простейшей HTML страницы:
<script src="https://news.websoft.ru/scripts/cmi5tool.js"></script>
<script type="text/javascript">
function sendResult()
{
var score = parseInt(document.getElementById("score_field").value, 10) || 0;
WT_CMI5.SendVerb("passed", {"score": {"raw": score }} );
}
</script>
<h1>Hello world</h1>
<p><input type="number" value="0" id="score_field"/></p>
<p><button onclick="sendResult()">Отправить</button></p>
2. Пример простейшего кода, вставляемого в виджет (часть страницы):
<script src="https://news.websoft.ru/scripts/cmi5tool.js"></script>
<script type="text/javascript">
WT_CMI5.SendVerb("passed", {"score": {"raw": 10}} );
</script>
3. Включение кода в состав курса лендинг,а сделанный с помощью Tilda (HTML блок)
Как вставить код библиотеки
Используйте конструкцию ниже (с нашего сервера) или укажите в качестве сервера свою адрес WebTutor (требуется версия WT, начиная с обновления 2 квартала 2019 года).
<script src="https://news.websoft.ru/scripts/cmi5tool.js"></script>
Что еще почитать
Посмотреть подробную презентация с нашего мастер-класса можно тут: https://news.websoft.ru/pdf/6697197884192554720Техническая документация в базе знаний на портале клиентов:
https://news.websoft.ru/view_doc.html?mode=wiki_base&wiki_article_id=6691636358089301980&base_wiki_article_type_id=6680054725638828770
