Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 salvador.martinez
|
1bb1258c16 | ||
|
salvador.martinez
|
c06fcdc411 | ||
 david.martinez
|
78dc574de5 | ||
|
david.martinez
|
0fdda4320f | ||
|
david.martinez
|
b234ae0d22 | ||
|
david.martinez
|
4bc2a47a96 | ||
|
david.martinez
|
07100d82de | ||
 andres.sanjuan
|
a57cba5f67 |
Binary file not shown.
+36
@@ -23,6 +23,42 @@
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/05.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/06.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/07.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/08.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/09.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/10.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/11.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/12.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/13.html"
|
||||
},
|
||||
{
|
||||
"title": "Navegación",
|
||||
"content": "contenido/14.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+3
-2
@@ -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">
|
||||
@@ -176,7 +176,7 @@
|
||||
<script>
|
||||
$(function () {
|
||||
'use strict';
|
||||
$('body').addClass('fake');
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
});
|
||||
|
||||
// Solución definitiva al error de declaración duplicada
|
||||
@@ -214,6 +214,7 @@
|
||||
videoElement.addEventListener('ended', function () {
|
||||
playPauseButton.innerHTML = playIconHTML;
|
||||
videoSeekBar.value = 0;
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
// Mute/Unmute
|
||||
|
||||
+1
-1
@@ -114,7 +114,7 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
|
||||
+16
-12
@@ -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 {
|
||||
@@ -25,8 +26,7 @@
|
||||
|
||||
.drop-card {
|
||||
border: none;
|
||||
width: 200px;
|
||||
min-width: 80px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@@ -53,6 +53,10 @@
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.content-enfermedad {
|
||||
width: 24%;
|
||||
}
|
||||
|
||||
/*
|
||||
.form-append>div:first-child {
|
||||
width: 20%;
|
||||
@@ -90,7 +94,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">
|
||||
@@ -100,7 +104,7 @@
|
||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
||||
1
|
||||
</div>
|
||||
<div class="option"></div>
|
||||
<div class="option w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,7 +117,7 @@
|
||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
||||
2
|
||||
</div>
|
||||
<div class="option"></div>
|
||||
<div class="option w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,7 +130,7 @@
|
||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
||||
3
|
||||
</div>
|
||||
<div class="option"></div>
|
||||
<div class="option w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -139,7 +143,7 @@
|
||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
||||
4
|
||||
</div>
|
||||
<div class="option"></div>
|
||||
<div class="option w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -176,7 +180,7 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
@@ -341,7 +345,7 @@
|
||||
questions = procesarPreguntas(hojaDatos);
|
||||
CreateDragAndDrop();
|
||||
initializeDragAndDrop();
|
||||
igualarAlturaBgCustomTransparent();
|
||||
//igualarAlturaBgCustomTransparent();
|
||||
});
|
||||
|
||||
|
||||
@@ -356,8 +360,8 @@
|
||||
$('.bg-custom-transparent').css('height', maxHeight + 'px');
|
||||
}
|
||||
|
||||
$(window).on('resize', igualarAlturaBgCustomTransparent);
|
||||
igualarAlturaBgCustomTransparent();
|
||||
/* $(window).on('resize', igualarAlturaBgCustomTransparent);
|
||||
igualarAlturaBgCustomTransparent(); */
|
||||
|
||||
|
||||
|
||||
|
||||
+18
-279
@@ -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,94 +46,48 @@
|
||||
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">
|
||||
<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="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>
|
||||
<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 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 mt-3">
|
||||
<div class="col-12">
|
||||
<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">
|
||||
<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 mt-2">
|
||||
<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 mt-2">
|
||||
<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 mt-2">
|
||||
<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>
|
||||
@@ -156,40 +98,6 @@
|
||||
</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">
|
||||
@@ -211,7 +119,7 @@
|
||||
<script>
|
||||
$(function () {
|
||||
'use strict';
|
||||
$('body').addClass('fake');
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
let currentQuestion;
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
$('.wrap-course-content').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).removeClass('bg-verde-pasto').addClass('bg-verde-claro');
|
||||
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,0 +1,391 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.hr-style {
|
||||
opacity: 1;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.bg-custom {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.btn-answer {
|
||||
background-color: #808080;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-answer:hover {
|
||||
background-color: #925c8d;
|
||||
}
|
||||
|
||||
.btn-answer.selected {
|
||||
background-color: #925c8d;
|
||||
}
|
||||
|
||||
.completed {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.object-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content-medidor {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, .5);
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.termometro {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
gap: 0;
|
||||
background: #E7E7E7;
|
||||
background: linear-gradient(to left, #E7E7E7 0%, #C3C3C3 100%);
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.med_style {
|
||||
border-radius: 0;
|
||||
border: 1px solid #000;
|
||||
border-right: 3px solid #c3c3c3;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.med_style:nth-child(6) {
|
||||
border-top-right-radius: 40px;
|
||||
border-bottom-right-radius: 40px;
|
||||
border-left: 0;
|
||||
border-right: 1px solid #000;
|
||||
background: #76c300;
|
||||
background: linear-gradient(to top, #76c300 0%, #386100 100%);
|
||||
}
|
||||
|
||||
.med_style:first-child {
|
||||
border-top-left-radius: 40px;
|
||||
border-bottom-left-radius: 40px;
|
||||
background: #DF0000;
|
||||
background: linear-gradient(to top, #DF0000 0%, #4F0700 100%);
|
||||
}
|
||||
|
||||
.med_style:nth-child(2),
|
||||
.med_style:nth-child(3),
|
||||
.med_style:nth-child(4),
|
||||
.med_style:nth-child(5) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.med_style:nth-child(3) {
|
||||
background: #ffce00;
|
||||
background: linear-gradient(to top, #ffce00 0%, #fe6a00 100%);
|
||||
}
|
||||
|
||||
.med_style:nth-child(2) {
|
||||
background: #ff8400;
|
||||
background: linear-gradient(to top, #ff8400 0%, #c93000 100%);
|
||||
}
|
||||
|
||||
.med_style:nth-child(4) {
|
||||
background: #a4f800;
|
||||
background: linear-gradient(to top, #a4f800 0%, #ffe600 100%);
|
||||
}
|
||||
|
||||
.med_style:nth-child(5) {
|
||||
background: #aaff00;
|
||||
background: linear-gradient(to top, #aaff00 0%, #4e8600 100%);
|
||||
}
|
||||
|
||||
.indicador-med {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 100%;
|
||||
bottom: -60px;
|
||||
left: 10px;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
</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-10 mb-2">
|
||||
<h2 class="text-center fw-bold text-primary">Tipos de diálisis peritoneal</h2>
|
||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
||||
</div>
|
||||
<div class="col-12 px-0 mb-3">
|
||||
<div class="card bg-white border-0 my-2 rounded-0 bg-custom p-3 text-center">
|
||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||
<img src="img/3.1.png" class="img-fluid mx-3">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas para llenar el medidor de salud del paciente.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="actividad-objects" class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<div class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/07.7.png" class="img-fluid">
|
||||
<div class="termometro p-1">
|
||||
<div id="#med0" class="med_style"></div>
|
||||
<div id="#med1" class="med_style"></div>
|
||||
<div id="#med2" class="med_style"></div>
|
||||
<div id="#med3" class="med_style"></div>
|
||||
<div id="#med4" class="med_style"></div>
|
||||
<div id="#med5" class="med_style"></div>
|
||||
<div id="indicador" class="indicador-med d-flex flex-row justify-content-center align-items-center">
|
||||
<img src="img/07.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<img src="img/07.6.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
|
||||
<img src="img/07.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
|
||||
<img src="img/07.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
|
||||
<img src="img/07.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
|
||||
<img src="img/07.4.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="pops-questions">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
|
||||
<div class="col-12">
|
||||
<div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
let currentQuestion;
|
||||
let correctQuestions = 0;
|
||||
let currentObjectBtn;
|
||||
let isCorrectAnswer = false;
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
|
||||
const urlExcelFile = 'verdadero_falso.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 ? fila.retroalimentacion_correcta.trim() : '',
|
||||
retroalimentacion_incorrecta: fila.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;
|
||||
}
|
||||
|
||||
// Cargar preguntas al inicio
|
||||
readExcelFile(urlExcelFile, function(data) {
|
||||
const sheetData = data[Object.keys(data)[0]];
|
||||
questions = procesarPreguntas(sheetData);
|
||||
});
|
||||
|
||||
$('.object-btn').click(function (e) {
|
||||
e.preventDefault();
|
||||
if ($(this).hasClass('disabled')) return;
|
||||
CourseNav.soundClick();
|
||||
currentObjectBtn = $(this);
|
||||
if (questions && questions.length > 0) {
|
||||
showRandomQuestion();
|
||||
}
|
||||
});
|
||||
|
||||
function showRandomQuestion() {
|
||||
// Seleccionar pregunta aleatoria
|
||||
const randomIndex = Math.floor(Math.random() * questions.length);
|
||||
currentQuestion = questions[randomIndex];
|
||||
|
||||
const html = $("#pops-questions").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: false,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "45em",
|
||||
didOpen: () => {
|
||||
displayQuestion();
|
||||
},
|
||||
didClose: () => {
|
||||
CourseNav.audioController.stopAudio();
|
||||
if (currentObjectBtn) {
|
||||
currentObjectBtn.addClass('completed disabled');
|
||||
checkAllCompleted();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function displayQuestion() {
|
||||
const contentSwal = $(Swal.getHtmlContainer());
|
||||
const txtPregunta = contentSwal.find('#txt-question');
|
||||
const txtAnswers = contentSwal.find('#txt-answers');
|
||||
|
||||
txtPregunta.html(currentQuestion.pregunta);
|
||||
|
||||
// Aleatorizar respuestas
|
||||
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
|
||||
|
||||
let answersHtml = '';
|
||||
shuffledOpciones.forEach((opcion, index) => {
|
||||
answersHtml += `<div class="btn-answer text-white p-2 px-3" data-correct="${opcion.correct}">${opcion.text}</div>`;
|
||||
});
|
||||
|
||||
txtAnswers.html(answersHtml);
|
||||
|
||||
// Event listener para respuestas
|
||||
contentSwal.find('.btn-answer').click(function() {
|
||||
isCorrectAnswer = $(this).data('correct');
|
||||
$(this).addClass('selected');
|
||||
if (isCorrectAnswer) {
|
||||
good.play();
|
||||
correctQuestions++;
|
||||
moveIndicator();
|
||||
Swal.close();
|
||||
} else {
|
||||
bad.play();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function moveIndicator() {
|
||||
const positions = ['left: 90px', 'left: 170px', 'left: 250px', 'left: 330px', 'left: 410px'];
|
||||
if (correctQuestions <= 5) {
|
||||
$('#indicador').attr('style', positions[correctQuestions - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
function checkAllCompleted() {
|
||||
const totalButtons = $('.object-btn').length;
|
||||
const completedButtons = $('.object-btn.completed').length;
|
||||
|
||||
if (totalButtons === completedButtons) {
|
||||
setTimeout(() => {
|
||||
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,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
});
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,315 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.hr-style {
|
||||
opacity: 1;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.custom-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1280px; /* Esto limita el ancho total */
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-container.disabled {
|
||||
filter: grayscale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
</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-10 mb-2">
|
||||
<h2 class="text-center fw-bold text-primary">¿Qué necesito para poder realizar la Diálisis Peritoneal Continua Ambulatoria (DPCA)?</h2>
|
||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
||||
</div>
|
||||
<div class="col-10 px-0 mb-1">
|
||||
<div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
|
||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||
<img src="img/08.0.png" class="img-fluid mx-3">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Da clic en las tarjetas para encontrar los pares y descubrir los elementos necesarios para llevar a cabo la DPCA.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<di class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
|
||||
<div class="row-questions custom-grid" id="row-questions">
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.2.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.3.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.4.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.6.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-answer custom-grid" id="row-answer">
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.1c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.2c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.3c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.4c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.5c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/08.front.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/08.6c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="retro-pop">
|
||||
<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";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
const flip_sound = CourseNav.createSound('audio/flip.mp3');
|
||||
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
|
||||
// Función para asignar pares a cada tarjeta
|
||||
function assignPairs(fatherId) {
|
||||
const optionsContainer = document.getElementById(fatherId);
|
||||
const optionsArray = Array.from(optionsContainer.children);
|
||||
optionsArray.forEach((option, index) => {
|
||||
option.setAttribute('data-par', index);
|
||||
});
|
||||
}
|
||||
|
||||
// Función para mezclar las tarjetas dentro del contenedor especificado
|
||||
function randomizeOptions(fatherId) {
|
||||
const optionsContainer = document.getElementById(fatherId);
|
||||
const optionsArray = Array.from(optionsContainer.children);
|
||||
const shuffledOptions = optionsArray.sort(() => Math.random() - 0.5);
|
||||
shuffledOptions.forEach(option => optionsContainer.appendChild(option));
|
||||
}
|
||||
|
||||
// Inicializar el plugin flip y configurar la lógica del memorama con la restricción de fila
|
||||
function initializeFlip() {
|
||||
let flippedCards = [];
|
||||
let lastFlippedRow = ""; // Para rastrear la última fila girada
|
||||
|
||||
$(".card-container").flip({
|
||||
trigger: 'manual' // Control manual del volteo
|
||||
});
|
||||
|
||||
$(".card-container").on("click", function () {
|
||||
const $card = $(this);
|
||||
const currentRow = $card.closest(".row-answer").length > 0 ? "row-answer" : "row-questions";
|
||||
|
||||
// Limitar el giro a una carta por fila y evitar tres giros
|
||||
if (flippedCards.length < 2 && (flippedCards.length === 0 || currentRow !== lastFlippedRow)) {
|
||||
$card.flip(true);
|
||||
flippedCards.push($card);
|
||||
lastFlippedRow = currentRow;
|
||||
flip_sound.play();
|
||||
// Si hay dos cartas volteadas, verificar coincidencia
|
||||
if (flippedCards.length === 2) {
|
||||
const [firstCard, secondCard] = flippedCards;
|
||||
|
||||
if (firstCard.data("par") === secondCard.data("par")) {
|
||||
// Las tarjetas coinciden, dejarlas volteadas y marcar como emparejadas
|
||||
firstCard.addClass("disabled");
|
||||
secondCard.addClass("disabled");
|
||||
// Agregar el efecto de resplandor
|
||||
gsap.to(firstCard, {
|
||||
duration: 1,
|
||||
boxShadow: "0px 0px 20px 10px #fff",
|
||||
onComplete: function () {
|
||||
// Quitar el efecto de resplandor después de 2 segundos
|
||||
gsap.to(firstCard, {
|
||||
duration: 1,
|
||||
delay: 1,
|
||||
boxShadow: "0px 0px 0px 0px #fff"
|
||||
});
|
||||
}
|
||||
});
|
||||
// Agregar el efecto de resplandor
|
||||
gsap.to(secondCard, {
|
||||
duration: 1,
|
||||
boxShadow: "0px 0px 20px 10px #fff",
|
||||
onComplete: function () {
|
||||
// Quitar el efecto de resplandor después de 2 segundos
|
||||
gsap.to(secondCard, {
|
||||
duration: 1,
|
||||
delay: 1,
|
||||
boxShadow: "0px 0px 0px 0px #fff"
|
||||
});
|
||||
}
|
||||
});
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
|
||||
flippedCards = [];
|
||||
checkGameCompletion();
|
||||
} else {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
|
||||
// Las tarjetas no coinciden, voltearlas de nuevo después de un breve retraso
|
||||
setTimeout(() => {
|
||||
firstCard.flip(false);
|
||||
secondCard.flip(false);
|
||||
flippedCards = [];
|
||||
lastFlippedRow = ""; // Reiniciar el rastreo de fila
|
||||
}, 850);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Verificar si todas las tarjetas han sido emparejadas
|
||||
function checkGameCompletion() {
|
||||
const totalPairs = $(".card-container").length / 2;
|
||||
const matchedPairs = $(".card-container.disabled").length / 2;
|
||||
|
||||
if (matchedPairs === totalPairs) {
|
||||
setTimeout(showFeedbackPopup, 250);
|
||||
}
|
||||
}
|
||||
|
||||
function showFeedbackPopup() {
|
||||
const html = $("#retro-pop").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,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
assignPairs('row-answer');
|
||||
assignPairs('row-questions');
|
||||
randomizeOptions('row-answer');
|
||||
randomizeOptions('row-questions');
|
||||
initializeFlip();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg06.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.hr-style {
|
||||
opacity: 1;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bg-custom {
|
||||
background: #f0f4f2;
|
||||
}
|
||||
|
||||
.tablero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1280px; /* Esto limita el ancho total */
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-container2 {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-0 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-10 mb-2">
|
||||
<h2 class="text-center fw-bold text-primary">¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?</h2>
|
||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
||||
</div>
|
||||
<div class="col-9 mb-1">
|
||||
<div class="card border-0 my-2 rounded-15 bg-custom shadow p-3 py-2 text-center">
|
||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||
<img src="img/3.1.png" class="img-fluid mx-3">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Da clic en los elementos para descubrir cuáles son necesarios para realizar la DPA.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="tablero">
|
||||
<div class="card-container2" data-correct="0">
|
||||
<div class="front">
|
||||
<img src="img/09.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="1">
|
||||
<div class="front">
|
||||
<img src="img/09.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.13.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="0">
|
||||
<div class="front">
|
||||
<img src="img/09.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="0">
|
||||
<div class="front">
|
||||
<img src="img/09.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="1">
|
||||
<div class="front">
|
||||
<img src="img/09.4.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.13.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="0">
|
||||
<div class="front">
|
||||
<img src="img/09.5.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="0">
|
||||
<div class="front">
|
||||
<img src="img/09.6.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="0">
|
||||
<div class="front">
|
||||
<img src="img/09.7.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="0">
|
||||
<div class="front">
|
||||
<img src="img/09.8.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="1">
|
||||
<div class="front">
|
||||
<img src="img/09.9.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.13.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="1">
|
||||
<div class="front">
|
||||
<img src="img/09.10.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.13.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container2" data-correct="1">
|
||||
<div class="front">
|
||||
<img src="img/09.11.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/09.13.png" class="img-fluid">
|
||||
</div>
|
||||
</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/09.14.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">¡Recuerda!</h3>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Siempre debes lavar tus manos antes de empezar cualquier terapia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
const flip_sound = CourseNav.createSound('audio/flip.mp3');
|
||||
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
|
||||
$(".card-container2").flip({
|
||||
trigger: 'manual' // Control manual del volteo
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// Shuffle cards
|
||||
const tablero = document.querySelector('.tablero');
|
||||
const cards = Array.from(tablero.querySelectorAll('.card-container2'));
|
||||
const shuffledCards = shuffleArray(cards);
|
||||
shuffledCards.forEach(card => tablero.appendChild(card));
|
||||
|
||||
$(".card-container2").click(function (e) {
|
||||
e.preventDefault();
|
||||
const $card = $(this);
|
||||
if ($card.hasClass('disabled')) return;
|
||||
flip_sound.play();
|
||||
$card.flip(true);
|
||||
if($card.data('correct') == '0') {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
|
||||
$card.addClass('disabled');
|
||||
}else{
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
|
||||
setTimeout(() => {
|
||||
$card.flip(false);
|
||||
}, 700);
|
||||
}
|
||||
|
||||
// Check if all correct cards are completed
|
||||
const correctCards = $('.card-container2[data-correct="0"]');
|
||||
const completedCorrectCards = $('.card-container2[data-correct="0"].disabled');
|
||||
if (correctCards.length === completedCorrectCards.length) {
|
||||
checkAllCompleted();
|
||||
}
|
||||
});
|
||||
|
||||
function checkAllCompleted() {
|
||||
setTimeout(() => {
|
||||
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,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
CourseNav.setSlideVisited();
|
||||
$(".card-container2").addClass('disabled');
|
||||
}
|
||||
});
|
||||
}, 250);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg07.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.card-style {
|
||||
border-radius: 20px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.hr-style {
|
||||
opacity: 1;
|
||||
width: 60%;
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12 ps-0'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class="col-5 animate__animated animate__lightSpeedInLeft">
|
||||
<div class="card card-style bg-verde-oscuro ps-5 pr-3 py-3 border-0 text-center">
|
||||
<h2 class="text-white fw-bold">¿Qué es un catéter?</h2>
|
||||
<hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/10.0.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,461 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg11.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.hr-style {
|
||||
opacity: 1;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dislike-indicator {
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.like-indicator {
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.indicator-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.gradient-left {
|
||||
left: 0;
|
||||
top: 10%;
|
||||
width: 50%;
|
||||
height: 80%;
|
||||
background: #925c8d;
|
||||
background: linear-gradient(270deg, rgba(146, 92, 141, 1) 0%, rgba(146, 92, 141, 0) 100%);
|
||||
}
|
||||
|
||||
.gradient-right {
|
||||
right: 0;
|
||||
top: 10%;
|
||||
width: 50%;
|
||||
height: 80%;
|
||||
background: #6c9d7a;
|
||||
background: linear-gradient(90deg, rgba(108, 157, 122, 1) 0%, rgba(108, 157, 122, 0) 100%);
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
z-index: 2;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.bg-image-left {
|
||||
left: 20px;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.bg-image-right {
|
||||
right: 20px;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.bg-image img {
|
||||
width: 220px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-stack {
|
||||
position: relative;
|
||||
width: 326px;
|
||||
height: 326px;
|
||||
margin: 0 auto;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.tinder-card {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: grab;
|
||||
transition: transform 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tinder-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="page-sco py-2 py-md-0 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-10 mb-2 animate__animated animate__bounceInDown">
|
||||
<h2 class="text-center fw-bold text-primary">Características del sitio de salida</h2>
|
||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||
</div>
|
||||
<div class="col-12 px-0 mb-1 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
|
||||
<div class="card bg-white border-0 my-2 rounded-0 bg-custom px-3 py-2 text-center">
|
||||
<div class="d-flex justify-content-center align-items-center flex-row gap-2">
|
||||
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||
<div class="parrafos text-start">
|
||||
<p class="mb-2"><strong>Instrucciones:</strong> Observa las imágenes del sitio de salida que se presentan en las tarjetas.</p>
|
||||
<p class="mb-0">
|
||||
Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano,
|
||||
desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="d-flex justify-content-center align-items-center gap-2 flex-row indicadores-avance"></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="position-relative content-cards text-center">
|
||||
<!-- Like/Dislike indicators -->
|
||||
<div class="position-absolute dislike-indicator" id="dislike-indicator">
|
||||
<div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center indicator-circle">✕</div>
|
||||
<div class="text-danger fw-bold mt-2">NO SANO</div>
|
||||
</div>
|
||||
<div class="position-absolute like-indicator" id="like-indicator">
|
||||
<div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center indicator-circle">✓</div>
|
||||
<div class="text-success fw-bold mt-2">SANO</div>
|
||||
</div>
|
||||
|
||||
<!-- Degradados de fondo -->
|
||||
<div class="position-absolute w-100 h-100 gradient-bg">
|
||||
<div class="position-absolute gradient-left"></div>
|
||||
<div class="position-absolute gradient-right"></div>
|
||||
</div>
|
||||
|
||||
<!-- Imágenes de fondo -->
|
||||
<div class="position-absolute bg-image bg-image-left">
|
||||
<img src="img/11.nosano.png" alt="No Sano" />
|
||||
</div>
|
||||
<div class="position-absolute bg-image bg-image-right">
|
||||
<img src="img/11.sano.png" alt="Sano" />
|
||||
</div>
|
||||
|
||||
<div id="card-stack" class="card-stack">
|
||||
<div data-index="0" class="tinder-card">
|
||||
<img src="img/11.0.png" alt="Imagen 1" />
|
||||
</div>
|
||||
<div data-index="1" class="tinder-card">
|
||||
<img src="img/11.1.png" alt="Imagen 2" />
|
||||
</div>
|
||||
<div data-index="2" class="tinder-card">
|
||||
<img src="img/11.2.png" alt="Imagen 3" />
|
||||
</div>
|
||||
<div data-index="3" class="tinder-card">
|
||||
<img src="img/11.3.png" alt="Imagen 4" />
|
||||
</div>
|
||||
<div data-index="4" class="tinder-card">
|
||||
<img src="img/11.4.png" alt="Imagen 5" />
|
||||
</div>
|
||||
<div data-index="5" class="tinder-card">
|
||||
<img src="img/11.5.png" alt="Imagen 6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">Ten en cuenta que…</h3>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">En caso de alguna complicación, se debe acudir a la unidad de diálisis.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
|
||||
const respuestasCorrectas = ["true", "true", "false", "false", "false"];
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// Shuffle cards and answers
|
||||
const cards = Array.from(document.querySelectorAll(".tinder-card"));
|
||||
const cardsData = cards.map((card, index) => ({
|
||||
element: card,
|
||||
answer: respuestasCorrectas[index],
|
||||
}));
|
||||
|
||||
const shuffledData = shuffleArray(cardsData);
|
||||
const stack = document.getElementById("card-stack");
|
||||
stack.innerHTML = "";
|
||||
|
||||
const shuffledAnswers = [];
|
||||
shuffledData.forEach((item, index) => {
|
||||
item.element.style.zIndex = shuffledData.length - index;
|
||||
stack.appendChild(item.element);
|
||||
shuffledAnswers[index] = item.answer;
|
||||
});
|
||||
|
||||
let currentCardIndex = 0;
|
||||
let userAnswers = [];
|
||||
let isProcessing = false;
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let currentX = 0;
|
||||
let currentY = 0;
|
||||
|
||||
function initTinderCards() {
|
||||
const currentCard = shuffledData[currentCardIndex]?.element;
|
||||
if (!currentCard) return;
|
||||
|
||||
currentCard.addEventListener("mousedown", handleStart, { passive: false });
|
||||
currentCard.addEventListener("touchstart", handleStart, { passive: false });
|
||||
}
|
||||
|
||||
function handleStart(e) {
|
||||
if (isProcessing) return;
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
const touch = e.type === "touchstart" ? e.touches[0] : e;
|
||||
startX = touch.clientX;
|
||||
startY = touch.clientY;
|
||||
|
||||
const card = e.target.closest(".tinder-card");
|
||||
card.style.transition = "none";
|
||||
card.style.cursor = "grabbing";
|
||||
|
||||
document.addEventListener("mousemove", handleMove, { passive: false });
|
||||
document.addEventListener("touchmove", handleMove, { passive: false });
|
||||
document.addEventListener("mouseup", handleEnd);
|
||||
document.addEventListener("touchend", handleEnd);
|
||||
}
|
||||
|
||||
function handleMove(e) {
|
||||
if (!isDragging || isProcessing) return;
|
||||
e.preventDefault();
|
||||
|
||||
const touch = e.type === "touchmove" ? e.touches[0] : e;
|
||||
currentX = touch.clientX - startX;
|
||||
currentY = touch.clientY - startY;
|
||||
|
||||
const card = shuffledData[currentCardIndex]?.element;
|
||||
if (!card) return;
|
||||
|
||||
const rotation = currentX * 0.1;
|
||||
card.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotation}deg)`;
|
||||
|
||||
const likeIndicator = document.getElementById("like-indicator");
|
||||
const dislikeIndicator = document.getElementById("dislike-indicator");
|
||||
|
||||
if (currentX > 50) {
|
||||
likeIndicator.style.opacity = Math.min(1, (currentX - 50) / 100);
|
||||
dislikeIndicator.style.opacity = 0;
|
||||
} else if (currentX < -50) {
|
||||
dislikeIndicator.style.opacity = Math.min(1, (Math.abs(currentX) - 50) / 100);
|
||||
likeIndicator.style.opacity = 0;
|
||||
} else {
|
||||
likeIndicator.style.opacity = 0;
|
||||
dislikeIndicator.style.opacity = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function handleEnd(e) {
|
||||
if (!isDragging || isProcessing) return;
|
||||
isDragging = false;
|
||||
|
||||
document.removeEventListener("mousemove", handleMove);
|
||||
document.removeEventListener("touchmove", handleMove);
|
||||
document.removeEventListener("mouseup", handleEnd);
|
||||
document.removeEventListener("touchend", handleEnd);
|
||||
|
||||
const card = shuffledData[currentCardIndex]?.element;
|
||||
if (!card) return;
|
||||
|
||||
card.style.transition = "transform 0.3s ease";
|
||||
card.style.cursor = "grab";
|
||||
|
||||
const likeIndicator = document.getElementById("like-indicator");
|
||||
const dislikeIndicator = document.getElementById("dislike-indicator");
|
||||
|
||||
likeIndicator.style.opacity = 0;
|
||||
dislikeIndicator.style.opacity = 0;
|
||||
|
||||
if (Math.abs(currentX) > 100) {
|
||||
isProcessing = true;
|
||||
const isLike = currentX > 0;
|
||||
const correctAnswer = shuffledAnswers[currentCardIndex] === "true";
|
||||
const isCorrect = (isLike && correctAnswer) || (!isLike && !correctAnswer);
|
||||
|
||||
animateCardOut(card, isLike, isCorrect);
|
||||
processSwipe(isLike, isCorrect);
|
||||
} else {
|
||||
card.style.transform = "";
|
||||
}
|
||||
|
||||
currentX = 0;
|
||||
currentY = 0;
|
||||
}
|
||||
|
||||
function animateCardOut(card, isLike, isCorrect) {
|
||||
if (isCorrect) {
|
||||
const direction = isLike ? 1 : -1;
|
||||
card.style.transform = `translateX(${direction * 400}px) rotate(${direction * 30}deg)`;
|
||||
card.style.opacity = "0";
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.display = "none";
|
||||
nextCard();
|
||||
}, 300);
|
||||
} else {
|
||||
// Animación de rebote para respuesta incorrecta
|
||||
card.style.transform = "scale(0.95)";
|
||||
setTimeout(() => {
|
||||
card.style.transform = "";
|
||||
isProcessing = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
function nextCard() {
|
||||
currentCardIndex++;
|
||||
updateProgress();
|
||||
if (currentCardIndex < shuffledData.length) {
|
||||
initTinderCards();
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
initTinderCards();
|
||||
|
||||
function processSwipe(isLike, isCorrect) {
|
||||
if (isCorrect) {
|
||||
feedbackcorrect.play();
|
||||
|
||||
userAnswers.push({
|
||||
cardIndex: currentCardIndex,
|
||||
userAnswer: isLike,
|
||||
isCorrect: true,
|
||||
});
|
||||
|
||||
if (currentCardIndex + 1 >= shuffledAnswers.length) {
|
||||
setTimeout(() => {
|
||||
updateProgress();
|
||||
showResults();
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
feedbackincorrect.play();
|
||||
// No avanzar, permitir reintentar
|
||||
}
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
const indicators = document.querySelector(".indicadores-avance");
|
||||
indicators.innerHTML = "";
|
||||
|
||||
for (let i = 0; i < shuffledAnswers.length; i++) {
|
||||
const indicator = document.createElement("div");
|
||||
indicator.style.cssText = "width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;";
|
||||
|
||||
if (i < userAnswers.length) {
|
||||
const img = document.createElement("img");
|
||||
img.style.cssText = "width: 100%; height: 100%;";
|
||||
img.src = "img/11.good.png";
|
||||
indicator.appendChild(img);
|
||||
} else if (i === currentCardIndex) {
|
||||
indicator.style.cssText += "background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;";
|
||||
indicator.innerHTML = (i + 1).toString();
|
||||
} else {
|
||||
indicator.style.cssText += "background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;";
|
||||
indicator.innerHTML = (i + 1).toString();
|
||||
}
|
||||
|
||||
indicators.appendChild(indicator);
|
||||
}
|
||||
}
|
||||
|
||||
function showResults() {
|
||||
// Ocultar instrucciones
|
||||
document.getElementById("col-instrucciones").style.display = "none";
|
||||
|
||||
const resultHTML = `
|
||||
<div class="text-center">
|
||||
<h3>¡Actividad completada!</h3>
|
||||
<p>¡Todas las respuestas fueron correctas!</p>
|
||||
</div>
|
||||
`;
|
||||
checkAllCompleted();
|
||||
document.querySelector(".content-cards").innerHTML = resultHTML;
|
||||
CourseNav.setSlideVisited(true);
|
||||
}
|
||||
|
||||
function checkAllCompleted() {
|
||||
const html = $("#pop0").html();
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
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,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
CourseNav.setSlideVisited();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize progress indicators
|
||||
updateProgress();
|
||||
});
|
||||
</script>
|
||||
+8
-1
@@ -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;
|
||||
@@ -373,7 +380,7 @@ body > main {
|
||||
}
|
||||
|
||||
#coursenav-main-content {
|
||||
height: 100%;
|
||||
height: calc(100% - 85px);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -495,3 +495,7 @@ h6 {
|
||||
.pop_html_style .swal2-html-container {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* .wrap-course-content {
|
||||
transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
|
||||
} */
|
||||
|
||||
@@ -482,3 +482,7 @@ h6 {
|
||||
.pop_html_style .swal2-html-container {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* .wrap-course-content {
|
||||
transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
|
||||
} */
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -10,7 +10,9 @@ $custom-colors: (
|
||||
'verde-ceniza': #84a79c,
|
||||
'verde-oscuro': #105742,
|
||||
'verde-pino': #4c8071,
|
||||
'verde-pasto': #84a816,
|
||||
'verde-claro': #d6e3da,
|
||||
'verde-gris': #cadcd4,
|
||||
'lila-claro': #905c8b,
|
||||
'morado-claro': #915c8c,
|
||||
'gris': #959595,
|
||||
|
||||
+172
@@ -70,7 +70,9 @@
|
||||
--bs-verde-ceniza: #84a79c;
|
||||
--bs-verde-oscuro: #105742;
|
||||
--bs-verde-pino: #4c8071;
|
||||
--bs-verde-pasto: #84a816;
|
||||
--bs-verde-claro: #d6e3da;
|
||||
--bs-verde-gris: #cadcd4;
|
||||
--bs-lila-claro: #905c8b;
|
||||
--bs-morado-claro: #915c8c;
|
||||
--bs-gris: #959595;
|
||||
@@ -97,7 +99,9 @@
|
||||
--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-verde-gris-rgb: 202, 220, 212;
|
||||
--bs-lila-claro-rgb: 144, 92, 139;
|
||||
--bs-morado-claro-rgb: 145, 92, 140;
|
||||
--bs-gris-rgb: 149, 149, 149;
|
||||
@@ -3284,6 +3288,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;
|
||||
@@ -3301,6 +3322,23 @@ textarea.form-control-lg {
|
||||
--bs-btn-disabled-border-color: #d6e3da;
|
||||
}
|
||||
|
||||
.btn-verde-gris {
|
||||
--bs-btn-color: #000;
|
||||
--bs-btn-bg: #cadcd4;
|
||||
--bs-btn-border-color: #cadcd4;
|
||||
--bs-btn-hover-color: #000;
|
||||
--bs-btn-hover-bg: #d2e1da;
|
||||
--bs-btn-hover-border-color: #cfe0d8;
|
||||
--bs-btn-focus-shadow-rgb: 172, 187, 180;
|
||||
--bs-btn-active-color: #000;
|
||||
--bs-btn-active-bg: #d5e3dd;
|
||||
--bs-btn-active-border-color: #cfe0d8;
|
||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--bs-btn-disabled-color: #000;
|
||||
--bs-btn-disabled-bg: #cadcd4;
|
||||
--bs-btn-disabled-border-color: #cadcd4;
|
||||
}
|
||||
|
||||
.btn-lila-claro {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #905c8b;
|
||||
@@ -3743,6 +3781,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;
|
||||
@@ -3760,6 +3815,23 @@ textarea.form-control-lg {
|
||||
--bs-gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-verde-gris {
|
||||
--bs-btn-color: #cadcd4;
|
||||
--bs-btn-border-color: #cadcd4;
|
||||
--bs-btn-hover-color: #000;
|
||||
--bs-btn-hover-bg: #cadcd4;
|
||||
--bs-btn-hover-border-color: #cadcd4;
|
||||
--bs-btn-focus-shadow-rgb: 202, 220, 212;
|
||||
--bs-btn-active-color: #000;
|
||||
--bs-btn-active-bg: #cadcd4;
|
||||
--bs-btn-active-border-color: #cadcd4;
|
||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--bs-btn-disabled-color: #cadcd4;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #cadcd4;
|
||||
--bs-gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-lila-claro {
|
||||
--bs-btn-color: #905c8b;
|
||||
--bs-btn-border-color: #905c8b;
|
||||
@@ -5558,6 +5630,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;
|
||||
@@ -5567,6 +5648,15 @@ textarea.form-control-lg {
|
||||
color: #454946;
|
||||
}
|
||||
|
||||
.alert-verde-gris {
|
||||
--bs-alert-color: #515855;
|
||||
--bs-alert-bg: #f4f8f6;
|
||||
--bs-alert-border-color: #eff5f2;
|
||||
}
|
||||
.alert-verde-gris .alert-link {
|
||||
color: #414644;
|
||||
}
|
||||
|
||||
.alert-lila-claro {
|
||||
--bs-alert-color: #563753;
|
||||
--bs-alert-bg: #e9dee8;
|
||||
@@ -6208,6 +6298,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;
|
||||
@@ -6222,6 +6326,20 @@ textarea.form-control-lg {
|
||||
border-color: #565b57;
|
||||
}
|
||||
|
||||
.list-group-item-verde-gris {
|
||||
color: #515855;
|
||||
background-color: #f4f8f6;
|
||||
}
|
||||
.list-group-item-verde-gris.list-group-item-action:hover, .list-group-item-verde-gris.list-group-item-action:focus {
|
||||
color: #515855;
|
||||
background-color: #dcdfdd;
|
||||
}
|
||||
.list-group-item-verde-gris.list-group-item-action.active {
|
||||
color: #ffffff;
|
||||
background-color: #515855;
|
||||
border-color: #515855;
|
||||
}
|
||||
|
||||
.list-group-item-lila-claro {
|
||||
color: #563753;
|
||||
background-color: #e9dee8;
|
||||
@@ -7902,11 +8020,21 @@ 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;
|
||||
}
|
||||
|
||||
.text-bg-verde-gris {
|
||||
color: #000 !important;
|
||||
background-color: RGBA(202, 220, 212, var(--bs-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.text-bg-lila-claro {
|
||||
color: #fff !important;
|
||||
background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
|
||||
@@ -8083,6 +8211,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;
|
||||
}
|
||||
@@ -8090,6 +8225,13 @@ textarea.form-control-lg {
|
||||
color: #dee9e1 !important;
|
||||
}
|
||||
|
||||
.link-verde-gris {
|
||||
color: #cadcd4 !important;
|
||||
}
|
||||
.link-verde-gris:hover, .link-verde-gris:focus {
|
||||
color: #d5e3dd !important;
|
||||
}
|
||||
|
||||
.link-lila-claro {
|
||||
color: #905c8b !important;
|
||||
}
|
||||
@@ -8647,11 +8789,21 @@ 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;
|
||||
}
|
||||
|
||||
.border-verde-gris {
|
||||
--bs-border-opacity: 1;
|
||||
border-color: rgba(var(--bs-verde-gris-rgb), var(--bs-border-opacity)) !important;
|
||||
}
|
||||
|
||||
.border-lila-claro {
|
||||
--bs-border-opacity: 1;
|
||||
border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
|
||||
@@ -9599,11 +9751,21 @@ 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;
|
||||
}
|
||||
|
||||
.text-verde-gris {
|
||||
--bs-text-opacity: 1;
|
||||
color: rgba(var(--bs-verde-gris-rgb), var(--bs-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.text-lila-claro {
|
||||
--bs-text-opacity: 1;
|
||||
color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
|
||||
@@ -9775,11 +9937,21 @@ 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;
|
||||
}
|
||||
|
||||
.bg-verde-gris {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: rgba(var(--bs-verde-gris-rgb), var(--bs-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.bg-lila-claro {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 467 B |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 43 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
+8
-7
@@ -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"
|
||||
@@ -164,6 +164,7 @@
|
||||
<script src="js/xlsx.full.min.js"></script>
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<script src="js/jquery.ui.touch-punch.min.js"></script>
|
||||
<script src="js/jquery.flip.min.js"></script>
|
||||
<!-- Configuración del curso -->
|
||||
<script src="js/config.min.js" defer></script>
|
||||
<!-- librería principal -->
|
||||
|
||||
+106
-82
@@ -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) => {
|
||||
@@ -167,41 +167,38 @@ function animateOnScroll(selector, animationClass, options = {}) {
|
||||
return observer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajusta el contenido del curso para ocupar el máximo de pantalla.
|
||||
* @function scaleWrapCourseContent
|
||||
*/
|
||||
function scaleWrapCourseContent() {
|
||||
const content = document.querySelector(".wrap-course-content");
|
||||
const content = document.querySelector('.wrap-course-content');
|
||||
if (!content) return;
|
||||
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const minWidth = 768;
|
||||
const ww = window.innerWidth;
|
||||
const wh = window.innerHeight;
|
||||
|
||||
if (vw < minWidth) {
|
||||
// Escalar en móviles
|
||||
const scale = vw / minWidth;
|
||||
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";
|
||||
// Breakpoint a 1500px
|
||||
let baseWidth, baseHeight;
|
||||
|
||||
if (ww < 1500) {
|
||||
// Menor a 1500px: usar 1366x768
|
||||
baseWidth = 1366;
|
||||
baseHeight = 768;
|
||||
} 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";
|
||||
// 1500px o más: usar 1920x1080
|
||||
baseWidth = 1920;
|
||||
baseHeight = 1080;
|
||||
}
|
||||
content.style.zIndex = "1";
|
||||
|
||||
// Escala simple
|
||||
const scale = Math.min(ww / baseWidth, wh / baseHeight);
|
||||
|
||||
content.style.transform = `scale(${scale})`;
|
||||
content.style.transformOrigin = 'top left';
|
||||
content.style.width = baseWidth + 'px';
|
||||
content.style.height = baseHeight + 'px';
|
||||
content.style.position = 'absolute';
|
||||
content.style.left = (ww - baseWidth * scale) / 2 + 'px';
|
||||
content.style.top = (wh - baseHeight * scale) / 2 + 'px';
|
||||
content.style.overflow = 'hidden';
|
||||
content.style.zIndex = '1';
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -218,14 +215,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 +235,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 +266,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 +284,30 @@ function gotoFirstMenuToolSlide() {
|
||||
* Configura los event listeners cuando el DOM está completamente cargado.
|
||||
* @event DOMContentLoaded
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Escalado inicial y continuo
|
||||
scaleWrapCourseContent();
|
||||
setTimeout(scaleWrapCourseContent, 100);
|
||||
|
||||
// Escalado en redimensionamiento con debounce
|
||||
let resizeTimeout;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(scaleWrapCourseContent, 50);
|
||||
});
|
||||
|
||||
// Escalado en cambio de orientación (móviles/tablets)
|
||||
window.addEventListener('orientationchange', () => {
|
||||
setTimeout(scaleWrapCourseContent, 200);
|
||||
});
|
||||
|
||||
// Escalado cuando cambia la visibilidad (cambio de pestaña)
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden) {
|
||||
setTimeout(scaleWrapCourseContent, 100);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Evento antes de cambiar de slide.
|
||||
* @event beforeSlideChange
|
||||
@@ -293,8 +315,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 +326,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 +365,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());
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/*! flip - v1.0.11 - 2015-07-13
|
||||
* https://github.com/nnattawat/flip
|
||||
* Copyright (c) 2015 Nattawat Nonsung; Licensed MIT */
|
||||
|
||||
!function(a){var b=function(a){a.data("flipped",!0);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+(a.data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}),a.find(a.data("back")).css({transform:b+"(0deg)","z-index":"1"})},c=function(a){a.data("flipped",!1);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+"(0deg)","z-index":"1"}),a.find(a.data("back")).css({transform:b+(a.data("reverse")?"(180deg)":"(-180deg)"),"z-index":"0"})},d=function(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]};a.fn.flip=function(f,g){return"function"==typeof f&&(g=f),this.each(function(){var h=a(this);if(void 0===f||"boolean"!=typeof f&&"string"!=typeof f)if(h.data("initiated"))void 0!==f.axis&&e.call(this,f.axis,g);else{h.data("initiated",!0);var i=a.extend({axis:"y",reverse:!1,trigger:"click",speed:500,forceHeight:!1,forceWidth:!1,autoSize:!0,front:"auto",back:"auto"},f);"auto"==i.front?i.front=h.find(".front").length>0?".front":"div:first-child":"autostrict"==i.front&&(i.front="div:first-child"),"auto"==i.back?i.back=h.find(".back").length>0?".back":"div:first-child + div":"autostrict"==i.back&&(i.back="div:first-child + div"),h.data("reverse",i.reverse),h.data("axis",i.axis),h.data("front",i.front),h.data("back",i.back);var j="rotate"+("x"==i.axis.toLowerCase()?"x":"y"),k=2*h["outer"+("rotatex"==j?"Height":"Width")]();h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")"}),h.css({perspective:k,position:"relative"});var l=i.speed/1e3||.5,m=h.find(i.front).add(i.back,h);if(i.forceHeight?m.outerHeight(h.height()):i.autoSize&&m.css({height:"100%"}),i.forceWidth?m.outerWidth(h.width()):i.autoSize&&m.css({width:"100%"}),m.css({"backface-visibility":"hidden","transform-style":"preserve-3d",position:"absolute","z-index":"1"}),h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){m.css({transition:"all "+l+"s ease-out"}),void 0!==g&&g.call(this)},20),"click"==i.trigger.toLowerCase())h.on(a.fn.tap?"tap":"click",function(){h.find(a(event.target).closest('button, a, input[type="submit"]')).length||(h.data("flipped")?c(h):b(h))});else if("hover"==i.trigger.toLowerCase()){var n=function(){h.unbind("mouseleave",o),b(h),setTimeout(function(){h.bind("mouseleave",o),h.is(":hover")||c(h)},i.speed+150)},o=function(){c(h)};h.mouseenter(n),h.mouseleave(o)}}else"toggle"==f&&(f=!h.data("flipped")),f?b(h):c(h),void 0!==g&&a(this).one(d(),function(){g.call(this)})}),this};var e=function(b,c){if(a(this).data("axis")!=b.toLowerCase()){var d=a(this).find(a(this).data("front")).add(a(this).data("back"),a(this)),e=d.css("transition");d.css({transition:"none"}),b=b.toLowerCase(),a(this).data("axis",b);var f="rotate"+b;a(this).data("flipped")?a(this).find(a(this).data("front")).css({transform:f+(a(this).data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}):a(this).find(a(this).data("back")).css({transform:f+"("+(a(this).data("reverse")?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){d.css({transition:e}),void 0!==c&&c.call(this)},0)}else void 0!==c&&setTimeout(c.bind(this),0)}}(jQuery);
|
||||
//# sourceMappingURL=jquery.flip.min.js.map
|
||||
Binary file not shown.
Reference in New Issue
Block a user