¿A quién le toca cada trabajo?

{QUIZ.map((qq, qi) => { const ans = quizAns[qi]; const isCorrect = ans === qq.correct; return (

{qq.q}

{Object.values(SOURCES).map(s => { const sel = ans === s.id; const showResult = !!ans; const isRight = s.id === qq.correct; return ( ); })}

); })}

Siguiente nivel · qué significa cada uno →

Estaciones con valor alto ({'>'}55 μg)

setHighCount(Number(e.target.value))} />

0 {highCount} de 20 10

{/* Dots viz: 20 stations in 10x2 grid */}

{Array.from({length:total}).map((_,i)=>(

))}

Promedio del valle

μg/m³ · aire {pmLabel(avg)}

); } // ─── Eq 2: data assimilation (model + obs weighting) ──────────── function tempColor(t){ if (t <= 16) return '#7DD3FC'; if (t <= 20) return '#0DCCC0'; if (t <= 24) return '#84BD45'; if (t <= 28) return '#FFB300'; return '#FF8A3D'; } function tempLabel(t){ if (t <= 16) return 'frío'; if (t <= 20) return 'fresco'; if (t <= 24) return 'templado'; if (t <= 28) return 'cálido'; return 'caluroso'; } function EqAssimilation(){ const [alpha, setAlpha] = React.useState(0.5); const model = 22; // °C predicho por WRF const obs = 26; // °C medido por sensores const result = model * (1-alpha) + obs * alpha; return ( Temperatura = Modelo · (1 − α) + Medición · α} footer="Cuando los sensores son confiables, subimos α (les damos más peso). Cuando hay pocos sensores o el modelo simula bien la física, bajamos α y confiamos más en el modelo. Lo mismo aplica para viento, humedad y demás variables meteorológicas." >

Modelo dice

{model}°

°C · WRF

Sensores miden

{obs}°

°C · estaciones

Peso de la medición · α = {alpha.toFixed(2)}

setAlpha(Number(e.target.value))} />

0 · creer al modelo 1 · creer al sensor

{/* Mix bar */}

Temperatura final

°C · ambiente {tempLabel(result)}

); } // ─── Eq 3: evolution over time ────────────────────────────────── function EqEvolution(){ const [pm, setPm] = React.useState(30); const [emis, setEmis] = React.useState(10); const [wind, setWind] = React.useState(5); // hour-ahead const next = Math.max(2, pm + emis - wind*2); return ( PM2.5_{próxima hora} = PM2.5_ahora + Emisión − Dispersión} footer="Por eso el viento es tu aliado: cada km/h de viento puede llevarse 2 μg/m³ por hora. Por eso los días de calma + inversión térmica son los peores." >

Ahora

{pm}

→

En 1 hora

