<div id="quiz">
  <h2>Trivial de Primeros Auxilios</h2>
  <div id="question-container"></div>
  <button id="next-btn">Siguiente</button>
  <div id="result" class="result"></div>
</div>

body { 
  font-family: Arial, sans-serif; 
  background: #f0f8ff; 
  padding: 20px; 
}

#quiz { 
  max-width: 800px; 
  margin: auto; 
  background: #fff; 
  padding: 20px; 
  border-radius: 8px; 
  box-shadow: 0 0 10px #aaa; 
}

h2 { 
  color: #333; 
}

ul { 
  list-style-type: none; 
  padding: 0; 
}

li { 
  margin-bottom: 10px; 
}

button { 
  padding: 10px 15px; 
  background-color: #007bff; 
  border: none; 
  color: white; 
  border-radius: 5px; 
  cursor: pointer; 
}

button:hover { 
  background-color: #0056b3; 
}

.result { 
  font-size: 1.2em; 
  margin-top: 20px; 
}

const questions = [
  {
    question: "¿Qué significa el acrónimo P.A.S en primeros auxilios?",
    answers: [
      { text: "Proteger, Avisar, Socorrer", correct: true },
      { text: "Parar, Analizar, Socorrer", correct: false },
      { text: "Preparar, Ayudar, Sanar", correct: false }
    ]
  },
  {
    question: "¿Cómo comprobar si una persona está consciente",
    answers: [
      { text: "Nos acercamos y preguntamos como se encuentra,agitando suvamente los hombros", correct: true },
      { text: "Moviendo sus brazos y piernas sin preguntar", correct: false },
      { text: "Llamando a emergencias directamente sin comprobar", correct: false }
    ]
  },
  {
    question: "¿Cuál es la frecuencia recomendada de compresiones en RCP adulta?",
    answers: [
      { text: "100 a 120 compresiones por minuto", correct: true },
      { text: "60 a 80 compresiones por minuto", correct: false },
      { text: "150 a 180 compresiones por minuto", correct: false }
    ]
  },
  {
    question: "¿Qué se debe hacer ante una quemadura leve?",
    answers: [
      { text: "Enfriar con agua templada y cubrir con apósito limpio", correct: true },
      { text: "Aplicar crema con alcohol", correct: false },
      { text: "Romper las ampollas inmediatamente", correct: false }
    ]
  },
  {
    question: "¿Cuál es el primer paso ante un ahogamiento?",
    answers: [
      { text: "Comprobar si respira, abriendo la via aerea", correct: true },
      { text: "Introducir los dedos en la boca para sacar el objeto", correct: false },
      { text: "Esperar a que recupere la respiración sola", correct: false }
    ]
  },
  {
    question: "¿Qué síntomas pueden indicar un shock anafiláctico?",
    answers: [
      { text: "Dificultad para respirar, hinchazón y urticaria", correct: true },
      { text: "Fiebre alta y dolor de cabeza", correct: false },
      { text: "Tos seca y congestión nasal", correct: false }
    ]
  },
  {
    question: "¿Qué hacer si una persona está inconsciente pero respira?",
    answers: [
      { text: "Colocarla en posición lateral de seguridad", correct: true },
      { text: "Dejarla boca arriba y esperar", correct: false },
      { text: "Intentar darle agua para que despierte", correct: false }
    ]
  },
  {
    question: "¿Cuándo se debe iniciar la RCP en pediatría?",
    answers: [
      { text: "Cuando el niño no respira y no responde", correct: true },
      { text: "Cuando el niño tiene fiebre", correct: false },
      { text: "Cuando el niño está llorando fuerte", correct: false }
    ]
  },
  {
    question: "¿Cómo se debe actuar ante una hemorragia nasal?",
    answers: [
      { text: "Inclinar la cabeza hacia adelante y apretar la nariz", correct: true },
      { text: "Inclinar la cabeza hacia atrás y limpiar la sangre", correct: false },
      { text: "Aplicar hielo en la nuca", correct: false }
    ]
  },
  {
    question: "¿Qué hacer si una persona se atraganta y no puede respirar?",
    answers: [
      { text: "Realizar la maniobra de Heimlich", correct: true },
      { text: "Ponerla a correr para que tosa", correct: false },
      { text: "Ponerla a beber agua rápidamente", correct: false }
    ]
  },
  {
    question: "¿Qué se debe hacer si una persona tiene una fractura expuesta?",
    answers: [
      { text: "Cubrir la herida con apósito estéril sin mover el hueso", correct: true },
      { text: "Intentar recolocar el hueso en su lugar", correct: false },
      { text: "No hacer nada y esperar a que pase", correct: false }
    ]
  },
  {
    question: "¿Cuál es la prioridad en un accidente de tráfico?",
    answers: [
      { text: "Comprobar la seguridad y proteger la zona", correct: true },
      { text: "Mover a los heridos inmediatamente", correct: false },
      { text: "Sacar fotos del accidente", correct: false }
    ]
  },
  {
    question: "¿Qué hacer en caso de mordedura de animal?",
    answers: [
      { text: "Lavar con agua y jabón y acudir al médico", correct: true },
      { text: "Ignorar la herida si no duele", correct: false },
      { text: "Aplicar crema antibiótica sin limpiar", correct: false }
    ]
  },
  {
    question: "¿Qué se debe evitar en una quemadura grave?",
    answers: [
      { text: "Quitar la ropa pegada a la piel", correct: true },
      { text: "Aplicar agua fría", correct: false },
      { text: "Cubrir con una manta limpia", correct: false }
    ]
  },
  {
    question: "¿Qué hacer si una persona sufre un ataque epiléptico?",
    answers: [
      { text: "Proteger la cabeza y no restringir movimientos", correct: true },
      { text: "Intentar sujetarla fuertemente", correct: false },
      { text: "Meter algo en su boca para evitar que se muerda", correct: false }
    ]
  }
];

