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

Update: ajuste GI

Browse Source
This commit is contained in:
andres.sanjuan 2025-10-22 09:12:21 -06:00
parent 5bd28589ec
commit 3fdb3bf9e3
19 changed files with 186 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Actividades_Manual_Vantive.xlsx
View File

Binary file not shown.

BIN
Manual_Vantive.zip Normal file
View File

Binary file not shown.

2
contenido/03.html
View File

@ -86,7 +86,7 @@
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/03.0.png" class="img-fluid">
</div>
<div class="col-6">

6
contenido/04.html
View File

@ -51,20 +51,20 @@
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-3 text-center animate__animated animate__zoomIn">
<img src="img/04.0.png" class="img-fluid">
</div>
<div class="col-6">
<div class="card bg-verde-claro border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>La diálisis peritoneal (DP) equilibra líquidos y elimina compuestos de desecho al <strong class="text-primary">filtrar la sangre
<p>Su tratamiento de diálisis peritoneal (DP) equilibra líquidos y elimina compuestos de desecho al <strong class="text-primary">filtrar la sangre
utilizando una membrana interna llamada peritoneo</strong>.</p>
<p class="mb-0">El peritoneo, envuelve a la mayoría de los órganos abdominales y forma un espacio interno llamado: <strong class="text-primary">cavidad
peritoneal.</strong></p>
</div>
<div
class="position-relative w-100 bg-verde-claro-2 text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
<p class="mb-0 text-verde-oscuro">A la secuencia de pasos que incluye al drenaje, permanencia e infusión se le conoce como: <strong>recambio</strong>.
<p class="mb-0 text-verde-oscuro">El peritoneo, envuelve a la mayoría de sus órganos abdominales y forma un espacio interno llamado <strong>recambio</strong>.
</p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">

6
contenido/05.html
View File

@ -100,13 +100,13 @@
<div class="col-6">
<div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p class="mb-0">La DP ofrece <strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria y reduce el
<p class="mb-0">La DP le ofrece una <strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria y reduce el
contagio</strong> de enfermedades infectocontagiosas. Le permite <strong>mayor libertad </strong>al ser una terapia
portable, a diferencia de la hemodiálisis.</p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
<p class="mb-1"><strong>Existen dos técnicas para llevar a cabo la DP.</strong></p>
<p class="mb-1"><strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong></p>
<p class="mb-0">Realice la siguiente actividad para descubrir más sobre ellas.</p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
@ -117,7 +117,7 @@
</div>
</div>
</div>
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/05.0.png" class="img-fluid">
</div>
</div>

6
contenido/06.html
View File

@ -67,14 +67,14 @@
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/06.0.png" class="img-fluid">
</div>
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p class="mb-0">El sitio de salida (SS) es <strong class="text-lila-claro">la piel que rodea al catéter</strong> y requiere de cuidados continuos para
mantenerse en óptimas condiciones, permitiendo una terapia segura.</p>
<p class="mb-0">El sitio de salida (SS) es <strong class="text-lila-claro">la piel que rodea su catéter</strong> y requiere de cuidados continuos para
mantenerse en óptimas condiciones, permitiendo que su terapia se desarrolle de forma segura.</p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">

22
contenido/07.html
View File

