Обговорити ваш проєкт
Проєкти / Створення навчальних курсів

LCMS

Створення уроків і керування версіями курсів.

Робоче середовище для авторів курсів Commonwealth Charter Academy. Команда впорядковує програму, створює сторінки уроків і обирає, які похідні шаблони отримають оновлення.

01 / Структура курсу

Структура курсу та вибіркове оновлення.

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

Структура курсу й вибір синхронізації

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

02 / Візуальний редактор уроків

Візуальний редактор сторінок і компонентів уроку.

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

Візуальний редактор уроку

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

03 / Медіа та події на часовій шкалі

Описи медіа, джерела й налаштування озвучення.

Редактор уроку показує історичну хронологію, список медіа та властивості вибраного матеріалу.

Хронологія подій і медіаматеріали

Для подій часової шкали передбачені текст, підписи зображень, альтернативний текст і джерела. Окремий медіасписок містить матеріали уроку; у панелі властивостей доступні мова та керування Readspeaker.

04 / Пов’язані шаблони курсів

Основні шаблони та похідні версії курсів.

Огляд курсу LCMS пов’язує основний шаблон із похідними шаблонами та їхніми станами синхронізації.

Основний і похідні шаблони

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

Технології

Технології LCMS.

Модульний простір для створення та синхронізації навчального контенту.

Користувацькі інтерфейси

Типізовані екрани, спільний стан запитів і перевірка форм редактора.

  • React
  • TypeScript
  • Redux Toolkit
  • RTK Query
  • React Router
  • React Hook Form
  • Zod
  • Tailwind CSS
  • DaisyUI

Модулі та обмін у реальному часі

Монорепозиторій і федерація модулів організовують застосунок; WebSocket та Auth0 забезпечують обмін даними й доступ.

  • Nx
  • Rspack
  • Module Federation
  • WebSocket
  • Auth0
  • Vitest
Ваш процес створення курсів

Редактор під курси, з якими працює ваша команда.

Покажіть реальний урок, його матеріали й версії курсу, де він використовується. Поєднаємо структуру, інструменти редагування та правила синхронізації в середовищі для ваших авторів.

Обговорити навчальну платформу