본문으로 건너뛰기

적응형 다음 수업 UI 만들기

중급~14 0/4 단계

적응하는 콘텐츠

최고의 학습은 각 학생이 있는 곳에서 만납니다. 퀴즈를 잘 본 학생에게는 도전이 필요하고, 어려움을 겪은 학생에게는 복습이 필요합니다. 이 수업에서는 성취도에 따라 경로를 제안하는 적응형 '추천 다음 수업' UI를 만들어 봅니다.

세 가지 성취 수준에 맞는 레이블이 붙은 추천 카드를 만들 것입니다: 더 많은 연습이 필요한 학생을 위한 복습 경로, 순조롭게 진행 중인 학생을 위한 일반 경로, 그리고 우수한 학생을 위한 심화 경로입니다. 명확한 레이블과 색상 단서가 올바른 선택을 명확하게 만들어 줍니다.

바로 여기서 AI로 만든 콘텐츠가 진가를 발휘합니다 — 어떤 두 학생도 정확히 같은 다음 단계를 보지 않습니다. 단계를 따라가며 적응형 UI가 완성되는 것을 지켜보세요.

안내

1

페이지 제목 'Recommended Next Lesson'과 경로가 적응한다는 것을 설명하는 짧은 부제목을 추가하세요.

힌트: `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` 다음에 `<p>` 부제목을 사용하세요.

어디에 작성하나요?

<!-- Build your adaptive recommendation UI here -->

11번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.

2

세 개의 추천 카드를 담을 반응형 그리드 컨테이너를 만드세요.

3

rounded-xl 카드 세 개를 추가하고, 각 카드에 성취 수준 레이블 span(예: 'Needs Review')을 넣으세요.

4

학생이 해당 경로를 시작할 수 있도록 각 카드에 행동 유도 버튼을 추가하세요.

내 코드

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

실시간 미리보기

실시간 미리보기