@ -30,7 +30,8 @@
gap: 10px;
justify-content: center;
align-items: center;
max-width: 1280px; /* Esto limita el ancho total */
max-width: 1280px;
/* Esto limita el ancho total */
margin: 0 auto;
width: 100%;
}
@ -39,7 +40,7 @@
width: 100%;
aspect-ratio: 1;
cursor: pointer;
perspective: 1000px!important;
perspective: 1000px !important;
}
.card-container.disabled {
@ -62,9 +63,15 @@
<img src="img/07.0.png" class="img-fluid">
</div>
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
<p>La línea de transferencia y el catéter deben <strong class="text-lila-claro">mantenerse alejados de gérmenes</strong> que ponen en riesgo su
salud y vida.</p>
<p class="mb-0">Por eso, se utiliza una <strong class="text-lila-claro">técnica aséptica para la manipulación de su acceso peritoneal</strong>, ya sea para realizar un recambio, explorar su orificio de salida o en procedimientos realizados por el personal de salud.</p>
<p class="my-0">Debe mantener su línea de transferencia y catéter <b class="text-lila-claro">alejados de
gérmenes</b> que ponen en riesgo
su salud y
vida. </p>
<p>Por eso, es necesario que utilice una <b class="text-lila-claro">técnica aséptica para la manipulación de
su acceso peritoneal</b>, ya
sea para realizar un recambio, explorar su orificio de salida o en procedimientos realizados por el
personal de salud.</p>
</div>
<div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
<div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold">
@ -99,7 +106,8 @@
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book3.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Dé clic en las tarjetas para encontrar los pares y descubrir los pasos que se deben tener en cuenta para realizar una terapia segura en casa.</p>
<p class="mb-0"><strong>Instrucciones:</strong>Dé clic en las tarjetas para encontrar los pares y
descubrir los pasos que debe tener en cuenta para realizar su terapia de forma segura en casa.</p>
</div>
</div>
</div>
@ -361,7 +369,7 @@
}
}
function isCompleted() {
function isCompleted() {
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$('#desarrollo').hide();
$('#cierre').show();

20
contenido/08.html
View File

@ -59,20 +59,19 @@
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-3 text-center animate__animated animate__zoomIn">
<img src="img/08.0.png" class="img-fluid">
</div>
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>El jabón que utilice para el lavado de manos de preferencia debe ser <strong class="text-lila-claro">líquido</strong>, sin embargo, lo
prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p>
<p><strong class="text-lila-claro">Lo mismo ocurre con la toalla </strong>que utilice para secar sus manos.</p>
<p class="mb-0">Sus manos, después de un correcto lavado, se encontrarán <strong class="text-lila-claro">limpias pero nunca estériles.</strong></p>
<p>Para un recambio seguro, bajo ningún motivo debe tocar las <b class="text-lila-claro">zonas
estériles (libres de gérmenes)</b> en su sistema de DP.</p>
</div>
<div
class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
<p class="mb-0 fw-bold text-center">Para un recambio seguro, bajo ningún motivo debe tocar las zonas estériles (libres de gérmenes) en el sistema de DP.</p>
<p class="mb-0 fw-bold text-center">Realice la siguiente actividad para identificar cuáles son estas
zonas.</p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
@ -109,7 +108,8 @@
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema de DP y arrastre sus nombres hacia la fotografía que les corresponda.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema de DP
y arrastre sus nombres hacia la fotografía que les corresponda.</p>
</div>
</div>
</div>
@ -244,7 +244,7 @@
const dragValue = dragMapping[opcion.text] !== undefined ? dragMapping[opcion.text] : 0;
const dragItem = `
<div class="drag-item px-3 py-2 bg-verde-claro-2 text-verde-oscuro fw-bold bx-shadow" data-drag="${dragValue}">
<div class="d-flex flex-row justify-content-center align-items-center w-100 h-100">${opcion.text}</div>
<div class="d-flex flex-row justify-content-center align-items-center w-100 h-100"><div>${opcion.text}</div></div>
</div>
`;
container.append(dragItem);
@ -284,7 +284,7 @@
revertDuration: 300,
cursor: "grabbing",
start: function (event, ui) {
$(this).css({'z-index': 1000, 'transform': 'scale(0.8)'});
$(this).css({ 'z-index': 1000, 'transform': 'scale(0.8)' });
ui.position.left = 0;
ui.position.top = 0;
},
@ -298,7 +298,7 @@
ui.position.top = newTop / scale;
},
stop: function (event, ui) {
$(this).css({'z-index': 1, 'transform': 'scale(1)'});
$(this).css({ 'z-index': 1, 'transform': 'scale(1)' });
}
});

104
contenido/09.html
View File

