SKIP TO CONTENT

Your First Interactive Quiz App

beginner~15 min0/4 steps

Your First Interactive Quiz App

A lecture is one-way. A quiz is a conversation.

Students who test themselves retain 50% more than those who just re-read. In this lesson you'll build a real, clickable quiz app — with a question, answer options that light up green or red on click, a score counter, and a results message. It runs in the browser. No frameworks, no backend. Just HTML + a sprinkle of JavaScript.

Instructions

1

Add an <h1> with your quiz title — what topic is this quiz testing?

Hint: Try: `<h1 class="text-3xl font-bold text-white mb-2">Quick Knowledge Check</h1>`

2

Add a <div class="question"> containing the quiz question text

3

Add at least 3 answer <button class="answer-btn"> elements. Mark the correct one with data-correct="true"

4

Add a <div class="score-counter"> at the bottom showing "Score: 0" — the starter JavaScript will update it automatically when the correct answer is clicked

Your Code

html
37 lines
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

Live Preview

Live Preview