SKIP TO CONTENT

O Seu Primeiro App de Quiz Interativo

beginner~15 min0/4 etapas

O Seu Primeiro App de Quiz Interativo

Uma aula é de mão única. Um quiz é uma conversa.

Alunos que se testam retêm 50% mais do que aqueles que apenas releem o conteúdo. Nesta lição, você vai construir um app de quiz real e clicável — com uma pergunta, opções de resposta que ficam verdes ou vermelhas ao clicar, um contador de pontuação e uma mensagem de resultado. Funciona no navegador. Sem frameworks, sem backend. Apenas HTML + um toque de JavaScript.

Instruções

1

Adicione um <h1> com o título do seu quiz — qual tema este quiz está testando?

Dica: Tente: `<h1 class="text-3xl font-bold text-white mb-2">Verificação Rápida de Conhecimento</h1>`

2

Adicione um <div class="question"> contendo o texto da pergunta do quiz

3

Adicione pelo menos 3 elementos <button class="answer-btn"> de resposta. Marque a correta com data-correct="true"

4

Adicione um <div class="score-counter"> no final mostrando "Score: 0" — o JavaScript inicial irá atualizá-lo automaticamente quando a resposta correta for clicada

Seu Código

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

Pré-visualização ao Vivo

Pré-visualização ao Vivo