Lo que vas a construir

Un juego de quiz interactivo con React. Tendra preguntas con 4 opciones cada una, feedback visual instantaneo (verde para correcto, rojo para incorrecto), contador de puntaje, y una pantalla de resultados al final. Aprenderas a manejar flujo de juego, estado de seleccion, y logica condicional para crear experiencias interactivas.

Paso 1: Pídele a una IA el quiz

Necesito un quiz interactivo en React con:
- Array de preguntas con 4 opciones cada una
- Solo una respuesta correcta por pregunta
- Feedback visual (verde correcto, rojo incorrecto)
- Contador de puntaje
- Botón siguiente pregunta
- Pantalla de resultados al final
- TypeScript y Tailwind CSS

Dame el código completo con 5 preguntas de ejemplo.

Estructura de datos

interface Question {
  id: number
  question: string
  options: string[]
  correctIndex: number
}

const questions: Question[] = [
  {
    id: 1,
    question: "¿Cuál es la capital de Francia?",
    options: ["Londres", "París", "Madrid", "Roma"],
    correctIndex: 1
  },
  // más preguntas...
]

Estado del quiz

const [currentIndex, setCurrentIndex] = useState(0)
const [score, setScore] = useState(0)
const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null)
const [showResult, setShowResult] = useState(false)

const currentQuestion = questions[currentIndex]

const handleAnswer = (index: number) => {
  setSelectedAnswer(index)
  if (index === currentQuestion.correctIndex) {
    setScore(score + 1)
  }
}

const nextQuestion = () => {
  if (currentIndex < questions.length - 1) {
    setCurrentIndex(currentIndex + 1)
    setSelectedAnswer(null)
  } else {
    setShowResult(true)
  }
}

Feedback visual

<button
  className={`p-3 rounded-lg ${
    selectedAnswer === index
      ? index === currentQuestion.correctIndex
        ? 'bg-green-500 text-white'
        : 'bg-red-500 text-white'
      : 'bg-gray-100 hover:bg-gray-200'
  }`}
  onClick={() => handleAnswer(index)}
  disabled={selectedAnswer !== null}
>
  {option}
</button>

Próximo paso

→ Timer con Notificaciones

Quiz Interactivo