Создайте игровую карточку урока
Превратите контент в игру
Ученики внимательны, когда обучение ощущается как игра. Очки, прогресс и чёткое задание превращают скучный урок во что-то, что хочется пройти до конца. В этом уроке вы создадите игровую карточку урока вместе с ИИ в роли напарника.
Вы соберёте три элемента, которые есть в каждом отличном игровом интерфейсе: значок очков, который награждает за усилия, полоса прогресса, показывающая, как далеко продвинулся ученик, и карточка задания с чёткой целью. В итоге у вас будет готовый компонент, который можно вставить в любой урок.
Не беспокойтесь о том, чтобы писать идеальный код по памяти. Следуйте каждому шагу, пользуйтесь подсказками, и живой предпросмотр подтвердит, что вы на верном пути.
Инструкции
Создайте контейнер карточки урока: div со скруглёнными углами rounded-xl, внутренними отступами и тёмно-серым фоном gray-800.
Подсказка: Используйте: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
Куда это писать?
<!-- Build your gamified lesson card here -->Пишите в строке 11 — под тем комментарием, после уже добавленного кода.
Добавьте значок очков: span с ярко-жёлтым фоном, отображающий счёт ученика.
Добавьте полосу прогресса: серый div-трек, внутри которого находится зелёный div-заполнитель с заданной шириной.
Добавьте карточку задания с заголовком «Today's Challenge» и коротким описанием цели для ученика.
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Создайте контейнер карточки урока: div со скруглёнными углами rounded-xl, внутренними отступами и тёмно-серым фоном gray-800.