import React, { useState } from 'react';
import { CheckCircle, XCircle, Info } from 'lucide-react';
const QuizApp = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [answers, setAnswers] = useState({});
const [showFeedback, setShowFeedback] = useState(false);
const [quizCompleted, setQuizCompleted] = useState(false);
const [score, setScore] = useState(0);
const questions = [
// ÁREA 1: CONOCIMIENTO (5 preguntas)
{
id: 1,
area: "Conocimiento",
question: "¿Cuáles son los 5 momentos de la higiene de manos según la OMS?",
options: [
"Antes de tocar al paciente, antes de una tarea limpia, después de exposición a fluidos, después de tocar al paciente, después de tocar el entorno",
"Al inicio del turno, antes de comer, después de ir al baño, al final del turno, antes de salir",
"Antes de procedimientos invasivos, durante la cirugía, después de la cirugía, al salir del quirófano, al finalizar la jornada",
"Cada hora durante el turno, antes de medicamentos, después de medicamentos, antes de documentar, después de documentar"
],
correct: 0,
feedback: "Los 5 momentos son: (1) Antes del contacto con el paciente, (2) Antes de realizar una tarea limpia/aséptica, (3) Después de exposición a fluidos corporales, (4) Después del contacto con el paciente, y (5) Después del contacto con el entorno del paciente."
},
{
id: 2,
area: "Conocimiento",
question: "¿Cuál es la duración recomendada por la OMS para el lavado clínico de manos?",
options: [
"20 a 30 segundos",
"30 a 40 segundos",
"40 a 60 segundos",
"60 a 90 segundos"
],
correct: 2,
feedback: "La OMS recomienda una duración de 40 a 60 segundos para el lavado clínico de manos con agua y jabón antiséptico."
},
{
id: 3,
area: "Conocimiento",
question: "¿Qué porcentaje mínimo de alcohol debe contener un desinfectante de manos para ser efectivo?",
options: [
"40% a 50%",
"50% a 60%",
"65% a 80%",
"85% a 95%"
],
correct: 2,
feedback: "Los desinfectantes de manos deben contener entre 65% y 80% de alcohol para ser efectivos en la eliminación de microorganismos."
},
{
id: 4,
area: "Conocimiento",
question: "¿Por qué la higiene de manos es importante en la lucha contra la resistencia antimicrobiana (RAM)?",
options: [
"Porque elimina solo bacterias resistentes",
"Porque reduce el riesgo de infecciones y es una medida preventiva económica y eficaz",
"Porque sustituye el uso de antibióticos",
"Porque aumenta la efectividad de los antibióticos"
],
correct: 1,
feedback: "La higiene de manos es una medida económica, sencilla y eficaz para reducir el riesgo de infecciones, y hace parte de las recomendaciones en la lucha contra la RAM, una de las 10 principales amenazas para la salud pública."
},
{
id: 5,
area: "Conocimiento",
question: "¿Qué elimina o reduce la higiene de manos en entornos clínicos?",
options: [
"Solo la flora residente",
"Solo la flora transitoria",
"Elimina la flora transitoria y reduce la flora residente",
"Ninguna de las anteriores"
],
correct: 2,
feedback: "Tanto el lavado clínico como la desinfección alcohólica eliminan la flora transitoria (microorganismos adquiridos por contacto) y reducen la flora residente (microorganismos habituales de la piel), minimizando el riesgo de infecciones."
},
// ÁREA 2: HABILIDADES TÉCNICAS (5 preguntas)
{
id: 6,
area: "Habilidades Técnicas",
question: "¿Qué debe hacerse ANTES de iniciar cualquier técnica de higiene de manos?",
options: [
"Aplicar jabón inmediatamente",
"Retirar anillos, pulseras, subir mangas y verificar que las uñas estén cortas y limpias",
"Mojar las manos con agua caliente",
"Dispensar papel desechable"
],
correct: 1,
feedback: "Antes de iniciar, es fundamental retirar anillos y pulseras, subir las mangas hasta el antebrazo, y asegurar que las uñas estén cortas, limpias, sin esmalte y sin uñas artificiales."
},
{
id: 7,
area: "Habilidades Técnicas",
question: "En el lavado clínico de manos, ¿cuándo se debe aplicar el jabón?",
options: [
"Antes de mojar las manos",
"Después de mojar las manos hasta las muñecas",
"Durante el enjuague",
"Al final del procedimiento"
],
correct: 1,
feedback: "Primero se deben mojar las manos completamente hasta las muñecas, y luego aplicar 1 a 2 pulsaciones de jabón líquido sobre la palma. Esto facilita la distribución uniforme del producto."
},
{
id: 8,
area: "Habilidades Técnicas",
question: "¿Cuál es el orden correcto para secar las manos después del lavado clínico?",
options: [
"De la muñeca hacia los dedos",
"De los dedos hacia la zona del carpo (muñeca) sin contaminar",
"Primero el dorso, luego la palma",
"No importa el orden"
],
correct: 1,
feedback: "Se debe secar dando toques desde los dedos hasta la zona del carpo sin contaminar, usando distintas caras del papel para secar palma, dorso y zona carpiana."
},
{
id: 9,
area: "Habilidades Técnicas",
question: "¿Cuánto producto de alcohol gel se debe aplicar para una desinfección efectiva?",
options: [
"1 a 2 gotas",
"3 a 5 ml (aproximadamente 1-2 pulsaciones)",
"10 ml o más",
"La cantidad no es importante"
],
correct: 1,
feedback: "Se deben aplicar entre 3 a 5 ml de solución alcohólica (aproximadamente una cucharadita o 1-2 pulsaciones del dispensador) para cubrir todas las superficies de las manos."
},
{
id: 10,
area: "Habilidades Técnicas",
question: "Después de usar alcohol gel, ¿qué se debe hacer?",
options: [
"Secar con toalla de papel",
"Secar con aire caliente",
"Dejar que se evapore completamente sin secar",
"Enjuagar con agua"
],
correct: 2,
feedback: "No se deben secar las manos después del uso de alcohol gel. El producto debe evaporarse completamente para asegurar su eficacia. Una vez secas naturalmente, las manos son seguras."
},
// ÁREA 3: DISPOSICIÓN A LA ACCIÓN (5 preguntas)
{
id: 11,
area: "Disposición a la Acción",
question: "¿En cuál de estas situaciones realizarías higiene de manos ANTES del contacto?",
options: [
"Después de tocar una superficie contaminada",
"Antes de administrar un medicamento al paciente",
"Después de retirar guantes",
"Al finalizar el turno"
],
correct: 1,
feedback: "Se debe realizar higiene de manos ANTES de tareas limpias/asépticas como administrar medicamentos, antes del contacto con el paciente, y antes de procedimientos invasivos."
},
{
id: 12,
area: "Disposición a la Acción",
question: "Si tus manos están visiblemente sucias con sangre, ¿qué método de higiene debes usar?",
options: [
"Alcohol gel únicamente",
"Lavado clínico con agua y jabón",
"Toallas húmedas desinfectantes",
"Cualquiera de las anteriores"
],
correct: 1,
feedback: "Cuando las manos están visiblemente sucias o contaminadas con fluidos corporales, se debe usar lavado clínico con agua y jabón. El alcohol gel es para manos visiblemente limpias."
},
{
id: 13,
area: "Disposición a la Acción",
question: "¿Qué harías si observas a un compañero que no realiza higiene de manos antes de atender a un paciente?",
options: [
"No hacer nada, no es mi responsabilidad",
"Recordarle de manera respetuosa la importancia de la higiene de manos",
"Reportarlo inmediatamente a las autoridades",
"Esperar a que termine para hablar con él"
],
correct: 1,
feedback: "La seguridad del paciente es responsabilidad de todo el equipo. Es apropiado recordar de manera respetuosa y constructiva la importancia de la higiene de manos a los colegas."
},
{
id: 14,
area: "Disposición a la Acción",
question: "Durante un turno clínico muy ocupado, ¿cuál sería tu actitud respecto a la higiene de manos?",
options: [
"La saltaría ocasionalmente por falta de tiempo",
"Solo la realizaría antes de procedimientos invasivos",
"La mantendría en los 5 momentos, sin excepciones",
"Usaría solo alcohol gel para ahorrar tiempo"
],
correct: 2,
feedback: "La higiene de manos debe mantenerse en los 5 momentos establecidos por la OMS sin excepciones, independientemente de la carga de trabajo. Es la medida más efectiva para prevenir infecciones."
},
{
id: 15,
area: "Disposición a la Acción",
question: "¿Por qué es importante NO usar uñas artificiales, esmalte o tener uñas largas en el ámbito clínico?",
options: [
"Por razones estéticas únicamente",
"Porque dificultan el lavado y pueden albergar microorganismos que causan infecciones",
"Porque pueden dañar los guantes",
"No es realmente importante"
],
correct: 1,
feedback: "Las uñas artificiales, el esmalte y las uñas largas pueden albergar microorganismos patógenos difíciles de eliminar, aumentando el riesgo de transmisión de infecciones a los pacientes."
}
];
const handleAnswer = (optionIndex) => {
const isCorrect = optionIndex === questions[currentQuestion].correct;
setAnswers({
...answers,
[currentQuestion]: {
selected: optionIndex,
correct: isCorrect
}
});
setShowFeedback(true);
if (isCorrect) {
setScore(score + 1);
}
};
const nextQuestion = () => {
if (currentQuestion < questions.length - 1) {
setCurrentQuestion(currentQuestion + 1);
setShowFeedback(false);
} else {
setQuizCompleted(true);
}
};
const restartQuiz = () => {
setCurrentQuestion(0);
setAnswers({});
setShowFeedback(false);
setQuizCompleted(false);
setScore(0);
};
const getScoreLevel = () => {
const percentage = (score / questions.length) * 100;
if (percentage >= 85) return { level: "Excelente", color: "text-green-600", message: "Demuestras un dominio sólido de los conceptos de higiene de manos." };
if (percentage >= 70) return { level: "Bueno", color: "text-blue-600", message: "Tienes una buena base, pero hay áreas que puedes reforzar." };
if (percentage >= 50) return { level: "Aceptable", color: "text-yellow-600", message: "Conoces algunos conceptos básicos. Te recomendamos revisar el material nuevamente." };
return { level: "Necesita mejorar", color: "text-red-600", message: "Es importante que revises el material de estudio antes de continuar." };
};
if (quizCompleted) {
const scoreInfo = getScoreLevel();
return (
);
}
const currentQ = questions[currentQuestion];
const progress = ((currentQuestion + 1) / questions.length) * 100;
return (
);
};
export default QuizApp;
¡Cuestionario Completado!
Has finalizado el cuestionario diagnóstico
Tu puntuación
{score}/{questions.length}
{scoreInfo.level}
{scoreInfo.message}
Resumen por áreas:
{["Conocimiento", "Habilidades Técnicas", "Disposición a la Acción"].map((area, idx) => { const areaQuestions = questions.filter(q => q.area === area); const areaScore = areaQuestions.filter((q, i) => answers[questions.indexOf(q)]?.correct ).length; return (
{area}
{areaScore}/5
);
})}
{/* Header */}
{/* Progress Bar */}
{/* Question Content */}
)}
{showFeedback && (
)}
{/* Info Box */}
Cuestionario Diagnóstico
Higiene de Manos
{currentQ.area}
Pregunta {currentQuestion + 1} de {questions.length}
{currentQ.question}
{currentQ.options.map((option, index) => {
const isSelected = answers[currentQuestion]?.selected === index;
const isCorrect = index === currentQ.correct;
const showResult = showFeedback && isSelected;
return (
);
})}
{showFeedback && (
Retroalimentación:
{currentQ.feedback}
💡 Este cuestionario no afecta tu calificación final. Su propósito es identificar tu nivel inicial de conocimientos.