HTML Editor

Edita código
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cuestionario de Cultura General</title>
  <style>
    /* Estilos para el cuestionario */
	body {
		font-family: Arial, sans-serif;
	}
    .cuestionario {
      width: 80%;
      margin: 40px auto;
      padding: 20px;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .pregunta {
      margin-bottom: 20px;
    }
    
    .opcion {
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
      cursor: pointer;
    }
    
    .opcion:hover {
      background-color: #f2f2f2;
    }
    
    .opcion.correcta {
      background-color: #c6efce;
    }
    
    .opcion.incorrecta {
      background-color: #ffc6c6;
    }
    
    .opcion .letra {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ff0000;
      color: #ffffff;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
      margin-right: 10px;
	  padding: 4px;
	  padding-left:8px;
	  padding-right:8px;
    }
    
    .opcion .respuesta {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
    
    .siguiente {
      background-color: #4CAF50;
      color: #ffffff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .siguiente:hover {
      background-color: #3e8e41;
    }
    
    .resultado {
      font-size: 24px;
      font-weight: bold;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="cuestionario">
    <h2>Cuestionario de Cultura General</h2>
    <div class="pregunta" id="pregunta-1">
      <p>Pregunta 1: ¿Cuál es la capital de Francia?</p>
      <div class="opcion" data-correcta="true">
        <span class="letra">A</span>
        <span class="respuesta">París</span>
      </div>
      <div class="opcion">
        <span class="letra">B</span>
        <span class="respuesta">Londres</span>
      </div>
      <div class="opcion">
        <span class="letra">C</span>
        <span class="respuesta">Berlín</span>
      </div>
      <div class="opcion">
        <span class="letra">D</span>
        <span class="respuesta">Roma</span>
      </div>
      <button class="siguiente" id="siguiente-1">Siguiente</button>
    </div>
    <!-- Preguntas 2 a 10 -->
    <div class="pregunta" id="pregunta-10" style="display: none;">
      <p>Pregunta 10: ¿Cuál es el nombre del planeta más grande del sistema solar?</p>
      <div class="opcion" data-correcta="true">
        <span class="letra">A</span>
        <span class="respuesta">Júpiter</span>
      </div>
      <div class="opcion">
        <span class="letra">B</span>
        <span class="respuesta">Saturno</span>
      </div>
      <div class="opcion">
        <span class="letra">C</span>
        <span class="respuesta">Urano</span>
      </div>
      <div class="opcion">
        <span class="letra">D</span>
        <span class="respuesta">Neptuno</span>
      </div>
      <button class="siguiente" id="siguiente-10">Finalizar</button>
    </div>
    <div class="resultado" style="display: none;">
      <p>Has respondido correctamente <span id="correctas">0</span> de <span id="total">10</span> preguntas.</p>
    </div>
  </div>
  <script>
    // Código JavaScript para el cuestionario
    const preguntas = document.querySelectorAll('.pregunta');
    const opciones = document.querySelectorAll('.opcion');
    const siguiente = document.querySelectorAll('.siguiente');
    const resultado = document.querySelector('.resultado');
    const correctas = document.getElementById('correctas');
    const total = document.getElementById('total');
    
    let indicePregunta = 0;
    let respuestasCorrectas = 0;
    
    siguiente.forEach((boton, indice) => {
      boton.addEventListener('click', () => {
        if (indice === preguntas.length - 1) {
          // Finalizar el cuestionario
          resultado.style.display = 'block';
          correctas.textContent = respuestasCorrectas;
          total.textContent = preguntas.length;
        } else {
          // Mostrar la siguiente pregunta
          preguntas[indicePregunta].style.display = 'none';
          indicePregunta++;
          preguntas[indicePregunta].style.display = 'block';
        }
      });
    });
    
    opciones.forEach((opcion) => {
      opcion.addEventListener('click', () => {
        // Inhabilitar los botones
        opcion.parentNode.querySelectorAll('.opcion').forEach((op) => {
          op.style.pointerEvents = 'none';
        });
        
        // Colorear la respuesta correcta
        if (opcion.getAttribute('data-correcta') === 'true') {
          opcion.classList.add('correcta');
          respuestasCorrectas++;
        } else {
          opcion.classList.add('incorrecta');
        }
        
        // Colorear la respuesta correcta en caso de que no sea la seleccionada
        opcion.parentNode.querySelectorAll('.opcion').forEach((op) => {
          if (op.getAttribute('data-correcta') === 'true' && op !== opcion) {
            op.classList.add('correcta');
          }
        });
      });
    });
  </script>
</body>
</html>