A
Anonymous

Test Screen - Copy this React, Tailwind Component to your project

Para-implementar-una-interfaz-basada-en-las-preguntas-del-documento,-podemos-diseñar-una-pantalla-de-test-en-Next.js-con-Tailwind-CSS.-Aquí-está-una-descripción-de-cómo-sería:-Diseño-de-la-interfaz:-Encabezado:-Un-título-que-indique-el-propósito-del-test,-por-ejemplo,-"Test-de-Valores".-Una-breve-descripción-sobre-cómo-responder-las-preguntas-(instrucciones-claras).-Preguntas:-Cada-pregunta-se-muestra-en-una-tarjeta-(card)-individual.-Dentro-de-cada-tarjeta:-La-pregunta-principal-aparece-en-la-parte-superior,-con-un-texto-destacado.-Las-opciones-(A,-B,-C,-D)-se-presentan-como-botones-o-radios,-dispuestos-verticalmente.-Junto-a-cada-opción,-se-incluye-un-menú-desplegable-o-botones-de-prioridad-(1,-2,-3,-4)-para-que-el-usuario-asigne-valores-de-importancia.-Cada-opción-debe-ser-exclusiva:-no-se-puede-repetir-la-prioridad-en-una-misma-pregunta.-Footer:-Botones-de-navegación:-Un-botón-para-ir-a-la-pregunta-anterior.-Otro-para-avanzar-a-la-siguiente.-Al-final,-un-botón-para-enviar-el-test.-Validaciones:-Deshabilitar-el-botón-de-avanzar-hasta-que-todas-las-prioridades-de-la-pregunta-actual-estén-asignadas.

Prompt
Component Preview

About

TestScreen - A test interface featuring clear instructions, individual question cards, priority buttons, and navigation controls, built. Start coding now!

Share

Last updated 1 month ago