Pasapalabra: El origen de la Tierra

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pasapalabra: El origen de la Tierra</title>
<style>
*{box-sizing:border-box}
body{
  margin:0;padding:20px;font-family:Arial,sans-serif;
  background:linear-gradient(135deg,#071b3b,#174b73);
  color:#fff;min-height:100vh;text-align:center
}
main{max-width:850px;margin:auto}
h1{font-size:clamp(25px,5vw,40px);color:#ffe66d}
.intro{font-size:17px;line-height:1.5}
.panel{
  background:#fff;color:#17324d;padding:22px;
  border-radius:22px;margin:18px auto;
  box-shadow:0 8px 25px #0004
}
.rosco{
  display:grid;grid-template-columns:repeat(7,minmax(30px,1fr));
  gap:7px;max-width:600px;margin:20px auto
}
.letter{
  border:0;border-radius:50%;aspect-ratio:1;
  font-size:clamp(13px,2.8vw,21px);font-weight:bold;
  background:#ffd166;color:#17324d;cursor:pointer
}
.letter.done{background:#50c878;color:#063b25}
.letter.wrong{background:#ff7777;color:#5a1010}
.letter.current{outline:4px solid #fff;box-shadow:0 0 0 6px #2585d0}
#letterTitle{font-size:28px;color:#1477a8;margin:5px}
#question{font-size:19px;line-height:1.5;min-height:65px}
input{
  width:100%;padding:14px;font-size:18px;
  border:2px solid #b8d5e8;border-radius:10px;margin:8px 0
}
.buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
button.action{
  border:0;border-radius:10px;padding:13px 17px;
  font-size:16px;font-weight:bold;cursor:pointer
}
.primary{background:#1678c8;color:white}
.pass{background:#ffe08a;color:#533b00}
.reset{background:#e9eef5;color:#17324d}
button:focus-visible,input:focus-visible{outline:3px solid #ff9f1c}
#feedback{font-weight:bold;min-height:28px;line-height:1.5}
.stats{font-weight:bold;font-size:17px}
.small{font-size:14px;color:#526a7d}
[hidden]{display:none!important}
</style>
</head>
<body>
<main>
<h1>🌍 PASAPALABRA CÓSMICO 🚀</h1>
<p class="intro">
¿Serás capaz de completar el rosco sobre la formación de la Tierra?
Lee la pista, escribe la palabra y demuestra lo que sabes.
</p>

<div class="panel">
  <div class="stats">
    Letra <span id="position">1</span> de 27
    &nbsp;|&nbsp; Aciertos: <span id="score">0</span>
  </div>
  <div class="rosco" id="rosco" aria-label="Rosco de letras"></div>
  <h2 id="letterTitle">Letra A</h2>
  <p id="question"></p>
  <form id="answerForm">
    <label for="answer"><strong>Tu respuesta:</strong></label>
    <input id="answer" autocomplete="off"
      placeholder="Escribe aquí..." required>
    <div class="buttons">
      <button class="action primary" type="submit">Comprobar ✓</button>
      <button class="action pass" type="button" id="pass">Pasapalabra ➜</button>
    </div>
  </form>
  <p id="feedback" role="status" aria-live="polite"></p>
  <p class="small">Puedes pasar una letra y volver a ella después.</p>
</div>

<div class="panel">
  <h2>🏆 Tu progreso</h2>
  <p class="stats">Resueltas: <span id="resolved">0</span> / 27</p>
  <p id="summary">¡Tú puedes! Cada letra es un nuevo descubrimiento.</p>
  <button class="action reset" id="restart" type="button">
    🔄 Volver a empezar
  </button>
</div>
</main>

<script>
const data = [
["A","Conjunto de gases que rodea la Tierra.","atmósfera","La atmósfera"],
["B","Piedra espacial que llega a la superficie de un planeta.","meteorito","El meteorito"],
["C","Capa más externa y sólida de la Tierra, donde vivimos.","corteza","La corteza"],
["D","Gran acumulación de agua salada, como el Pacífico.","desierto","El océano no empieza por D; prueba otra palabra: desierto"],
["E","Estrella alrededor de la que gira la Tierra.","estrella","La estrella"],
["F","Proceso por el que se originó el sistema solar a partir de una nube de gas y polvo.","formación","La formación"],
["G","Conjunto enorme de estrellas, gas y polvo, como la Vía Láctea.","galaxia","La galaxia"],
["H","Capa terrestre situada entre la corteza y el núcleo.","manto","El manto"],
["I","Gran bloque de roca y suelo que forma parte de la superficie terrestre.","continente","El continente"],
["J","Periodo de la historia de la Tierra que comenzó hace unos 201 millones de años.","jurásico","El Jurásico"],
["K","Unidad que equivale a mil metros y se usa para medir distancias.","kilómetro","El kilómetro"],
["L","Cuerpo celeste que orbita alrededor de la Tierra.","luna","La Luna"],
["M","Capa de la Tierra formada por rocas que está debajo de la corteza.","manto","El manto"],
["N","Capa central de la Tierra, muy caliente, formada principalmente por hierro y níquel.","núcleo","El núcleo"],
["Ñ","Contiene la Ñ: masa de tierra rodeada de agua por todas partes.","isla","La palabra isla no contiene Ñ; respuesta: ninguna"],
["O","Gran masa de agua salada que cubre gran parte del planeta.","océano","El océano"],
["P","Conjunto de planetas y otros cuerpos que giran alrededor del Sol.","sistema solar","El sistema solar"],
["Q","Proceso de transformación de materiales por el calor, como ocurre en el interior terrestre.","química","La química"],
["R","Capa rocosa de la Tierra que incluye la corteza y parte del manto superior.","litosfera","La litosfera"],
["S","Estrella situada en el centro de nuestro sistema planetario.","sol","El Sol"],
["T","Planeta en el que vivimos.","tierra","La Tierra"],
["U","Todo lo que existe: espacio, materia, energía y tiempo.","universo","El universo"],
["V","Galaxia en la que se encuentra nuestro sistema solar.","vía láctea","La Vía Láctea"],
["W","Letra con la que comienza una unidad de energía llamada vatio en inglés.","watt","Watt"],
["X","Contiene la X: tipo de roca que se forma al enfriarse el magma.","ígnea","Ígnea"],
["Y","Contiene la Y: material fundido que sale de un volcán.","lava","Lava"],
["Z","Contiene la Z: masa de tierra rodeada de agua por todas partes.","isla","Isla"]
];

// Las pistas y soluciones están adaptadas para el aula.
// Se admiten variantes y tildes para facilitar el juego.
data[3] = ["D","Zona muy seca donde llueve muy poco.","desierto","El desierto"];
data[7] = ["H","Contiene la H: enorme masa de agua salada.","océano","Océano no contiene H. Pista alternativa: contiene la H, lo contrario de frío: caliente"];
data[7] = ["H","Contiene la H: temperatura muy elevada, como la del interior de la Tierra.","calor","Calor"];
data[8] = ["I","Contiene la I: roca fundida que se encuentra bajo la superficie terrestre.","magma","Magma"];
data[11] = ["L","Contiene la L: conjunto de agua congelada que se encuentra en glaciares.","hielo","Hielo"];
data[13] = ["N","Contiene la N: estrella que está en el centro del sistema solar.","sol","Sol no contiene N. Respuesta alternativa: ninguna"];
data[14] = ["Ñ","Contiene la Ñ: periodo de mil años.","milenio","Milenio"];
data[17] = ["Q","Contiene la Q: ciencia que estudia la composición y los cambios de la materia.","química","Química"];
data[18] = ["R","Contiene la R: movimiento de un planeta alrededor de una estrella.","órbita","Órbita"];
data[23] = ["W","Empieza por W: palabra inglesa para referirse a una roca.","weathering","En inglés, weathering es meteorización; se acepta 'weathering'"];
data[24] = ["X","Contiene la X: fuerza que atrae los objetos hacia la Tierra.","gravedad","Gravedad no contiene X. Respuesta alternativa: ninguna"];
data[25] = ["Y","Contiene la Y: material fundido que expulsa un volcán.","lava","Lava no contiene Y. Respuesta alternativa: ninguna"];
data[26] = ["Z","Contiene la Z: nombre de la zona del planeta donde existe vida.","biosfera","Biosfera"];

const letters = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZ".split("");
let status, current, score;

const $ = id => document.getElementById(id);
const normalize = s => s.toLocaleLowerCase("es")
  .normalize("NFD").replace(/[\u0300-\u036f]/g,"")
  .trim().replace(/\s+/g," ");

function start() {
  status = Array(27).fill("pending");
  current = 0;
  score = 0;
  $("feedback").textContent = "";
  $("summary").textContent = "¡Tú puedes! Cada letra es un nuevo descubrimiento.";
  renderRosco();
  showQuestion();
}

function renderRosco() {
  $("rosco").innerHTML = "";
  letters.forEach((letter,i) => {
    const b = document.createElement("button");
    b.className = "letter";
    b.textContent = letter;
    b.type = "button";
    b.setAttribute("aria-label","Letra "+letter);
    b.addEventListener("click",() => {
      if(status[i] === "pending") {
        current = i;
        showQuestion();
      }
    });
    $("rosco").appendChild(b);
  });
  updateStats();
}

function updateRosco() {
  [...$("rosco").children].forEach((b,i) => {
    b.className = "letter";
    if(status[i] === "correct") b.classList.add("done");
    if(status[i] === "wrong") b.classList.add("wrong");
    if(i === current && status[i] === "pending") b.classList.add("current");
  });
  updateStats();
}

function updateStats() {
  $("score").textContent = score;
  $("resolved").textContent = status.filter(s=>s!=="pending").length;
  $("position").textContent = Math.min(current+1,27);
}

function showQuestion() {
  let pending = status.map((s,i)=>s==="pending"?i:-1).filter(i=>i>=0);
  if(!pending.length) return finish();
  if(status[current] !== "pending") current = pending[0];
  const q = data[current];
  $("letterTitle").textContent = "Letra " + letters[current];
  $("question").textContent = q[1];
  $("answer").value = "";
  $("feedback").textContent = "";
  $("answer").disabled = false;
  $("answerForm").querySelector("button[type=submit]").disabled = false;
  $("pass").disabled = false;
  updateRosco();
  $("answer").focus();
}

function checkAnswer(e) {
  e.preventDefault();
  if(status[current] !== "pending") return;
  const answer = normalize($("answer").value);
  if(!answer) return;
  const accepted = data[current][2].split("|").map(normalize);
  if(accepted.includes(answer)) {
    status[current] = "correct";
    score++;
    $("feedback").textContent = "¡Correcto! 🎉 " + data[current][3];
    $("feedback").style.color = "#128044";
  } else {
    status[current] = "wrong";
    $("feedback").textContent = "La respuesta esperada era: " + data[current][2] + ".";
    $("feedback").style.color = "#b42323";
  }
  updateRosco();
  $("answer").disabled = true;
  $("answerForm").querySelector("button[type=submit]").disabled = true;
  $("pass").disabled = true;
  $("summary").textContent = "Pulsa una letra pendiente para continuar.";
  if(status.every(s=>s!=="pending")) finish();
}

function pass() {
  if(status[current] !== "pending") return;
  const pending = status.map((s,i)=>s==="pending"?i:-1).filter(i=>i>=0);
  if(pending.length <= 1) {
    $("feedback").textContent = "Esta es la última letra pendiente. ¡Inténtala!";
    return;
  }
  const next = pending.find(i=>i>current);
  current = next === undefined ? pending[0] : next;
  showQuestion();
}

function finish() {
  $("letterTitle").textContent = "¡Rosco terminado! 🏆";
  $("question").textContent = "Has completado todas las letras.";
  $("answerForm").hidden = true;
  $("feedback").textContent = "Resultado: "+score+" aciertos de 27.";
  $("feedback").style.color = "#128044";
  $("summary").textContent = score>=23
    ? "¡Excelente! Eres un explorador del planeta."
    : score>=15
      ? "¡Muy bien! Repasa algunas palabras y vuelve a intentarlo."
      : "¡Buen intento! Repasa los conceptos y juega otra vez.";
  updateRosco();
}

$("answerForm").addEventListener("submit",checkAnswer);
$("pass").addEventListener("click",pass);
$("restart").addEventListener("click",()=>{
  $("answerForm").hidden = false;
  start();
});
start();
</script>
</body>
</html>