HTML Editor

Edita código
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cuestionario HTML, CSS y JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f5f1;
            margin: 0;
            padding: 20px;
        }
        .cuestionario {
            width: 80%;
            margin: 40px auto;
            padding: 20px;
            background-color: #f5e8da;
            border: 1px solid #d3b8a5;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h2, h3 {
            text-align: center;
        }
        .pregunta {
            margin-bottom: 20px;
        }
        .pregunta-numero {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: brown;
            color: white;
            border-radius: 50%;
            font-weight: bold;
            margin-right: 10px;
        }
        .opcion {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .opcion:hover {
            background-color: #f2e8dd;
        }
        .opcion.correcta {
            background-color: #c6efce;
        }
        .opcion.incorrecta {
            background-color: #ffc6c6;
        }
        .letra-opcion {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #b33a3a;
            color: white;
            border-radius: 50%;
            font-weight: bold;
            margin-right: 10px;
        }
        .siguiente {
            background-color: #4CAF50;
            color: #ffffff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none;
        }
        .resultado {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
            display: none;
        }
        .barra-temporizador {
            width: 100%;
            background-color: #e6ddd5;
            height: 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        .barra-progreso {
            height: 100%;
            background-color: #4CAF50;
            width: 0%;
            border-radius: 10px;
            text-align: center;
            color: white;
            font-weight: bold;
            line-height: 30px;
            font-size: 18px;
        }
        .temporizador {
            font-size: 20px;
            color: #333;
            text-align: center;
            margin-top: -10px;
            font-weight: bold;
        }
        .locked {
            display: none;
        }
        .unlocked {
            display: block;
            color: black;
            cursor: pointer;
        }
        .feedback {
            font-size: 18px;
            margin-top: 20px;
            display: none;
        }
        .reiniciar {
            background-color: #f44336;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="cuestionario">
        <h2>Cuestionario HTML, CSS y JavaScript</h2>

        <!-- Barra del porcentaje de progreso -->
        <div class="barra-temporizador">
            <div class="barra-progreso" id="barraProgreso">0%</div>
        </div>

        <!-- Temporizador -->
        <div class="temporizador" id="temporizador">Tiempo restante: 05:00</div>

        <!-- Preguntas -->
        <div id="preguntasContainer"></div>

        <div class="resultado" id="resultado">
            <p>Has respondido correctamente <span id="correctas">0</span> de <span id="total">20</span> preguntas.</p>
            <p>Tu porcentaje de aciertos es: <span id="porcentaje">0</span>%</p>
            <p class="feedback" id="feedback"></p>
        </div>

        <button class="siguiente" id="siguiente" onclick="siguientePregunta()" style="display:none;">Siguiente</button>
        <button class="reiniciar" id="reiniciar" onclick="reiniciarCuestionario()" style="display:none;">Intentar de nuevo</button>
    </div>

    <!-- Capítulos bloqueados/desbloqueados -->
    <div>
        <h3>Capítulos Desbloqueables</h3>
        <div id="capitulo1" data-chapter="1" class="locked">Capítulo 1: Introducción a HTML</div>
        <div id="capitulo2" data-chapter="2" class="locked">Capítulo 2: Introducción a CSS</div>
        <div id="capitulo3" data-chapter="3" class="locked">Capítulo 3: Introducción a JavaScript</div>
        <div id="capitulo4" data-chapter="4" class="locked">Capítulo 4: Proyecto Completo</div>
    </div>

    <script>
        let preguntas = [
            {
                pregunta: "¿Qué significa HTML?",
                opciones: [
                    { texto: "Hyperlinks and Text Markup Language", correcta: false },
                    { texto: "Home Tool Markup Language", correcta: false },
                    { texto: "Hyper Text Markup Language", correcta: true },
                    { texto: "Hyperlinks Tool Management Language", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué propiedad de CSS cambia el color de fondo?",
                opciones: [
                    { texto: "background-color", correcta: true },
                    { texto: "color", correcta: false },
                    { texto: "border-color", correcta: false },
                    { texto: "font-color", correcta: false }
                ]
            },
            {
                pregunta: "¿Cuál de las siguientes etiquetas HTML es semánticamente correcta para un encabezado principal?",
                opciones: [
                    { texto: "<div>", correcta: false },
                    { texto: "<h1>", correcta: true },
                    { texto: "<p>", correcta: false },
                    { texto: "<footer>", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué propiedad de CSS se utiliza para cambiar el tamaño de la fuente?",
                opciones: [
                    { texto: "font-style", correcta: false },
                    { texto: "font-size", correcta: true },
                    { texto: "font-weight", correcta: false },
                    { texto: "text-size", correcta: false }
                ]
            },
            {
                pregunta: "¿Cuál es la forma correcta de enlazar un archivo CSS externo en HTML?",
                opciones: [
                    { texto: "<style src='estilos.css'>", correcta: false },
                    { texto: "<link rel='stylesheet' href='estilos.css'>", correcta: true },
                    { texto: "<css src='estilos.css'>", correcta: false },
                    { texto: "<link href='estilos.css'>", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué función de JavaScript se usa para seleccionar un elemento por su ID?",
                opciones: [
                    { texto: "getElementByClass", correcta: false },
                    { texto: "getElementById", correcta: true },
                    { texto: "querySelectorAll", correcta: false },
                    { texto: "getId", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué palabra clave se utiliza para declarar una variable en JavaScript que no puede ser reasignada?",
                opciones: [
                    { texto: "const", correcta: true },
                    { texto: "let", correcta: false },
                    { texto: "var", correcta: false },
                    { texto: "static", correcta: false }
                ]
            },
            {
                pregunta: "¿Cuál es la estructura correcta de un documento HTML5?",
                opciones: [
                    { texto: "<!DOCTYPE html>, <html>, <head>, <body>", correcta: true },
                    { texto: "<html>, <title>, <body>", correcta: false },
                    { texto: "<html>, <head>, <footer>", correcta: false },
                    { texto: "<header>, <body>, <footer>", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué etiqueta HTML se utiliza para crear un hipervínculo?",
                opciones: [
                    { texto: "<link>", correcta: false },
                    { texto: "<a>", correcta: true },
                    { texto: "<href>", correcta: false },
                    { texto: "<button>", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué significa CSS?",
                opciones: [
                    { texto: "Computer Style Sheets", correcta: false },
                    { texto: "Cascading Style Sheets", correcta: true },
                    { texto: "Creative Style Sheets", correcta: false },
                    { texto: "Cascading Sheets Style", correcta: false }
                ]
            },
            {
                pregunta: "¿Cómo se puede hacer que una página web sea responsiva?",
                opciones: [
                    { texto: "Usando media queries", correcta: true },
                    { texto: "Usando etiquetas <responsive>", correcta: false },
                    { texto: "Añadiendo imágenes más pequeñas", correcta: false },
                    { texto: "Usando más CSS", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué atributo se usa para establecer un enlace en una etiqueta <a>?",
                opciones: [
                    { texto: "href", correcta: true },
                    { texto: "src", correcta: false },
                    { texto: "link", correcta: false },
                    { texto: "target", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué propiedad de CSS se utiliza para alinear texto?",
                opciones: [
                    { texto: "text-align", correcta: true },
                    { texto: "align-text", correcta: false },
                    { texto: "justify", correcta: false },
                    { texto: "font-align", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué etiqueta HTML define una tabla?",
                opciones: [
                    { texto: "<table>", correcta: true },
                    { texto: "<tab>", correcta: false },
                    { texto: "<td>", correcta: false },
                    { texto: "<tr>", correcta: false }
                ]
            },
            {
                pregunta: "¿Cómo se crea un comentario en JavaScript?",
                opciones: [
                    { texto: "// Esto es un comentario", correcta: true },
                    { texto: "/* Esto es un comentario */", correcta: false },
                    { texto: "<!-- Esto es un comentario -->", correcta: false },
                    { texto: "## Esto es un comentario", correcta: false }
                ]
            },
            {
                pregunta: "¿Cuál de las siguientes es una función de JavaScript para escribir un mensaje en la consola?",
                opciones: [
                    { texto: "console.log()", correcta: true },
                    { texto: "console.print()", correcta: false },
                    { texto: "console.write()", correcta: false },
                    { texto: "console.alert()", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué significa el término DOM en JavaScript?",
                opciones: [
                    { texto: "Document Object Model", correcta: true },
                    { texto: "Document of Model", correcta: false },
                    { texto: "Document Object Markup", correcta: false },
                    { texto: "Document Operator Mode", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué propiedad de CSS controla el espacio dentro de un elemento?",
                opciones: [
                    { texto: "padding", correcta: true },
                    { texto: "margin", correcta: false },
                    { texto: "border", correcta: false },
                    { texto: "spacing", correcta: false }
                ]
            },
            {
                pregunta: "¿Cómo se puede aplicar una clase CSS a un elemento en HTML?",
                opciones: [
                    { texto: "<div id='nombreClase'>", correcta: false },
                    { texto: "<div src='nombreClase'>", correcta: false },
                    { texto: "<div class='nombreClase'>", correcta: true },
                    { texto: "<div style='nombreClase'>", correcta: false }
                ]
            },
            {
                pregunta: "¿Qué etiqueta HTML se utiliza para crear un cuadro de texto?",
                opciones: [
                    { texto: "<input type='text'>", correcta: true },
                    { texto: "<textarea>", correcta: false },
                    { texto: "<input type='submit'>", correcta: false },
                    { texto: "<label>", correcta: false }
                ]
            }
        ];

        const totalPreguntas = preguntas.length;
        let indicePregunta = 0;
        let respuestasCorrectas = 0;
        let preguntasContestadas = 0;
        let barraProgreso = document.getElementById('barraProgreso');
        let preguntasContainer = document.getElementById('preguntasContainer');
        let porcentajeDisplay = document.getElementById('porcentaje');
        let correctasDisplay = document.getElementById('correctas');
        let siguienteBtn = document.getElementById('siguiente');
        let tiempoRestante = 300; // 5 minutos en segundos
        let temporizadorDisplay = document.getElementById('temporizador');
        let temporizador;

        // Barajar preguntas y respuestas
        function barajar(arr) {
            for (let i = arr.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
        }

        // Mostrar la pregunta actual
        function mostrarPregunta() {
            let preguntaActual = preguntas[indicePregunta];
            let opcionesHTML = "";

            // Barajar opciones
            barajar(preguntaActual.opciones);

            preguntaActual.opciones.forEach((opcion, index) => {
                let letra = String.fromCharCode(65 + index); // A, B, C, D
                opcionesHTML += `
                    <div class="opcion" data-correcta="${opcion.correcta}" onclick="seleccionarRespuesta(this)">
                        <span class="letra-opcion">${letra}</span>
                        ${opcion.texto}
                    </div>
                `;
            });

            preguntasContainer.innerHTML = `
                <div class="pregunta">
                    <span class="pregunta-numero">${indicePregunta + 1}</span>
                    <p>${preguntaActual.pregunta}</p>
                    ${opcionesHTML}
                </div>
                <p>Progreso: ${Math.floor((indicePregunta / totalPreguntas) * 100)}% de preguntas completadas</p>
            `;
        }

        // Controlar la selección de respuestas
        function seleccionarRespuesta(elemento) {
            const correcta = elemento.getAttribute('data-correcta') === 'true';

            if (correcta) {
                elemento.classList.add('correcta');
                respuestasCorrectas++;
            } else {
                elemento.classList.add('incorrecta');
                mostrarRespuestaCorrecta(); // Mostrar la respuesta correcta
            }

            preguntasContestadas++;

            // Actualizar el progreso de respuestas correctas
            actualizarProgreso();

            // Deshabilitar clics adicionales
            const opciones = document.querySelectorAll('.opcion');
            opciones.forEach(op => op.style.pointerEvents = 'none');

            if (indicePregunta < totalPreguntas - 1) {
                siguienteBtn.style.display = 'block';  // Mostrar botón "Siguiente"
            } else {
                mostrarResultado();
            }
        }

        // Mostrar la respuesta correcta si el usuario falló
        function mostrarRespuestaCorrecta() {
            const opciones = document.querySelectorAll('.opcion');
            opciones.forEach(op => {
                if (op.getAttribute('data-correcta') === 'true') {
                    op.classList.add('correcta');
                }
            });
        }

        // Actualizar el progreso de respuestas correctas
        function actualizarProgreso() {
            const porcentaje = (respuestasCorrectas / preguntasContestadas) * 100;
            barraProgreso.style.width = `${porcentaje}%`;
            barraProgreso.textContent = `${porcentaje.toFixed(2)}%`;
        }

        // Actualizar el tiempo restante
        function actualizarTemporizador() {
            const minutos = Math.floor(tiempoRestante / 60);
            const segundos = tiempoRestante % 60;
            const tiempoFormateado = `${minutos < 10 ? '0' : ''}${minutos}:${segundos < 10 ? '0' : ''}${segundos}`;
            temporizadorDisplay.textContent = `Tiempo restante: ${tiempoFormateado}`;

            if (tiempoRestante <= 0) {
                mostrarResultado(); // Mostrar resultado cuando el tiempo se acaba
            }
        }

        // Iniciar el temporizador
        function iniciarTemporizador() {
            temporizador = setInterval(() => {
                tiempoRestante--;
                actualizarTemporizador();

                if (tiempoRestante <= 0) {
                    clearInterval(temporizador);
                    mostrarResultado();
                }
            }, 1000);
        }

        // Avanzar a la siguiente pregunta
        function siguientePregunta() {
            indicePregunta++;
            if (indicePregunta < totalPreguntas) {
                mostrarPregunta();  // Mostrar la siguiente pregunta
            }
            siguienteBtn.style.display = 'none';  // Ocultar botón después de avanzar
        }

        function mostrarResultado() {
            clearInterval(temporizador); // Detener el temporizador
            preguntasContainer.innerHTML = ''; // Limpiar las preguntas
            document.getElementById('resultado').style.display = 'block';
            correctasDisplay.textContent = respuestasCorrectas;
            porcentajeDisplay.textContent = ((respuestasCorrectas / preguntasContestadas) * 100).toFixed(2);
            desbloquearCapitulos((respuestasCorrectas / preguntasContestadas) * 100);
            document.getElementById('reiniciar').style.display = 'block';
        }

        // Desbloqueo progresivo de capítulos
        function desbloquearCapitulos(porcentaje) {
            let mensaje = '';
            if (porcentaje >= 80) {
                desbloquearCapitulo(1);
                mensaje += 'Capítulo 1 desbloqueado. ';
            }
           
            document.getElementById('feedback').textContent = mensaje;
            document.getElementById('feedback').style.display = 'block';
        }

        function desbloquearCapitulo(numCapitulo) {
            let capitulo = document.querySelector(`[data-chapter="${numCapitulo}"]`);
            capitulo.classList.remove('locked');
            capitulo.classList.add('unlocked');
        }

        // Reiniciar el cuestionario
        function reiniciarCuestionario() {
            location.reload();
        }

        // Iniciar el cuestionario
        function iniciarCuestionario() {
            barajar(preguntas); // Barajar preguntas
            mostrarPregunta();
            iniciarTemporizador();
        }

        // Iniciar cuestionario al cargar la página
        iniciarCuestionario();
    </script>
</body>
</html>