Build an Adaptive Next-Lesson UI
Content That Adapts
The best learning meets each student where they are. A student who aced the quiz needs a challenge; one who struggled needs review. In this lesson you'll build an adaptive 'recommended next lesson' UI that suggests a path based on performance.
You'll create three labeled recommendation cards, one for each performance level: a review path for students who need more practice, a steady path for those on track, and a stretch path for high performers. Clear labels and color cues make the right choice obvious.
This is where AI-built content earns its keep, no two students see exactly the same next step. Follow the steps and watch your adaptive UI come together.
Instructions
Add a page heading 'Recommended Next Lesson' and a short subtitle explaining the path adapts.
Hint: Use `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` followed by a `<p>` subtitle.
Where does this go?
<!-- Build your adaptive recommendation UI here -->Write it on line 11 — under that comment, after the code you already added.
Create a responsive grid container to hold the three recommendation cards.
Add three rounded-xl cards, each with a performance-level label span (for example 'Needs Review').
Give each card a call-to-action button so the student can start that path.
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: Add a page heading 'Recommended Next Lesson' and a short subtitle explaining the path adapts.