Что? Портативный монитор?! Вы не ослышались. Но обо всем по-порядку.

Все началось с того, что участник сообщества Филипп Чурилов поделился такой фотографией портативного монитора.

Да, марка монитора — Arzopa. Это неизменный повод для шуток.

И тут второй участник сообщества Дмитрий Якушев решил купить себе такой девайс. Дальше поделимся совместным опытом использования. Считаем, что будет полезно рассказать о таком классе устройств и возможно вы о нем не знали. Вдруг самое то для ваших рабочих процессов?

Плюсы

• — Повышает продуктивность за счет расширения рабочей области
• — Дает мобильность
  Его можно взять куда угодно. Особенно это актуально любителям работать за ноутбуками, кто много ездит или живет на съемной квартире и не хочет обрастать обычными мониторами.
• — Возможность проводить красивые демонстрации на переговорах с коллегами
• — Возможность работы в вертикальном положении
  Это актуально для работающих с кодом.
• — Возможность смотреть курсы глазами сотрудника
  У вас дома или в офисе, как минимум, 27 дюймов, 2к разрешение и 100% sRGB и прочие плюшки. Однако у сотрудников мониторы не такие. Это устройство позволяет посмотреть курсы на небольшом фулл хд мониторе с самой обычной матрицей и цветовой передачей без понтов.
• — Монитор удобно использовать для разработки обучения по ПО
  Ну вы же не будете снимать скриншоты и скринкаст на своих 2к / 4к мониторах? Фулл хд самое то для таких задач со 100% масштабом.

Минусы

• — Слегка утяжеляет рабочий портфель если носить с собой
• — Мелкий
  Особенно это чувствуется рядом с большими мониторами. Full hd разрешения и 15 дюймов уже мало. Хочется выкрутить масштаб 125% или 150%. Но с ноутами работается гораздо лучше.
• — Цветопередача и яркость грустная
  Но это опять же ощущается рядом с большим и дорогим монитором. Рядом с ноутбуком все веселее. Вывести какую-то информацию на него или работать с текстом нормально. Использовать как рабочую станцию для работы с графикой сомнительный опыт.

Нюансы

• — Короткие кабели в комплекте
  Если твой ПК не находится на столе, то подключение будет проблемным. Нужны провода длинее + для монитора нужно два кабеля если ПК не поддерживает передачу картинки по юсб с (мой не поддерживает).
• — Чехол не фиксирует монитор для переноса
  Он закрывает его как книжку и иногда есть опасения, что может выскользнуть

Выводы

Классное устройство за разумные деньги и с возможностью портативной работы. Как игрушка это очень ок. Как дополнительный монитор, на который можно вывести все чаты, почту и прочую рутину ок. Как дополнительный монитор к ноуту вообще отлично. Как серьезный рабочий инструмент — сомнительно.

Ну и напоследок несколько живых фотографий из сообщества.

За наводку на такое устройство спасибо участнику сообщества Филиппу Чурилову.

Хотите обсудить это решение или поделиться своим? Вступайте в сообщество «Скормите это LMS»!

Жмите на кнопку «Join Discord» в баннере.

Кажется, это будет полезно многим, поэтому выносим из сообщества на сайт.

Участник сообщества Алексей Миляев выпустил новое видео. В нем рассказывается про использование JS библиотеки GSAP в Articulate Storyline, которая позволяет создавать интересные кастомные анимации. В ролике разбирается базовая теория и добавлено 8 шаблонов анимации, которые можно скопировать и вставить в свой проект.

Посмотреть, как работает проект, можно тут. А тут можно скачать исходник проекта.

В сообществе успели немного обсудить ролик. Высказали такие мысли:

• — Эффект можно использовать как украшение кнопок и для понимания, что нажатие на кнопку произошло. Но какой в этом смысл, если чаще всего эффект не успеет «доиграть» до конца, т. к. по кнопке произойдет смена слайда или слоя? Как вариант — можно запланировать задержку между переходами, но это вызывает ощущение «торможения» курса.
• — Украшательством курса лучше не увлекаться, чтобы не было сильного контраста между разными. Если вау-супер-классный курс для новичка сменять унылые некрасивые курсы без украшений и анимации, может возникнуть впечатлением обманутых ожиданий.
• — Надо помнить об эффективности затрат. Если создание анимации занимает много времени, а длится всего пару секунд и не влияет на понимание материала (большинство декоративных анимаций не влияют), то много их делать невыгодно со всех точек зрения. А если с ними «переборщить», то они даже могут отвлекать от контента.
• — До появления акцентной анимации в Storyline в этом решении был смысл. А сейчас получается результат, близкий к стандартной анимации, но с большим количеством телодвижений.

За видео благодарю участника сообщества — Алексея Миляева.

Хотите обсудить это решение или поделиться своим? Вступайте в сообщество «Скормите это LMS»!

Жмите на кнопку «Join Discord» в баннере.

Проблема

Есть старый курс, который сделан в Курслабе. Его нужно один или два раза в год обновлять, редактируя текст на паре слайдов. Исходника курса нет в наличии или его нужно искать полдня. Дистрибутив Курслаба тоже спрятан где-то в глубинах офисного пространства. Что можно сделать?

Решение

