Skip to content

Latest commit

 

History

History
114 lines (85 loc) · 9.3 KB

dashboard.md

File metadata and controls

114 lines (85 loc) · 9.3 KB
Raw

Для разработки Главной страницы дашборда нужно организовать информацию таким образом, чтобы преподаватели могли легко видеть все свои курсы, отслеживать прогресс студентов и управлять заданиями. Вот план и структура, которые могут помочь в создании такой страницы:

План главной страницы дашборда

1. Шапка (Header)

Элементы:

  • Логотип платформы.
  • Навигация по дашборду (например, "Курсы", "Задания", "Сообщения", "Настройки").
  • Уведомления (например, о новых сообщениях или обновлениях по курсам).
  • Профиль пользователя (с фото или иконкой, с выпадающим меню для управления профилем, выхода и настроек).

2. Блок "Общая Статистика"

Этот блок располагается сверху под шапкой и отображает сводную информацию по всем курсам преподавателя.

Элементы:

  • Общее количество студентов (число студентов, записанных на все курсы).
  • Пройденные уроки (процент завершенных уроков всех курсов).
  • Количество активных заданий (суммарное количество домашних заданий, ожидающих проверки).
  • Прогресс учеников (график или статистика по завершенности курсов учениками, средний процент выполнения).

Визуализация:

  • Круговые или линейные диаграммы, карточки с ключевыми метриками для быстрого восприятия.

3. Секция "Список Активных Курсов"

Под сводной статистикой выводится список всех активных курсов преподавателя с ключевыми данными.

Элементы для каждого курса:

  • Название курса (клик для перехода на страницу курса).
  • Количество студентов на курсе.
  • Процент прогресса курса (график выполнения заданий студентами).
  • Количество новых сообщений от студентов (например, вопросы или комментарии).
  • Количество проверяемых заданий (показывает количество заданий, которые требуют проверки).
  • Статус курса (например, "В процессе", "Завершён", "Черновик").

Визуализация:

  • Каждый курс отображается в виде карточки или строки таблицы с метками и статусами.
  • Можно добавить иконки для быстрого понимания (например, новая работа, требующая проверки).

4. Блок "Прогресс по Курсу"

Этот блок может быть под секцией с курсами или интегрирован в карточки курсов.

Элементы:

  • Диаграмма прогресса студентов (показывает общий процент выполнения курса всеми студентами).
  • Топ-3 студентов с самым высоким прогрессом.
  • Количество завершённых уроков.

Визуализация:

  • Круговые диаграммы, прогресс-бары для каждого курса.
  • Возможно добавить фильтрацию для выбора курса и отображения его детальной статистики.

5. Блок "Актуальные Задания"

Здесь отображаются все задания, которые требуют проверки или активности со стороны преподавателя.

Элементы:

  • Название курса и название задания.
  • Количество студентов, которые уже сдали задание.
  • Кнопка "Перейти к проверке".

Визуализация:

  • Список или таблица с заданиями, с метками статуса (например, "Ожидает проверки").
  • Кнопки для быстрой навигации к проверке или управлению заданиями.

6. Блок "Сообщения от студентов"

Интерактивный блок для работы с комментариями и вопросами учеников.

Элементы:

  • Имя студента, название курса и краткое содержание сообщения.
  • Кнопка для ответа (открывает чат или панель сообщений).
  • Фильтр сообщений по курсу, студенту или дате.

Визуализация:

  • Лента сообщений или небольшие карточки с текстом сообщений, которые можно развернуть.

7. Блок "Новые Запросы на регистрацию" (опционально)

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

Элементы:

  • Имя студента.
  • Название курса.
  • Кнопки для подтверждения или отклонения запроса.

Визуализация:

  • Таблица с именами и курсами или небольшие карточки с краткой информацией и кнопками для действий.

Функциональные моменты

  • Фильтрация: Преподаватель может фильтровать курсы по прогрессу, количеству студентов или статусу (активные/завершенные).
  • Адаптивный дизайн: Страница должна быть оптимизирована для мобильных устройств с возможностью просмотра статистики и управления курсами на небольших экранах.
  • Интерактивность: Возможность быстро переходить от общей статистики к детальной информации по каждому курсу или студенту.

Технические моменты

  • API для получения данных: Курсы, студенты, прогресс, задания должны загружаться динамически через API.
  • Состояние данных: Можно использовать глобальное состояние (например, через Context API или Redux), чтобы эффективно передавать данные между компонентами.
  • Анимации и уведомления: Включите небольшие анимации при обновлении данных и уведомления для событий, таких как новые задания или сообщения.

Пример структуры компонентов для React

  1. DashboardHeader — Компонент шапки.
  2. SummaryStats — Компонент для отображения общей статистики.
  3. CoursesList — Компонент для списка активных курсов.
  4. CourseCard — Карточка отдельного курса.
  5. ProgressOverview — Компонент для отображения прогресса студентов.
  6. AssignmentsList — Компонент для списка активных заданий.
  7. MessagesFeed — Компонент для отображения сообщений от студентов.

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