Bloque 1 - Fundamentos

/*******************CONTROLADOR OBTENER CUESTIONARIOS**************************/ // Obtener el ID del curso desde PHP const cursoID = ; // Contenedor donde se agregarán los bloques const container = document.querySelector(".container"); // Variables globales para controlar el estado let todosTemasCompletados = false; let cuestionarioMostrado = false; let preguntasGlobales = []; // Función para generar un bloque de tema function generarBloque(tema, temaIndex) { const bloqueDiv = document.createElement("div"); bloqueDiv.className = "tema-container mb-5 p-4 border rounded"; bloqueDiv.innerHTML = `

${tema.titulo}

`; container.appendChild(bloqueDiv); const listaTemas = bloqueDiv.querySelector(`#lista-temas-${temaIndex}`); const progressBar = bloqueDiv.querySelector(`#progress-bar-${temaIndex}`); const siguienteTema = bloqueDiv.querySelector(`#siguiente-tema-${temaIndex}`); const reproductorContainer = bloqueDiv.querySelector(`#reproductor-container-${temaIndex}`); const reproductor = bloqueDiv.querySelector(`#reproductor-${temaIndex}`); const controlesMaterial = bloqueDiv.querySelector(`#controles-material-${temaIndex}`); const siguienteMaterial = bloqueDiv.querySelector(`#siguiente-material-${temaIndex}`); const contadorMaterial = bloqueDiv.querySelector(`#contador-material-${temaIndex}`); // Variables de estado let temaActual = 0; let materialActual = 0; let materialesActuales = []; // Mostrar los subtemas (contenidos) if (tema.contenidos && tema.contenidos.length > 0) { tema.contenidos.forEach((contenido, index) => { const li = document.createElement("li"); li.className = "list-group-item d-flex justify-content-between align-items-center"; li.innerHTML = ` ${contenido.nombre} ⏳ `; listaTemas.appendChild(li); }); } else { listaTemas.innerHTML = '

No hay subtemas disponibles

'; } // Lógica del botón "Siguiente Tema" siguienteTema.addEventListener("click", () => { if (temaActual < (tema.contenidos?.length || 0)) { // Marcar tema como completado const check = document.getElementById(`check-${temaIndex}-${temaActual}`); if (check) { check.innerText = "✅"; check.classList.replace("bg-secondary", "bg-success"); } // Cargar materiales del tema actual const contenidoActual = tema.contenidos[temaActual]; if (contenidoActual?.materiales) { materialesActuales = []; contenidoActual.materiales.tipos.forEach((tipo, i) => { // Solo aceptamos videos y PDFs if (['video', 'pdf'].includes(tipo.toLowerCase())) { materialesActuales.push({ tipo: tipo.toLowerCase(), ruta: contenidoActual.materiales.rutas[i] }); } }); materialActual = 0; if (materialesActuales.length > 0) { mostrarMaterial(temaIndex, materialActual); reproductorContainer.style.display = "block"; controlesMaterial.style.display = materialesActuales.length > 1 ? "flex" : "none"; } else { reproductorContainer.style.display = "none"; } } temaActual++; const progreso = (temaActual / (tema.contenidos?.length || 1)) * 100; progressBar.style.width = `${progreso}%`; progressBar.innerText = `${Math.floor(progreso)}%`; // Verificar si todos los temas están completos if (temaActual === (tema.contenidos?.length || 0)) { verificarTodosTemasCompletados(); } } }); // Lógica del botón "Siguiente Material" siguienteMaterial.addEventListener("click", () => { materialActual++; if (materialActual < materialesActuales.length) { mostrarMaterial(temaIndex, materialActual); actualizarContadorMaterial(); } else { reproductorContainer.style.display = "none"; } }); // Función para mostrar material específico // function mostrarMaterial(temaIndex, materialIndex) { // const material = materialesActuales[materialIndex]; // reproductor.innerHTML = ''; // if (material.tipo === 'Video') { // reproductor.innerHTML = ` //

// `; // } else if (material.tipo === 'pdf') { // reproductor.innerHTML = ` // // `; // } // actualizarContadorMaterial(); // } // function mostrarMaterial(temaIndex, materialIndex) { // const material = materialesActuales[materialIndex]; // reproductor.innerHTML = ''; // // Normalizar el tipo de material (convertir a minúsculas y eliminar espacios) // const tipoMaterial = material.tipo.toString().toLowerCase().trim(); // const rutaMaterial = material.ruta.trim(); // // Verificar que la ruta no comience con la parte del controlador para evitar duplicados // let rutaCompleta = rutaMaterial.startsWith('../../../../controllers/') ? // rutaMaterial : // `../../../../controllers/${rutaMaterial}`; // // Eliminar posibles barras diagonales duplicadas // rutaCompleta = rutaCompleta.replace(/([^:]\/)\/+/g, '$1'); // if (tipoMaterial === 'video') { // reproductor.innerHTML = ` //

