НА КАРТИНКЕ — две аккуратные шкалы, спиральки и лампочки.
А внутри GetCourse за ними скрывается довольно приличная конструкция из процессов, условий и настроек 😅
В проекте PSY 2.0 дизайнер нарисовала макет с двумя прогресс-барами. Я их верстала и полностью настраивала механику работы.
🔹 ПЕРВЫЙ ПОКАЗЫВАЕТ, ГДЕ СЕЙЧАС ВЕСЬ ПОТОК
В курсе 8 модулей, между соседними модулями — по 4 контрольных урока.
К каждому привязана своя дата. В нужный день процесс на GetCourse начисляет балл по шкале достижений, и полоска постепенно закрашивается по направлению к следующему модулю.
Пройденный модуль закрашивается целиком, а у ближайшего следующего появляется яркая обводка.
Поэтому ученик видит не только текущий модуль, но и НАСКОЛЬКО поток уже приблизился к следующему.
🔹 ВТОРОЙ ПОКАЗЫВАЕТ ЛИЧНЫЙ ПРОГРЕСС
В каждом модуле есть тест.
Тест успешно сдан и принят — загорается лампочка 💡
Не сдан, пропущен или пока не принят — лампочка не горит.
На скриншоте видно, что второй тест уже закрыт, а первый остался пропущенным.
Посмотрел на шкалу — и сразу понятно, где есть хвост.
Получается, ученик одновременно видит:
— где сейчас весь поток;
— какие тесты уже закрыл лично он.
Когда прогресс перед глазами, проще отслеживать своё движение по курсу и понимать, что нужно сделать дальше. В исследованиях саморегулируемого обучения такое отслеживание прогресса связывают в том числе с поддержкой мотивации.
А моя часть здесь была такой:
⚙️ настроить шкалы достижений;
⚙️ настроить процессы начисления баллов;
⚙️ задать условия изменения прогресс-бара;
⚙️ настроить логику загорающихся лампочек;
⚙️ сверстать обе шкалы.
Дизайнер показала, КАК это должно выглядеть.
А я разбиралась, КАК заставить всё это работать автоматически внутри GetCourse.
Иногда за одной лампочкой на экране скрывается работы гораздо больше, чем кажется 😁
📩
Связаться со мной:
В MAX В ВК В Telegram 🌐
Мой сайт:
https://larafr.ru/portfolio
