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

actualizacion de super indices, cambios de imagenes y textos. Asi como funcionabilidad de actividades

Browse Source
This commit is contained in:
david.martinez
2026-06-10 23:15:23 -06:00
parent 86391ea412
commit 447954b520
21 changed files with 1095 additions and 1110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/07.html
+86 -77
View File
@@ -48,30 +48,36 @@
pointer-events: none;
}
</style>
<div id="inicio" 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-11'>
<div class='row justify-content-center'>
<div id="inicio" 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-11">
<div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
</div>
</div>
<div class="col-12 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/07.0.png" class="img-fluid">
<img src="img/07.0.png" class="img-fluid" />
</div>
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
<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 class="my-0">
Se recomienda mantener la línea de transferencia y el catéter en condiciones de higiene adecuadas. Es
importante utilizar técnica aséptica durante la manipulación del acceso peritoneal, ya sea en los
recambios, la revisión del sitio de salida o en procedimientos realizados por el personal de salud.<sup
class="fw-bold"
>6</sup
>
</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>
<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">
@@ -80,7 +86,8 @@
</div>
<div class="col-12 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -89,15 +96,15 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-10 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-10 mb-3">
@@ -105,9 +112,11 @@
<div class="row justify-content-center">
<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 debe tener en cuenta para realizar su terapia de forma segura en casa.</p>
<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 debe tener en cuenta para realizar su terapia de forma segura en casa.
</p>
</div>
</div>
</div>
@@ -119,55 +128,55 @@
<!--Carta 1 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.2.png" class="img-fluid">
<img src="img/07.2.png" class="img-fluid" />
</div>
</div>
<!--Carta 2 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.3.png" class="img-fluid">
<img src="img/07.3.png" class="img-fluid" />
</div>
</div>
<!--Carta 3 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.4.png" class="img-fluid">
<img src="img/07.4.png" class="img-fluid" />
</div>
</div>
<!--Carta 4 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.5.png" class="img-fluid">
<img src="img/07.5.png" class="img-fluid" />
</div>
</div>
<!--Carta 5 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.6.png" class="img-fluid">
<img src="img/07.6.png" class="img-fluid" />
</div>
</div>
<!--Carta 6 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.7.png" class="img-fluid">
<img src="img/07.7.png" class="img-fluid" />
</div>
</div>
</div>
@@ -175,55 +184,55 @@
<!--Carta 1 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.2c.png" class="img-fluid">
<img src="img/07.2c.png" class="img-fluid" />
</div>
</div>
<!--Carta 2 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.3c.png" class="img-fluid">
<img src="img/07.3c.png" class="img-fluid" />
</div>
</div>
<!--Carta 3 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.4c.png" class="img-fluid">
<img src="img/07.4c.png" class="img-fluid" />
</div>
</div>
<!--Carta 4 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.5c.png" class="img-fluid">
<img src="img/07.5c.png" class="img-fluid" />
</div>
</div>
<!--Carta 5 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.6c.png" class="img-fluid">
<img src="img/07.6c.png" class="img-fluid" />
</div>
</div>
<!--Carta 6 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.7c.png" class="img-fluid">
<img src="img/07.7c.png" class="img-fluid" />
</div>
</div>
</div>
@@ -234,18 +243,18 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<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-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
</div>
</div>
<div class="col-12 text-center mb-3">
@@ -259,16 +268,16 @@
<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');
$(".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");
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
});
// Función para asignar pares a cada tarjeta
@@ -276,7 +285,7 @@
const optionsContainer = document.getElementById(fatherId);
const optionsArray = Array.from(optionsContainer.children);
optionsArray.forEach((option, index) => {
option.setAttribute('data-par', index);
option.setAttribute("data-par", index);
});
}
@@ -285,7 +294,7 @@
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));
shuffledOptions.forEach((option) => optionsContainer.appendChild(option));
}
// Inicializar el plugin flip y configurar la lógica del memorama con la restricción de fila
@@ -294,7 +303,7 @@
let lastFlippedRow = ""; // Para rastrear la última fila girada
$(".card-container").flip({
trigger: 'manual' // Control manual del volteo
trigger: "manual", // Control manual del volteo
});
$(".card-container").on("click", function () {
@@ -324,9 +333,9 @@
gsap.to(firstCard, {
duration: 1,
delay: 1,
boxShadow: "0px 0px 0px 0px #fff"
boxShadow: "0px 0px 0px 0px #fff",
});
}
},
});
// Agregar el efecto de resplandor
gsap.to(secondCard, {
@@ -337,9 +346,9 @@
gsap.to(secondCard, {
duration: 1,
delay: 1,
boxShadow: "0px 0px 0px 0px #fff"
boxShadow: "0px 0px 0px 0px #fff",
});
}
},
});
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
flippedCards = [];
@@ -370,16 +379,16 @@
}
function isCompleted() {
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
$("#desarrollo").hide();
$("#cierre").show();
CourseNav.setSlideVisited();
}
assignPairs('row-answer');
assignPairs('row-questions');
randomizeOptions('row-answer');
randomizeOptions('row-questions');
assignPairs("row-answer");
assignPairs("row-questions");
randomizeOptions("row-answer");
randomizeOptions("row-questions");
initializeFlip();
});
</script>
</script>