Создайте адаптивный интерфейс следующего урока
Контент, который адаптируется
Лучшее обучение встречает каждого студента там, где он находится. Студент, отлично сдавший тест, нуждается в вызове; тот, кто испытывал трудности, — в повторении. В этом уроке вы создадите адаптивный интерфейс «рекомендуемого следующего урока», который предлагает путь на основе результатов.
Вы создадите три карточки с рекомендациями, по одной для каждого уровня успеваемости: путь повторения для студентов, которым нужна дополнительная практика, стабильный путь для тех, кто идёт в нужном темпе, и продвинутый путь для отличников. Чёткие метки и цветовые подсказки делают правильный выбор очевидным.
Именно здесь контент, созданный с помощью AI, оправдывает себя — никакие два студента не видят одинакового следующего шага. Следуйте шагам и наблюдайте, как ваш адаптивный интерфейс обретает форму.
Инструкции
Добавьте заголовок страницы «Recommended Next Lesson» и короткий подзаголовок, объясняющий, что путь адаптируется.
Подсказка: Используйте `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>`, а затем `<p>` с подзаголовком.
Куда это писать?
<!-- Build your adaptive recommendation UI here -->Пишите в строке 11 — под тем комментарием, после уже добавленного кода.
Создайте адаптивный контейнер-сетку для трёх карточек с рекомендациями.
Добавьте три карточки rounded-xl, каждая с элементом span, обозначающим уровень успеваемости (например, «Needs Review»).
Добавьте в каждую карточку кнопку призыва к действию, чтобы студент мог начать этот путь.
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Добавьте заголовок страницы «Recommended Next Lesson» и короткий подзаголовок, объясняющий, что путь адаптируется.