Прогресс-бар на GetCourse своими руками без знания кода
Давайте начнем с понимания, а что такое вообще прогресс-бар? По факту - это шкала, отображающая прогресс/процент выполнения задачи или, в нашем случае, прогресс прохождения обучающей программы.
В основе любой геймификации (а прогресс-бар - это элемент игры) лежит математика. Подсчет процентов/шагов/баллов помогает измерить свой результат и мотивирует двигаться вперед, ведь учащийся может в любой момент остановиться, оглянуться назад и оценить, сколько уже было всего сделано и распределить свои силы на оставшийся путь.
Но я не геймификатор и не методолог, поэтому речь пойдет о том, а как технически настроить эту шкалу в своих курсах.
Итак, все кто сталкивался с платформой GetCourse, знают, что там можно с помощью кодов и скриптов настроить красивые шкалы, как на примере ниже.
Но будем честны, кодировать могут не все, это стоит денег, для этого нужно обращаться к другим специалистам. А как же всё сделать самому? Легко)) И мой вариант, кстати, подойдет не только пользователям платформы GetCourse, но и других LMS.
Если вы когда-нибудь пользовались сервисами Canva/Figma или похожими, то полдела уже сделано. Как вы уже могли догадаться, делать всё мы будем не кодом, а картинками/изображениями/баннерами.
Всё что нам нужно, так это в удобном сервисе (я делаю в Figma, знаю, что в Canva тоже удобно) создать прямоугольник или овал шириной не менее 1000px (это важно для корректного отображения). Высоту можете определить сами, как вам нравится, на моем примере - 50px, мне кажется, оптимальный вариант. Выбираем подходящий цвет.
Далее простая математика. К примеру, у вас 10 уроков, в каждом должен быть прогресс-бар, отсчитывающий процент прохождения курса. Соответственно мы 1000px делим на 10 уроков, получается 100px - ширина, определяющая из урока в урок прогресс прохождения обучения, как на скриншоте ниже ярким цветом (просто прибавляем по 100px к каждой последующей шкале для равномерного заполнения прогресса).
Далее нам нужно подсчитать сколько процентов от всего курса составляет 1 урок. К примеру, у нас 12 уроков - это 100% от всего курса, значит 1 урок = 100/12 = 8,33%. Соответственно делаем 12 шкал, и шкала первого урока будет соответствовать прохождению 8,33% и т.д. Цифры можно округлять, чтобы выглядело более аккуратно.
На моем примере, каждый прогресс бар - это овал, на который сверху наложен еще один овал другого цвета и вручную добавлены цифры. Мы делаем столько прогресс-баров, сколько нам нужно, в зависимости от количества уроков. А потом просто добавляем картинку прогресс-бара в каждом уроке на учебной платформе.
И учащийся, переходя из урока в урок будет видеть, сколько процентов курса он уже изучил, сколько осталось. Это мотивирует идти дальше, ведь все мы любим опираться на цифры, пусть и не всегда себе в этом признаемся.
Вы можете делать так, как позволяет ваша фантазия: либо простыми геометрическими фигурами, либо добавлять стрелку на одном конце, либо играть с цветом и делать более ярким процент прохождения ближе к финалу обучения, да вы даже можете начертить диаграмму: как вам нравится, мы всегда ограничены только идеями в нашей голове.
Да, несомненно в этом способе есть свой минус - если ученик возвращается в предыдущий урок, то он опять видит прошлый процент прохождения курса, это не автоматизация, но и мы выбрали самый простой путь, помните об этом😉