Quiz Interface - Copy this React, Tailwind Component to your project

Genera una interfaz con palabras en español ### **Propósito:** Centralizar todos los cuestionarios disponibles para el alumno. ### **Elementos:** 1. **Encabezado:** Título: "Cuestionarios Disponibles." Filtro por módulo. 2. **Lista de Cuestionarios:** Tarjetas con: Título del Cuestionario. Estado: Completo/No Iniciado. Fecha límite (si aplica). Botón "Iniciar." 3. **Vista de Cuestionario (Al Seleccionar):** Preguntas presentadas una por una: Formatos: Opción múltiple, selección única, respuesta corta. Barra de Progreso: Indica cuántas preguntas han sido respondidas. Botón "Enviar." 4. **Retroalimentación:** Resultado final al completar el cuestionario: Calificación. Respuestas correctas e incorrectas. y usa esta paleta de colores ### **Colores Primarios (Uso Principal)** **Azul Claro (#4A90E2):** Representa confianza, estabilidad y calma. Ideal para encabezados, botones principales y elementos destacados. **Blanco (#FFFFFF):** Fondo principal para mantener un diseño limpio y espacioso. ### **Colores Secundarios (Soporte y Contraste)** **Gris Claro (#F5F5F5):** Para fondos secundarios (paneles, tarjetas) y separación visual. **Gris Medio (#9E9E9E):** Para textos secundarios o explicaciones. ### **Colores de Resaltado (Llamar la Atención)** **Verde (#4CAF50):** Indicadores de progreso o estados positivos (completado, éxito). **Amarillo (#FFC107):** Para advertencias o información importante. **Rojo (#F44336):** Para errores o estados críticos. ### **Colores para Acciones e Interactividad** **Naranja (#FF9800):** Botones de llamada a la acción secundaria o elementos interactivos destacados. **Cian (#00BCD4):** Para enlaces o detalles interactivos relacionados con actividades. ### **Colores para Dimensiones del Aprendizaje (Codificación Visual)** Cada dimensión puede tener un color asociado para facilitar la identificación rápida: **Procesamiento:** Azul (#4A90E2). **Percepción:** Verde (#4CAF50). **Entrada de Información:** Amarillo (#FFC107). **Comprensión:** Naranja (#FF9800). **Interacción Social:** Cian (#00BCD4). ### **Ejemplo de Aplicación en la Plataforma** **Fondo Principal:** Blanco (#FFFFFF) para no saturar al usuario. **Paneles o Tarjetas:** Gris Claro (#F5F5F5) con bordes sutiles. **Texto Principal:** Gris Oscuro (#333333) para buen contraste. **Botones Principales:** Azul Claro (#4A90E2) con texto blanco. **Indicadores de Estado:** Verde para progreso (barra de avance). Rojo para errores (mensaje de validación). Amarillo para advertencias (actividades pendientes). **Módulos de Aprendizaje:** Los colores de las dimensiones pueden usarse como etiquetas o barras laterales en los objetos de aprendizaje.