<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Átomo | Museo de Física Nuclear</title>
<style>
:root {
--bg: #0b1119;
--panel: #131e2a;
--cream: #f0eadc;
--gold: #dfb873;
--muted: #aab6c3;
--line: #344252;
}
* { box-sizing: border-box; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--cream);
font-family: Georgia, serif;
}
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(11,17,25,.96);
border-bottom: 1px solid var(--line);
padding: 15px 5%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.logo {
color: var(--gold);
font: bold 13px Arial, sans-serif;
letter-spacing: 2px;
}
nav { display: flex; gap: 14px; flex-wrap: wrap; }
nav a {
font: 11px Arial, sans-serif;
text-decoration: none;
color: var(--muted);
}
nav a:hover { color: var(--gold); }
.hero {
min-height: 570px;
padding: 95px 8% 70px;
display: flex;
flex-direction: column;
justify-content: center;
background:
radial-gradient(ellipse at 85% 35%, #34404c 0%, transparent 35%),
linear-gradient(135deg, #101a27, #0b1119 70%);
}
.kicker {
color: var(--gold);
font: 11px Arial, sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
}
h1 {
font-size: clamp(48px, 10vw, 94px);
font-weight: normal;
letter-spacing: -3px;
line-height: .98;
max-width: 850px;
margin: 27px 0;
}
h2 { font-size: clamp(30px, 6vw, 49px); font-weight: normal; }
h3 { font-size: 24px; font-weight: normal; }
p, li {
line-height: 1.8;
color: var(--muted);
}
.hero p { max-width: 570px; font-size: 17px; }
.btn {
display: inline-block;
background: var(--gold);
color: #101720;
border: 1px solid var(--gold);
padding: 13px 18px;
text-decoration: none;
font: bold 12px Arial, sans-serif;
margin: 7px 7px 7px 0;
}
.btn.secondary {
background: transparent;
color: var(--cream);
border-color: var(--line);
}
section { padding: 65px 7%; scroll-margin-top: 75px; }
.light {
background: var(--cream);
color: #172331;
}
.light p, .light li { color: #53606a; }
.light .kicker { color: #8b652f; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
gap: 16px;
margin-top: 30px;
}
.card {
border: 1px solid var(--line);
padding: 23px;
background: var(--panel);
}
.light .card {
background: #f8f4eb;
border-color: #d8cebd;
}
.number {
color: var(--gold);
font: 11px Arial, sans-serif;
letter-spacing: 2px;
}
.light .number { color: #8b652f; }
.card p { font-size: 14px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 25px 0; }
.light .rule { border-color: #d8cebd; }
.formula {
border-left: 3px solid var(--gold);
padding: 18px;
margin: 20px 0;
background: rgba(223,184,115,.08);
font-size: clamp(23px,5vw,37px);
}
.small { font: 12px/1.7 Arial, sans-serif; color: var(--muted); }
.light .small { color: #59636c; }
label { display: block; margin: 15px 0 7px; }
input[type=number], input[type=range] { width: 100%; }
input[type=number] {
padding: 12px;
background: #0b1119;
color: white;
border: 1px solid var(--line);
border-radius: 4px;
}
.result {
background: #202f3e;
padding: 18px;
margin-top: 15px;
overflow-wrap: anywhere;
}
.result strong { color: var(--gold); font-size: 22px; }
.light .result { background: #e6dece; }
.light .result strong { color: #775324; }
.timeline { border-left: 2px solid var(--gold); margin: 30px 0; }
.event {
margin-left: 20px;
margin-bottom: 14px;
padding: 17px;
background: var(--panel);
border: 1px solid var(--line);
}
.event button {
background: none;
color: var(--gold);
border: none;
padding: 8px 0;
text-align: left;
font-size: 19px;
}
.event-detail { display: none; }
.event-detail.open { display: block; }
.diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
flex-wrap: wrap;
padding: 20px 0;
}
.particle {
width: 45px;
height: 45px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font: bold 13px Arial, sans-serif;
color: #111820;
}
.proton { background: #e68c7d; }
.neutron { background: #e7c57f; }
.electron { background: #86c4dc; }
.quiz-option {
display: block;
width: 100%;
text-align: left;
padding: 13px;
margin: 8px 0;
background: transparent;
color: inherit;
border: 1px solid var(--line);
}
.quiz-option:hover { border-color: var(--gold); }
.feedback { min-height: 30px; color: var(--gold); }
footer {
padding: 35px 7%;
border-top: 1px solid var(--line);
font: 12px/1.8 Arial, sans-serif;
color: var(--muted);
}
footer a { color: var(--gold); }
@media(max-width:520px) {
header { align-items: flex-start; flex-direction: column; }
nav { gap: 11px; }
.hero { padding-top: 65px; min-height: 500px; }
section { padding: 48px 6%; }
}
</style>
</head>
<body>
<header>
<a class="logo" href="#inicio">ÁTOMO / ARCHIVO 01</a>
<nav>
<a href="#fundamentos">FÍSICA</a>
<a href="#fision">FISIÓN</a>
<a href="#historia">HISTORIA</a>
<a href="#laboratorio">LABORATORIO</a>
<a href="#quiz">QUIZ</a>
</nav>
</header>
<main>
<section class="hero" id="inicio">
<div class="kicker">Museo digital · Ciencia e historia</div>
<h1>La energía oculta en la materia.</h1>
<p>
Un recorrido por la física nuclear, la estructura del átomo,
la fisión y los acontecimientos que transformaron la historia
durante el Proyecto Manhattan.
</p>
<div>
<a class="btn" href="#fundamentos">COMENZAR RECORRIDO ↗</a>
<a class="btn secondary" href="#historia">VER CRONOLOGÍA</a>
</div>
<p class="small">ARCHIVO EDUCATIVO · 1939–1945 Y MÁS ALLÁ</p>
</section>
<section class="light" id="fundamentos">
<div class="kicker">01 / Fundamentos</div>
<h2>La materia, desde adentro.</h2>
<p>
Para comprender la física nuclear hay que comenzar por la
estructura de la materia. Los átomos están formados por un
núcleo y electrones. En el núcleo se encuentran protones
y, en la mayoría de los átomos, neutrones.
</p>
<div class="grid">
<article class="card">
<div class="number">PARTÍCULA 01</div>
<h3>Protón</h3>
<p>Tiene carga eléctrica positiva y se encuentra en el núcleo.
La cantidad de protones determina el elemento químico.</p>
</article>
<article class="card">
<div class="number">PARTÍCULA 02</div>
<h3>Neutrón</h3>
<p>No tiene carga eléctrica neta. Contribuye a la estructura
del núcleo y a sus propiedades nucleares.</p>
</article>
<article class="card">
<div class="number">PARTÍCULA 03</div>
<h3>Electrón</h3>
<p>Tiene carga negativa y ocupa estados cuánticos alrededor
del núcleo. Es fundamental para los fenómenos químicos.</p>
</article>
</div>
<h3>Explorá un modelo del átomo</h3>
<p>Seleccioná una partícula para conocer sus propiedades.</p>
<div class="diagram">
<button class="particle proton" onclick="particula('protón')">p+</button>
<button class="particle neutron" onclick="particula('neutrón')">n⁰</button>
<button class="particle electron" onclick="particula('electrón')">e−</button>
</div>
<div class="result" id="particulaResultado">
Tocá una de las partículas para descubrir más.
</div>
<hr class="rule">
<h3>Isótopos: un mismo elemento, distintos núcleos</h3>
<p>
Los isótopos poseen el mismo número de protones, pero diferente
número de neutrones. Por eso pertenecen al mismo elemento,
aunque su masa sea distinta. Algunos isótopos son estables y
otros son radiactivos.
</p>
<div class="formula">A = Z + N</div>
<p>
A es el número másico, Z es el número de protones y N es el
número de neutrones.
</p>
</section>
<section id="energia">
<div class="kicker">02 / Relatividad y energía</div>
<h2>La equivalencia entre masa y energía.</h2>
<p>
La ecuación de Einstein relaciona la masa en reposo con la
energía equivalente. En las reacciones nucleares, las
diferencias de masa entre estados iniciales y finales se
relacionan con la energía liberada o absorbida.
</p>
<div class="formula">E = mc²</div>
<div class="grid">
<article class="card">
<h3>E — Energía</h3>
<p>Se expresa en joules (J) en el Sistema Internacional.</p>
</article>
<article class="card">
<h3>m — Masa</h3>
<p>En esta calculadora se introduce en kilogramos (kg).</p>
</article>
<article class="card">
<h3>c — Velocidad de la luz</h3>
<p>Aproximadamente 299.792.458 metros por segundo en el vacío.</p>
</article>
</div>
<h3>Calculadora educativa de equivalencia masa-energía</h3>
<p>Ingresá una masa pequeña y observá la energía equivalente.</p>
<label for="masa">Masa en kilogramos</label>
<input id="masa" type="number" min="0" max="1" step="any" value="0.000001">
<button class="btn" onclick="calcularEnergia()">CALCULAR</button>
<div class="result" id="resultadoEnergia" aria-live="polite">
El resultado aparecerá aquí.
</div>
<p class="small">
Este cálculo muestra la equivalencia teórica de masa en reposo
y energía. No representa automáticamente la energía obtenible
en una reacción nuclear real.
</p>
</section>
<section class="light" id="fision">
<div class="kicker">03 / Física nuclear</div>
<h2>¿Qué es la fisión?</h2>
<p>
La fisión nuclear es un proceso en el que un núcleo pesado
se divide en núcleos más pequeños. En determinadas reacciones
se emiten neutrones y se libera energía, relacionada con la
diferencia de energía de enlace entre los productos y los
reactivos.
</p>
<div class="grid">
<article class="card">
<div class="number">ETAPA 01</div>
<h3>Interacción</h3>
<p>Un núcleo puede interactuar con una partícula incidente.
El resultado depende del núcleo y de las condiciones físicas.</p>
</article>
<article class="card">
<div class="number">ETAPA 02</div>
<h3>Transformación</h3>
<p>En una fisión, el núcleo se transforma en productos
nucleares más pequeños.</p>
</article>
<article class="card">
<div class="number">ETAPA 03</div>
<h3>Balance energético</h3>
<p>La energía total se conserva. Parte de la energía aparece
como movimiento de partículas y radiación.</p>
</article>
</div>
<h3>Fisión y fusión no son lo mismo</h3>
<p>
La fisión divide núcleos pesados. La fusión combina núcleos
ligeros para formar otros más pesados. Ambos procesos pueden
liberar energía en condiciones adecuadas, pero sus mecanismos
físicos son diferentes.
</p>
</section>
<section id="cadena">
<div class="kicker">04 / Procesos nucleares</div>
<h2>La reacción en cadena.</h2>
<p>
En ciertas condiciones, los neutrones emitidos durante una
fisión pueden inducir nuevas fisiones. Así se puede producir
una secuencia de acontecimientos. Su evolución depende de
probabilidades físicas, absorción, fuga y otras propiedades
del sistema.
</p>
<div class="card">
<h3>Modelo conceptual de ramificación</h3>
<p>
Este modelo visual ilustra cómo una secuencia puede crecer,
mantenerse o extinguirse. Es una representación didáctica,
no una simulación de un arma ni una predicción de un sistema real.
</p>
<label for="ramas">Número de generaciones ilustrativas:
<strong id="genValor">3</strong>
</label>
<input type="range" id="ramas" min="1" max="6" value="3"
oninput="dibujarRamas()">
<div class="result" id="ramasResultado" aria-live="polite"></div>
</div>
<h3>Tres conceptos importantes</h3>
<div class="grid">
<article class="card">
<h3>Subcrítico</h3>
<p>En promedio, la secuencia no se sostiene y tiende a disminuir.</p>
</article>
<article class="card">
<h3>Crítico</h3>
<p>En promedio, la población de neutrones puede mantenerse estable.</p>
</article>
<article class="card">
<h3>Supercrítico</h3>
<p>En promedio, la población de neutrones puede aumentar.</p>
</article>
</div>
<p class="small">
Estas definiciones son conceptuales. Un sistema real requiere
un análisis físico especializado y no se describe completamente
mediante un árbol de ramificación sencillo.
</p>
</section>
<section class="light" id="historia">
<div class="kicker">05 / Archivo histórico</div>
<h2>Una ciencia que cambió el mundo.</h2>
<p>
Explorá algunos hitos científicos e históricos relacionados
con la investigación nuclear y el Proyecto Manhattan.
Tocá cada fecha para ampliar la información.
</p>
<div class="timeline">
<article class="event">
<button onclick="evento('e1939')">1939 — Advertencia a Roosevelt +</button>
<div class="event-detail" id="e1939">
<p>
Leo Szilard y otros científicos promovieron una advertencia
al presidente Franklin D. Roosevelt sobre los avances
en fisión nuclear y la posibilidad de que la investigación
tuviera implicaciones militares.
</p>
<p>
La carta contribuyó a que el gobierno estadounidense
prestara atención al asunto. El desarrollo posterior
dependió de múltiples decisiones políticas, científicas
y organizativas.
</p>
</div>
</article>
<article class="event">
<button onclick="evento('e1942')">1942 — Chicago Pile-1 +</button>
<div class="event-detail" id="e1942">
<p>
El 2 de diciembre de 1942, Chicago Pile-1 logró la primera
reacción nuclear en cadena controlada y autosostenida.
El experimento dirigido por Enrico Fermi fue un hito
fundamental para la física nuclear.
</p>
<p>
Un reactor nuclear y un arma nuclear tienen finalidades,
diseños y comportamientos físicos distintos.
</p>
</div>
</article>
<article class="event">
<button onclick="evento('e1945')">1945 — Prueba Trinity +</button>
<div class="event-detail" id="e1945">
<p>
El 16 de julio de 1945 tuvo lugar Trinity, la primera
prueba de un dispositivo nuclear explosivo. Fue un
acontecimiento científico, militar y político de enorme
importancia.
</p>
<p>
Ese mismo año se produjeron los bombardeos de Hiroshima
y Nagasaki, con consecuencias humanitarias devastadoras
y efectos históricos que continúan siendo objeto de estudio.
</p>
</div>
</article>
<article class="event">
<button onclick="evento('eposterior')">Después de 1945 — La era nuclear +</button>
<div class="event-detail" id="eposterior">
<p>
La investigación nuclear continuó en ámbitos como la
generación eléctrica, la medicina, la investigación
científica y los programas militares.
</p>
<p>
La era nuclear también impulsó debates sobre seguridad,
desarme, contaminación, responsabilidad científica
y cooperación internacional.
</p>
</div>
</article>
</div>
</section>
<section id="radiacion">
<div class="kicker">06 / Radiación</div>
<h2>Radiación ionizante.</h2>
<p>
Algunas radiaciones tienen energía suficiente para ionizar
átomos: es decir, quitar electrones y formar iones. Sus efectos
dependen del tipo de radiación, la energía, la dosis y la vía
de exposición.
</p>
<div class="grid">
<article class="card">
<h3>Alfa (α)</h3>
<p>Son partículas formadas por dos protones y dos neutrones.
Tienen una capacidad de penetración relativamente baja,
pero pueden ser peligrosas si el material emisor ingresa
al organismo.</p>
</article>
<article class="card">
<h3>Beta (β)</h3>
<p>Consiste en electrones o positrones emitidos en ciertos
procesos de transformación nuclear.</p>
</article>
<article class="card">
<h3>Gamma (γ)</h3>
<p>Es radiación electromagnética de alta energía que puede
penetrar considerablemente en la materia.</p>
</article>
<article class="card">
<h3>Neutrones</h3>
<p>Son partículas sin carga eléctrica que pueden interactuar
con los núcleos y producir procesos nucleares secundarios.</p>
</article>
</div>
<h3>Semivida radiactiva</h3>
<p>
La semivida es el tiempo necesario para que se desintegre,
en promedio, la mitad de los núcleos radiactivos presentes
en una muestra.
</p>
<div class="formula">N(t) = N₀ × (1/2)^(t/T)</div>
<p>
N₀ es la cantidad inicial, t es el tiempo transcurrido y T
es la semivida. La fórmula describe el decaimiento exponencial
idealizado.
</p>
<div class="card">
<label for="semivida">Semividas transcurridas:
<strong id="vidaValor">2</strong>
</label>
<input id="semivida" type="range" min="0" max="10" value="2"
oninput="calcularDecaimiento()">
<div class="result" id="vidaResultado"></div>
</div>
<h3>Unidades de medida</h3>
<ul>
<li><strong>Becquerel (Bq):</strong> actividad radiactiva, en desintegraciones por segundo.</li>
<li><strong>Gray (Gy):</strong> energía absorbida por unidad de masa.</li>
<li><strong>Sievert (Sv):</strong> dosis equivalente o efectiva, considerando factores biológicos pertinentes.</li>
</ul>
</section>
<section class="light" id="laboratorio">
<div class="kicker">07 / Laboratorio virtual</div>
<h2>Experimentar para comprender.</h2>
<p>
Usá las herramientas educativas para explorar relaciones
matemáticas y conceptos de la física.
</p>
<div class="card">
<h3>Conversor de unidades de energía</h3>
<p>Convertí joules a kilojoules y megajoules.</p>
<label for="joules">Energía en joules (J)</label>
<input type="number" id="joules" min="0" value="1000000">
<button class="btn" onclick="convertir()">CONVERTIR</button>
<div class="result" id="conversionResultado"></div>
</div>
<div class="card" style="margin-top:20px">
<h3>¿Qué significa conservar la energía?</h3>
<p>
En un sistema aislado, la energía total se conserva.
Puede transferirse o transformarse de una forma a otra.
En física nuclear también hay que considerar la equivalencia
entre masa y energía.
</p>
<button class="btn secondary" onclick="mostrarConservacion()">
VER EJEMPLO
</button>
<div class="result" id="conservacionResultado" aria-live="polite">
Tocá el botón para ver un ejemplo.
</div>
</div>
</section>
<section id="quiz">
<div class="kicker">08 / Comprobá lo aprendido</div>
<h2>Desafío científico.</h2>
<p>Respondé y comprobá tus conocimientos.</p>
<div class="card">
<div class="number" id="preguntaNumero">PREGUNTA 1 DE 5</div>
<h3 id="preguntaTexto"></h3>
<div id="opciones"></div>
<p class="feedback" id="feedback" aria-live="polite"></p>
<button class="btn" id="siguiente" onclick="siguientePregunta()" disabled>
SIGUIENTE →
</button>
<p class="small" id="marcador">Puntaje: 0</p>
</div>
</section>
<section>
<div class="kicker">09 / Conclusión</div>
<h2>El conocimiento implica responsabilidad.</h2>
<p>
La física nuclear amplió la comprensión humana de la materia
y permitió avances científicos importantes. Al mismo tiempo,
su utilización militar mostró que los descubrimientos científicos
pueden tener consecuencias humanitarias, ambientales y políticas
de enorme magnitud.
</p>
<p>
Estudiar esta historia exige comprender las leyes físicas,
examinar los documentos históricos y reflexionar sobre la
responsabilidad de las instituciones y de la sociedad.
</p>
</section>
<section class="light" id="fuentes">
<div class="kicker">10 / Para seguir investigando</div>
<h2>Fuentes de consulta.</h2>
<p>Empezá por estas instituciones y sus materiales educativos:</p>
<ul>
<li><a href="https://www.energy.gov/" target="_blank" rel="noopener">Departamento de Energía de Estados Unidos</a></li>
<li><a href="https://www.osti.gov/" target="_blank" rel="noopener">Office of Scientific and Technical Information</a></li>
<li><a href="https://www.iaea.org/" target="_blank" rel="noopener">Organismo Internacional de Energía Atómica</a></li>
<li><a href="https://www.nobelprize.org/" target="_blank" rel="noopener">Fundación Nobel: historia de la ciencia</a></li>
</ul>
<p class="small">
Consultá las publicaciones originales y verificá los datos
históricos y científicos antes de utilizarlos en un trabajo escolar.
</p>
</section>
</main>
<footer>
ÁTOMO — MUSEO DIGITAL DE FÍSICA NUCLEAR<br>
Proyecto educativo interactivo · Historia, ciencia y reflexión.
<p><a href="#inicio">VOLVER AL INICIO ↑</a></p>
</footer>
<script>
function particula(nombre) {
const datos = {
"protón": "Protón: carga positiva. El número de protones determina el número atómico del elemento.",
"neutrón": "Neutrón: carga eléctrica neta cero. Su número contribuye a distinguir isótopos de un mismo elemento.",
"electrón": "Electrón: carga negativa. Los electrones participan en los enlaces químicos y en las propiedades eléctricas."
};
document.getElementById("particulaResultado").textContent = datos[nombre];
}
function calcularEnergia() {
const m = Number(document.getElementById("masa").value);
const out = document.getElementById("resultadoEnergia");
if (!Number.isFinite(m) || m < 0 || m > 1) {
out.textContent = "Ingresá una masa entre 0 y 1 kg.";
return;
}
const c = 299792458;
const E = m * c * c;
out.innerHTML = "Energía equivalente: <strong>" +
E.toExponential(5) + " J</strong><br>" +
"Equivale a " + (E / 1e6).toLocaleString("es-AR",
{maximumFractionDigits: 5}) + " MJ.";
}
function evento(id) {
const el = document.getElementById(id);
el.classList.toggle("open");
}
function dibujarRamas() {
const g = Number(document.getElementById("ramas").value);
document.getElementById("genValor").textContent = g;
let html = "";
for (let i = 0; i <= g; i++) {
html += "<div style='margin:8px 0'>" +
"<strong>Generación " + i + ":</strong> " +
"● ".repeat(Math.pow(2, i)) + "</div>";
}
html += "<p class='small'>Ilustración matemática idealizada: cada punto representa una rama hipotética. No modela las probabilidades ni las condiciones de un sistema nuclear real.</p>";
document.getElementById("ramasResultado").innerHTML = html;
}
function calcularDecaimiento() {
const n = Number(document.getElementById("semivida").value);
const restante = 100 * Math.pow(0.5, n);
document.getElementById("vidaValor").textContent = n;
document.getElementById("vidaResultado").innerHTML =
"Semividas transcurridas: <strong>" + n + "</strong><br>" +
"Cantidad restante: <strong>" +
restante.toFixed(4) + "%</strong><br>" +
"<div style='height:12px;background:#aab6c3;margin-top:15px'>" +
"<div style='height:12px;background:#b78c4d;width:" +
restante + "%'></div></div>";
}
function convertir() {
const j = Number(document.getElementById("joules").value);
const out = document.getElementById("conversionResultado");
if (!Number.isFinite(j) || j < 0) {
out.textContent = "Ingresá un valor no negativo.";
return;
}
out.innerHTML = "<strong>" + j.toLocaleString("es-AR") +
" J</strong><br>" + (j / 1000).toLocaleString("es-AR") +
" kJ<br>" + (j / 1000000).toLocaleString("es-AR") + " MJ";
}
function mostrarConservacion() {
document.getElementById("conservacionResultado").textContent =
"Ejemplo: una pelota que cae transforma energía potencial " +
"gravitatoria en energía cinética. Al chocar, parte de la " +
"energía se transfiere al entorno como sonido, calor y deformación. " +
"La energía total se conserva si se contabiliza todo el sistema.";
}
const preguntas = [
{
q: "¿Qué determina el número atómico de un elemento?",
o: ["El número de protones", "El número de electrones solamente", "La temperatura"],
c: 0,
e: "El número atómico es igual a la cantidad de protones del núcleo."
},
{
q: "¿Qué ocurre en la fisión nuclear?",
o: ["Se dividen núcleos pesados", "Se unen siempre dos átomos", "Desaparece la energía"],
c: 0,
e: "La fisión divide un núcleo en productos más pequeños."
},
{
q: "¿Cuál es la unidad de actividad radiactiva?",
o: ["Gray", "Becquerel", "Metro"],
c: 1,
e: "El becquerel equivale a una desintegración por segundo."
},
{
q: "¿Qué expresa E = mc²?",
o: ["La equivalencia entre masa y energía", "La velocidad del sonido", "La carga del electrón"],
c: 0,
e: "La ecuación relaciona la masa en reposo con su energía equivalente."
},
{
q: "¿Qué sucedió en Chicago Pile-1 en 1942?",
o: ["Se descubrió el electrón", "Se logró una reacción en cadena controlada y autosostenida", "Se lanzó un satélite"],
c: 1,
e: "Chicago Pile-1 alcanzó ese hito el 2 de diciembre de 1942."
}
];
let indice = 0;
let puntos = 0;
let respondida = false;
function cargarPregunta() {
const p = preguntas[indice];
document.getElementById("preguntaNumero").textContent =
"PREGUNTA " + (indice + 1) + " DE " + preguntas.length;
document.getElementById("preguntaTexto").textContent = p.q;
document.getElementById("feedback").textContent = "";
document.getElementById("siguiente").disabled = true;
document.getElementById("siguiente").textContent =
indice === preguntas.length - 1 ? "VOLVER A EMPEZAR ↻" : "SIGUIENTE →";
respondida = false;
const cont = document.getElementById("opciones");
cont.innerHTML = "";
p.o.forEach((opcion, i) => {
const b = document.createElement("button");
b.className = "quiz-option";
b.textContent = String.fromCharCode(65 + i) + ". " + opcion;
b.onclick = () => responder(i);
cont.appendChild(b);
});
}
function responder(i) {
if (respondida) return;
respondida = true;
const p = preguntas[indice];
const botones = document.querySelectorAll(".quiz-option");
botones.forEach(b => b.disabled = true);
if (i === p.c) {
puntos++;
document.getElementById("feedback").textContent =
"¡Correcto! " + p.e;
} else {
document.getElementById("feedback").textContent =
"No exactamente. " + p.e;
}
document.getElementById("marcador").textContent =
"Puntaje: " + puntos + " / " + preguntas.length;
document.getElementById("siguiente").disabled = false;
}
function siguientePregunta() {
if (indice === preguntas.length - 1) {
const final = puntos;
indice = 0;
puntos = 0;
cargarPregunta();
document.getElementById("feedback").textContent =
"Terminaste con " + final + " de " + preguntas.length +
" respuestas correctas. ¡Volvé a intentarlo para practicar!";
document.getElementById("marcador").textContent = "Puntaje: 0";
return;
}
indice++;
cargarPregunta();
}
calcularEnergia();
dibujarRamas();
calcularDecaimiento();
convertir();
cargarPregunta();
</script>
</body>
</html>