prl-ud1.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevención Riesgos Laborales</title>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js>"></script>
<style>
:root {
--btn: linear-gradient(90deg, #4b79a1, #283e51);
--ok: #4caf50;
--bad: #e53935;
/* Colores pastel para las opciones */
--pastel1: #ffecb3;
--pastel2: #dcedc8;
--pastel3: #bbdefb;
--pastel4: #ffe0e0;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
font-family: "Segoe UI", sans-serif;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.6s;
}
/* ---------------------- APP ---------------------- */
#app {
width: 90%;
max-width: 900px;
/*background: white;*/
padding: 30px;
border-radius: 20px;
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
text-align: center;
}
/* ---------------------- TÍTULO ---------------------- */
h1 {
margin-top: 0;
font-size: clamp(1.2rem, 3vw, 1.6rem);
color: #444;
font-weight: 600;
}
/* ---------------------- PREGUNTA ---------------------- */
#pregunta {
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 800;
margin: 15px 0 15px 0;
min-height: 40px;
color:tomato; /* COLOR LLAMATIVO */
}
/* ---------------------- OPCIONES ---------------------- */
.opcion {
width: 100%;
max-width: 650px;
margin: 12px auto;
padding: 18px;
font-size: 1.2rem;
border-radius: 14px;
cursor: pointer;
border: 2px solid transparent;
transition: 0.2s;
/* colores pastel aleatorios */
background: var(--pastel1);
}
.opcion:hover {
transform: scale(1.03);
filter: brightness(0.95);
}
.correcta {
background: var(--ok) !important;
color: white !important;
border-color: #2e7d32;
}
.incorrecta {
background: var(--bad) !important;
color: white !important;
border-color: #b71c1c;
}
/* ---------------------- BOTÓN ---------------------- */
button {
border: none;
padding: 14px 30px;
border-radius: 12px;
color: white;
font-size: 1.1rem;
cursor: pointer;
background: var(--btn);
margin-top: 20px;
}
/* ---------------------- TIEMPO ---------------------- */
#tiempoBar {
width: 100%;
height: 10px;
background: #ddd;
border-radius: 10px;
margin-top: 25px;
overflow: hidden;
display: none;
}
#tiempo {
height: 10px;
width: 100%;
background: #ff5f6d;
transition: width 0.1s linear;
}
</style>
</head>
<body>
<div id="app">
<h1>Prevención Riesgos Laborales</h1>
<div id="pregunta">Repaso sobre PRL</div>
<div id="opciones"></div>
<button onclick="nuevaPregunta()">Nueva pregunta</button>
<div id="tiempoBar">
<div id="tiempo"></div>
</div>
<br>
<label style="margin-top:10px; font-size:1.1rem; display:flex; gap:10px; align-items:center; justify-content:center;">
<input type="checkbox" id="tiempoToggle" checked>
Jugar con tiempo
</label>
</div>
<script>
const fondos = [
"#fce4ec", "#e3f2fd", "#e8f5e9", "#fff3e0",
"#ede7f6", "#f1f8e9", "#e0f7fa", "#f9fbe7"
];
const pastelOpciones = [
"var(--pastel1)",
"var(--pastel2)",
"var(--pastel3)",
"var(--pastel4)"
];
const preguntas = [
// ===========================
// 🟦 TEMA 1 — SALUD Y PRL
// ===========================
{p:"¿Cómo define la OMS la salud?", opciones:["Ausencia de dolor","Bienestar físico, psíquico y social","Capacidad de trabajar","Estar libre de estrés"], correcta:1},
{p:"La salud laboral implica...", opciones:["Ganar más dinero","Bienestar en el entorno de trabajo","Aumentar producción","Trabajar más horas"], correcta:1},
{p:"La PRL garantiza...", opciones:["La salud física, mental y social","Solo el estado físico","Que no haya sanciones","Que no se enferme nadie"], correcta:0},
{p:"La PRL actúa mediante...", opciones:["Investigaciones externas","Medidas preventivas y formativas","Sanciones","Cambios salariales"], correcta:1},
{p:"La vigilancia de la salud debe ser...", opciones:["Pública","Obligatoria sin control","Confidencial","Elegida por el empresario"], correcta:2},
{p:"La salud incluye aspectos...", opciones:["Físicos, mentales y sociales","Solo físicos","Solo sociales","Solo mentales"], correcta:0},
{p:"Una condición necesaria de salud laboral es...", opciones:["Buena organización del trabajo","Hacer horas extra","Competencia entre compañeros","Carga física excesiva"], correcta:0},
{p:"La PRL promueve una cultura basada en...", opciones:["Evitar formación","Responsabilidad y prevención","Ignorar riesgos","Competitividad extrema"], correcta:1},
{p:"Uno de los objetivos de la PRL es...", opciones:["Reducir producción","Modificar salarios","Prevenir accidentes","Cambiar equipos constantemente"], correcta:2},
{p:"La salud mental en el trabajo se relaciona con...", opciones:["Conflictos no resueltos","Ambiente saludable y apoyo","Cargas extremas","No recibir formación"], correcta:1},
// ===========================
// 🟧 TEMA 2 — PREVENCIÓN Y PROTECCIÓN
// ===========================
{p:"La prevención busca...", opciones:["Evitar riesgos antes de que ocurran","Aumentar ritmo de trabajo","Comprar más EPIs","Controlar horarios"], correcta:0},
{p:"La protección busca...", opciones:["Evitar el riesgo en origen","Reducir las consecuencias del riesgo","Cambiar la jornada laboral","Aumentar productividad"], correcta:1},
{p:"Un ejemplo de medida preventiva es...", opciones:["Planificar el trabajo","Ponerse casco","Llevar guantes","Actuar solo al final"], correcta:0},
{p:"Un ejemplo de protección individual es...", opciones:["Resguardos","Barandillas","Casco","Ventilación"], correcta:2},
{p:"Un ejemplo de protección colectiva es...", opciones:["Mascarilla","Guantes","Resguardos en máquinas","Botas"], correcta:2},
{p:"La formación preventiva es una medida de...", opciones:["Protección","Prevención","Producción","Sanción"], correcta:1},
{p:"La señalización es una medida de...", opciones:["Prevención","Protección colectiva","Protección individual","Producción"], correcta:0},
{p:"Evitar un riesgo es...", opciones:["Modificar el proceso inseguro","Usar EPIs","Trabajar igual","Retirar EPIs"], correcta:0},
{p:"Cuando el riesgo no puede evitarse, debe...", opciones:["Ignorarse","Inventarse uno nuevo","Evaluarse y controlarse","Ocultarse"], correcta:2},
{p:"El orden lógico de prevención es...", opciones:["Evaluar → Evitar → EPI","Evitar → Evaluar → Colectiva → EPI","EPI → Evitar → Evaluar","Colectiva → EPI → Evitar"], correcta:1},
// ===========================
// 🟥 TEMA 3 — RIESGOS LABORALES
// ===========================
{p:"Un riesgo laboral es...", opciones:["Un daño ya ocurrido","Una probabilidad de que ocurra daño","Un EPI roto","Una sanción"], correcta:1},
{p:"Un riesgo físico es...", opciones:["Ruido","Gérmenes","Estrés","Productos químicos"], correcta:0},
{p:"Un riesgo químico es...", opciones:["Ruido","Vibraciones","Gases y vapores","Posturas forzadas"], correcta:2},
{p:"Un riesgo biológico es...", opciones:["Polvo","Virus, bacterias y hongos","Cargas pesadas","Radiación"], correcta:1},
{p:"Un riesgo ergonómico es...", opciones:["Gases tóxicos","Posturas forzadas","Estrés","Rayos UV"], correcta:1},
{p:"Un riesgo psicosocial es...", opciones:["Presión de tiempo","Ruido","Productos corrosivos","Herramientas rotas"], correcta:0},
{p:"La manipulación de cargas produce riesgos...", opciones:["Ergonómicos","Biológicos","Psicológicos","Químicos"], correcta:0},
{p:"El calor extremo es un riesgo...", opciones:["Físico","Biológico","Ergonómico","Psicosocial"], correcta:0},
{p:"Los disolventes generan riesgo...", opciones:["Físico","Químico","Ergonómico","Psicosocial"], correcta:1},
{p:"El trabajo aislado puede generar riesgo...", opciones:["Físico","Psicosocial","Ergonómico","Químico"], correcta:1},
// ===========================
// 🟩 TEMA 4 — DAÑOS Y ACCIDENTES
// ===========================
{p:"Un daño profesional es...", opciones:["Un despido","Una lesión derivada del trabajo","Una baja voluntaria","Un retraso"], correcta:1},
{p:"Un accidente laboral es...", opciones:["Suceso imprevisto por causa del trabajo","Un malentendido","Una multa","Un día libre"], correcta:0},
{p:"Un accidente in itinere ocurre...", opciones:["En descanso","En vacaciones","Al ir o volver del trabajo","Comiendo"], correcta:2},
{p:"Un ejemplo de accidente laboral es...", opciones:["Corte con máquina","Gripe","Resfriado","Dolor de cabeza"], correcta:0},
{p:"Una enfermedad profesional es...", opciones:["Lesión por caída puntual","Exposición prolongada a agentes del trabajo","Torcedura fuera del trabajo","Accidente de tráfico privado"], correcta:1},
{p:"Una enfermedad profesional debe...", opciones:["Estar en el RD 1299/2006","Depender del clima","Ser un accidente","Ocurrir solo en oficinas"], correcta:0},
{p:"Una fractura por caída es un...", opciones:["Riesgo","Daño profesional","EPI","Ruido"], correcta:1},
{p:"El estrés crónico puede ser un...", opciones:["Daño profesional","Accidente in itinere","EPI","Riesgo químico"], correcta:0},
{p:"Una intoxicación por vapores es...", opciones:["Accidente químico","Daño profesional","EPI defectuoso","Señalización"], correcta:1},
{p:"La fatiga laboral puede considerarse...", opciones:["Daño profesional","Accidente","EPI","Prevención"], correcta:0},
// ===========================
// 🟨 TEMA 5 — ORDEN, LIMPIEZA Y MANTENIMIENTO
// ===========================
{p:"El orden y la limpieza evitan...", opciones:["Sanciones","Resbalones y cortes","Evaluaciones","Cursos"], correcta:1},
{p:"Un taller con herramientas tiradas provoca...", opciones:["Prevención","Mayor riesgo","Protección colectiva","Orden"], correcta:1},
{p:"La limpieza facilita...", opciones:["Evitar normas","Localizar herramientas","Eliminar EPIs","Aumentar ruido"], correcta:1},
{p:"El mantenimiento preventivo...", opciones:["Evita fallos y accidentes","Aumenta incendios","No sirve","Es opcional"], correcta:0},
{p:"Una máquina sin engrase puede...", opciones:["Mejorar rendimiento","Provocar un incendio","Ser más segura","Ser un EPI"], correcta:1},
{p:"Revisar herramientas evita...", opciones:["Entradas tarde","Fallas y lesiones","Uso de EPIs","Señalización"], correcta:1},
{p:"El mal almacenamiento provoca...", opciones:["Orden","Riesgos de caída y golpes","Aire limpio","Protección"], correcta:1},
{p:"Una instalación eléctrica sin revisar es un riesgo...", opciones:["Ergonómico","Eléctrico","Psicosocial","Biológico"], correcta:1},
{p:"Las zonas húmedas sin señalizar provocan...", opciones:["Más producción","Resbalones","Subida de salario","Mejor clima"], correcta:1},
{p:"El mantenimiento de EPIs garantiza...", opciones:["Caducidad","Seguridad","Menor higiene","Menor control"], correcta:1},
// ===========================
// 🟪 TEMA 6 — DERECHOS Y OBLIGACIONES DEL TRABAJADOR
// ===========================
{p:"El trabajador tiene derecho a...", opciones:["Desinformación","Formación en PRL","No usar EPIs","Evitar normas"], correcta:1},
{p:"El trabajador está obligado a...", opciones:["Usar EPIs correctamente","Poner sanciones","Aumentar ritmo","Formar al jefe"], correcta:0},
{p:"El trabajador debe informar de...", opciones:["Riesgos detectados","Vacaciones","Su hobby","Clima"], correcta:0},
{p:"El trabajador debe cooperar con...", opciones:["Sus amigos","La empresa en seguridad","La competencia","Nadie"], correcta:1},
{p:"El derecho a interrumpir la actividad aplica si...", opciones:["Hay riesgo grave e inminente","El jefe lo dice","Se quiere descansar","Hay mala iluminación"], correcta:0},
{p:"No usar un EPI es...", opciones:["Obligación","Incumplimiento","Prevención","Protección colectiva"], correcta:1},
{p:"El trabajador debe velar por...", opciones:["Su seguridad y la de otros","La caja registradora","Solo su puesto","Las sanciones"], correcta:0},
{p:"No comunicar un riesgo significa...", opciones:["Cumplimiento","Incumplimiento","Prevención","Protección"], correcta:1},
{p:"El trabajador debe usar máquinas...", opciones:["De forma adecuada","Solo cuando quiera","Sin formación","Sin protección"], correcta:1},
{p:"Cooperar en PRL implica...", opciones:["No usar EPIs","Colaborar para mejorar seguridad","Poner impedimentos","Ignorar normas"], correcta:1},
// ===========================
// 🟫 TEMA 7 — OBLIGACIONES DEL EMPRESARIO
// ===========================
{p:"El empresario debe...", opciones:["Garantizar condiciones seguras","Poner música fuerte","Evitar formación","No revisar equipos"], correcta:0},
{p:"Los EPIs deben ser...", opciones:["Pagados por el trabajador","Proporcionados gratuitamente","Opcionales","Sustituidos por trabajo extra"], correcta:1},
{p:"El empresario debe dar formación...", opciones:["Solo si hay tiempo","Adaptada al puesto","Nunca","Solo teórica"], correcta:1},
{p:"El empresario debe evaluar...", opciones:["Salarios","Riesgos del puesto","Vacaciones","Rendimiento emocional"], correcta:1},
{p:"La participación en prevención se hace mediante...", opciones:["Comités y delegados de seguridad","Amigos","Visitas externas","Clientes"], correcta:0},
{p:"La vigilancia de la salud debe ser...", opciones:["Visible a todos","Confidencial","Opcional para el jefe","Compartida en grupo"], correcta:1},
{p:"El empresario debe mantener...", opciones:["Equipos en condiciones","Máquinas sin revisar","Cables sueltos","Herramientas rotas"], correcta:0},
{p:"La señalización es responsabilidad de...", opciones:["El trabajador","El empresario","Los clientes","Los proveedores"], correcta:1},
{p:"Un empresario debe actuar ante un riesgo...", opciones:["Ignorarlo","Corregirlo","Dejarlo crecer","Anotarlo y ya"], correcta:1},
{p:"El empresario debe sustituir procesos inseguros por...", opciones:["Más rápidos","Procesos seguros","Más peligrosos","Más baratos"], correcta:1}
];
let tiempoRestante = 0;
let intervalo;
/* ---------- Fondo aleatorio ---------- */
function cambiarFondo() {
document.body.style.background = fondos[Math.floor(Math.random()*fondos.length)];
}
/* ---------- Nueva pregunta ---------- */
function nuevaPregunta() {
cambiarFondo();
clearInterval(intervalo);
const usarTiempo = document.getElementById("tiempoToggle").checked;
document.getElementById("tiempoBar").style.display = usarTiempo ? "block" : "none";
if (usarTiempo) iniciarTiempo();
const q = preguntas[Math.floor(Math.random()*preguntas.length)];
document.getElementById("pregunta").innerHTML = q.p;
const cont = document.getElementById("opciones");
cont.innerHTML = "";
q.opciones.forEach((texto, index) => {
const div = document.createElement("div");
div.className = "opcion";
/* Fondo pastel aleatorio para cada opción */
div.style.background = pastelOpciones[Math.floor(Math.random()*pastelOpciones.length)];
div.innerHTML = `${["A","B","C","D"][index]}. ${texto}`;
div.onclick = () => verificarRespuesta(div, index, q.correcta);
cont.appendChild(div);
});
}
/* ---------- Verificación ---------- */
function verificarRespuesta(elemento, index, correcta) {
const opciones = document.querySelectorAll(".opcion");
opciones.forEach(o => o.style.pointerEvents = "none");
if (index === correcta) {
elemento.classList.add("correcta");
lanzarConfeti();
} else {
elemento.classList.add("incorrecta");
opciones[correcta].classList.add("correcta");
}
clearInterval(intervalo);
setTimeout(() => nuevaPregunta(), 2500);
}
/* ---------- Confeti ---------- */
function lanzarConfeti() {
confetti({
particleCount: 80,
spread: 70,
origin: { y: 0.6 }
});
}
/* ---------- Tiempo ---------- */
function iniciarTiempo() {
tiempoRestante = 100;
const barra = document.getElementById("tiempo");
intervalo = setInterval(() => {
tiempoRestante -= 1;
barra.style.width = tiempoRestante + "%";
if (tiempoRestante <= 0) {
clearInterval(intervalo);
barra.style.width = "0%";
}
}, 200); /* 100 pasos equivale a 10sg, bajo a 200 */
}
</script>
</body>
</html>