Getafe CF

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Quiz prepatido | J8 LALIGA | CA Osasuna - Getafe CF</title>
  <style>
    :root {
      --bg1: #0a3d91;
      --bg2: #0f5bb5;
      --accent: #1e90ff;
      --correct: #28a745;
      --incorrect: #dc3545;
      --text: #ffffff;
      --warn: #ffcc00;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body { background: linear-gradient(135deg, var(--bg1), var(--bg2)); font-family: Inter, system-ui, Arial, sans-serif; color: var(--text); }

    .quiz-app { width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: start; padding: 20px; }

    .quiz-container { width: 100%; max-width: 720px; background: rgba(0, 0, 0, 0.35); padding: 20px 20px 4px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); margin: 24px 0; backdrop-filter: blur(2px); }

    h1 { font-size: 22px; margin: 0 0 8px; text-align: center; }

    .topbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }

    .timer { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
    .timer .badge { min-width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: #00000055; border: 2px solid var(--warn); box-shadow: inset 0 0 0 2px #00000055, 0 0 12px rgba(0,0,0,0.3); }

    .progress-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 10px 0 16px; }
    .progress-bar { height: 12px; background: #53627a; border-radius: 999px; overflow: hidden; position: relative; }
    .progress { height: 100%; width: 0%; background: var(--accent); transition: width 0.3s ease; }
    .progress-text { font-size: 12px; opacity: 0.9; }

    .timebar { height: 8px; background: #ffffff30; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
    .timebar .left { height: 100%; width: 100%; background: linear-gradient(90deg, var(--warn), #ff7a00); transition: width 0.1s linear; }

    .question { font-size: 18px; margin: 14px 0 16px; text-align: center; line-height: 1.35; font-weight: 700; }

    .options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .option-btn { background: var(--accent); color: #fff; padding: 14px 12px; border: none; border-radius: 12px; cursor: pointer; transition: transform 0.12s ease, background 0.25s ease, box-shadow 0.25s ease; text-align: center; font-size: 16px; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
    .option-btn:hover { transform: translateY(-1px); }
    .option-btn:focus { outline: 2px solid #fff; outline-offset: 2px; }
    .option-btn.correct { background: var(--correct) !important; }
    .option-btn.incorrect { background: var(--incorrect) !important; }
    .option-btn[disabled] { filter: saturate(0.8) brightness(0.95); cursor: default; }

    .result { text-align: center; padding: 24px 12px; animation: fadeIn 0.5s ease-in-out; }
    .result h2 { font-size: 18px; margin-bottom: 8px; }
    .score { font-size: 56px; font-weight: 800; letter-spacing: -1px; }
    .result p { font-size: 17px; margin-top: 16px; }

    .medal { position: relative; width: 110px; height: 110px; margin: 20px auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; text-transform: uppercase; animation: pop 0.4s ease; box-shadow: inset 0 6px 16px rgba(255,255,255,0.25), 0 10px 20px rgba(0,0,0,0.35); }
    .medal.gold { background: radial-gradient(circle at 30% 30%, #ffe680, #d4af37 65%, #b9922a); }
    .medal.silver { background: radial-gradient(circle at 30% 30%, #f0f0f0, #a9a9a9 65%, #888); }
    .medal.bronze { background: radial-gradient(circle at 30% 30%, #f1b17a, #cd7f32 65%, #8b4513); }

    .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
    .btn { padding: 12px 18px; background: var(--accent); border: none; border-radius: 10px; color: white; font-size: 15px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }

    .hint { background: #00000070; border: 1px solid #ffd166; border-radius: 12px; padding: 14px; margin-top: 8px; text-align: center; }
    .hint p { margin: 0 0 10px; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

    @media (max-width: 520px) {
      .options { grid-template-columns: 1fr; }
      .option-btn { font-size: 16px; }
    }
  </style>
</head>
<body>
  <div class="quiz-app" role="application" aria-label="Quiz prepatido | J9 LALIGA | Getafe CF - Real Madrid CF">
    
    <div class="quiz-container" id="quizContainer" data-quiz-id="2025-26:J9:GET-RMA">
      <h1>Quiz prepatido | J9 LALIGA | Getafe CF - Real Madrid CF</h1>

      <div class="topbar">
        <div class="best" id="bestScore" aria-live="polite"></div>
        <div class="timer" aria-live="polite">
          <span class="badge" id="timerBadge">15</span>
        </div>
      </div>

      <div class="progress-wrap">
        <div class="progress-bar" aria-hidden="true"><div class="progress" id="progress"></div></div>
        <div class="progress-text" id="progressText">0 / 0</div>
      </div>

      <div class="timebar" aria-hidden="true"><div class="left" id="timeLeftBar"></div></div>

      <div id="quizContent"></div>

      
      <div class="hint" id="reloadHint" style="display:none;">
        <p>Si no carga correctamente, refresque la página</p>
        <button class="btn" id="reloadBtn">Volver a cargar</button>
      </div>
    </div>
  </div>

  <script>
    // ------------------ Datos ------------------
    const quizData = [
      { question: "¿Qué jugador de la plantilla se formó en las categorías inferiores del Real Madrid?", options: ["David Soria", "Álex Sancris"], answer: 0 },
      { question: "¿De quién hablaba Bordalás cuando dijo la frase: Merece un monumento. Lo que ha hecho en el Madrid es inigualable?", options: ["Cristiano Ronaldo", "Carlo Ancelotti"], answer: 1 },
      { question: "Nuestra primera temporada en Primera ganamos 2-1 al Real Madrid en el Coliseum", options: ["Verdadero", "Falso"], answer: 0 },
      { question: "¿Quién marcó el primer gol del Getafe aquel partido de la 2004/2005?", options: ["Albiol", "Gabi"], answer: 0 },
      { question: "¿En qué temporada ganamos nuestro último partido ante el Real Madrid?", options: ["2014/2015", "2021/2022"], answer: 1 },
      { question: "¿Qué entrenador ha dirigido el banquillo de ambos clubes?", options: ["Luis García", "Bernd Schuster"], answer: 1 },
      { question: "¿Qué jugador blanco fue expulsado en 2009 contra el Getafe y se perdió El Clásico?", options: ["Pepe", "Sergio Ramos"], answer: 0 },
      { question: "Con 5 asistencias, ¿quiÉn es el actual máximo asistente de LALIGA?", options: ["Luis Milla", "Vini JR."], answer: 0 }
    ];

    // ------------------ Config ------------------
    const SECONDS_PER_QUESTION = 15;

    // ------------------ Estado ------------------
    let currentQ = 0;
    let score = 0;
    let timerInterval = null;   // setInterval id
    let prestartTimeout = null; // setTimeout id
    let deadline = 0;           // ms (performance.now base)
    let questionActive = false; // evita doble manejo

    // ------------------ DOM ------------------
    const quizContent = document.getElementById('quizContent');
    const progress = document.getElementById('progress');
    const progressText = document.getElementById('progressText');
    const timerBadge = document.getElementById('timerBadge');
    const bestScoreEl = document.getElementById('bestScore');
    const timeLeftBar = document.getElementById('timeLeftBar');
    const reloadHint = document.getElementById('reloadHint');
    const reloadBtn = document.getElementById('reloadBtn');

    // ⭐ Identificador único del quiz (toma el del data-attribute)
    const QUIZ_ID = document.getElementById('quizContainer').dataset.quizId || 'default';
    const BEST_KEY = `geta_quiz_best:${QUIZ_ID}`;

    // ------------------ Utils ------------------
    const shuffle = (arr) => arr.map(v => [Math.random(), v]).sort((a, b) => a[0]-b[0]).map(v => v[1]);
    const isBackForward = () => {
      try { return performance.getEntriesByType('navigation')[0]?.type === 'back_forward'; }
      catch { return false; }
    };

    // ⭐ Mejor puntuación por partido (clave distinta por QUIZ_ID)
    function getBest(){ const b = Number(localStorage.getItem(BEST_KEY) || 0); return isNaN(b) ? 0 : b; }
    function setBest(v){ localStorage.setItem(BEST_KEY, String(v)); }

    function clearTimers(){ if (timerInterval) clearInterval(timerInterval); if (prestartTimeout) clearTimeout(prestartTimeout); timerInterval = null; prestartTimeout = null; }

    // ------------------ Core ------------------
    function startQuiz(){
      clearTimers();
      currentQ = 0;
      score = 0;
      bestScoreEl.textContent = `Tu mejor puntuación: ${getBest()} / ${quizData.length}`;
      reloadHint.style.display = 'none';
      showQuestion();
    }

    function startTimer(){
      clearTimers();
      timerBadge.textContent = SECONDS_PER_QUESTION;
      timeLeftBar.style.width = '100%';
      questionActive = true;
      prestartTimeout = setTimeout(() => {
        const start = performance.now();
        deadline = start + SECONDS_PER_QUESTION * 1000;
        const tick = () => {
          const now = performance.now();
          const msLeft = deadline - now;
          if (msLeft <= 0){ timerBadge.textContent = 0; timeLeftBar.style.width = '0%'; clearTimers(); if (questionActive) handleTimeout(); return; }
          const secLeft = Math.ceil(msLeft / 1000);
          timerBadge.textContent = secLeft;
          timeLeftBar.style.width = `${Math.max(0, msLeft / (SECONDS_PER_QUESTION*1000) * 100)}%`;
        };
        tick();
        timerInterval = setInterval(tick, 100);
      }, 1000);
    }

    function showQuestion(){
      const total = quizData.length;
      progress.style.width = `${(currentQ / total) * 100}%`;
      progressText.textContent = `${currentQ + 1} / ${total}`;

      const qData = quizData[currentQ];
      const entries = [ { idx: 0, text: qData.options[0] }, { idx: 1, text: qData.options[1] } ];
      const shuffled = shuffle(entries);
      const optionsHtml = shuffled.map(({idx, text}) => `<button class="option-btn" data-index="${idx}">${text}</button>`).join('');

      quizContent.innerHTML = `
        <div class="question"><strong>${qData.question}</strong></div>
        <div class="options">${optionsHtml}</div>
      `;

      quizContent.querySelectorAll('.option-btn').forEach(btn => {
        btn.addEventListener('click', () => { if (questionActive) checkAnswer(btn); });
      });

      document.onkeydown = (e) => {
        if (!questionActive) return;
        if (e.key.toLowerCase() === 'a' || e.key === '1') chooseByIndex(0);
        if (e.key.toLowerCase() === 'b' || e.key === '2') chooseByIndex(1);
      };

      startTimer();
    }

    function chooseByIndex(idx){
      const btn = document.querySelector(`.option-btn[data-index="${idx}"]`);
      if (btn && !btn.disabled) checkAnswer(btn);
    }

    function finishQuestion(){ questionActive = false; clearTimers(); }

    function checkAnswer(btn){
      finishQuestion();
      const qData = quizData[currentQ];
      const buttons = document.querySelectorAll('.option-btn');
      buttons.forEach(b => b.disabled = true);
      const pickedIndex = Number(btn.getAttribute('data-index'));
      const correctIndex = qData.answer;
      if (pickedIndex === correctIndex){
        btn.classList.add('correct');
        score++;
      } else {
        btn.classList.add('incorrect');
        const correctBtn = document.querySelector(`.option-btn[data-index="${correctIndex}"]`);
        if (correctBtn) correctBtn.classList.add('correct');
      }
      setTimeout(nextStep, 900);
    }

    function handleTimeout(){
      finishQuestion();
      const qData = quizData[currentQ];
      const buttons = document.querySelectorAll('.option-btn');
      buttons.forEach(b => {
        b.disabled = true;
        const idx = Number(b.getAttribute('data-index'));
        if (idx === qData.answer) b.classList.add('correct');
        else b.classList.add('incorrect');
      });
      setTimeout(nextStep, 900);
    }

    function nextStep(){
      currentQ++;
      if (currentQ < quizData.length) showQuestion();
      else showResult();
    }

    function showResult(){
      finishQuestion();
      progress.style.width = '100%';
      progressText.textContent = `${quizData.length} / ${quizData.length}`;
      let message = '', medalClass = '', medalText = '';
      if (score >= 7){ message = '¡Un QUIZ perfecto! Eres un experto azulón'; medalClass = 'gold'; medalText = 'Gold'; }
      else if (score >= 4){ message = 'Muy bien. Eres un auténtico fan del Geta'; medalClass = 'silver'; medalText = 'Silver'; }
      else { message = '¡Ups! Quizá deberías repasar un poco más la historia del Getafe'; medalClass = 'bronze'; medalText = 'Bronze'; }
      const best = getBest(); if (score > best) setBest(score);
      quizContent.innerHTML = `
        <div class="result">
          <h2>Has acertado</h2>
          <div class="score">${score}/${quizData.length}</div>
          <div>respuestas</div>
          <div class="medal ${medalClass}">${medalText}</div>
          <p>${message}</p>
          <div class="actions"><button class="btn" id="replayBtn">Volver a jugar</button></div>
        </div>
      `;
      document.getElementById('replayBtn').addEventListener('click', startQuiz);
      bestScoreEl.textContent = `Tu mejor puntuación: ${getBest()} / ${quizData.length}`;
      timerBadge.textContent = SECONDS_PER_QUESTION; timeLeftBar.style.width = '100%';
    }

    // ------------------ Navegación / BFCache ------------------
    reloadBtn.addEventListener('click', () => location.reload());

    window.addEventListener('pagehide', clearTimers);
    window.addEventListener('pageshow', (e) => {
      // Si volvemos atrás o desde BFCache, mostramos el aviso y no iniciamos el quiz
      if (e.persisted || isBackForward()) {
        clearTimers();
        reloadHint.style.display = 'block';
      } else {
        startQuiz();
      }
    });

    // ------------------ Inicio ------------------
    // pageshow también se dispara en carga inicial; por compatibilidad con navegadores que no lo hacen, hacemos un fallback
    document.addEventListener('DOMContentLoaded', () => {
      // Si el pageshow ya arrancó algo, no dupliques
      if (timerInterval === null && prestartTimeout === null && quizContent.innerHTML === '') {
        startQuiz();
      }
    });
  </script>
</body>
</html>