// // Abrir video en nueva pestaña // //

// `; // // Auto-reproducir el video (opcional) // const videoElement = reproductor.querySelector('video'); // if (videoElement) { // videoElement.addEventListener('loadedmetadata', () => { // videoElement.play().catch(e => console.log('Auto-play no permitido:', e)); // }); // } // } else if (tipoMaterial === 'pdf') { // reproductor.innerHTML = ` //

// //

// // Abrir PDF en nueva pestaña // //

// `; // } else { // // Si no es video ni PDF, mostrar opción de descarga // reproductor.innerHTML = ` //

Formato de archivo no soportado para vista previa: ${material.tipo}

// // Descargar archivo // //

// `; // } // actualizarContadorMaterial(); // } // function actualizarContadorMaterial() { // contadorMaterial.textContent = `Material ${materialActual + 1} de ${materialesActuales.length}`; // } function mostrarMaterial(temaIndex, materialIndex) { const material = materialesActuales[materialIndex]; reproductor.innerHTML = ''; // Normalización robusta del tipo de material const tipoMaterial = String(material.tipo).toLowerCase().trim().replace(/\s+/g, ''); let rutaMaterial = String(material.ruta).trim(); // Limpieza de la ruta (eliminar múltiples barras y rutas relativas incorrectas) rutaMaterial = rutaMaterial .replace(/([^:]\/)\/+/g, '$1') // Eliminar barras duplicadas .replace(/^\/+/, '') // Eliminar barras iniciales .replace(/\/+$/, ''); // Eliminar barras finales // Construir ruta completa solo si no es una URL absoluta const rutaCompleta = rutaMaterial.startsWith('http') || rutaMaterial.startsWith('/') ? rutaMaterial : `../../../../controllers/${rutaMaterial}`; console.log(`Mostrando material ${materialIndex + 1}:`, { tipoOriginal: material.tipo, tipoNormalizado: tipoMaterial, rutaOriginal: material.ruta, rutaFinal: rutaCompleta }); // Sistema de visualización basado en extensión real como respaldo const extension = rutaCompleta.split('.').pop().toLowerCase(); const esVideo = ['mp4', 'webm', 'ogg'].includes(extension) || tipoMaterial.includes('video'); const esPDF = extension === 'pdf' || tipoMaterial.includes('pdf'); if (esVideo) { // REPRODUCTOR DE VIDEO reproductor.innerHTML = `

Video ${materialIndex + 1}/${materialesActuales.length} Abrir aparte

`; // Intento de reproducción automática (manejando errores) const videoElement = reproductor.querySelector('video'); if (videoElement) { videoElement.play().catch(error => { console.log('Reproducción automática no permitida:', error); // Mostrar mensaje para que el usuario inicie manualmente const playButton = document.createElement('button'); playButton.className = 'btn btn-primary btn-sm mt-2'; playButton.innerHTML = ' Reproducir Video'; playButton.onclick = () => videoElement.play(); videoElement.parentNode.appendChild(playButton); }); } } else if (esPDF) { // VISUALIZADOR DE PDF reproductor.innerHTML = `

PDF ${materialIndex + 1}/${materialesActuales.length}

Abrir aparte Descargar

`; } else { // VISUALIZACIÓN PARA TIPOS NO SOPORTADOS reproductor.innerHTML = `

Formato no soportado para vista previa

Tipo: ${material.tipo}

Extensión: .${extension}

${materialIndex + 1}/${materialesActuales.length}

Descargar archivo Intentar abrir

