<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cuestionario de Inicio sobre HTML, CSS y JS</title> <style> .cuestionario { width: 100%; margin: 40px auto; padding: 10px; background-color: #f5e8da; border: 1px solid #d3b8a5; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .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; } .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> <p style="font-size:20px; color:blue"><strong>Total de preguntas: </strong><span id="totalPreguntasDisplay"></span></p> <!-- 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">5</span> preguntas.</p> <p>Tu porcentaje de aciertos es: <span id="porcentaje">0</span>%</p> <p>Total de preguntas: <span id="totalPreguntasDisplay"></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> <div class="page locked " data-chapter="1" > <bibref ref_id="RER119">1-Este capítulo, está tomado del libro: Diseño de libros interactivos </bibref> <h2 id="c11" style="color:brown">Etiquetas HTML</h2> <img class="image_expand" style="box-shadow:none;" onclick="openImage(this)" src="imagenes/i1.png" width="25%"> <p>HTML es un lenguaje de marcas (etiquetas) para formatear y estructurar un documento, que puede leerse en cualquier navegador. Está estandarizado por la norma ISO de SGML (<i>Standard Generalized Markup Language</i>).</p> <br> <p>Un documento HTML tiene tres etiquetas que describen su estructura y dan una información sencilla sobre él:</p> <p style="text-align:center;"><code>&lt;html&gt;</code>, <code>&lt;head&gt;</code> y <code>&lt;body&gt;</code></p> <p>Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas.</p> </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: "¿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é 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 } ] } ]; 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; // Cambiar el cálculo para basarlo en el total de preguntas porcentajeDisplay.textContent = ((respuestasCorrectas / totalPreguntas) * 100).toFixed(2); desbloquearCapitulos((respuestasCorrectas / totalPreguntas) * 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) { // Selecciona todos los elementos del capítulo (portada y páginas) que tienen el mismo data-chapter let paginas = document.querySelectorAll(`[data-chapter="${numCapitulo}"]`); // Recorre todos los elementos y elimina la clase 'locked' paginas.forEach(pagina => { pagina.classList.remove('locked'); }); } // Reiniciar el cuestionario function reiniciarCuestionario() { location.reload(); } // Iniciar el cuestionario function iniciarCuestionario() { barajar(preguntas); // Barajar preguntas mostrarPregunta(); iniciarTemporizador(); document.getElementById('totalPreguntasDisplay').textContent = totalPreguntas; } // Iniciar cuestionario al cargar la página iniciarCuestionario(); </script> </body> </html>