SKIP TO CONTENT

Tu Primera App de Quiz Interactivo

beginner~15 min0/4 pasos

Tu Primera App de Quiz Interactivo

Una clase magistral es de un solo sentido. Un quiz es una conversación.

Los estudiantes que se autoevalúan retienen un 50% más que quienes simplemente releen el material. En esta lección construirás una app de quiz real y funcional — con una pregunta, opciones de respuesta que se iluminan en verde o rojo al hacer clic, un contador de puntuación y un mensaje de resultados. Funciona en el navegador. Sin frameworks, sin backend. Solo HTML + un toque de JavaScript.

Instrucciones

1

Agrega un <h1> con el título de tu quiz — ¿qué tema está evaluando este quiz?

Pista: Prueba: `<h1 class="text-3xl font-bold text-white mb-2">Verificación Rápida de Conocimientos</h1>`

2

Agrega un <div class="question"> que contenga el texto de la pregunta del quiz

3

Agrega al menos 3 elementos <button class="answer-btn"> como respuestas. Marca la correcta con data-correct="true"

4

Agrega un <div class="score-counter"> al final que muestre «Score: 0» — el JavaScript inicial lo actualizará automáticamente cuando se haga clic en la respuesta correcta

Tu código

html
37 líneas
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

Vista previa en vivo

Vista previa en vivo