`; } // Actualizar controles de navegación actualizarControlesMateriales(temaIndex); } function actualizarControlesMateriales(temaIndex) { const siguienteBtn = document.querySelector(`#siguiente-material-${temaIndex}`); if (siguienteBtn) { siguienteBtn.style.display = materialActual < materialesActuales.length - 1 ? 'block' : 'none'; } } } // Función para verificar si todos los temas están completos function verificarTodosTemasCompletados() { const todosTemas = document.querySelectorAll('.tema-container'); let temasCompletos = 0; todosTemas.forEach((tema, index) => { const checks = tema.querySelectorAll('.list-group-item .badge.bg-success'); const totalChecks = tema.querySelectorAll('.list-group-item .badge').length; if (checks.length === totalChecks && totalChecks > 0) { temasCompletos++; } }); if (temasCompletos === todosTemas.length && !cuestionarioMostrado && preguntasGlobales.length > 0) { mostrarCuestionarioFinal(); cuestionarioMostrado = true; } } // Función para mostrar el cuestionario final function mostrarCuestionarioFinal() { const cuestionarioDiv = document.createElement("div"); cuestionarioDiv.className = "mt-5 p-4 border rounded bg-light"; cuestionarioDiv.innerHTML = `

Cuestionario Final

`; container.appendChild(cuestionarioDiv); const preguntasContainer = document.getElementById("preguntas-final-container"); preguntasGlobales.forEach((pregunta, index) => { const preguntaDiv = document.createElement("div"); preguntaDiv.className = "mb-4 p-3 border rounded bg-white"; let opcionesHTML = ""; if (pregunta.opciones && pregunta.opciones.length > 0) { pregunta.opciones.forEach((opcion, opcionIndex) => { opcionesHTML += `

${opcion.texto}

`; }); } preguntaDiv.innerHTML = `

${index + 1}. ${pregunta.texto}

${opcionesHTML} `; preguntasContainer.appendChild(preguntaDiv); }); // Manejar envío del cuestionario final document.getElementById("form-cuestionario-final").addEventListener("submit", (e) => { e.preventDefault(); calificarCuestionarioFinal(); }); } // Función para calificar el cuestionario final function calificarCuestionarioFinal() { let respuestasCorrectas = 0; preguntasGlobales.forEach((pregunta, index) => { const selectedOption = document.querySelector( `input[name="pregunta-final-${index}"]:checked`); if (selectedOption) { const opcionId = selectedOption.value; const opcion = pregunta.opciones.find(op => op.id == opcionId); if (opcion && opcion.correcta) { respuestasCorrectas++; } } }); const calificacion = (respuestasCorrectas / preguntasGlobales.length) * 10; alert(`Resultado del cuestionario final: ${calificacion.toFixed(1)}/10`); // Redirección o guardado de resultados window.location.href = `final.html?calificacion=${calificacion.toFixed(2)}`; } // Obtener datos del curso fetch(`../../../../controllers/obtencionCuestionariosController.php?curso_id=${cursoID}`) .then(response => { if (!response.ok) { throw new Error('Error en la solicitud: ' + response.status); } return response.json(); }) .then(data => { console.log("Datos recibidos:", data); if (data && data.temario) { // Guardar preguntas globalmente preguntasGlobales = data.preguntas || []; // Mostrar título del curso if (data.curso_title) { const tituloCurso = document.createElement("h1"); tituloCurso.className = "mb-4"; tituloCurso.textContent = data.curso_title; container.prepend(tituloCurso); } // Mostrar cada tema del temario data.temario.forEach((tema, index) => { try { generarBloque(tema, index); } catch (e) { console.error("Error generando bloque:", e); } }); } else { container.innerHTML = '

No se encontraron datos para este curso.

'; } }) .catch(error => { console.error('Error al obtener los datos:', error); container.innerHTML = '

Error al cargar el contenido del curso.

'; }); **************************************************************************************************************************************************************** Bloque 1 - Fundamentos

/*POSIBLE USO DESCARGARPDF*/ /* async function descargarCertificado(calificacion) { try { Swal.fire({ title: 'Generando certificado', html: 'Por favor espere...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } }); const response = await fetch( `../../../../controllers/generar_certificado.php?calificacion=${calificacion}&curso_id=${cursoID}`, { method: 'GET' }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Error al generar certificado: ${response.status} - ${errorData.error}`); } const contentDisposition = response.headers.get('Content-Disposition'); let filename = `certificado_${new Date().toISOString().split('T')[0]}.pdf`; if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) { const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; const matches = filenameRegex.exec(contentDisposition); if (matches != null && matches[1]) { filename = matches[1].replace(/['"]/g, ''); } } const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); a.remove(); Swal.close(); // ✅ Esperar un momento y redirigir al curso setTimeout(() => { window.location.href = `curso.php?cursoseleccionado=${cursoID}`; }, 2000); // Espera 2 segundos (ajustable) } catch (error) { console.error('Error al descargar certificado:', error); Swal.fire('Error', `No se pudo generar el certificado: ${error.message}`, 'error'); } } */