Создать сайт-обучалку

Макет дизайна страниц:

https://www.figma.com/file/BvPoHhrrVYp6MxPSEu3yGZ/Affhub-Study?node-id=25%3A2536

Общее описание проекта:

Обучающая платформа, которая состоит из последовательных блоков (всего 7).

Каждый из 7 блоков состоит из таких типов контента: education ролик, следом за ним открывается статья, следом за ней тест.

Только пройдя последовательно эти стадии, можно приступить к следующему разделу.

Цель обучения - вовлечь аудиторию в “игру”, проходя которую он получит: готовую связку, скидки на сервисы и понимание работы с нашими продуктами и сертификат о прохождении курса.

Функционал проекта:

1. Для того, чтобы попасть в обучение, нужно быть зарегистрированным пользователем. На главной станице сайта https://affhub.com/  будет отдельная форма регистрации на обучение.

Далее пользователь попадает в свой личный кабинет, который впоследствии будет также содержать инструмент программы лояльности (подсчет баллов за определенные действия). Указываю информацию для того, если это нужно учесть при разработке личного кабинета.

2. https://prnt.sc/t1duv8

Прогресс-бар должен отображать на какой стадии находится юзер, меняется в зависимости от каждого шага в виде просмотра видео, прочтения статьи, теста.

3. Если юзер разлогинился и зашел заново, продолжая обучение он видит в прогресс баре сколько он прошел информации в процентах, также в общей программе на чем он остановился: https://prnt.sc/t1dwxz. В случае выхода веба из системы прогресс сохраняется в учетной записи.

4. Нажимая кнопку “продолжить” https://prnt.sc/t1dy53 юзер попадает на ту часть контента, на которой остановился.

5. https://prnt.sc/t1dz8v Если юзер не прошел тест, у него светится статус “тест не пройден” и технически у него появляется возможность пересдать тест через 12 часов после того, как пройдет заново необходимый раздел.

6. https://prnt.sc/t1e2pe Первая часть контента в разделе: education ролик должен тянуться с ютуба (закрытого канала), либо же быть загруженным в сам проект. Главное, чтобы к ролику не было открытого доступа, только в рамках обучения. И его нельзя было скачать. В рамках каждого раздела есть кнопка “вернуться назад” и таким образом юзер попадает обратно на раздел с программой, где ему снова-таки виден прогресс бар и статус прохождения контента.

7. После просмотра ролика, юзер может перейти к чтению текстовой информации по этой кнопке: https://prnt.sc/t1e4mn

8. В разделе с лонгридом обязательно должна быть кнопка https://prnt.sc/t1e65b

Эта функция нужна для того, чтобы загрузить, например,. видеозапись экрана, инструкции, если того требует контент раздела. Не знаю, возможно ли это технически, но в моем понимании, кнопка должна светиться в разделе, если имеется видеоконтент, если не имеется, то может не отображаться.

9. Раздел с тестами интерактивен: https://prnt.sc/t1e9f8 Должен осуществляться переход к следующему вопросу и возможность “вернуться назад” и продолжить тест позже, если необходимо. 10.  Пример выделения выбранного варианта ответа: https://prnt.sc/t1eb5w

После того, как юзер выбрал свой ответ: https://prnt.sc/t1ec3d

Если юзер не сдал тест (алгоритмы будут предоставлены отдельно)

https://prnt.sc/t1ecqx

11. В некоторых разделах, которые будут включать в себя контент про разные сервисы, вместе с результатами теста, юзеру будет выдаваться скидка или купон на определенный сервис. Размер скидки будет варьироваться в зависимости от оценки за пройденный раздел.

https://prnt.sc/t1gd7b

Выглядеть это будет так. https://prnt.sc/t1gen1 Здесь будет кнопка “получить бонус”, предлагаю реализовать этот так: при нажатии кнопки будет происходить скачивание файла pdf, например, с сами купоном (варианты реализации рассматриваются)

12. После прохождения всех разделов, юзер получает сертификат. https://prnt.sc/t1ghur

Его можно будет скачать файлом pdf. Сертификат также будет иметь свою оценку (в зависимости от результата теста) и юзеру будет присваиваться определенный уровень.

Важные моменты:

Необходимо будет реализовать функционал таким образом, чтобы была возможность самостоятельно вносить изменения в контент (перезагрузить файлы, поменять текст). Должна быть админка для редакторов. И еще обязательно: иметь возможность добавлять разделы. Например: у нас обучение сейчас конкретно по фейсбуку, и внутри раздела в будущем нужно будет добавить обучение по тизеркам.

Или же, добавить новый раздел и загрузить как новое обучение.