Build a Gamified Lesson Card
Gamify Your Content
Students pay attention when learning feels like a game. Points, progress, and a clear challenge turn a flat lesson into something worth finishing. In this lesson you'll build a gamified lesson card with AI as your pair-builder.
You'll assemble three pieces every great game UI shares: a points badge that rewards effort, a progress bar that shows how far the student has come, and a challenge card that gives them a goal. By the end you'll have a reusable component you can drop into any lesson.
Don't worry about writing perfect code from memory. Follow each step, lean on the hints, and let the live preview confirm you're on track.
Instructions
Create the lesson card container: a div with rounded-xl corners, padding, and a dark gray-800 background.
Hint: Use: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
Where does this go?
<!-- Build your gamified lesson card here -->Write it on line 11 — under that comment, after the code you already added.
Add a points badge using a span with a bright yellow background that shows the student's score.
Add a progress bar: a gray track div containing a green fill div with a set width.
Add a challenge card with the heading text 'Today's Challenge' and a short goal for the student.
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Create the lesson card container: a div with rounded-xl corners, padding, and a dark gray-800 background.