@ -22,11 +22,13 @@
cursor: pointer;
}
.drag-list, .content-drags {
.drag-list,
.content-drags {
display: flex;
flex-direction: column;
gap: 1.7rem;
}
.drag-sortable {
background: #f3e9df;
border-radius: 1.25rem;
@ -42,11 +44,14 @@
cursor: grab;
user-select: none;
}
.drag-sortable:active, .drag-sortable.ui-sortable-helper {
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
.drag-sortable:active,
.drag-sortable.ui-sortable-helper {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
transform: scale(1.018);
cursor: grabbing;
}
.drag-number {
width: 36px;
height: 36px;
@ -70,17 +75,32 @@
background: #e8fdf4 !important;
color: #30C48D !important;
border-color: #30C48D !important;
box-shadow: 0 2px 16px rgba(48,196,141,0.12) !important;
box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important;
animation: correcto-bounce 0.7s;
}
@keyframes correcto-bounce {
0% {transform: scale(1);}
30% {transform: scale(1.18);}
55% {transform: scale(0.96);}
80% {transform: scale(1.05);}
100% {transform: scale(1);}
0% {
transform: scale(1);
}
30% {
transform: scale(1.18);
}
55% {
transform: scale(0.96);
}
80% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.drag-icon {
color: #72256b;
font-size: 1.35rem;
@ -89,6 +109,7 @@
flex-shrink: 0;
font-weight: 600;
}
.drag-placeholder {
background: #fff6fc !important;
border: 2px dashed #E1006B !important;
@ -99,7 +120,12 @@
color: #fff;
}
.fa-duotone.fa-swap-opacity:before, .fa-duotone:after, .fa-swap-opacity .fa-duotone:before, .fa-swap-opacity .fad:before, .fad.fa-swap-opacity:before, .fad:after {
.fa-duotone.fa-swap-opacity:before,
.fa-duotone:after,
.fa-swap-opacity .fa-duotone:before,
.fa-swap-opacity .fad:before,
.fad.fa-swap-opacity:before,
.fad:after {
opacity: 1;
}
@ -112,14 +138,35 @@
display: inline-flex;
align-items: center;
}
@keyframes hand-down-up {
0% { transform: translateY(-7px) scale(1.03);}
18% { transform: translateY(5px) scale(1.02);}
35% { transform: translateY(-4px) scale(1.04);}
50% { transform: translateY(4px) scale(1);}
68% { transform: translateY(-5px) scale(1.01);}
85% { transform: translateY(6px) scale(0.99);}
100% { transform: translateY(-7px) scale(1.03);}
0% {
transform: translateY(-7px) scale(1.03);
}
18% {
transform: translateY(5px) scale(1.02);
}
35% {
transform: translateY(-4px) scale(1.04);
}
50% {
transform: translateY(4px) scale(1);
}
68% {
transform: translateY(-5px) scale(1.01);
}
85% {
transform: translateY(6px) scale(0.99);
}
100% {
transform: translateY(-7px) scale(1.03);
}
}
.btn-reintentar {
@ -145,11 +192,20 @@
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
<p class="mb-0">El lavado de manos también es una fase fundamental en el proceso de diálisis peritoneal.</p>
<p class="mb-0">El jabón que utilice para el lavado de manos de preferencia debe ser <b
class="text-lila-claro">líquido</b>, sin
embargo, lo prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p>
<p><b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
</p>
<p>Sus manos, después de un correcto lavado, se encontrarán <b class="text-lila-claro">limpias, pero nunca estériles.</b>
</p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
<p class="mb-0">Veamos los pasos para un lavado de manos adecuado.</p>
<p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
@ -159,7 +215,7 @@
</div>
</div>
</div>
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/09.0.png" class="img-fluid">
</div>
</div>
@ -189,7 +245,8 @@
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para colocarlos en el orden correcto.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
colocarlos en el orden correcto.</p>
</div>
</div>
</div>
@ -197,7 +254,7 @@
</div>
<div class="col-11">
<div class="row justify-content-center align-items-center">
<div class="col-12 anim1" >
<div class="col-12 anim1">
<div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
<div class="drag-sortable" data-order="0">
<span class="drag-number"></span>
@ -224,7 +281,8 @@
<div class="drag-sortable" data-order="4">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y viceversa.
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
viceversa.
</div>
<div class="drag-sortable" data-order="5">
<span class="drag-number"></span>

4
contenido/10.html
View File

@ -63,13 +63,13 @@
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/10.0.png" class="img-fluid">
</div>
<div class="col-6">
<div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>Omitir las medidas de seguridad podría provocar <strong>infecciones del sitio de salida o peritonitis.</strong></p>
<p>Omitir las medidas de seguridad podría provocarle <strong>infecciones del sitio de salida o peritonitis.</strong></p>
<p class="mb-0">Si utiliza DPCA y vive en un medio ambiente con temperaturas exteriores menores a 15°C, puede ser que sienta más
comodidad al <strong>precalentar la bolsa </strong>con solución dializante antes de utilizarla.</p>
</div>

19
contenido/11.html
View File

@ -25,7 +25,7 @@
.btn-answer {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5);
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}
.letter {
@ -87,9 +87,10 @@
<img src="img/11.0.png" class="img-fluid">
</div>
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
<p>La gran ventaja de la DP es que se trata de un tratamiento <strong class="text-lila-claro">autoadministrado y domiciliario</strong>, sin
embargo, es necesario que acuda a todas sus consultas de seguimiento y lleve todos los estudios de laboratorio y
registros de tratamiento que le solicite el personal de salud.</p>
<p> La gran ventaja que le ofrece la DP es que se trata de un tratamiento <strong
class="text-lila-claro">autoadministrado y domiciliario</strong>, sin embargo, es necesario que acuda a
todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y registros del tratamiento
que le solicite el personal de salud.</p>
</div>
<div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
<div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold">
@ -127,8 +128,9 @@
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del control de líquidos y conteste correctamente. Por cada acierto obtendrá una
pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del control de
líquidos y conteste correctamente. Por cada acierto obtendrá una
pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
</div>
</div>
</div>
@ -140,7 +142,8 @@
<div id="svg-container"></div>
</div>
<div class="col-6">
<div id="card-content-quiz-rompecabezas" class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow">
<div id="card-content-quiz-rompecabezas"
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow">
<div class="row justify-content-center">
<div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
<div class="col-12 content-answers"></div>
@ -297,7 +300,7 @@
answersContainer.append(btn);
});
$('.btn-answer').click(function() {
$('.btn-answer').click(function () {
const isCorrect = $(this).data('correct') === true;
$('.btn-answer').off('click').css('pointer-events', 'none');

28
contenido/12.html
View File

@ -85,7 +85,7 @@
.btn-answer {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5);
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
background-color: #f8f9fa;
color: #333;
}
@ -133,10 +133,10 @@
</div>
<div class="col-5 text-center mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
<p><strong class="text-lila-claro">La alimentación </strong>balanceada es muy importante como parte de su tratamiento,
<strong class="text-lila-claro">se debe
personalizar </strong>con base en sus necesidades.</p>
<p>También, es necesario <strong class="text-lila-claro">mantener un estilo de vida activo </strong>para el
<p><b class="text-lila-claro">La alimentación</b> balanceada es muy importante. Como parte de su
tratamiento <b class="text-lila-claro">se debe personalizar</b> con base en sus necesidades.</p>
<p>También, es necesario <strong class="text-lila-claro">mantener un estilo de vida activo </strong>para
el
buen funcionamiento de músculos,
huesos y corazón.</p>
<div class="w-100 position-relative text-center">
@ -147,7 +147,7 @@
</div>
</div>
</div>
<div class="col-6 text-center mb-1 animate__animated animate__zoomIn">
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/12.0.png" class="img-fluid">
</div>
</div>
@ -172,12 +172,14 @@
<div class="col-12 px-0 mb-3">
<div class="row">
<div class="col-8">
<div class="card bg-verde-claro border-0 bx-shadow py-2 px-3" style="border-radius: 15px;border-top-left-radius: 0;border-bottom-left-radius: 0;">
<div class="card bg-verde-claro border-0 bx-shadow py-2 px-3"
style="border-radius: 15px;border-top-left-radius: 0;border-bottom-left-radius: 0;">
<div class="row justify-content-start">
<div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
<img src="img/book1.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Gire la ruleta y conteste correctamente la pregunta acerca de la alimentación o actividad física del paciente en diálisis peritoneal para ganar los puntos.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Dé clic en la ruleta y conteste correctamente la
pregunta acerca de su alimentación o actividad física para ganar los puntos.</p>
</div>
</div>
</div>
@ -199,7 +201,8 @@
<h2 class="puntos">0</h2>
<div class="card flat">
<img src="img/progress.png" alt="" class="img-fluid" />
<div class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100"
<div
class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100"
style="top: 22%">
<div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
<div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
@ -228,7 +231,8 @@
</div>
<div class="col-4 text-center" style="margin-top: -30px;">
<div class="card flat justify-content-center align-items-center d-inline-flex">
<div class="indicador position-absolute start-50 translate-middle-x" style="z-index: 9999 !important; top: -1em">
<div class="indicador position-absolute start-50 translate-middle-x"
style="z-index: 9999 !important; top: -1em">
<img src="img/indicador.png" alt="" style="transform: rotate(90deg)" />
</div>
<div class="wruleta z-2" id="ruleta-wheel">
@ -418,7 +422,7 @@
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$('.btn-answer').click(function() {
$('.btn-answer').click(function () {
const isCorrect = $(this).data('correct') === true;
const puntos = $(this).data('puntos');
@ -497,7 +501,7 @@
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
CourseNav.setSlideVisited();
CourseNav.setSlideVisited();
if (aprobado) {
$('#desarrollo').hide();

23
contenido/13.html
View File

@ -50,7 +50,7 @@
.btn-answer {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5);
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}
.letter {
@ -94,8 +94,9 @@
<div class="col-5 text-center mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 px-0 pt-2 pb-0 bx-shadow">
<div class="position-relative w-100 px-3">
<p>Como se ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son controlados mediante
la DP, sin embargo, es necesario el apoyo de medicamentos que solo su médico puede y debe prescribir.</p>
<p>Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son
controlados mediante la DP, sin embargo, es necesario que se apoye de medicamentos que solo su médico
puede y debe prescribir. </p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
@ -109,7 +110,7 @@
</div>
</div>
</div>
<div class="col-6 text-center mb-1 animate__animated animate__zoomIn">
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/13.5.png" class="img-fluid">
</div>
</div>
@ -134,8 +135,9 @@
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book3.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la pregunta acerca del manejo de medicamentos que apoyan la DP.
Por cada acierto sumará puntos, el objetivo es llegar a 1000.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la pregunta
acerca del manejo de medicamentos que apoyan la DP.
Por cada acierto sumará puntos, el objetivo es llegar a 1000.</p>
</div>
</div>
</div>
@ -144,7 +146,8 @@
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-3 text-center">
<div class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow">
<div
class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow">
<img src="img/13.4.png" class="img-fluid me-2">
<h4 class="text-white fw-bold mb-0">Puntos:</h4>
<h4 id="puntos" class="text-white fw-bold mb-0">000</h4>
@ -318,7 +321,7 @@
didOpen: () => {
$('.btn-answer').click(function() {
$('.btn-answer').click(function () {
const isCorrect = $(this).data('correct') === true;
const puntos = $(this).data('puntos');
$('.btn-answer').off('click hover').css('pointer-events', 'none');
@ -379,14 +382,14 @@
$('#desarrollo').hide();
$('#cierre').show();
} else {
CourseNav.setSlideVisited();
CourseNav.setSlideVisited();
$('.col-reintentar').show();
$('#desarrollo').hide();
$('#cierre').show();
}
}
$('.btn-question-pop').click(function() {
$('.btn-question-pop').click(function () {
const index = $(this).index();
const puntosEnJuego = parseInt($(this).data('puntos'));
if (!$(this).hasClass('completed') && !$(this).hasClass('disabled')) {

2
contenido/14.html
View File

@ -118,7 +118,7 @@
<div class="col-7 text-center animate__animated animate__flipInX">
<div class="card bg-transparent border-0 rounded-3 p-0 shadow-none">
<div class="position-relative w-100">
<p>Gracias a que la diálisis peritoneal es una terapia <strong class="text-lila-claro">portable y autoadministrada</strong> permite mayores
<p>Gracias a que la diálisis peritoneal es una terapia <strong class="text-lila-claro">portable y autoadministrada,</strong> le permite mayores
posibilidades de actividad laboral, vida escolar y posibilidad de viajar.</p>
</div>
<div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s">

2
contenido/15.html
View File

@ -134,7 +134,7 @@
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/15.0.png" class="img-fluid">
</div>
<div class="col-5">

36
contenido/16.html
View File

@ -16,12 +16,12 @@
}
.fake2 {
background-image: url(img/bg03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
background-image: url(img/bg03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.btn-comenzar {
border-radius: 20px;
@ -170,12 +170,12 @@
}
.btn-reintentar {
cursor: pointer;
}
cursor: pointer;
}
.w-custom {
width: 5%;
}
.w-custom {
width: 5%;
}
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
@ -188,15 +188,13 @@
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
</div>
</div>
<div class="col-12 mb-1 text-center animate__animated animate__zoomIn">
<h4 class="fw-bold text-verde-pino mb-0">DPA</h4>
</div>
<div class="col-12 mb-1 text-center animate__animated animate__zoomIn">
<h4 class="fw-bold text-verde-pino mb-0">DPA</h4>
</div>
<div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
<p class="my-0">Existen dos modalidades de Diálisis Peritoneal: <b class="text-primary">la
DPA y la DPCA.</b></p>
<p class="my-0">Cada una
de ellas tiene sus propios procesos que deben seguirse correctamente para que la terapia
<p class="my-0">Existen dos modalidades de Diálisis Peritoneal: <b class="text-primary">la DPA y la DPCA</b>. Cada una
de ellas tiene sus propios procesos que debe seguir cuidadosamente para que la terapia
sea exitosa.</p>
<p class="my-0">En la siguiente actividad podrá poner a prueba sus conocimientos sobre los
@ -210,7 +208,7 @@
</div>
</div>
</div>
<div class="col-6 text-center mb-1 animate__animated animate__zoomIn">
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/16.0.png" class="img-fluid">
</div>
</div>

2
contenido/17.html
View File

@ -160,7 +160,7 @@
</div>
</div>
</div>
<div class="col-6 text-center mb-1 animate__animated animate__zoomIn">
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/17.0.png" class="img-fluid">
</div>
</div>

2
contenido/18.html
View File

@ -108,7 +108,7 @@
</div>
</div>
</div>
<div class="col-6 text-center mb-1 animate__animated animate__zoomIn">
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/18.0.png" class="img-fluid">
</div>
</div>

BIN
img/08.0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 112 KiB