This commit is contained in:
2025-12-05 10:31:16 -06:00
parent 61e208390d
commit 1be82dd149
26 changed files with 130 additions and 22 deletions
+2 -2
View File
@@ -21,7 +21,7 @@
<div class="col-11">
<div class="row justify-content-center align-items-center">
<div class="col-8">
<h1 class="text-white fw-bold">INDUCCIÓN AL PACIENTE EN<br>DIÁLISIS PERIOTONIAL <span
<h1 class="text-white fw-bold">INDUCCIÓN AL PROGRAMA DE <br> DIÁLISIS PERITONEAL<span
class="fw-bold text-verde-ceniza">>>></span></h1>
<p class="text-white">Pioneros en el cuidado de la enfermedad renal crónica</p>
</div>
@@ -50,4 +50,4 @@
// CourseNav.nextSlide();
// });
});
</script>
</script>
+19 -2
View File
@@ -76,7 +76,7 @@
return shuffled;
}
const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
// const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
// Crear y mezclar las tarjetas
function createShuffledCards() {
@@ -96,7 +96,7 @@
<div class="card border-0 card-sort bg-transparent text-white fw-bold text-center shadow-none"
data-order="${number}"
style="cursor:grab;">
<div class='position-relative w-100 nums'><img src="${imgNums[number-1]}" class="img-fluid"></div>
<div class="card-body bg-verde-claro px-0 py-0">
<img src="img/5.${number}b.png" class="img-fluid">
</div>
@@ -104,16 +104,28 @@
`;
container.append(cardHtml);
});
// Actualizar números después de crear las tarjetas
// updateCardNumbers();
}
// Actualizar números mostrados según posición actual
// function updateCardNumbers() {
// $('#sortable-cards .card-sort').each(function (index) {
// $(this).find('.nums img').attr('src', imgNums[index]);
// });
// }
// 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).find('.card-body').removeClass('bg-verde-claro').addClass('bg-verde-pasto');
$(this).addClass('locked').css('cursor', 'default');
} else {
$(this).find('.card-body').removeClass('bg-verde-pasto').addClass('bg-verde-claro');
$(this).removeClass('locked').css('cursor', 'grab');
correct = false;
}
});
@@ -131,7 +143,9 @@
tolerance: 'pointer',
helper: "clone",
cursorAt: { top: 50, left: 50 },
cancel: '.locked',
update: function (event, ui) {
// updateCardNumbers();
if (checkOrder()) {
$('#sortable-cards').sortable('disable');
const html = $("#pop0").html();
@@ -164,6 +178,9 @@
}
},
start: function (event, ui) {
if (ui.item.hasClass('locked')) {
return false;
}
ui.item.addClass('ui-sortable-helper');
if (ui.position) {
ui.position.left = 0;
+1 -1
View File
@@ -133,7 +133,7 @@
<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>
<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>
+3 -3
View File
@@ -166,14 +166,14 @@
<div id="retro-pop">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
<img src="img/08.7.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>
<h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0">Has concluido la actividad.</p>
<p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
</div>
</div>
</div>
+1 -1
View File
@@ -167,7 +167,7 @@
<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>
<p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
</div>
</div>
</div>
+6 -4
View File
@@ -8,7 +8,6 @@
.hr-style {
opacity: 1;
width: 50%;
}
.card-style {
@@ -20,9 +19,12 @@
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12 px-0'>
<div class='row justify-content-center'>
<div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown">
<h2 class="text-center fw-bold text-primary">Lavado de manos y uso correcto de cubrebocas</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center">
<div class="position-relative d-inline-block">
<h2 class="text-center fw-bold text-primary">Lavado de manos de acuerdo con la técnica de la <br> OMS y uso correcto de
cubrebocas</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
</div>
</div>
<div class="col-12 px-0">
<div class="card card-style border-0 rounded-0 shadow-none py-3 px-4">
+5 -4
View File
@@ -8,7 +8,6 @@
.hr-style {
opacity: 1;
width: 50%;
}
.custom-grid {
@@ -38,9 +37,11 @@
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center' id="activity1">
<div class="col-10 mb-2">
<h2 class="text-center fw-bold text-primary">Técnica correcta para higiene de manos</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<div class="col-10 mb-2 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-center fw-bold text-primary">Técnica correcta para higiene de manos <br> de acuerdo con la técnica de la OMS</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
</div>
</div>
<div class="col-10 px-0 mb-1 col-instrucciones">
<div class="card bg-lila-rosa border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
+1 -1
View File
@@ -33,7 +33,7 @@
</div>
<div class="col-12 mb-3 animate__animated animate__lightSpeedInLeft animate__delay-1s">
<h2 class="text-verde-claro">Has terminado las actividades de la</h2>
<h2 class="text-white"><strong>Inducción al paciente </strong><strong>en Diálisis Peritoneal.</strong></h2>
<h2 class="text-white fw-bold">Inducción al programa de Diálisis Peritoneal.</h2>
</div>
<div class="col-12 animate__animated animate__zoomIn animate__delay-2s">
<p class="text-white mb-0">¡Tu esfuerzo marca la diferencia!</p>
+2 -2
View File
@@ -145,8 +145,8 @@
<img src="img/2.1.png" alt="" class="img-fluid" />
</div>
<div>
<b>Instrucciones:</b> Gira la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación del paciente en diálisis
peritoneal para ganar los puntos.
<b>Instrucciones:</b> Da clic en la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación en diálisis peritoneal
para ganar los puntos.
</div>
</div>
</div>