pm ? '#FF8A3D' : '#84BD45', fontWeight:600, }}> {next > pm ? '↑ Empeorando' : next < pm ? '↓ Mejorando' : '= Sin cambio'} {' · '} cambia {Math.abs(next-pm).toFixed(0)} μg/m³

); } function EvolSlider({label, value, setValue, min, max, step, unit, color}){ return (

{label}

{value} {unit}

setValue(Number(e.target.value))} />

); } // ═══════════════════════════════════════════════════════════════ // NIVEL 4 — TEST DE COMPRENSIÓN (5-question quiz) // ═══════════════════════════════════════════════════════════════ const QUIZ_Q = [ { q:'Si llega una nube de polvo del Sahara hacia Colombia, ¿qué fuente te avisa primero?', opts:[ {id:'a', t:'Un sensor en el centro de Medellín'}, {id:'b', t:'CAMS · los satélites globales'}, {id:'c', t:'El modelo meteorológico WRF'}, ], correct:'b', why:'Los satélites de CAMS son los únicos que ven el aire del planeta entero. Detectan el polvo cuando aún está cruzando el Atlántico, días antes de que llegue.', }, { q:'Una mañana hay inversión térmica fuerte sobre el valle. ¿Qué le pasa al PM2.5?', opts:[ {id:'a', t:'Se queda atrapado y sube'}, {id:'b', t:'Sube al cielo y se dispersa'}, {id:'c', t:'No le pasa nada'}, ], correct:'a', why:'La inversión térmica es como una "tapa" de aire caliente encima del aire frío. El material particulado no puede subir y se queda atrapado entre las montañas — por eso las mañanas son la peor hora.', }, { q:'¿Por qué necesitamos sensores en tierra si ya tenemos satélites y modelos?', opts:[ {id:'a', t:'Para tener más logos en la página'}, {id:'b', t:'Porque sensores, modelos y satélites compiten'}, {id:'c', t:'Porque sólo los sensores miden el aire que respiramos de verdad'}, ], correct:'c', why:'Satélites y modelos hacen estimaciones. Los sensores son la "verdad" sobre el suelo: corrigen los modelos cuando se equivocan y miden lo que de verdad estás respirando ahora mismo.', }, { q:'El pronóstico dice 50 μg/m³ ± 8 μg/m³. ¿Qué significa el "± 8"?', opts:[ {id:'a', t:'Que el aire va a oscilar entre 42 y 58 a lo largo del día'}, {id:'b', t:'La incertidumbre: probablemente esté entre 42 y 58 μg/m³'}, {id:'c', t:'Que hay 8 sensores funcionando'}, ], correct:'b', why:'Ningún pronóstico es exacto. El "±" indica el margen de error: el SIATA está bastante seguro de que el valor real estará dentro de ese rango. Mientras más datos, menor el ±.', }, { q:'Es viernes a las 6 a.m. y el pronóstico de hoy dice PM2.5 alto en la mañana, bajo en la tarde. ¿Cuál es la mejor decisión para hacer ejercicio?', opts:[ {id:'a', t:'Salir a trotar ya mismo, antes de que empeore'}, {id:'b', t:'Esperar a la tarde, cuando baje'}, {id:'c', t:'No ejercitarse hoy'}, ], correct:'b', why:'El pronóstico te da exactamente esto: saber CUÁNDO el aire estará mejor. Esperar unas horas convierte un día "malo" en una ventana saludable — esa es la idea de pronosticar.', }, ]; function Level4Quiz({onNext, store, setStore}){ const [answers, setAnswers] = React.useState(store.quiz || {}); const [shown, setShown] = React.useState({}); const pick = (qi, aid) => { if(answers[qi]) return; const next = {...answers, [qi]: aid}; setAnswers(next); setStore({...store, quiz: next}); setTimeout(()=> setShown({...shown, [qi]: true}), 200); }; const allDone = QUIZ_Q.every((_,i) => answers[i]); const score = QUIZ_Q.filter((q,i) => answers[i] === q.correct).length; return (

{QUIZ_Q.map((q, i) => ( pick(i, aid)} /> ))}

{allDone && (

= 4 ? 'linear-gradient(135deg, rgba(132,189,69,0.15), rgba(13,204,192,0.08))' : 'linear-gradient(135deg, rgba(255,179,0,0.12), rgba(232,115,90,0.05))', border:'1px solid ' + (score >= 4 ? 'rgba(132,189,69,0.5)' : 'rgba(255,179,0,0.5)'), }}>

=4?'#84BD45':'#FFB300', letterSpacing:'0.24em', textTransform:'uppercase', }}> {score >= 4 ? 'Aprobaste' : 'Casi'}

=4?'#84BD45':'#FFB300', letterSpacing:'-0.03em', }}>{score} / 5

{score === 5 && '¡Perfecto! Tienes una comprensión completa del sistema.'} {score === 4 && 'Muy bien. Entiendes lo esencial — listo para el último nivel.'} {score === 3 && 'Bien. Revisa los niveles anteriores si quieres afinar, pero puedes seguir.'} {score <= 2 && 'Vale la pena volver a los niveles anteriores. El último nivel funciona mejor si tienes claros los conceptos.'}

Último nivel · ¡a pronosticar! →

)}

); } function QuizQuestion({num, q, answer, onPick}){ const showResult = !!answer; const isCorrect = answer === q.correct; return (

0{num}

{q.q}

{q.opts.map(o => { const sel = answer === o.id; const isRight = o.id === q.correct; return ( ); })}

{showResult && (

{isCorrect ? '✓ Correcto.' : 'Era ' + q.opts.find(o=>o.id===q.correct).t + '.'} {q.why}

)}

); } // ─────────────────────────────────────────────────────────────── // Shared LevelHead // ─────────────────────────────────────────────────────────────── function LevelHead({n, total, name, title, sub}){ return (

Nivel {n} / {total} {name}

{title}

{sub && (

{sub}

)}

); } Object.assign(window, { Level1Sources, Level2Meaning, Level3Math, Level4Quiz, LevelHead, SOURCES, });