Розробка особистого кабінету викладача для LMS

Розробка особистого кабінету викладача для LMS

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

Розділи кабінету

Дашборд викладача—зведка: непроверені роботи (з цифрою та пріоритетом), статистика потоку (активні студенти, середній прогрес), ближайші події (вебінари).

Мої курси—список курсів, які веде викладач. Перемикання між чорновиком, опубліковано та архівом.

Конструктор курсу—створення та редагування структури курсу, уроків, завдань.

Журнал оцінок (Gradebook)—таблиця всіх студентів × всіх завдань. Оцінки, середні по категоріях, підсумкові бали.

Перевірка завдань—черга непроверених робіт з інтерфейсом перевірки.

Студенти—список записаних студентів з прогресом, можливість написати, відрахувати, продовжити доступ.

Аналітика—графіки прогресу, retention, проблемні уроки.

Дашборд: черга перевірки

Непроверені роботи—найважливіша частина дашборда. Сортуємо по дедлайну:

interface TeacherDashboard {
  pendingReviews: {
    submissionId: string;
    studentName: string;
    studentAvatar: string;
    assignmentTitle: string;
    courseName: string;
    submittedAt: Date;
    deadlineAt: Date | null;
    isOverdue: boolean;
  }[];
  activeCohortsStats: {
    cohortName: string;
    totalStudents: number;
    activeThisWeek: number;
    avgProgress: number;
    atRiskCount: number; // Не активні 7+ днів
  }[];
  upcomingWebinars: { title: string; startsAt: Date; enrolledCount: number }[];
}

Конструктор курсу

Drag-and-drop редактор структури курсу:

function CourseStructureEditor({ courseId }) {
  const { sections, reorderSections, reorderLessons } = useCourseEditor(courseId);

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={sections}>
        {sections.map(section => (
          <SortableSection key={section.id} section={section}>
            <SortableContext items={section.lessons}>
              {section.lessons.map(lesson => (
                <SortableLesson key={lesson.id} lesson={lesson} />
              ))}
            </SortableContext>
          </SortableSection>
        ))}
      </SortableContext>
    </DndContext>
  );
}

Урок може бути: відео, текст, презентація (вбудований слайдер), завдання, quiz, вебінар. Налаштування уроку: обов'язковий/факультативний, відкритий одразу або по дедлайну, вимагає завершення попереднього.

Gradebook

Віртуалізована таблиця для великих потоків (200+ студентів × 50+ завдань):

import { useVirtualizer } from '@tanstack/react-virtual';

function Gradebook({ courseId }) {
  const { students, assignments, grades } = useGradebook(courseId);

  return (
    <div className="overflow-auto">
      <table>
        <thead>
          <tr>
            <th className="sticky left-0 z-10 bg-white">Студент</th>
            {assignments.map(a => (
              <th key={a.id} className="min-w-[80px]">{a.shortTitle}</th>
            ))}
            <th>Підсумок</th>
          </tr>
        </thead>
        <tbody>
          {students.map(student => (
            <tr key={student.id}>
              <td className="sticky left-0 bg-white">{student.name}</td>
              {assignments.map(a => {
                const grade = grades[student.id]?.[a.id];
                return (
                  <td key={a.id} className={gradeColor(grade)}>
                    {grade ? `${grade.score}/${a.maxScore}` : '—'}
                  </td>
                );
              })}
              <td className="font-bold">{calculateFinalGrade(student.id)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Аналітика курсу

Графіки:

• Прогрес студентів по днях (гістограма: скільки уроків пройдено по когорті)
• Retention: скільки % активні через 1/2/4 тижні
• Проблемні уроки: на якому уроці частіше всього зупиняються

Таблиця студентів з ризиком:

-- Студенти без активності 7+ днів з прогресом < 50%
SELECT u.name, u.email, cp.percentage, cp.last_activity_at,
       (CURRENT_DATE - cp.last_activity_at::date) AS days_inactive
FROM course_progress cp
JOIN users u ON u.id = cp.student_id
WHERE cp.course_id = $1
  AND cp.completed_at IS NULL
  AND cp.percentage < 50
  AND cp.last_activity_at < NOW() - INTERVAL '7 days'
ORDER BY days_inactive DESC;

Спілкування зі студентами

Викладач може: написати конкретному студенту (особисте повідомлення), відправити повідомлення групі (announcement з push+email), залишити коментар до перевіреного завдання.

Терміни

Дашборд з чергою перевірки та статистикою—4–5 днів. Конструктор курсу з drag-and-drop—7–10 днів. Gradebook з віртуалізацією—3–4 дня. Аналітика з графіками—4–5 днів.