Edita código
Copiar al portapapeles
Ejecutar »
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Capítulos con desbloqueo por cuestionarios</title> <style> body { font-family: Arial, sans-serif; max-width: 700px; margin: 20px auto; background: #f0f0f0; padding: 10px; } .page { background: white; padding: 20px; margin-bottom: 30px; border-radius: 8px; box-shadow: 0 0 8px rgba(0,0,0,0.1); display: block; } .page.locked { display: none !important; } h2 { margin-top: 0; } form { margin-top: 20px; } .pregunta { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; } select { width: 100%; padding: 6px; font-size: 16px; } button { margin-top: 10px; padding: 10px 18px; font-size: 16px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; } button:hover { background: #0056b3; } </style> </head> <body> <!-- Capítulo 1: desbloqueado --> <div class="page" data-chapter="1"> <h2>Capítulo 1</h2> <p>Contenido del Capítulo 1: Introducción y conceptos básicos.</p> </div> <div class="page" data-chapter="1"> <form data-chapter="1" class="quiz-form"> <div class="pregunta"> <label>1. ¿Cuál es el color del cielo en un día despejado?</label> <select required> <option value="">Seleccione...</option> <option value="A">Rojo</option> <option value="B">Azul</option> <option value="C">Verde</option> <option value="D">Amarillo</option> </select> </div> <div class="pregunta"> <label>2. ¿Cuánto es 2 + 2?</label> <select required> <option value="">Seleccione...</option> <option value="A">3</option> <option value="B">4</option> <option value="C">5</option> <option value="D">6</option> </select> </div> <div class="pregunta"> <label>3. ¿Qué planeta es conocido como el planeta rojo?</label> <select required> <option value="">Seleccione...</option> <option value="A">Marte</option> <option value="B">Júpiter</option> <option value="C">Venus</option> <option value="D">Saturno</option> </select> </div> <div class="pregunta"> <label>4. ¿Qué animal es un mamífero?</label> <select required> <option value="">Seleccione...</option> <option value="A">Tiburón</option> <option value="B">Delfín</option> <option value="C">Pájaro</option> <option value="D">Tortuga</option> </select> </div> <div class="pregunta"> <label>5. ¿Qué gas respiramos principalmente?</label> <select required> <option value="">Seleccione...</option> <option value="A">Oxígeno</option> <option value="B">Nitrógeno</option> <option value="C">Dióxido de carbono</option> <option value="D">Hidrógeno</option> </select> </div> <button type="submit">Enviar respuestas</button> </form> </div> <!-- Capítulo 2: bloqueado --> <div class="page locked" data-chapter="2"> <h2>Capítulo 2</h2> <p>Contenido del Capítulo 2: Avanzando en el tema, ejemplos y aplicaciones.</p></div> <div class="page locked" data-chapter="2"> <form data-chapter="2" class="quiz-form"> <div class="pregunta"> <label>1. ¿Cuál es el símbolo químico del agua?</label> <select required> <option value="">Seleccione...</option> <option value="A">HO</option> <option value="B">H2O</option> <option value="C">O2</option> <option value="D">OH</option> </select> </div> <div class="pregunta"> <label>2. ¿Qué órgano bombea sangre al cuerpo?</label> <select required> <option value="">Seleccione...</option> <option value="A">Cerebro</option> <option value="B">Corazón</option> <option value="C">Pulmones</option> <option value="D">Riñones</option> </select> </div> <div class="pregunta"> <label>3. ¿Qué instrumento mide la temperatura?</label> <select required> <option value="">Seleccione...</option> <option value="A">Barómetro</option> <option value="B">Termómetro</option> <option value="C">Higrómetro</option> <option value="D">Anemómetro</option> </select> </div> <div class="pregunta"> <label>4. ¿Cuál es la capital de Japón?</label> <select required> <option value="">Seleccione...</option> <option value="A">Seúl</option> <option value="B">Pekín</option> <option value="C">Tokio</option> <option value="D">Bangkok</option> </select> </div> <div class="pregunta"> <label>5. ¿Qué gas es necesario para la fotosíntesis?</label> <select required> <option value="">Seleccione...</option> <option value="A">Oxígeno</option> <option value="B">Dióxido de carbono</option> <option value="C">Nitrógeno</option> <option value="D">Helio</option> </select> </div> <button type="submit">Enviar respuestas</button> </form> </div> <!-- Capítulo 3: bloqueado --> <div class="page locked" data-chapter="3"> <h2>Capítulo 3</h2> <p>Contenido del Capítulo 3: Conclusión y retos finales.</p></div> <div class="page locked" data-chapter="3"> <form data-chapter="3" class="quiz-form"> <div class="pregunta"> <label>1. ¿Qué planeta tiene anillos visibles?</label> <select required> <option value="">Seleccione...</option> <option value="A">Saturno</option> <option value="B">Júpiter</option> <option value="C">Marte</option> <option value="D">Venus</option> </select> </div> <div class="pregunta"> <label>2. ¿Quién escribió "Don Quijote"?</label> <select required> <option value="">Seleccione...</option> <option value="A">Miguel de Cervantes</option> <option value="B">Gabriel García Márquez</option> <option value="C">Pablo Neruda</option> <option value="D">Mario Vargas Llosa</option> </select> </div> <div class="pregunta"> <label>3. ¿Cuál es la fórmula química del dióxido de carbono?</label> <select required> <option value="">Seleccione...</option> <option value="A">CO</option> <option value="B">CO2</option> <option value="C">O2</option> <option value="D">CH4</option> </select> </div> <div class="pregunta"> <label>4. ¿Cuál es el océano más grande?</label> <select required> <option value="">Seleccione...</option> <option value="A">Atlántico</option> <option value="B">Pacífico</option> <option value="C">Índico</option> <option value="D">Ártico</option> </select> </div> <div class="pregunta"> <label>5. ¿Qué inventor es conocido por la bombilla eléctrica?</label> <select required> <option value="">Seleccione...</option> <option value="A">Nikola Tesla</option> <option value="B">Alexander Graham Bell</option> <option value="C">Thomas Edison</option> <option value="D">James Watt</option> </select> </div> <button type="submit">Enviar respuestas</button> </form> </div> <script> // Respuestas correctas por capítulo (ordenadas) const respuestasCorrectas = { 1: ['B', 'B', 'A', 'B', 'A'], 2: ['B', 'B', 'B', 'C', 'B'], 3: ['A', 'A', 'B', 'B', 'C'] }; // Función para mostrar todas las páginas que pertenecen a un capítulo function mostrarCapitulo(numero) { // Primero, ocultar todas las páginas document.querySelectorAll('.page').forEach(page => { page.classList.add('locked'); }); // Luego, mostrar todas las páginas del capítulo especificado document.querySelectorAll(`.page[data-chapter="${numero}"]`).forEach(page => { page.classList.remove('locked'); }); } // Manejar el envío del formulario, verificar respuestas y desbloquear siguiente capítulo function manejarEnvio(form) { const chapterNum = parseInt(form.getAttribute('data-chapter')); const selects = form.querySelectorAll('select'); const respuestasUsuario = []; for (const select of selects) { respuestasUsuario.push(select.value); } // Validar que todas las preguntas estén respondidas if (respuestasUsuario.includes('')) { alert("Por favor, responde todas las preguntas."); return; } const correctas = respuestasCorrectas[chapterNum]; let aciertos = 0; for (let i = 0; i < correctas.length; i++) { if (respuestasUsuario[i].toUpperCase() === correctas[i]) { aciertos++; } } const porcentaje = (aciertos / correctas.length) * 100; if (porcentaje >= 80) { alert(`¡Felicidades! Has desbloqueado el Capítulo ${chapterNum + 1}`); mostrarCapitulo(chapterNum + 1); } else { alert(`No alcanzaste el 80%. Intenta de nuevo.`); } } // Asignar evento submit a todos los formularios de cuestionarios document.querySelectorAll('.quiz-form').forEach(form => { form.addEventListener('submit', e => { e.preventDefault(); manejarEnvio(form); }); }); </script> </body> </html>
Resultado
Instrucciones