Создайте панель успеваемости класса
Трекер успеваемости учеников
Видеть, где находится каждый ученик, одним взглядом — это один из самых мощных инструментов для учителя. Аккуратная панель успеваемости превращает таблицу с цифрами в нечто, что можно прочитать за секунды. В этом уроке вы создадите её с помощью ИИ, который будет направлять вас на каждом шаге.
Вы создадите таблицу со списком учеников, визуальной полосой прогресса для каждого и статусом, чтобы сразу видеть, кто идёт с опережением, а кому нужна помощь. Этот инструмент можно адаптировать для любого класса и любого предмета.
Следуйте шагам, наблюдайте за живым предпросмотром — и у вас будет панель, которую можно реально использовать уже в понедельник утром.
Инструкции
Добавьте заголовок панели с текстом «Class Progress» внутри контейнера-карточки с rounded-xl.
Подсказка: Оберните `<h1>Class Progress</h1>` внутри `<div class="... rounded-xl ...">`.
Куда это писать?
<!-- Build your class progress dashboard here -->Пишите в строке 11 — под тем комментарием, после уже добавленного кода.
Создайте таблицу с заголовками столбцов: Student, Progress и Status.
Для каждой строки ученика добавьте полосу прогресса с зелёным заполнением, ширина которого отражает прогресс.
Добавьте значок статуса в каждую строку с помощью span. Хотя бы один должен содержать текст «On Track».
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Добавьте заголовок панели с текстом «Class Progress» внутри контейнера-карточки с rounded-xl.