1. Распаковываем SCORM-пакет.
2. В распакованном пакете откройте файл runtime.xml (лежит в папке модуля — 1 или другое число).
3. Найдите поиском по тексту нужный блок и поправьте его.

Обратите внимание на атрибуты к тегу object. Скорее всего, они вам пригодятся позже.

4. Сохраните изменения, упакуйте обратно SCORM пакет и проверьте на портале.
5. Возможно, придётся поправить высоту контейнера или его координаты расположения. Эту информацию ищите в атрибутах к тегу object.

Несколько советов

— Помните, что изменения не будут внесены в исходник курса.
— Можно найти нужный блок текста в файле runtime.xml по id блока. Посмотрите в консоли id блока, в который хотите внести изменения, и запустите по нему поиск в runtime.xml.

За информацию благодарю участника сообщества — Михаила Терешина

Хотите обсудить это решение или поделиться своим? Вступайте в сообщество «Скормите это LMS»!

Жмите на кнопку «Join Discord» в баннере:

Проблема

Если вы загружали курс из Scroll в Webtutor, вы могли столкнуться с такой проблемой: слушатель проходит курс, нажимает кнопку завершения обучения и...

Курс закрывается, и появляется финальное сообщение.

При этом встроенный плеер курсов WebTutor остаётся открытым, хотя это от него уже не нужно.

К чему хотим прийти

Чаще всего при нажатии на кнопку завершения курса должно происходить одно из следующих событий:
— Закрытие курса вместе с плеером WT с переходом на учебный портал;
— Закрытие курса вместе с плеером WT с переходом по заданной ссылке;
— Переход на следующий модуль обучения (если структура курса состоит из нескольких модулей)

Решение

1. Публикуем курс из Scroll и распаковываем полученный SCORM. Ищем папку «js». Там открываем файл scorm_2004_libs.js.

2. Вставляем в конце файла этот скрипт:

// Функция, которая будет вызываться при появлении нужного текста
function handleTextChange(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // Проверяем каждое добавление узла в DOM
            mutation.addedNodes.forEach(node => {
                // Проверяем, содержит ли добавленный узел нужный текст
                if (node.textContent.includes('Этот материал пройден. Закройте вкладку или переходите к другому материалу.')) {
                    // Код для запуска другого скрипта
                    console.log("Найден нужный текст! Запускаем другой скрипт...");
                }
            });
        }
    }
}

// Создаем новый экземпляр MutationObserver с указанной функцией обратного вызова:
const observer = new MutationObserver(handleTextChange);

// Опции наблюдения: следим за изменениями внутри элемента body и его потомков:
const observerOptions = {
    childList: true,
    subtree: true
};

// Начинаем наблюдение за изменениями в DOM с указанными опциями:
observer.observe(document.body, observerOptions);

3. Вместо комментария «// Код для запуска другого скрипта» из кода выше вставляем нужный код:

//Переключить на следующий модуль
const playerApp = window.parent.document.querySelector('#app');
if (playerApp !== null) playerApp.__vue__.$store.dispatch('learning/goNextPart');

или

//Закрыть вкладку с курсом
const playerApp = window.parent.document.querySelector('#app'); 
if (playerApp !== null) playerApp.__vue__.$store.dispatch('app/close');

или

//Закрыть вкладку с курсом и сделать редирект (не забудьте прописать ссылку для редиректа)
const playerApp = window.parent.document.querySelector('#app'); 
if (playerApp !== null) playerApp.__vue__.$store.dispatch('app/redirect', "https://ya.ru");

или

//Завершить курс (статус «пройден» или «не пройден» будет зависеть от настроек условий успешного прохождения. Этот вариант я пока не тестировал)
const playerApp = window.parent.document.querySelector('#app'); 
if (playerApp !== null) playerApp.vue.$store.dispatch('learning/finishCourse);

4. Упаковываем файлы обратно в ZIP-архив и скармливаем его вашему WebTutor.

Какая логика работы?

Этот скрипт отслеживает изменения в DOM-дереве страницы.

После нажатия на кнопку завершения курса шаблон Scroll выводит фразу «Этот материал пройден...». Это — триггер для скрипта, который выполняет нужное вам действие: переключает модуль, закрывает вкладку, закрывает вкладку с редиректом и т. д. (Эта часть кода, которую мы выше вставили в большой скрипт).

Теперь ваши курсы будут завершаться одновременно с плеером курса WebTutor либо переключение между разными модулями будет бесшовным.

Для любознательных

1. Это решение работает до тех пор, пока Scroll не добавит в кнопки возможность вставлять кастомный JS. Тогда вы можете выбросить большой скрипт и повесить на кнопку только маленькую часть с конкретным действием (закрытие вкладки, закрытие с редиректом, включение следующего модуля).
2. Это решение работает только в актуальном плеере курсов WT.
3. Если формулировка фразы в курсе после завершения курса изменится, в скрипте нужно также обновить фразу-триггер.
4. Скрипт надо вставлять при каждом новом экспорте архива из Scroll. Удобно сделать шаблон в отдельном файле и каждый раз копировать его оттуда.

Хотите обсудить это решение или поделиться своим? Вступайте в сообщество «Скормите это LMS»!

Жмите на кнопку «Join Discord» в баннере: