Vantive/Rotafilio_Vantive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update modificacion de template adaptativo y modificacion de algunas actividades

Browse Source
This commit is contained in:
David Martinez 2025-09-18 11:58:18 -06:00
parent a57cba5f67
commit 07100d82de
35 changed files with 1004 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
config.json
View File

@ -23,8 +23,12 @@
{
"title": "Navegación",
"content": "contenido/05.html"
},
{
"title": "Navegación",
"content": "contenido/06.html"
}
]
}
]
}
}

5
contenido/02.html
View File

@ -137,7 +137,7 @@
<div class="col-3">
<img src="img/2.2.png" alt="Riñones" class="img-fluid">
</div>
<div class="col-xl-5 col-8">
<div class="col-6">
<div class="main-video bg-primary rounded">
<div
class="video-custom rounded overflow-hidden border-0 border-primary shadow-sm position-relative">
@ -214,6 +214,7 @@
videoElement.addEventListener('ended', function () {
playPauseButton.innerHTML = playIconHTML;
videoSeekBar.value = 0;
CourseNav.setSlideVisited();
});
// Mute/Unmute
@ -347,4 +348,4 @@
}
});
})();
</script>
</script>

19
contenido/04.html
View File

@ -16,7 +16,8 @@
}
.bg-custom-transparent {
background: rgba(240, 244, 242, 0.6);
background: rgba(242, 232, 222, .76);
background: linear-gradient(to bottom, rgba(242, 232, 222, .6) 0%, rgba(240, 244, 242, .9) 100%);
}
/* .bg-custom-transparent img {
@ -53,7 +54,11 @@
max-width: 40%;
}
/*
.content-enfermedad {
width: 24%;
}
/*
.form-append>div:first-child {
width: 20%;
min-width: 50px;
@ -90,7 +95,7 @@
<div class="row justify-content-center">
<div class="col-12 mb-3">
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-4">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
@ -341,7 +346,7 @@
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
igualarAlturaBgCustomTransparent();
//igualarAlturaBgCustomTransparent();
});
@ -356,10 +361,10 @@
$('.bg-custom-transparent').css('height', maxHeight + 'px');
}
$(window).on('resize', igualarAlturaBgCustomTransparent);
igualarAlturaBgCustomTransparent();
/* $(window).on('resize', igualarAlturaBgCustomTransparent);
igualarAlturaBgCustomTransparent(); */
});
</script>
</script>

343
contenido/05.html
View File

@ -11,30 +11,18 @@
width: 50%;
}
.button-prev,
.button-next {
cursor: pointer;
width: 40px;
z-index: 50;
transition: opacity 0.3s;
}
.bg-custom {
background: #f0f4f2;
}
.bg-custom-transparent {
background: rgba(240, 244, 242, 0.6);
}
.drop-card {
border: 3px dashed var(--bs-primary);
width: 50px;
height: 50px;
width: 56px;
height: 56px;
}
/* .content-enfermedad {
width: 25%;
} */
.content-enfermedad img {
height: 200px;
height: 250px;
}
.card-drag {
@ -58,131 +46,51 @@
margin: 0 auto;
max-width: 40%;
}
.card-sort {
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
transition: transform 0.2s ease;
}
.card-sort:hover {
transform: scale(1.05);
}
.ui-sortable-helper {
transform: rotate(5deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.swiper-container {
overflow: hidden;
}
#activity1 img {
max-height: 250px;
}
</style>
<div class='page-sco py-2 py-md-4 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="col-11 mb-2">
<div class="col-11">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<h3 class="text-verde-oscuro fw-bold"><span class="text-gris">></span> Glucosa</h3>
<h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3>
</div>
<div class="col-12 mb-3">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un color que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución que les corresponde.</p>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
</div>
<div class="col-12">
<div class="row justify-content-center align-content-center">
<div class="col-1 d-flex justify-content-center align-items-center" style="z-index: 50;">
<img src="img/left.png" class="img-fluid button-prev" style="display: none;" alt="Left">
</div>
<div class="col-10">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-transparent text-white border-0">
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
<div class="col-12">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un
color
que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución
que
les corresponde.​</p>
</div>
</div>
</div>
<div id="drag-drop-activity" class="col-12">
<div class="row justify-content-center">
<div class="col-12">
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
</div>
<div class="col-12 mt-3">
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.1a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.2a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.3a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.4a.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card border-0 bg-transparent">
<div class="card-body d-flex flex-column justify-content-center align-items-center">
<div class="col-9">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para
colocarlos en el orden correcto.</p>
</div>
</div>
</div>
<div id="activity1" class="my-4">
<div id="sortable-cards" class="d-flex flex-row gap-3 justify-content-center flex-wrap">
<!-- Las tarjetas se generarán dinámicamente -->
</div>
</div>
</div>
</div>
</div>
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.1a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.2a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.3a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.4a.png" class="img-fluid">
</div>
</div>
</div>
<div class="col-1 d-flex justify-content-center align-items-center" style="z-index: 50;">
<img src="img/right.png" class="img-fluid button-next" alt="Left">
</div>
</div>
</div>
@ -375,175 +283,6 @@
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
igualarAlturaBgCustomTransparent();
});
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto
function igualarAlturaBgCustomTransparent() {
var maxHeight = 0;
$('.bg-custom-transparent').each(function () {
$(this).css('height', 'auto'); // Resetear altura para medir correctamente
var h = $(this).outerHeight();
if (h > maxHeight) maxHeight = h;
});
$('.bg-custom-transparent').css('height', maxHeight + 'px');
}
$(window).on('resize', igualarAlturaBgCustomTransparent);
igualarAlturaBgCustomTransparent();
// Función para mezclar array (algoritmo Fisher-Yates)
function shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
// Crear y mezclar las tarjetas
function createShuffledCards() {
const cards = [1, 2, 3];
const shuffledCards = shuffleArray(cards);
const container = $('#sortable-cards');
// Limpiar contenedor
container.empty();
// Crear tarjetas mezcladas
shuffledCards.forEach(number => {
const cardHtml = `
<div class="card border-0 card-sort bg-verde-claro text-white fw-bold text-center"
data-order="${number}"
style="cursor:grab;">
<div class="card-body px-0 py-0">
<img src="img/5.${number}b.png" class="img-fluid">
</div>
</div>
`;
container.append(cardHtml);
});
}
// Verificar si las tarjetas están en orden correcto
function checkOrder() {
let correct = true;
$('#sortable-cards .card-sort').each(function (index) {
if ($(this).data('order') === index + 1) {
$(this).removeClass('bg-verde-claro').addClass('bg-success');
} else {
$(this).css('background', ''); // reset
correct = false;
}
});
return correct;
}
// Inicializar Swiper
var mySwiper = new Swiper('.swiper-container', {
loop: false,
allowTouchMove: false,
simulateTouch: false,
navigation: {
nextEl: '.button-next',
prevEl: '.button-prev',
},
});
// Función para actualizar botones de navegación
function updateNavButtons(swiper) {
var prevBtn = document.querySelector('.button-prev');
var nextBtn = document.querySelector('.button-next');
var totalSlides = swiper.slides ? swiper.slides.length : 0;
if (totalSlides <= 1) {
$(prevBtn).hide();
return;
}
if (swiper.activeIndex === 0) {
$(prevBtn).hide();
$(nextBtn).show();
} else if (swiper.activeIndex === totalSlides - 1) {
$(nextBtn).hide();
$(prevBtn).show();
} else {
$(prevBtn).show();
$(nextBtn).show();
}
}
// Eventos de Swiper
mySwiper.on('slideChange', function () {
updateNavButtons(mySwiper);
});
// Inicializar estado de los botones
updateNavButtons(mySwiper);
// Crear tarjetas mezcladas al cargar
createShuffledCards();
// Configurar sortable
$('#sortable-cards').sortable({
axis: 'x',
containment: '#activity1',
cursor: 'grabbing',
tolerance: 'pointer',
update: function (event, ui) {
if (checkOrder()) {
const html = $("#pop0").html();
Swal.fire({
html: html,
target: "body",
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
},
confirmButtonText: "Cerrar",
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
CourseNav.setSlideVisited();
/* setTimeout(() => {
Swal.close();
CourseNav.nextSlide();
}, 100); */
},
});
}
},
start: function (event, ui) {
ui.item.addClass('ui-sortable-helper');
},
stop: function (event, ui) {
ui.item.removeClass('ui-sortable-helper');
}
});
// Hacer las tarjetas arrastrables
$('#sortable-cards').on('mousedown touchstart', '.card-sort', function () {
$(this).css('cursor', 'grabbing');
});
$(document).on('mouseup touchend', function () {
$('.card-sort').css('cursor', 'grab');
});
// Botón para reiniciar el juego (opcional)
$('.button-prev').on('click', function () {
setTimeout(createShuffledCards, 300); // Crear nuevas tarjetas mezcladas
});
});
</script>
</script>

549
contenido/05.html.back Normal file
View File

@ -0,0 +1,549 @@
<style>
.fake {
background-image: url(img/bg05.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hr-style {
opacity: 1;
width: 50%;
}
.button-prev,
.button-next {
cursor: pointer;
width: 40px;
z-index: 50;
transition: opacity 0.3s;
}
.bg-custom {
background: #f0f4f2;
}
.bg-custom-transparent {
background: rgba(240, 244, 242, 0.6);
}
.drop-card {
border: 3px dashed var(--bs-primary);
width: 50px;
height: 50px;
}
.content-enfermedad img {
height: 200px;
}
.card-drag {
cursor: grab;
width: 50px;
height: 50px;
}
.card-drag img {
width: 100%;
}
.card-drag.ui-draggable-dragging {
cursor: grabbing;
}
.img-retro {
top: -75px;
left: 0;
right: 0;
margin: 0 auto;
max-width: 40%;
}
.card-sort {
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
transition: transform 0.2s ease;
}
.card-sort:hover {
transform: scale(1.05);
}
.ui-sortable-helper {
transform: rotate(5deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.swiper-container {
overflow: hidden;
}
#activity1 img {
max-height: 250px;
}
</style>
<div class='page-sco py-2 py-md-4 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="col-11 mb-2">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<h3 class="text-verde-oscuro fw-bold"><span class="text-gris">></span> Glucosa</h3>
</div>
<div class="col-12">
<div class="row justify-content-center align-content-center">
<div class="col-1 d-flex justify-content-center align-items-center" style="z-index: 50;">
<img src="img/left.png" class="img-fluid button-prev" style="display: none;" alt="Left">
</div>
<div class="col-10">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-transparent text-white border-0">
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
<div class="col-12">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un
color
que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución
que
les corresponde.​</p>
</div>
</div>
</div>
<div id="drag-drop-activity" class="col-12">
<div class="row justify-content-center">
<div class="col-12">
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
</div>
<div class="col-12 mt-3">
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.1a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.2a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.3a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.4a.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card border-0 bg-transparent">
<div class="card-body d-flex flex-column justify-content-center align-items-center">
<div class="col-9">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para
colocarlos en el orden correcto.</p>
</div>
</div>
</div>
<div id="activity1" class="my-4">
<div id="sortable-cards" class="d-flex flex-row gap-3 justify-content-center flex-wrap">
<!-- Las tarjetas se generarán dinámicamente -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1 d-flex justify-content-center align-items-center" style="z-index: 50;">
<img src="img/right.png" class="img-fluid button-next" alt="Left">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0">Has concluido la actividad.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
'use strict';
$('body').addClass('fake');
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = 'Drag_Drop3.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var result = {};
workbook.SheetNames.forEach(sheetName => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
callback(result);
};
xhr.send();
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
});
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
};
});
return preguntas;
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function CreateDragAndDrop() {
$('.content-enfermedad').each(function (index) {
if (questions && questions[index]) {
const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
$(dropDiv).insertAfter($(this).find('.card'));
}
});
// Crear todas las respuestas en #content-drags
let allOptions = [];
questions.forEach((question, index) => {
question.opciones.forEach(opcion => {
allOptions.push({ text: opcion.text, index: index });
});
});
allOptions = shuffleArray(allOptions);
allOptions.forEach(option => {
const dragDiv = `<div class="card card-drag bg-transparent border border-2 border-secondary rounded-0 shadow-none text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$('#content-drags').append(dragDiv);
});
}
function initializeDragAndDrop() {
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing",
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
ui.position.top = 0;
},
drag: function (event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop;
ui.position.left = newLeft;
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
});
$('.drop-card').droppable({
accept: '.card-drag',
tolerance: 'pointer',
drop: function (event, ui) {
const dragData = ui.helper.data('drag');
const dropData = $(this).data('drop');
if (dragData == dropData) {
good.play();
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable('disable');
$(this).droppable('disable');
// Verificar si todos están completados
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
Completed();
}
} else {
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
});
}
function Completed() {
const html = $("#pop0").html();
Swal.fire({
html: html,
target: "body",
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
},
confirmButtonText: "Cerrar",
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
CourseNav.setSlideVisited();
/* setTimeout(() => {
Swal.close();
CourseNav.nextSlide();
}, 100); */
},
});
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
igualarAlturaBgCustomTransparent();
});
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto
function igualarAlturaBgCustomTransparent() {
var maxHeight = 0;
$('.bg-custom-transparent').each(function () {
$(this).css('height', 'auto'); // Resetear altura para medir correctamente
var h = $(this).outerHeight();
if (h > maxHeight) maxHeight = h;
});
$('.bg-custom-transparent').css('height', maxHeight + 'px');
}
$(window).on('resize', igualarAlturaBgCustomTransparent);
igualarAlturaBgCustomTransparent();
// Función para mezclar array (algoritmo Fisher-Yates)
function shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
// Crear y mezclar las tarjetas
function createShuffledCards() {
const cards = [1, 2, 3];
const shuffledCards = shuffleArray(cards);
const container = $('#sortable-cards');
// Limpiar contenedor
container.empty();
// Crear tarjetas mezcladas
shuffledCards.forEach(number => {
const cardHtml = `
<div class="card border-0 card-sort bg-verde-claro text-white fw-bold text-center"
data-order="${number}"
style="cursor:grab;">
<div class="card-body px-0 py-0">
<img src="img/5.${number}b.png" class="img-fluid">
</div>
</div>
`;
container.append(cardHtml);
});
}
// Verificar si las tarjetas están en orden correcto
function checkOrder() {
let correct = true;
$('#sortable-cards .card-sort').each(function (index) {
if ($(this).data('order') === index + 1) {
$(this).removeClass('bg-verde-claro').addClass('bg-success');
} else {
$(this).css('background', ''); // reset
correct = false;
}
});
return correct;
}
// Inicializar Swiper
var mySwiper = new Swiper('.swiper-container', {
loop: false,
allowTouchMove: false,
simulateTouch: false,
navigation: {
nextEl: '.button-next',
prevEl: '.button-prev',
},
});
// Función para actualizar botones de navegación
function updateNavButtons(swiper) {
var prevBtn = document.querySelector('.button-prev');
var nextBtn = document.querySelector('.button-next');
var totalSlides = swiper.slides ? swiper.slides.length : 0;
if (totalSlides <= 1) {
$(prevBtn).hide();
return;
}
if (swiper.activeIndex === 0) {
$(prevBtn).hide();
$(nextBtn).show();
} else if (swiper.activeIndex === totalSlides - 1) {
$(nextBtn).hide();
$(prevBtn).show();
} else {
$(prevBtn).show();
$(nextBtn).show();
}
}
// Eventos de Swiper
mySwiper.on('slideChange', function () {
updateNavButtons(mySwiper);
});
// Inicializar estado de los botones
updateNavButtons(mySwiper);
// Crear tarjetas mezcladas al cargar
createShuffledCards();
// Configurar sortable
$('#sortable-cards').sortable({
axis: 'x',
containment: '#activity1',
cursor: 'grabbing',
tolerance: 'pointer',
update: function (event, ui) {
if (checkOrder()) {
const html = $("#pop0").html();
Swal.fire({
html: html,
target: "body",
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
},
confirmButtonText: "Cerrar",
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
CourseNav.setSlideVisited();
/* setTimeout(() => {
Swal.close();
CourseNav.nextSlide();
}, 100); */
},
});
}
},
start: function (event, ui) {
ui.item.addClass('ui-sortable-helper');
},
stop: function (event, ui) {
ui.item.removeClass('ui-sortable-helper');
}
});
// Hacer las tarjetas arrastrables
$('#sortable-cards').on('mousedown touchstart', '.card-sort', function () {
$(this).css('cursor', 'grabbing');
});
$(document).on('mouseup touchend', function () {
$('.card-sort').css('cursor', 'grab');
});
// Botón para reiniciar el juego (opcional)
$('.button-prev').on('click', function () {
setTimeout(createShuffledCards, 300); // Crear nuevas tarjetas mezcladas
});
});
</script>

192
contenido/06.html Normal file
View File

@ -0,0 +1,192 @@
<style>
.fake {
background-image: url(img/bg05.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hr-style {
opacity: 1;
width: 50%;
}
#sortable-cards .card {
width: 23%;
}
</style>
<div class='page-sco py-2 py-md-4 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="col-11 mb-2">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
</div>
<div class="col-9 mb-3">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para
colocarlos en el orden correcto.</p>
</div>
</div>
</div>
<div class="col-12">
<div id="activity1" class="my-4">
<div id="sortable-cards" class="d-flex flex-row gap-3 justify-content-center flex-wrap">
<!-- Las tarjetas se generarán dinámicamente -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0">Has concluido la actividad.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('body').addClass('fake');
// Función para mezclar array (algoritmo Fisher-Yates)
function shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
// Crear y mezclar las tarjetas
function createShuffledCards() {
const cards = [1, 2, 3];
const shuffledCards = shuffleArray(cards);
const container = $('#sortable-cards');
// Limpiar contenedor
container.empty();
// Crear tarjetas mezcladas
shuffledCards.forEach(number => {
const cardHtml = `
<div class="card border-0 card-sort bg-verde-claro text-white fw-bold text-center"
data-order="${number}"
style="cursor:grab;">
<div class="card-body px-0 py-0">
<img src="img/5.${number}b.png" class="img-fluid">
</div>
</div>
`;
container.append(cardHtml);
});
}
// Verificar si las tarjetas están en orden correcto
function checkOrder() {
let correct = true;
$('#sortable-cards .card-sort').each(function (index) {
if ($(this).data('order') === index + 1) {
$(this).removeClass('bg-verde-claro').addClass('bg-verde-pasto');
} else {
$(this).css('background', ''); // reset
correct = false;
}
});
return correct;
}
// Crear tarjetas mezcladas al cargar
createShuffledCards();
// Configurar sortable
$('#sortable-cards').sortable({
axis: 'x',
containment: '#activity1',
cursor: 'grabbing',
tolerance: 'pointer',
helper: "clone",
cursorAt: { top: 50, left: 50 },
update: function (event, ui) {
if (checkOrder()) {
$('#sortable-cards').sortable('disable');
const html = $("#pop0").html();
Swal.fire({
html: html,
target: "body",
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
},
confirmButtonText: "Cerrar",
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
CourseNav.setSlideVisited();
/* setTimeout(() => {
Swal.close();
CourseNav.nextSlide();
}, 100); */
},
});
}
},
start: function (event, ui) {
ui.item.addClass('ui-sortable-helper');
if (ui.position) {
ui.position.left = 0;
ui.position.top = 0;
}
},
drag: function (event, ui) {
if (ui.position && ui.originalPosition) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop;
ui.position.left = newLeft;
ui.position.top = newTop;
}
},
stop: function (event, ui) {
ui.item.removeClass('ui-sortable-helper');
}
});
// Hacer las tarjetas arrastrables
$('#sortable-cards').on('mousedown touchstart', '.card-sort', function () {
$(this).css('cursor', 'grabbing');
});
$(document).on('mouseup touchend', function () {
$('.card-sort').css('cursor', 'grab');
});
});
</script>

0
contenido/07.html Normal file
View File

7
css/style.css
View File

@ -262,6 +262,13 @@ body > main {
z-index: 1;
}
.wrap-course-content footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#coursenav-offcanvas {
border-top-right-radius: 30px !important;
border-bottom-right-radius: 30px !important;

2
css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
css/theme.scss
View File

@ -10,6 +10,7 @@ $custom-colors: (
'verde-ceniza': #84a79c,
'verde-oscuro': #105742,
'verde-pino': #4c8071,
'verde-pasto': #84a816,
'verde-claro': #d6e3da,
'lila-claro': #905c8b,
'morado-claro': #915c8c,

86
css/themee.css
View File

@ -70,6 +70,7 @@
--bs-verde-ceniza: #84a79c;
--bs-verde-oscuro: #105742;
--bs-verde-pino: #4c8071;
--bs-verde-pasto: #84a816;
--bs-verde-claro: #d6e3da;
--bs-lila-claro: #905c8b;
--bs-morado-claro: #915c8c;
@ -97,6 +98,7 @@
--bs-verde-ceniza-rgb: 132, 167, 156;
--bs-verde-oscuro-rgb: 16, 87, 66;
--bs-verde-pino-rgb: 76, 128, 113;
--bs-verde-pasto-rgb: 132, 168, 22;
--bs-verde-claro-rgb: 214, 227, 218;
--bs-lila-claro-rgb: 144, 92, 139;
--bs-morado-claro-rgb: 145, 92, 140;
@ -3284,6 +3286,23 @@ textarea.form-control-lg {
--bs-btn-disabled-border-color: #4c8071;
}
.btn-verde-pasto {
--bs-btn-color: #000;
--bs-btn-bg: #84a816;
--bs-btn-border-color: #84a816;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #96b539;
--bs-btn-hover-border-color: #90b12d;
--bs-btn-focus-shadow-rgb: 112, 143, 19;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #9db945;
--bs-btn-active-border-color: #90b12d;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #84a816;
--bs-btn-disabled-border-color: #84a816;
}
.btn-verde-claro {
--bs-btn-color: #000;
--bs-btn-bg: #d6e3da;
@ -3743,6 +3762,23 @@ textarea.form-control-lg {
--bs-gradient: none;
}
.btn-outline-verde-pasto {
--bs-btn-color: #84a816;
--bs-btn-border-color: #84a816;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #84a816;
--bs-btn-hover-border-color: #84a816;
--bs-btn-focus-shadow-rgb: 132, 168, 22;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #84a816;
--bs-btn-active-border-color: #84a816;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #84a816;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #84a816;
--bs-gradient: none;
}
.btn-outline-verde-claro {
--bs-btn-color: #d6e3da;
--bs-btn-border-color: #d6e3da;
@ -5558,6 +5594,15 @@ textarea.form-control-lg {
color: #253e36;
}
.alert-verde-pasto {
--bs-alert-color: #4f650d;
--bs-alert-bg: #e6eed0;
--bs-alert-border-color: #dae5b9;
}
.alert-verde-pasto .alert-link {
color: #3f510a;
}
.alert-verde-claro {
--bs-alert-color: #565b57;
--bs-alert-bg: #f7f9f8;
@ -6208,6 +6253,20 @@ textarea.form-control-lg {
border-color: #2e4d44;
}
.list-group-item-verde-pasto {
color: #4f650d;
background-color: #e6eed0;
}
.list-group-item-verde-pasto.list-group-item-action:hover, .list-group-item-verde-pasto.list-group-item-action:focus {
color: #4f650d;
background-color: #cfd6bb;
}
.list-group-item-verde-pasto.list-group-item-action.active {
color: #ffffff;
background-color: #4f650d;
border-color: #4f650d;
}
.list-group-item-verde-claro {
color: #565b57;
background-color: #f7f9f8;
@ -7902,6 +7961,11 @@ textarea.form-control-lg {
background-color: RGBA(76, 128, 113, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-verde-pasto {
color: #000 !important;
background-color: RGBA(132, 168, 22, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-verde-claro {
color: #000 !important;
background-color: RGBA(214, 227, 218, var(--bs-bg-opacity, 1)) !important;
@ -8083,6 +8147,13 @@ textarea.form-control-lg {
color: #3d665a !important;
}
.link-verde-pasto {
color: #84a816 !important;
}
.link-verde-pasto:hover, .link-verde-pasto:focus {
color: #9db945 !important;
}
.link-verde-claro {
color: #d6e3da !important;
}
@ -8647,6 +8718,11 @@ textarea.form-control-lg {
border-color: rgba(var(--bs-verde-pino-rgb), var(--bs-border-opacity)) !important;
}
.border-verde-pasto {
--bs-border-opacity: 1;
border-color: rgba(var(--bs-verde-pasto-rgb), var(--bs-border-opacity)) !important;
}
.border-verde-claro {
--bs-border-opacity: 1;
border-color: rgba(var(--bs-verde-claro-rgb), var(--bs-border-opacity)) !important;
@ -9599,6 +9675,11 @@ textarea.form-control-lg {
color: rgba(var(--bs-verde-pino-rgb), var(--bs-text-opacity)) !important;
}
.text-verde-pasto {
--bs-text-opacity: 1;
color: rgba(var(--bs-verde-pasto-rgb), var(--bs-text-opacity)) !important;
}
.text-verde-claro {
--bs-text-opacity: 1;
color: rgba(var(--bs-verde-claro-rgb), var(--bs-text-opacity)) !important;
@ -9775,6 +9856,11 @@ textarea.form-control-lg {
background-color: rgba(var(--bs-verde-pino-rgb), var(--bs-bg-opacity)) !important;
}
.bg-verde-pasto {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-verde-pasto-rgb), var(--bs-bg-opacity)) !important;
}
.bg-verde-claro {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-verde-claro-rgb), var(--bs-bg-opacity)) !important;

BIN
img/4.1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
img/4.3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/4.4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
img/bg04.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 71 KiB

BIN
img/personajes/cliente0.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 68 KiB

BIN
img/personajes/cliente1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
img/personajes/cliente2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
img/personajes/cliente3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
img/personajes/cliente4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
img/personajes/h1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
img/personajes/h2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
img/personajes/h3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
img/personajes/h4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
img/personajes/h5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
img/personajes/h6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
img/personajes/m1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
img/personajes/m2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
img/personajes/m3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 114 KiB

BIN
img/personajes/m4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
img/personajes/m5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

14
index.html
View File

@ -21,15 +21,15 @@
<body>
<div class="wrap-course-adaptive overflow-hidden">
<div class="wrap-course-content" id="wrap-course-content">
<header class="d-none">
<nav class="navbar navbar-light bg-white sticky-top shadow-sm" id="coursenav-navbar">
<header>
<nav class="navbar navbar-light bg-white sticky-top shadow-sm py-0" id="coursenav-navbar">
<div class="container-fluid d-flex align-items-center px-3">
<!-- Logo -->
<a class="navbar-brand p-0 disabled" href="#">
<img src="img/template/logo.png" alt="Logo" />
<a class="navbar-brand p-0 disabled ms-auto" href="#">
<img src="img/template/logo.svg" width="133" alt="Logo" />
</a>
<div class="flex-grow-1"></div>
<div class="d-flex align-items-center">
<div class="flex-grow-1 d-none"></div>
<div class="d-flex align-items-center d-none">
<!-- Audio Control -->
<button id="coursenav-audio-control" class="btn controls-btn me-2" aria-label="Toggle audio">
<div class="position-relative">
@ -104,7 +104,7 @@
<div class="d-inline-flex justify-content-center flex-row bg-transparent text-white" id="wrap-course-controls">
<!-- Offcanvas Toggle -->
<button
class="btn controls-btn text-white bg-secondary align-self-center me-2"
class="btn controls-btn text-white bg-primary align-self-center me-2"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#coursenav-offcanvas"

176
js/config.js
View File

@ -5,7 +5,7 @@
* @property {boolean} DEBUG - Habilita/deshabilita el modo de depuración.
*/
window.COURSE_CONFIG = {
COURSE_CONFIG_URL: "config.json",
COURSE_CONFIG_URL: 'config.json',
DEBUG: false,
};
@ -19,8 +19,8 @@ window.COURSE_CONFIG = {
* renderPagination(2, courseData.contentArray);
*/
function renderPagination(currentIndex, contentArray) {
const pageNumber = document.getElementById("coursenav-page-number");
const totalPages = document.getElementById("coursenav-total-pages");
const pageNumber = document.getElementById('coursenav-page-number');
const totalPages = document.getElementById('coursenav-total-pages');
if (!Array.isArray(contentArray)) return;
// Gestionar visibilidad de menús primero
@ -36,7 +36,7 @@ function renderPagination(currentIndex, contentArray) {
const moduleSlideIndex = moduleSlides.findIndex((slide) => slide.content === currentSlide.content);
if (pageNumber) pageNumber.textContent = moduleSlideIndex + 1;
if (totalPages) totalPages.textContent = " / " + moduleSlides.length;
if (totalPages) totalPages.textContent = ' / ' + moduleSlides.length;
//Navegación personalizada
updateNavButtons(moduleSlideIndex, moduleSlides);
}
@ -54,8 +54,8 @@ function renderPagination(currentIndex, contentArray) {
* @param {Array<Object>} moduleSlides - Un array de los objetos de diapositiva que pertenecen al módulo actual.
*/
function updateNavButtons(moduleSlideIndex, moduleSlides) {
const nextBtn = document.getElementById("coursenav-next-btn");
const prevBtn = document.getElementById("coursenav-prev-btn");
const nextBtn = document.getElementById('coursenav-next-btn');
const prevBtn = document.getElementById('coursenav-prev-btn');
if (!nextBtn || !prevBtn) return;
@ -63,8 +63,8 @@ function updateNavButtons(moduleSlideIndex, moduleSlides) {
const isFirstSlide = moduleSlideIndex === 0;
const isDebugMode = CourseNav.isDebug();
nextBtn.classList.toggle("disabled", isLastSlide && !isDebugMode);
prevBtn.classList.toggle("disabled", isFirstSlide && !isDebugMode);
nextBtn.classList.toggle('disabled', isLastSlide && !isDebugMode);
prevBtn.classList.toggle('disabled', isFirstSlide && !isDebugMode);
}
/**
* Gestiona la visibilidad de los menús del curso en la barra de navegación.
@ -80,16 +80,16 @@ function updateNavButtons(moduleSlideIndex, moduleSlides) {
* @param {Array<Object>} contentArray - El array completo de objetos de slide del curso.
*/
function manageMenuVisibility(currentIndex, contentArray) {
const courseMenus = document.querySelectorAll("#coursenav-main-menu > ul.course-menu");
const courseMenus = document.querySelectorAll('#coursenav-main-menu > ul.course-menu');
if (!courseMenus.length) return;
// El primer menú siempre está visible.
courseMenus[0].style.display = "block";
courseMenus[0].style.display = 'block';
// Si no hay contenido, ocultar los demás menús.
if (!Array.isArray(contentArray) || !contentArray.length) {
for (let i = 1; i < courseMenus.length; i++) {
courseMenus[i].style.display = "none";
courseMenus[i].style.display = 'none';
}
return;
}
@ -98,7 +98,7 @@ function manageMenuVisibility(currentIndex, contentArray) {
// Si el slide actual no existe o no tiene un título de módulo, ocultar los demás.
if (!currentSlide?.moduleTitle) {
for (let i = 1; i < courseMenus.length; i++) {
courseMenus[i].style.display = "none";
courseMenus[i].style.display = 'none';
}
return;
}
@ -106,12 +106,12 @@ function manageMenuVisibility(currentIndex, contentArray) {
const currentModuleTitle = currentSlide.moduleTitle;
for (let i = 1; i < courseMenus.length; i++) {
const menuItems = Array.from(courseMenus[i].querySelectorAll(".coursenav-link"));
const menuItems = Array.from(courseMenus[i].querySelectorAll('.coursenav-link'));
const shouldShow = menuItems.some((item) => {
const itemIndex = parseInt(item.dataset.coursenavindex);
return itemIndex >= 0 && contentArray[itemIndex]?.moduleTitle === currentModuleTitle;
});
courseMenus[i].style.display = shouldShow ? "block" : "none";
courseMenus[i].style.display = shouldShow ? 'block' : 'none';
}
}
@ -128,7 +128,7 @@ function manageMenuVisibility(currentIndex, contentArray) {
* scrollToElementTop('#main-content', { behavior: 'smooth', block: 'start' });
*/
function scrollToElementTop(selector, options = {}) {
const defaults = { behavior: "smooth", block: "start", inline: "nearest" };
const defaults = { behavior: 'smooth', block: 'start', inline: 'nearest' };
const opts = Object.assign(defaults, options);
const el = document.querySelector(selector);
if (el) el.scrollIntoView(opts);
@ -149,7 +149,7 @@ function scrollToElementTop(selector, options = {}) {
* animateOnScroll('.animar', 'animate__fadeIn', { threshold: 0.2 });
*/
function animateOnScroll(selector, animationClass, options = {}) {
const { threshold = 0.1, animateOnce = true, prefix = "animate__animated" } = options;
const { threshold = 0.1, animateOnce = true, prefix = 'animate__animated' } = options;
const cb = (entries, observer) => {
entries.forEach((entry) => {
@ -172,36 +172,48 @@ function animateOnScroll(selector, animationClass, options = {}) {
* @function scaleWrapCourseContent
*/
function scaleWrapCourseContent() {
const content = document.querySelector(".wrap-course-content");
const content = document.querySelector('.wrap-course-content');
const mainContent = document.querySelector('#coursenav-main-content');
if (!content) return;
const header = document.querySelector('header');
const footer = document.querySelector('footer');
const headerHeight = header ? header.offsetHeight : 0;
const footerHeight = footer ? footer.offsetHeight : 0;
const vw = window.innerWidth;
const vh = window.innerHeight;
const minWidth = 768;
if (vw < minWidth) {
// Escalar en móviles
const scale = vw / minWidth;
const ww = window.innerWidth;
const wh = window.innerHeight - headerHeight;
if (ww < 1366) {
const scale = Math.min(ww / 1366, wh / 768);
content.style.transform = `scale(${scale})`;
content.style.transformOrigin = "top left";
content.style.width = minWidth + "px";
content.style.height = (vh / scale) + "px";
content.style.position = "fixed";
content.style.left = "0";
content.style.top = "0";
content.style.overflow = "hidden";
content.style.transformOrigin = 'top left';
content.style.width = '1366px';
content.style.height = '768px';
content.style.position = 'absolute';
content.style.left = (ww - 1366 * scale) / 2 + 'px';
content.style.top = headerHeight + (wh - 768 * scale) / 2 + 'px';
content.style.overflow = 'hidden';
if (mainContent) {
const availableHeight = 768 - 80;
mainContent.style.height = availableHeight + 'px';
}
} else {
// Pantalla completa en desktop
content.style.transform = "";
content.style.transformOrigin = "";
content.style.width = "100vw";
content.style.height = "100vh";
content.style.position = "fixed";
content.style.left = "0";
content.style.top = "0";
content.style.overflow = "auto";
content.style.transform = '';
content.style.transformOrigin = '';
content.style.width = '100%';
content.style.height = '100vh';
content.style.position = 'relative';
content.style.left = '';
content.style.top = '';
content.style.overflow = 'hidden';
if (mainContent) {
mainContent.style.height = `calc(100vh - ${headerHeight + footerHeight}px)`;
}
}
content.style.zIndex = "1";
content.style.zIndex = '1';
}
/**
@ -218,14 +230,14 @@ function scaleWrapCourseContent() {
*/
function renderStepper(stepperEl, progressPercent, mobileEl, stepsCount = 5) {
// Validación y obtención de elementos
if (typeof stepperEl === "string") stepperEl = document.querySelector(stepperEl);
if (typeof mobileEl === "string") mobileEl = document.querySelector(mobileEl);
if (typeof stepperEl === 'string') stepperEl = document.querySelector(stepperEl);
if (typeof mobileEl === 'string') mobileEl = document.querySelector(mobileEl);
if (!(stepperEl instanceof HTMLElement) || !(mobileEl instanceof HTMLElement)) {
throw new Error("renderStepper: elementos inválidos.");
throw new Error('renderStepper: elementos inválidos.');
}
// Limpiar contenido previo
stepperEl.querySelectorAll(".step").forEach((el) => el.remove());
stepperEl.querySelectorAll('.step').forEach((el) => el.remove());
// Calcular posiciones de los pasos
const stepPercents = Array.from({ length: stepsCount }, (_, i) => (i / (stepsCount - 1)) * 100);
@ -238,22 +250,22 @@ function renderStepper(stepperEl, progressPercent, mobileEl, stepsCount = 5) {
// Crear elementos de los pasos
stepPercents.forEach((pct, i) => {
const step = document.createElement("div");
step.classList.add("step");
if (i < currentIndex) step.classList.add("completed");
const step = document.createElement('div');
step.classList.add('step');
if (i < currentIndex) step.classList.add('completed');
if (i === currentIndex) {
step.classList.add("completed");
step.setAttribute("data-label", Math.round(pct) + "%");
step.classList.add('completed');
step.setAttribute('data-label', Math.round(pct) + '%');
}
stepperEl.appendChild(step);
});
// Actualizar estilos y posición
stepperEl.style.setProperty("--pct", progressPercent + "%");
stepperEl.style.setProperty('--pct', progressPercent + '%');
const halfMobile = mobileEl.offsetWidth;
mobileEl.style.left = `calc(${progressPercent}% - ${halfMobile}px)`;
mobileEl.setAttribute("data-label", progressPercent + "%");
mobileEl.setAttribute('data-label', progressPercent + '%');
}
/**
@ -269,10 +281,12 @@ function renderStepper(stepperEl, progressPercent, mobileEl, stepsCount = 5) {
*/
function gotoFirstMenuToolSlide() {
const contentArray = CourseNav.getCourseContentArray();
const targetTitle = "Menús de la herramienta";
const targetTitle = 'Menús de la herramienta';
const currentSlide = CourseNav.getCurrentSlide();
// Filtrar todos los slides del mismo módulo
const targetIndex = contentArray.findIndex((slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle);
const targetIndex = contentArray.findIndex(
(slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle
);
if (targetIndex !== -1) {
CourseNav.gotoSlide(targetIndex);
@ -285,7 +299,11 @@ function gotoFirstMenuToolSlide() {
* Configura los event listeners cuando el DOM está completamente cargado.
* @event DOMContentLoaded
*/
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener('DOMContentLoaded', () => {
// Ajustar contenido al cargar y redimensionar
setTimeout(scaleWrapCourseContent, 100);
window.addEventListener('resize', () => setTimeout(scaleWrapCourseContent, 100));
/**
* Evento antes de cambiar de slide.
* @event beforeSlideChange
@ -293,8 +311,8 @@ document.addEventListener("DOMContentLoaded", () => {
* @property {number} detail.currentIndex - Índice del slide actual.
* @property {Array} detail.contentArray - Array completo de contenido.
*/
document.body.addEventListener("beforeSlideChange", (e) => {
console.log("Antes de cambiar de slide:", e.detail);
document.body.addEventListener('beforeSlideChange', (e) => {
console.log('Antes de cambiar de slide:', e.detail);
});
/**
@ -304,34 +322,36 @@ document.addEventListener("DOMContentLoaded", () => {
* @property {number} detail.slideIndex - Índice del nuevo slide.
* @property {Array} detail.contentArray - Array completo de contenido.
*/
document.body.addEventListener("slideChange", (e) => {
if (e.detail && typeof e.detail.slideIndex === "number" && Array.isArray(e.detail.contentArray)) {
document.body.addEventListener('slideChange', (e) => {
if (e.detail && typeof e.detail.slideIndex === 'number' && Array.isArray(e.detail.contentArray)) {
renderPagination(e.detail.slideIndex, e.detail.contentArray);
console.log(e.detail.contentArray[e.detail.slideIndex].content);
const contentArray = e.detail.contentArray;
const targetTitle = "Menús de la herramienta";
const targetTitle = 'Menús de la herramienta';
const currentSlide = CourseNav.getCurrentSlide();
// Filtrar todos los slides del mismo módulo
const targetIndex = contentArray.findIndex((slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle);
const btn = document.getElementById("coursenav-other-btn");
const targetIndex = contentArray.findIndex(
(slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle
);
const btn = document.getElementById('coursenav-other-btn');
if (!btn) return;
if (targetIndex !== -1) {
btn.classList.remove("disabled");
btn.classList.remove('disabled');
} else {
btn.classList.add("disabled");
btn.classList.add('disabled');
}
}
const titleSlide = document.getElementById("coursenav-course-title");
const titleSlide = document.getElementById('coursenav-course-title');
if (titleSlide) {
const slide = e.detail.contentArray[e.detail.slideIndex];
const moduleTitle = slide.moduleTitle ? slide.moduleTitle + " | " : "";
const title = slide.title || "Sin título";
const moduleTitle = slide.moduleTitle ? slide.moduleTitle + ' | ' : '';
const title = slide.title || 'Sin título';
titleSlide.textContent = moduleTitle + title;
}
const stepper = document.getElementById("stepper");
const movil = document.getElementById("step-movil");
const stepper = document.getElementById('stepper');
const movil = document.getElementById('step-movil');
const progreso = CourseNav.getProgressPercent(true);
renderStepper(stepper, progreso, movil);
});
@ -341,25 +361,25 @@ document.addEventListener("DOMContentLoaded", () => {
* @event slideCompleted
* @property {Object} detail - Detalles del evento.
*/
document.body.addEventListener("slideCompleted", (e) => {
console.log("Slide completado:", e.detail);
const stepper = document.getElementById("stepper");
const movil = document.getElementById("step-movil");
document.body.addEventListener('slideCompleted', (e) => {
console.log('Slide completado:', e.detail);
const stepper = document.getElementById('stepper');
const movil = document.getElementById('step-movil');
const progreso = CourseNav.getProgressPercent(true);
renderStepper(stepper, progreso, movil);
renderPagination(e.detail.slideIndex, CourseNav.getCourseContentArray());
});
// Event listener para botón personalizado
const customButtonEvent = document.getElementById("coursenav-other-btn");
const customButtonEvent = document.getElementById('coursenav-other-btn');
if (customButtonEvent) {
customButtonEvent.addEventListener("click", () => {
console.log("Botón personalizado clickeado");
customButtonEvent.addEventListener('click', () => {
console.log('Botón personalizado clickeado');
gotoFirstMenuToolSlide();
});
}
});
// Escalar contenido al cargar y redimensionar
window.addEventListener("DOMContentLoaded", () => scaleWrapCourseContent());
window.addEventListener("resize", () => scaleWrapCourseContent());
window.addEventListener('DOMContentLoaded', () => scaleWrapCourseContent());
window.addEventListener('resize', () => scaleWrapCourseContent());

2
js/config.min.js vendored
View File

File diff suppressed because one or more lines are too long