const questionContainer = document.getElementById('question-container');
const nextButton = document.getElementById('next-btn');
const resultDiv = document.getElementById('result');

let currentQuestionIndex = 0;
let score = 0;

function showQuestion() {
  resetState();
  const currentQuestion = questions[currentQuestionIndex];
  
  const questionEl = document.createElement('h3');
  questionEl.innerText = currentQuestion.question;
  questionContainer.appendChild(questionEl);
  
  const ul = document.createElement('ul');
  currentQuestion.answers.forEach(answer => {
    const li = document.createElement('li');
    const button = document.createElement('button');
    button.innerText = answer.text;
    button.onclick = () => selectAnswer(answer.correct);
    li.appendChild(button);
    ul.appendChild(li);
  });
  questionContainer.appendChild(ul);
  
  resultDiv.innerText = '';
  nextButton.style.display = 'none';
}

function resetState() {
  while (questionContainer.firstChild) {
    questionContainer.removeChild(questionContainer.firstChild);
  }
  resultDiv.innerText = '';
  nextButton.style.display = 'none';
}

function selectAnswer(isCorrect) {
  if (isCorrect) {
    score++;
  }
  Array.from(questionContainer.querySelectorAll('button')).forEach(button => {
    button.disabled = true;
  });
  nextButton.style.display = 'inline-block';
}

nextButton.addEventListener('click', () => {
  currentQuestionIndex++;
  if (currentQuestionIndex < questions.length) {
    showQuestion();
  } else {
    showResult();
  }
});

function showResult() {
  resetState();
  if(score === questions.length) {
    resultDiv.innerText = `¡Enhorabuena! Has acertado ${score} de ${questions.length} preguntas.`;
  } else {
    resultDiv.innerText = `Has acertado ${score} de ${questions.length} preguntas. ¡Sigue practicando!`;
  }
  nextButton.style.display = 'none';
}

showQuestion();