SKIP TO CONTENT
vibe coding academy

나만의 첫 번째 인터랙티브 퀴즈 앱

beginner~15 분0/4 단계

나만의 첫 번째 인터랙티브 퀴즈 앱

강의는 일방통행입니다. 퀴즈는 대화입니다.

스스로 테스트하는 학생은 단순히 다시 읽는 학생보다 50% 더 많이 기억합니다. 이 레슨에서는 실제로 클릭할 수 있는 퀴즈 앱을 만들어 봅니다 — 질문, 클릭 시 초록색 또는 빨간색으로 빛나는 답변 선택지, 점수 카운터, 결과 메시지까지 갖춘 앱이에요. 브라우저에서 바로 실행됩니다. 프레임워크도, 백엔드도 필요 없어요. HTML과 약간의 JavaScript만으로 충분합니다.

안내

1

<h1> 태그로 퀴즈 제목을 추가하세요 — 이 퀴즈는 어떤 주제를 다루나요?

힌트: 이렇게 해보세요: `<h1 class="text-3xl font-bold text-white mb-2">Quick Knowledge Check</h1>`

2

퀴즈 질문 텍스트가 담긴 <div class="question">을 추가하세요

3

최소 3개의 <button class="answer-btn"> 요소를 추가하세요. 정답에는 data-correct="true"를 표시하세요

4

하단에 "Score: 0"을 표시하는 <div class="score-counter">를 추가하세요 — 정답을 클릭하면 스타터 JavaScript가 자동으로 업데이트해 줍니다

내 코드

html
37 줄
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

실시간 미리보기

실시간 미리보기