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
.prettierignore
+2
View File
@@ -0,0 +1,2 @@
**/*.min.js
**/*.min.css
.prettierrc
+4
View File
@@ -0,0 +1,4 @@
{
"htmlWhitespaceInsensitivity": "ignore",
"printWidth": 120
}
Actividades_Manual_Vantive.xlsx
BIN
View File
Binary file not shown.
contenido/01.html
+13 -15
View File
@@ -17,22 +17,20 @@
<div class="position-absolute h-100 top-0 start-0" style="width: 65%"> <div class="position-absolute h-100 top-0 start-0" style="width: 65%">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-8"> <div class="col-8">
<div <div class="position-relative d-inline-block animate__animated animate__bounceInDown">
class="position-relative d-inline-block animate__animated animate__bounceInDown" <h1 class="text-primary fw-bold">
>
<h1 class="text-white fw-bold">
GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL
<strong class="text-secondary">>>></strong> <strong class="text-verde-oscuro">>>></strong>
</h1> </h1>
<hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3" /> <hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3" />
</div> </div>
<p class="text-white animate__animated animate__lightSpeedInLeft"> <p class="text-primary animate__animated animate__lightSpeedInLeft">
Nuestra misión: Extender vidas <!-- Nuestra misión: -->
<span class="text-secondary">>>></span> Expandir posibilidades Extender vidas
<span class="text-verde-oscuro">>>></span>
Expandir posibilidades
</p> </p>
<div <div class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s">
class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s"
>
<div <div
class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
> >
@@ -51,12 +49,12 @@
</div> </div>
<script> <script>
$(function () { $(function () {
"use strict"; 'use strict';
$(".wrap-course-content").addClass("fake"); $('.wrap-course-content').addClass('fake');
$(".btn-comenzar").click(function (e) { $('.btn-comenzar').click(function (e) {
e.preventDefault(); e.preventDefault();
$(this).removeClass("animate__animated animate__pulse animate__infinite"); $(this).removeClass('animate__animated animate__pulse animate__infinite');
CourseNav.soundClick(); CourseNav.soundClick();
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
CourseNav.nextSlide(); CourseNav.nextSlide();
contenido/03.html
+27 -31
View File
@@ -91,29 +91,30 @@
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow"> <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX" <p>
>
<p class="mb-0">
Cada año, Cada año,
<strong class="text-lila-claro" <strong class="text-lila-claro">
>miles de personas desarrollan enfermedad crónica de los riñones. </strong miles de personas desarrollan enfermedad crónica de los riñones.
>Por eso, hemos desarrollado esta guía para que </strong>
<strong class="text-lila-claro">usted y su familia</strong> tengan orientación Por eso, hemos desarrollado esta guía para que
y acompañamiento durante este proceso de aprendizaje y adaptación. <strong class="text-lila-claro">usted y su familia</strong>
tengan orientación y acompañamiento durante este proceso de aprendizaje y adaptación.
</p>
<p class="mb-0">
La enfermedad renal crónica es un problema de salud pública con creciente impacto a nivel mundial,
que requiere un manejo integral, educación continua y acompañamiento del paciente y su
familia.<sup class="fw-bold">1</sup>
</p> </p>
</div> </div>
<div <div
class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s" class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
> >
<p class="mb-0 text-verde-oscuro fw-bold"> <p class="mb-0 text-verde-oscuro fw-bold">
Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica de los riñones.
de los riñones.
</p> </p>
</div> </div>
<div <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div <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"
> >
@@ -147,8 +148,9 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" /> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente <strong>Instrucciones:</strong>
para ayudar al paciente a llegar a la unidad de diálisis. Lea cada pregunta y conteste correctamente para ayudar al paciente a llegar a la unidad de
diálisis.
</p> </p>
</div> </div>
</div> </div>
@@ -192,10 +194,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()" onclick="CourseNav.reload()"
@@ -232,7 +231,7 @@
svg.find('[id^="ficha"]').hide().addClass("ficha-move"); svg.find('[id^="ficha"]').hide().addClass("ficha-move");
svg.find("#ficha0").show(); svg.find("#ficha0").show();
}, },
"xml" "xml",
); );
} }
@@ -277,7 +276,7 @@
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(), retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(), retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
}; };
@@ -295,14 +294,11 @@
function displayQuestion() { function displayQuestion() {
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
$(".txt-question").text(currentQuestion.pregunta); $(".txt-question").html(currentQuestion.pregunta);
$(".content-answers").empty(); $(".content-answers").empty();
// Shuffle answers for current question currentQuestion.opciones.forEach((opcion, index) => {
const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
shuffledAnswers.forEach((opcion, index) => {
const answerHtml = ` const answerHtml = `
<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}"> <div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div> <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
@@ -341,15 +337,15 @@
currentFichaIndex++; currentFichaIndex++;
$("#svg-container").find('[id^="ficha"]').hide(); $("#svg-container").find('[id^="ficha"]').hide();
$("#svg-container").find(`#ficha${currentFichaIndex}`).show(); $("#svg-container").find(`#ficha${currentFichaIndex}`).show();
}
currentQuestionIndex++; currentQuestionIndex++;
}
if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) { if (isCorrect && (currentQuestionIndex >= questions.length || currentQuestionIndex >= maxQuestions)) {
displayQuestion();
} else {
setTimeout(() => { setTimeout(() => {
isCompleted(); isCompleted();
}, 500); }, 500);
} else {
displayQuestion();
} }
}, },
}); });
contenido/04.html
+68 -53
View File
@@ -38,38 +38,50 @@
background-color: #84a816; background-color: #84a816;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2> <h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</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> </div>
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-3 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"> <img src="img/04.0.png" class="img-fluid" />
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="card bg-verde-claro border-0 rounded-3 p-0 bx-shadow"> <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"> <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>Su tratamiento de diálisis peritoneal (DP) equilibra líquidos y elimina compuestos de desecho al <strong class="text-primary">filtrar la sangre <p class="mb-0 text-verde-oscuro">
La diálisis peritoneal es un tratamiento que ayuda a eliminar productos de desecho y exceso de
líquidos del organismo mediante el uso del peritoneo, una membrana que recubre los órganos
abdominales y actúa como filtro natural durante el intercambio del líquido de diálisis.<sup
class="fw-bold"
>2</sup
>
</p>
<!-- <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> 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 <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> peritoneal.</strong></p> -->
</div> </div>
<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"> 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">El peritoneo, envuelve a la mayoría de sus órganos abdominales y forma un espacio interno llamado <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 class="mb-0 text-verde-oscuro">
La diálisis peritoneal es un tratamiento que ayuda a eliminar productos de desecho y exceso de líquidos del organismo mediante el uso del peritoneo, una membrana que recubre los órganos abdominales y actúa como filtro natural durante el intercambio del líquido de diálisis.<sup class="fw-bold">2</sup>
</p> </p>
</div> </p>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"> </div> -->
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-1s">
<div <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
@@ -82,15 +94,15 @@
</div> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11' id="col-sortable"> <div class="col-11" id="col-sortable">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 text-center"> <div class="col-10 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2> <h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</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> </div>
<div class="col-10 mb-3"> <div class="col-10 mb-3">
@@ -98,8 +110,11 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12"> <div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid"> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para colocarlos en el orden correcto.</p> <p class="mb-0">
<strong>Instrucciones:</strong> Arrastre los pasos del recambio para colocarlos en el orden
correcto.
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -108,13 +123,13 @@
<div class="col-12 col-actividad"> <div class="col-12 col-actividad">
<div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center"> <div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
<div class="img-sotable" data-order="0"> <div class="img-sotable" data-order="0">
<img src="img/04.1.webp" class="img-fluid"> <img src="img/04.1.webp" class="img-fluid" />
</div> </div>
<div class="img-sotable" data-order="1"> <div class="img-sotable" data-order="1">
<img src="img/04.2.webp" class="img-fluid"> <img src="img/04.2.webp" class="img-fluid" />
</div> </div>
<div class="img-sotable" data-order="2"> <div class="img-sotable" data-order="2">
<img src="img/04.3.webp" class="img-fluid"> <img src="img/04.3.webp" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@@ -123,18 +138,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2> <h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</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> </div>
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
@@ -148,16 +163,16 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg'); const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound('audio/feedback-correct.mpeg'); const good = CourseNav.createSound("audio/feedback-correct.mpeg");
$('.btn-comenzar').click(function (e) { $(".btn-comenzar").click(function (e) {
e.preventDefault(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
function shuffleArray(array) { function shuffleArray(array) {
@@ -173,43 +188,43 @@
} }
function isInCorrectOrder(array) { function isInCorrectOrder(array) {
return array.every((item, index) => parseInt($(item).data('order')) === index); return array.every((item, index) => parseInt($(item).data("order")) === index);
} }
// Shuffle elements // Shuffle elements
const $sortables = $('.img-sotable'); const $sortables = $(".img-sotable");
const shuffled = shuffleArray($sortables.toArray()); const shuffled = shuffleArray($sortables.toArray());
$('.custom-grid').empty().append(shuffled); $(".custom-grid").empty().append(shuffled);
// Initialize sortable // Initialize sortable
$('.custom-grid').sortable({ $(".custom-grid").sortable({
items: '.img-sotable', items: ".img-sotable",
cursor: 'grabbing', cursor: "grabbing",
containment: "#coursenav-main-content", containment: "#coursenav-main-content",
tolerance: 'pointer', tolerance: "pointer",
helper: 'original', helper: "original",
scroll: false, scroll: false,
start: function (event, ui) { start: function (event, ui) {
ui.item.css('z-index', 1000); ui.item.css("z-index", 1000);
}, },
drag: function (event, ui) { drag: function (event, ui) {
ui.position.left = ui.position.left; ui.position.left = ui.position.left;
ui.position.top = ui.position.top; ui.position.top = ui.position.top;
}, },
stop: function (event, ui) { stop: function (event, ui) {
$('body').css('overflow', 'auto'); $("body").css("overflow", "auto");
}, },
update: function () { update: function () {
checkOrder(); checkOrder();
} },
}); });
function checkOrder() { function checkOrder() {
const $items = $('.custom-grid .img-sotable'); const $items = $(".custom-grid .img-sotable");
let isCorrect = true; let isCorrect = true;
$items.each(function (index) { $items.each(function (index) {
if (parseInt($(this).data('order')) !== index) { if (parseInt($(this).data("order")) !== index) {
isCorrect = false; isCorrect = false;
return false; return false;
} }
@@ -217,7 +232,7 @@
if (isCorrect) { if (isCorrect) {
CourseNav.audioController.stopAllSoundsAndPlay(good); CourseNav.audioController.stopAllSoundsAndPlay(good);
$('.img-sotable').addClass('disabled'); $(".img-sotable").addClass("disabled");
setTimeout(() => { setTimeout(() => {
isCompleted(); isCompleted();
}, 700); }, 700);
@@ -225,9 +240,9 @@
} }
function isCompleted() { function isCompleted() {
$('.wrap-course-content').addClass('fake2').removeClass('fake1'); $(".wrap-course-content").addClass("fake2").removeClass("fake1");
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} }
}); });
contenido/05.html
+22 -44
View File
@@ -99,17 +99,17 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-6"> <div class="col-6">
<div class="card bg-custom border-0 rounded-3 p-0 bx-shadow"> <div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
<div <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX" <p>
>
<p class="mb-0">
La DP le ofrece una La DP le ofrece una
<strong <strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria</strong
>mejor calidad de vida, requiere menos traslados a la unidad ><strong>,</strong> <strong>reduce el contagio </strong>de enfermedades infectocontagiosas y le
hospitalaria</strong permite <strong>mayor libertad </strong>al ser una terapia portable.
><strong>,</strong> <strong>reduce el contagio </strong>de enfermedades </p>
infectocontagiosas y le permite <strong>mayor libertad </strong>al ser una <p class="mb-0">
terapia portable. La diálisis peritoneal es una modalidad de tratamiento que puede realizarse en el domicilio, lo
que permite reducir la frecuencia de traslados a unidades hospitalarias y favorece la continuidad
del tratamiento en el entorno del paciente.<sup class="fw-bold">3</sup>
</p> </p>
</div> </div>
<div <div
@@ -118,13 +118,9 @@
<p class="mb-1"> <p class="mb-1">
<strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong> <strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong>
</p> </p>
<p class="mb-0"> <p class="mb-0">Realice la siguiente actividad para descubrir más sobre ellas.</p>
Realice la siguiente actividad para descubrir más sobre ellas.
</p>
</div> </div>
<div <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div <div
class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
> >
@@ -155,16 +151,13 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book1.png" class="img-fluid" /> <img src="img/book1.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos <strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos hacia el lugar que les
hacia el lugar que les corresponde en las imágenes. corresponde en las imágenes.
</p> </p>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div <div id="drag-container" class="d-flex flex-wrap justify-content-center align-items-center gap-4">
id="drag-container"
class="d-flex flex-wrap justify-content-center align-items-center gap-4"
>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="0"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="0">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div> <div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
@@ -220,9 +213,7 @@
<div <div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0" class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
> >
<div <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">1</h3> <h3 class="fw-bold text-white mb-0">1</h3>
</div> </div>
<div <div
@@ -301,9 +292,7 @@
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div <div class="d-flex flex-row justify-content-center align-items-center gap-3">
class="d-flex flex-row justify-content-center align-items-center gap-3"
>
<div class="content-c2 d-flex flex-column justify-content-center gap-2"> <div class="content-c2 d-flex flex-column justify-content-center gap-2">
<img src="img/05.7.png" class="img-fluid align-self-center" /> <img src="img/05.7.png" class="img-fluid align-self-center" />
<div <div
@@ -322,9 +311,7 @@
</div> </div>
<div class="content-c2 d-flex flex-column justify-content-center gap-2"> <div class="content-c2 d-flex flex-column justify-content-center gap-2">
<img src="img/05.8.png" class="img-fluid align-self-center" /> <img src="img/05.8.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt"> <p class="mb-0 text-center h-txt">Cubrebocas, lavamanos, jabón y toalla</p>
Cubrebocas, lavamanos, jabón y toalla
</p>
</div> </div>
<div class="content-c2 d-flex flex-column justify-content-center gap-2"> <div class="content-c2 d-flex flex-column justify-content-center gap-2">
<img src="img/05.9.png" class="img-fluid align-self-center" /> <img src="img/05.9.png" class="img-fluid align-self-center" />
@@ -349,9 +336,7 @@
<div class="col-5"> <div class="col-5">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-3"> <div class="col-12 mb-3">
<div <div class="d-flex flex-row justify-content-center align-items-center gap-3">
class="d-flex flex-row justify-content-center align-items-center gap-3"
>
<div class="content-c3 d-flex flex-column justify-content-center gap-2"> <div class="content-c3 d-flex flex-column justify-content-center gap-2">
<img src="img/05.10.png" class="img-fluid align-self-center" /> <img src="img/05.10.png" class="img-fluid align-self-center" />
<div <div
@@ -387,9 +372,7 @@
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div <div class="d-flex flex-row justify-content-center align-items-center gap-3">
class="d-flex flex-row justify-content-center align-items-center gap-3"
>
<div class="content-c3 d-flex flex-column justify-content-center gap-2"> <div class="content-c3 d-flex flex-column justify-content-center gap-2">
<img src="img/05.12.png" class="img-fluid align-self-center" /> <img src="img/05.12.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Atomizador y paños limpios</p> <p class="mb-0 text-center h-txt">Atomizador y paños limpios</p>
@@ -431,10 +414,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()" onclick="CourseNav.reload()"
@@ -633,9 +613,7 @@
// Limpiar drops incorrectos de la parte 0 // Limpiar drops incorrectos de la parte 0
$("#part0 .drop-option").each(function () { $("#part0 .drop-option").each(function () {
if ($(this).siblings(".num-card").hasClass("bg-danger")) { if ($(this).siblings(".num-card").hasClass("bg-danger")) {
$(this) $(this).html("").removeClass("text-center d-flex align-items-center justify-content-center");
.html("")
.removeClass("text-center d-flex align-items-center justify-content-center");
$(this).siblings(".num-card").removeClass("bg-danger").addClass("bg-verde-pino"); $(this).siblings(".num-card").removeClass("bg-danger").addClass("bg-verde-pino");
} }
}); });
contenido/06.html
+83 -68
View File
@@ -54,35 +54,43 @@
background-position: center; background-position: center;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2> <h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</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> </div>
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-4 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"> <img src="img/06.0.png" class="img-fluid" />
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow"> <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"> <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 su catéter</strong> y requiere de cuidados continuos para <p class="mb-0">
mantenerse en óptimas condiciones, permitiendo que su terapia se desarrolle de forma segura.</p> El sitio de salida (SS) es el área de
<strong class="text-lila-claro">la piel por donde emerge el catéter</strong> peritoneal y requiere
cuidados continuos de higiene y vigilancia para la prevención de complicaciones locales.<sup
class="fw-bold"
>4</sup
>
</p>
</div> </div>
<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"> class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
>
<p class="mb-0 fw-bold text-center">Descubramos más acerca de estos cuidados.</p> <p class="mb-0 fw-bold text-center">Descubramos más acerca de estos cuidados.</p>
</div> </div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"> <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
@@ -95,15 +103,15 @@
</div> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 text-center"> <div class="col-10 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2> <h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</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> </div>
<div class="col-10 mb-3"> <div class="col-10 mb-3">
@@ -111,8 +119,11 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-10"> <div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book2.png" class="img-fluid"> <img src="img/book2.png" class="img-fluid" />
<p class="mb-0"><strong>Instrucciones:</strong> Lea lo que opinan dos doctores sobre los cuidados del sitio de salida. Analice sus argumentos y elija quién tiene la razón.</p> <p class="mb-0">
<strong>Instrucciones:</strong> Lea lo que opinan dos doctores sobre los cuidados del sitio de
salida. Analice sus argumentos y elija quién tiene la razón.
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -133,27 +144,28 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2> <h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</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> </div>
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;"> <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()"> onclick="CourseNav.reload()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5> <h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div> </div>
</div> </div>
@@ -165,7 +177,7 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
let questions; let questions;
let currentQuestionIndex = 0; let currentQuestionIndex = 0;
@@ -174,30 +186,30 @@
let maxQuestions = 5; let maxQuestions = 5;
let currentFichaIndex = 0; let currentFichaIndex = 0;
let questionResults = []; let questionResults = [];
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg'); const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound('audio/feedback-correct.mpeg'); const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const imgPerso = ['img/06.1.png', 'img/06.2.png']; const imgPerso = ["img/06.1.png", "img/06.2.png"];
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx'; const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
$('.btn-comenzar').click(function (e) { $(".btn-comenzar").click(function (e) {
e.preventDefault(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
function readExcelFile(url, callback) { function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open("GET", url, true);
xhr.responseType = 'arraybuffer'; xhr.responseType = "arraybuffer";
xhr.onload = function (e) { xhr.onload = function (e) {
var arrayBuffer = xhr.response; var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer); var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" }); var workbook = XLSX.read(data, { type: "array" });
var result = {}; var result = {};
workbook.SheetNames.forEach(sheetName => { workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName]; var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet); result[sheetName] = XLSX.utils.sheet_to_json(sheet);
}); });
@@ -215,22 +227,22 @@
} }
function procesarPreguntas(data) { function procesarPreguntas(data) {
return data.map(fila => ({ return data.map((fila) => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '', pregunta: fila.pregunta ? String(fila.pregunta).trim() : "",
opcion: fila.opcion ? String(fila.opcion).trim() : '', opcion: fila.opcion ? String(fila.opcion).trim() : "",
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : '' opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : "",
})); }));
} }
function createIndicators(total) { function createIndicators(total) {
const container = $('.indicadores-avance'); const container = $(".indicadores-avance");
container.empty(); container.empty();
for (let i = 0; i < total; i++) { for (let i = 0; i < total; i++) {
const circle = $('<div class="indicator-circle"></div>'); const circle = $('<div class="indicator-circle"></div>');
circle.css({ circle.css({
'background-color': i === 0 ? '#2196F3' : '#E0E0E0' "background-color": i === 0 ? "#2196F3" : "#E0E0E0",
}); });
circle.attr('data-index', i); circle.attr("data-index", i);
container.append(circle); container.append(circle);
} }
} }
@@ -251,48 +263,50 @@
<div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${leftIsCorrect}"> <div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0"> <div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;"> <img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ''}</div> <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ""}</div>
</div> </div>
</div> </div>
<img src="img/06.3.png" class="img-fluid mx-2 animate__animated animate__zoomIn"> <img src="img/06.3.png" class="img-fluid mx-2 animate__animated animate__zoomIn">
<div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${!leftIsCorrect}"> <div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${!leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0"> <div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;"> <img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ''}</div> <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ""}</div>
</div> </div>
</div> </div>
`; `;
$('#puzzle-versus').removeClass('animate__animated animate__zoomOut').html(structure); $("#puzzle-versus").removeClass("animate__animated animate__zoomOut").html(structure);
updateIndicators(); updateIndicators();
initializeAnswers(); initializeAnswers();
} }
function updateIndicators() { function updateIndicators() {
$('.indicator-circle').each(function(index) { $(".indicator-circle").each(function (index) {
if (index < currentQuestionIndex && questionResults[index] !== undefined) { if (index < currentQuestionIndex && questionResults[index] !== undefined) {
const isCorrect = questionResults[index]; const isCorrect = questionResults[index];
$(this).css({ $(this).css({
'background-color': 'transparent', "background-color": "transparent",
'background-image': `url(img/${isCorrect ? 'checkG' : 'checkB'}.png)` "background-image": `url(img/${isCorrect ? "checkG" : "checkB"}.png)`,
}); });
} else if (index === currentQuestionIndex) { } else if (index === currentQuestionIndex) {
$(this).css({ $(this).css({
'background-color': '#2196F3', "background-color": "#2196F3",
'background-image': 'none' "background-image": "none",
}); });
} else { } else {
$(this).css({ $(this).css({
'background-color': '#E0E0E0', "background-color": "#E0E0E0",
'background-image': 'none' "background-image": "none",
}); });
} }
}); });
} }
function initializeAnswers() { function initializeAnswers() {
$('.btn-respuesta').off('click').on('click', function() { $(".btn-respuesta")
const isCorrect = $(this).data('correct'); .off("click")
.on("click", function () {
const isCorrect = $(this).data("correct");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
@@ -303,18 +317,19 @@
questionResults[currentQuestionIndex] = isCorrect; questionResults[currentQuestionIndex] = isCorrect;
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png', imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none', popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite' confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "35em", width: "35em",
didClose: () => { didClose: () => {
$('#puzzle-versus').addClass('animate__animated animate__zoomOut'); $("#puzzle-versus").addClass("animate__animated animate__zoomOut");
setTimeout(() => { setTimeout(() => {
currentQuestionIndex++; currentQuestionIndex++;
if (currentQuestionIndex < maxQuestions && currentQuestionIndex < questions.length) { if (currentQuestionIndex < maxQuestions && currentQuestionIndex < questions.length) {
@@ -323,7 +338,7 @@
finishActivity(); finishActivity();
} }
}, 500); }, 500);
} },
}); });
}); });
} }
@@ -331,12 +346,12 @@
function finishActivity() { function finishActivity() {
const totalQuestions = Math.min(maxQuestions, questions.length); const totalQuestions = Math.min(maxQuestions, questions.length);
const percentage = (correctQuestions / totalQuestions) * 100; const percentage = (correctQuestions / totalQuestions) * 100;
$('.wrap-course-content').addClass('fake2').removeClass('fake1'); $(".wrap-course-content").addClass("fake2").removeClass("fake1");
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
if (percentage < 80) { if (percentage < 80) {
$('.col-reintentar').show(); $(".col-reintentar").show();
} }
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
contenido/07.html
+85 -76
View File
@@ -48,30 +48,36 @@
pointer-events: none; pointer-events: none;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2> <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> </div>
<div class="col-12 text-center mb-1 animate__animated animate__zoomIn"> <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>
<div class="col-12 text-center mb-3 animate__animated animate__flipInX"> <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 <p class="my-0">
gérmenes</b> que ponen en riesgo Se recomienda mantener la línea de transferencia y el catéter en condiciones de higiene adecuadas. Es
su salud y importante utilizar técnica aséptica durante la manipulación del acceso peritoneal, ya sea en los
vida. </p> 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 <p>
su acceso peritoneal</b>, ya Por eso, es necesario que utilice una
sea para realizar un recambio, explorar su orificio de salida o en procedimientos realizados por el <b class="text-lila-claro">técnica aséptica para la manipulación de su acceso peritoneal</b>, ya sea para
personal de salud.</p> realizar un recambio, explorar su orificio de salida o en procedimientos realizados por el personal de
salud.
</p>
</div> </div>
<div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3"> <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"> <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>
<div class="col-12 text-center animate__animated animate__zoomIn animate__delay-2s"> <div class="col-12 text-center animate__animated animate__zoomIn animate__delay-2s">
<div <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
@@ -89,15 +96,15 @@
</div> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 text-center"> <div class="col-10 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2> <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> </div>
<div class="col-10 mb-3"> <div class="col-10 mb-3">
@@ -105,9 +112,11 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-10"> <div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book3.png" class="img-fluid"> <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 <p class="mb-0">
descubrir los pasos que debe tener en cuenta para realizar su terapia de forma segura en casa.</p> <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> </div>
</div> </div>
@@ -119,55 +128,55 @@
<!--Carta 1 Up--> <!--Carta 1 Up-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.2.png" class="img-fluid"> <img src="img/07.2.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 2 Up--> <!--Carta 2 Up-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.3.png" class="img-fluid"> <img src="img/07.3.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 3 Up--> <!--Carta 3 Up-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.4.png" class="img-fluid"> <img src="img/07.4.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 4 Up--> <!--Carta 4 Up-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.5.png" class="img-fluid"> <img src="img/07.5.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 5 Up--> <!--Carta 5 Up-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.6.png" class="img-fluid"> <img src="img/07.6.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 6 Up--> <!--Carta 6 Up-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.7.png" class="img-fluid"> <img src="img/07.7.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@@ -175,55 +184,55 @@
<!--Carta 1 Down--> <!--Carta 1 Down-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.2c.png" class="img-fluid"> <img src="img/07.2c.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 2 Down--> <!--Carta 2 Down-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.3c.png" class="img-fluid"> <img src="img/07.3c.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 3 Down--> <!--Carta 3 Down-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.4c.png" class="img-fluid"> <img src="img/07.4c.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 4 Down--> <!--Carta 4 Down-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.5c.png" class="img-fluid"> <img src="img/07.5c.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 5 Down--> <!--Carta 5 Down-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.6c.png" class="img-fluid"> <img src="img/07.6c.png" class="img-fluid" />
</div> </div>
</div> </div>
<!--Carta 6 Down--> <!--Carta 6 Down-->
<div class="card-container"> <div class="card-container">
<div class="front"> <div class="front">
<img src="img/07.1.png" class="img-fluid"> <img src="img/07.1.png" class="img-fluid" />
</div> </div>
<div class="back"> <div class="back">
<img src="img/07.7c.png" class="img-fluid"> <img src="img/07.7c.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@@ -234,18 +243,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2> <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> </div>
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
@@ -259,16 +268,16 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
const flip_sound = CourseNav.createSound('audio/flip.mp3'); const flip_sound = CourseNav.createSound("audio/flip.mp3");
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg'); const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg'); const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
$('.btn-comenzar').click(function (e) { $(".btn-comenzar").click(function (e) {
e.preventDefault(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
// Función para asignar pares a cada tarjeta // Función para asignar pares a cada tarjeta
@@ -276,7 +285,7 @@
const optionsContainer = document.getElementById(fatherId); const optionsContainer = document.getElementById(fatherId);
const optionsArray = Array.from(optionsContainer.children); const optionsArray = Array.from(optionsContainer.children);
optionsArray.forEach((option, index) => { optionsArray.forEach((option, index) => {
option.setAttribute('data-par', index); option.setAttribute("data-par", index);
}); });
} }
@@ -285,7 +294,7 @@
const optionsContainer = document.getElementById(fatherId); const optionsContainer = document.getElementById(fatherId);
const optionsArray = Array.from(optionsContainer.children); const optionsArray = Array.from(optionsContainer.children);
const shuffledOptions = optionsArray.sort(() => Math.random() - 0.5); 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 // 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 let lastFlippedRow = ""; // Para rastrear la última fila girada
$(".card-container").flip({ $(".card-container").flip({
trigger: 'manual' // Control manual del volteo trigger: "manual", // Control manual del volteo
}); });
$(".card-container").on("click", function () { $(".card-container").on("click", function () {
@@ -324,9 +333,9 @@
gsap.to(firstCard, { gsap.to(firstCard, {
duration: 1, duration: 1,
delay: 1, delay: 1,
boxShadow: "0px 0px 0px 0px #fff" boxShadow: "0px 0px 0px 0px #fff",
}); });
} },
}); });
// Agregar el efecto de resplandor // Agregar el efecto de resplandor
gsap.to(secondCard, { gsap.to(secondCard, {
@@ -337,9 +346,9 @@
gsap.to(secondCard, { gsap.to(secondCard, {
duration: 1, duration: 1,
delay: 1, delay: 1,
boxShadow: "0px 0px 0px 0px #fff" boxShadow: "0px 0px 0px 0px #fff",
}); });
} },
}); });
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect); CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
flippedCards = []; flippedCards = [];
@@ -370,16 +379,16 @@
} }
function isCompleted() { function isCompleted() {
$('.wrap-course-content').addClass('fake2').removeClass('fake1'); $(".wrap-course-content").addClass("fake2").removeClass("fake1");
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} }
assignPairs('row-answer'); assignPairs("row-answer");
assignPairs('row-questions'); assignPairs("row-questions");
randomizeOptions('row-answer'); randomizeOptions("row-answer");
randomizeOptions('row-questions'); randomizeOptions("row-questions");
initializeFlip(); initializeFlip();
}); });
</script> </script>
contenido/08.html
+10 -23
View File
@@ -64,13 +64,11 @@
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow"> <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
>
<p> <p>
Para un recambio seguro, bajo ningún motivo debe tocar las Para el recambio, se recomienda evitar el contacto con las zonas estériles (libres de gérmenes)
<b class="text-lila-claro">zonas estériles (libres de gérmenes)</b> en su del sistema de diálisis peritoneal, con el fin de mantener condiciones de higiene durante el
sistema de DP. procedimiento.<sup class="fw-bold">6</sup>
</p> </p>
</div> </div>
<div <div
@@ -80,9 +78,7 @@
Realice la siguiente actividad para identificar cuáles son estas zonas. Realice la siguiente actividad para identificar cuáles son estas zonas.
</p> </p>
</div> </div>
<div <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div <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"
> >
@@ -119,8 +115,8 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" /> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema <strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema de DP y arrastre sus
de DP y arrastre sus nombres hacia la fotografía que les corresponda. nombres hacia la fotografía que les corresponda.
</p> </p>
</div> </div>
</div> </div>
@@ -130,16 +126,10 @@
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-3"> <div class="col-12 mb-3">
<div <div id="content-drags" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
id="content-drags"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div <div id="content-drops" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
id="content-drops"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
</div> </div>
</div> </div>
</div> </div>
@@ -168,10 +158,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()" onclick="CourseNav.reload()"
contenido/11.html
+26 -41
View File
@@ -89,17 +89,18 @@
<div class="col-12 text-center mb-3 animate__animated animate__flipInX"> <div class="col-12 text-center mb-3 animate__animated animate__flipInX">
<p> <p>
La gran ventaja que le ofrece la DP es que se trata de un tratamiento La gran ventaja que le ofrece la DP es que se trata de un tratamiento
<strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que <strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que acuda a todas sus
acuda a todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y consultas de seguimiento y lleve todos sus estudios de laboratorio y registros del tratamiento que le
registros del tratamiento que le solicite el personal de salud. solicite el personal de salud.
</p>
<p>
La diálisis peritoneal es una modalidad de tratamiento que puede realizarse en el domicilio. Se recomienda
acudir a las consultas de seguimiento y llevar los estudios de laboratorio y registros del tratamiento que
solicite el personal de salud.<sup class="fw-bold">8</sup>
</p> </p>
</div> </div>
<div <div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
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">
>
<div
class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold"
>
Un aspecto importante a tomar en cuenta es el consumo y balance de líquidos. Un aspecto importante a tomar en cuenta es el consumo y balance de líquidos.
</div> </div>
</div> </div>
@@ -136,9 +137,9 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" /> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del <strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del control de líquidos y
control de líquidos y conteste correctamente. Por cada acierto obtendrá una conteste correctamente. Por cada acierto obtendrá una pieza del rompecabezas, el reto es descubrir
pieza del rompecabezas, el reto es descubrir la imagen oculta. la imagen oculta.
</p> </p>
</div> </div>
</div> </div>
@@ -156,9 +157,7 @@
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow" 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="row justify-content-center">
<div <div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"
></div>
<div class="col-12 content-answers"></div> <div class="col-12 content-answers"></div>
</div> </div>
</div> </div>
@@ -190,10 +189,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()" onclick="CourseNav.reload()"
@@ -231,7 +227,7 @@
// Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle' // Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
svg.find('[id^="pz"]').hide().addClass("piece-puzzle"); svg.find('[id^="pz"]').hide().addClass("piece-puzzle");
}, },
"xml" "xml",
); );
} }
@@ -275,7 +271,7 @@
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(), retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(), retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
}; };
@@ -299,24 +295,13 @@
return; return;
} }
$("#card-content-quiz-rompecabezas").hide();
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
$(".txt-question").text(currentQuestion.pregunta); $(".txt-question").html(currentQuestion.pregunta);
const answersContainer = $(".content-answers"); const answersContainer = $(".content-answers");
answersContainer.empty(); answersContainer.empty();
setTimeout(() => { currentQuestion.opciones.forEach((opcion, index) => {
$("#card-content-quiz-rompecabezas")
.removeClass("animate__zoomIn")
.addClass("animate__zoomIn")
.show();
}, 100);
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
shuffledOpciones.forEach((opcion, index) => {
const btn = const btn =
$(`<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}"> $(`<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div> <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
@@ -330,10 +315,6 @@
$(".btn-answer").off("click").css("pointer-events", "none"); $(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) {
correctQuestions++;
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
showFeedback(isCorrect); showFeedback(isCorrect);
}); });
@@ -354,9 +335,14 @@
width: "35em", width: "35em",
didClose: () => { didClose: () => {
if (isCorrect) { if (isCorrect) {
correctQuestions++;
showPuzzlePiece(); showPuzzlePiece();
}
currentQuestionIndex++; currentQuestionIndex++;
$("#card-content-quiz-rompecabezas").hide();
setTimeout(() => {
$("#card-content-quiz-rompecabezas").removeClass("animate__zoomIn").addClass("animate__zoomIn").show();
}, 100);
}
displayQuestion(); displayQuestion();
}, },
}); });
@@ -386,8 +372,7 @@
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 22"]; const hojaDatos = data["Diapositiva 22"];
const preguntasProcesadas = shuffleArray(procesarPreguntas(hojaDatos)); const preguntasProcesadas = shuffleArray(procesarPreguntas(hojaDatos));
questions = questions = maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
loadSVG(); loadSVG();
setTimeout(() => { setTimeout(() => {
displayQuestion(); displayQuestion();
contenido/12.html
+34 -40
View File
@@ -133,7 +133,7 @@
</div> </div>
<div class="col-5 text-center mb-3 animate__animated animate__flipInX"> <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"> <div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
<p> <!-- <p>
<b class="text-lila-claro">La alimentación</b> balanceada es muy importante. Como <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 parte de su tratamiento <b class="text-lila-claro">se debe personalizar</b> con base
en sus necesidades. en sus necesidades.
@@ -142,6 +142,14 @@
También, es necesario También, es necesario
<strong class="text-lila-claro">mantener un estilo de vida activo </strong>para el <strong class="text-lila-claro">mantener un estilo de vida activo </strong>para el
buen funcionamiento de músculos, huesos y corazón. buen funcionamiento de músculos, huesos y corazón.
</p> -->
<p>
<b class="text-lila-claro">La alimentación</b> balanceada forma parte del manejo de la enfermedad y
<b class="text-lila-claro">puede personalizarse</b> de acuerdo con las necesidades del paciente.
</p>
<p>
Asimismo, se recomienda <strong class="text-lila-claro">mantener un estilo de vida activo</strong> para
favorecer el funcionamiento de músculos, huesos y sistema cardiovascular.<sup class="fw-bold">1</sup>
</p> </p>
<div class="w-100 position-relative text-center"> <div class="w-100 position-relative text-center">
<div <div
@@ -179,22 +187,15 @@
<div class="col-8"> <div class="col-8">
<div <div
class="card bg-verde-claro border-0 bx-shadow py-2 px-3" class="card bg-verde-claro border-0 bx-shadow py-2 px-3"
style=" style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0"
border-radius: 15px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
"
> >
<div class="row justify-content-start"> <div class="row justify-content-start">
<div class="col-12"> <div class="col-12">
<div <div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4"
>
<img src="img/book1.png" class="img-fluid" /> <img src="img/book1.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Dé clic en la ruleta y conteste <strong>Instrucciones:</strong> Dé clic en la ruleta y conteste correctamente la pregunta
correctamente la pregunta acerca de su alimentación o actividad física acerca de su alimentación o actividad física para ganar los puntos.
para ganar los puntos.
</p> </p>
</div> </div>
</div> </div>
@@ -204,9 +205,7 @@
</div> </div>
</div> </div>
<div class="col-11"> <div class="col-11">
<div <div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
class="row justify-content-center align-items-center animate__animated animate__slideInRight"
>
<div class="col-6"> <div class="col-6">
<div class="card custom-card bg-secondary border-0 shadow"> <div class="card custom-card bg-secondary border-0 shadow">
<div class="card-body"> <div class="card-body">
@@ -305,10 +304,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()" onclick="CourseNav.reload()"
@@ -411,10 +407,8 @@
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
? fila.retroalimentacion_correcta.trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim() ? fila.retroalimentacion_incorrecta.trim()
: "", : "",
@@ -438,11 +432,10 @@
const indiceAleatorio = Math.floor(Math.random() * questions.length); const indiceAleatorio = Math.floor(Math.random() * questions.length);
const preguntaAleatoria = questions[indiceAleatorio]; const preguntaAleatoria = questions[indiceAleatorio];
questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada questions.splice(indiceAleatorio, 1);
const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
let opcionesHTML = ""; let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => { preguntaAleatoria.opciones.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntajeEnJuego}"> opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntajeEnJuego}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div> <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
<div class="txt-answer ps-3">${opcion.text}</div> <div class="txt-answer ps-3">${opcion.text}</div>
@@ -468,37 +461,38 @@
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
$(".btn-answer").click(function () { function handleAnswer() {
const isCorrect = $(this).data("correct") === true; const isCorrect = $(this).data("correct") === true;
const puntos = $(this).data("puntos"); const puntos = $(this).data("puntos");
$(".btn-answer").off("click").css("pointer-events", "none"); $(".btn-answer").off("click").css("pointer-events", "none");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) { if (isCorrect) {
$(this).addClass("bg-success text-white"); $(this).addClass("bg-success text-white");
totalPuntos += puntos; totalPuntos += puntos;
actualizarPuntos(true); actualizarPuntos(true);
} else {
actualizarPuntos(false);
$(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => { setTimeout(() => {
Swal.close(); Swal.close();
mostrarFeedback(isCorrect, preguntaAleatoria); mostrarFeedback(preguntaAleatoria);
}, 500); }, 500);
}); } else {
$(this).addClass("bg-danger text-white");
setTimeout(() => {
$(this).removeClass("bg-danger text-white");
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
}
$(".btn-answer").on("click", handleAnswer);
}, },
}); });
} }
function mostrarFeedback(isCorrect, pregunta) { function mostrarFeedback(pregunta) {
Swal.fire({ Swal.fire({
target: document.getElementById("wrap-course-content"), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png", imageUrl: "img/good.png",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none", popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
contenido/13.html
+37 -58
View File
@@ -94,22 +94,23 @@
<div class="col-5 text-center mb-3 animate__animated animate__flipInX"> <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="card bg-white border-0 rounded-3 px-0 pt-2 pb-0 bx-shadow">
<div class="position-relative w-100 px-3"> <div class="position-relative w-100 px-3">
<p> <!-- <p>
Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son
en parte, son controlados mediante la DP, sin embargo, es necesario que se apoye controlados mediante la DP, sin embargo, es necesario que se apoye de medicamentos que solo su médico
de medicamentos que solo su médico puede y debe prescribir. puede y debe prescribir.
</p> -->
<p class="mb-0">
La enfermedad renal crónica puede presentar signos y síntomas que pueden ser manejados en parte
mediante la diálisis peritoneal. El tratamiento puede incluir el uso de medicamentos prescritos por el
médico, de acuerdo con la valoración clínica.<sup class="fw-bold">1</sup>
</p> </p>
</div> </div>
<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" class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
> >
<p class="mb-0 fw-bold text-center"> <p class="mb-0 fw-bold text-center">Siga las recomendaciones del personal de salud.</p>
Siga las recomendaciones del personal de salud.
</p>
</div> </div>
<div <div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s">
class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div <div
class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
> >
@@ -144,9 +145,8 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book3.png" class="img-fluid" /> <img src="img/book3.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la <strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la pregunta acerca del
pregunta acerca del manejo de medicamentos que apoyan la DP. Por cada acierto manejo de medicamentos que apoyan la DP. Por cada acierto sumará puntos.
sumará puntos.
</p> </p>
</div> </div>
</div> </div>
@@ -166,34 +166,19 @@
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="grip-jeopardy"> <div class="grip-jeopardy">
<div <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<img src="img/13.0.png" class="img-fluid" /> <img src="img/13.0.png" class="img-fluid" />
</div> </div>
<div <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="200"
>
<img src="img/13.2.png" class="img-fluid" /> <img src="img/13.2.png" class="img-fluid" />
</div> </div>
<div <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<img src="img/13.1.png" class="img-fluid" /> <img src="img/13.1.png" class="img-fluid" />
</div> </div>
<div <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<img src="img/13.0.png" class="img-fluid" /> <img src="img/13.0.png" class="img-fluid" />
</div> </div>
<div <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<img src="img/13.1.png" class="img-fluid" /> <img src="img/13.1.png" class="img-fluid" />
</div> </div>
<!-- <div <!-- <div
@@ -240,10 +225,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()" onclick="CourseNav.reload()"
@@ -309,10 +291,8 @@
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
? fila.retroalimentacion_correcta.trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim() ? fila.retroalimentacion_incorrecta.trim()
: "", : "",
@@ -333,10 +313,9 @@
if (questionIndex >= questions.length) return; if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex]; const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
let opcionesHTML = ""; let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => { pregunta.opciones.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntosEnJuego}"> opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntosEnJuego}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div> <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
<div class="txt-answer text-start ps-3">${opcion.text}</div> <div class="txt-answer text-start ps-3">${opcion.text}</div>
@@ -362,32 +341,36 @@
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
$(".btn-answer").click(function () { function handleAnswer() {
const isCorrect = $(this).data("correct") === true; const isCorrect = $(this).data("correct") === true;
const puntos = $(this).data("puntos"); const puntos = $(this).data("puntos");
$(".btn-answer").off("click hover").css("pointer-events", "none"); $(".btn-answer").off("click").css("pointer-events", "none");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) { if (isCorrect) {
correctQuestions++; correctQuestions++;
const puntosActuales = parseInt($("#puntos").text()) + puntos; const puntosActuales = parseInt($("#puntos").text()) + puntos;
$("#puntos").text(puntosActuales.toString().padStart(3, "0")); $("#puntos").text(puntosActuales.toString().padStart(3, "0"));
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => { setTimeout(() => {
Swal.close(); Swal.close();
mostrarFeedback(isCorrect, pregunta, questionIndex); mostrarFeedback(pregunta, questionIndex);
}, 200); }, 200);
}); } else {
setTimeout(() => {
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
}
$(".btn-answer").on("click", handleAnswer);
}, },
}); });
} }
function mostrarFeedback(isCorrect, pregunta, questionIndex) { function mostrarFeedback(pregunta, questionIndex) {
Swal.fire({ Swal.fire({
target: document.getElementById("wrap-course-content"), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png", imageUrl: "img/good.png",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none", popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
@@ -431,11 +414,7 @@
$(".btn-question-pop").click(function () { $(".btn-question-pop").click(function () {
const index = $(this).index(); const index = $(this).index();
const puntosEnJuego = parseInt($(this).data("puntos")); const puntosEnJuego = parseInt($(this).data("puntos"));
if ( if (!$(this).hasClass("completed") && !$(this).hasClass("disabled") && index < questions.length) {
!$(this).hasClass("completed") &&
!$(this).hasClass("disabled") &&
index < questions.length
) {
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled"); $(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
CourseNav.soundClick(); CourseNav.soundClick();
mostrarPregunta(index, puntosEnJuego); mostrarPregunta(index, puntosEnJuego);
contenido/14.html
+22 -45
View File
@@ -323,7 +323,7 @@
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta retroalimentacion_correcta: fila.retroalimentacion_correcta
? fila.retroalimentacion_correcta.trim() ? fila.retroalimentacion_correcta.trim()
: "", : "",
@@ -347,10 +347,9 @@
if (questionIndex >= questions.length) return; if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex]; const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
let opcionesHTML = ""; let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => { pregunta.opciones.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}"> opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div> <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
<div class="txt-answer text-start ps-3">${opcion.text}</div> <div class="txt-answer text-start ps-3">${opcion.text}</div>
@@ -375,34 +374,34 @@
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
$(".btn-answer").click(function () { function handleAnswer() {
const isCorrect = $(this).data("correct") === true; const isCorrect = $(this).data("correct") === true;
$(".btn-answer").off("click").css("pointer-events", "none"); $(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) {
correctQuestions++;
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) {
correctQuestions++;
setTimeout(() => { setTimeout(() => {
Swal.close(); Swal.close();
mostrarFeedback(isCorrect, pregunta, questionIndex); mostrarFeedback(pregunta, questionIndex);
}, 250); }, 250);
}); } else {
setTimeout(() => {
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
}
$(".btn-answer").on("click", handleAnswer);
}, },
}); });
} }
function mostrarFeedback(isCorrect, pregunta, questionIndex) { function mostrarFeedback(pregunta, questionIndex) {
const retroalimentacion = isCorrect
? pregunta.retroalimentacion_correcta
: pregunta.retroalimentacion_incorrecta;
Swal.fire({ Swal.fire({
target: document.getElementById("wrap-course-content"), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png", imageUrl: "img/good.png",
text: retroalimentacion || "", text: pregunta.retroalimentacion_correcta || "",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none", popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
@@ -415,23 +414,13 @@
didClose: () => { didClose: () => {
const currentPaquete = $(`#paquete${questionIndex}`); const currentPaquete = $(`#paquete${questionIndex}`);
currentPaquete.removeClass("animate__pulse animate__infinite").addClass("completed"); currentPaquete.removeClass("animate__pulse animate__infinite").addClass("completed");
currentPaquete.find(".check-question img").attr("src", "img/14.11.png");
// Cambiar imagen del check
const checkImg = currentPaquete.find(".check-question img");
checkImg.attr("src", isCorrect ? "img/14.11.png" : "img/14.10.png");
if (isCorrect) {
// Mover camión
const camion = $("#camion-transporte"); const camion = $("#camion-transporte");
const paqueteWidth = currentPaquete.outerWidth() + 15; // incluye gap const paqueteWidth = currentPaquete.outerWidth() + 15;
const currentTransform = camion.css("transform"); const currentX = camion.css("transform") === "none" ? 0 : parseFloat(camion.css("transform").split(",")[4]) || 0;
const currentX = camion.css("transform", `translateX(${currentX + paqueteWidth}px)`);
currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
const newX = currentX + paqueteWidth;
camion.css("transform", `translateX(${newX}px)`);
}
// Habilitar siguiente paquete
if (questionIndex < questions.length - 1) { if (questionIndex < questions.length - 1) {
$(`#paquete${questionIndex + 1}`).removeClass("disabled"); $(`#paquete${questionIndex + 1}`).removeClass("disabled");
} }
@@ -439,23 +428,11 @@
currentQuestionIndex++; currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) { if (currentQuestionIndex >= questions.length) {
// Si respondió todas correctamente, mover al destino final
if (correctQuestions === questions.length) {
setTimeout(() => { setTimeout(() => {
const camion = $("#camion-transporte"); const newX = (parseFloat(camion.css("transform").split(",")[4]) || 0) + currentPaquete.outerWidth() + 25;
const currentTransform = camion.css("transform");
const currentX =
currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
const paqueteWidth = currentPaquete.outerWidth() + 25;
const newX = currentX + paqueteWidth;
camion.css("transform", `translateX(${newX}px)`); camion.css("transform", `translateX(${newX}px)`);
console.log("Moviendo camión al fin:", newX);
}, 1000); }, 1000);
} setTimeout(() => finalizarJuego(), 3000);
const delay = correctQuestions === questions.length ? 3000 : 1500;
setTimeout(() => {
finalizarJuego();
}, delay);
} }
}, },
}); });
contenido/15.html
+18 -20
View File
@@ -316,7 +316,7 @@
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '', retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '' retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
}; };
@@ -336,10 +336,8 @@
if (questionIndex >= questions.length) return; if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex]; const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
let opcionesHTML = ''; let opcionesHTML = '';
opcionesBarajadas.forEach((opcion, index) => { pregunta.opciones.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}"> opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div> <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
<div class="txt-answer ps-3">${opcion.text}</div> <div class="txt-answer ps-3">${opcion.text}</div>
@@ -369,35 +367,35 @@
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
$('.btn-answer').click(function() { function handleAnswer() {
const isCorrect = $(this).data('correct') === true; const isCorrect = $(this).data('correct') === true;
$('.btn-answer').off('click hover').css('pointer-events', 'none'); $('.btn-answer').off('click').css('pointer-events', 'none');
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) { if (isCorrect) {
correctQuestions++; correctQuestions++;
$(`.med_style:eq(${questionIndex})`).addClass('bien'); $(`.med_style:eq(${questionIndex})`).addClass('bien');
} else {
$(`.med_style:eq(${questionIndex})`).addClass('mal');
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => { setTimeout(() => {
Swal.close(); Swal.close();
mostrarFeedback(isCorrect, pregunta, questionIndex); mostrarFeedback(pregunta, questionIndex);
}, 250); }, 250);
}); } else {
setTimeout(() => {
$('.btn-answer').css('pointer-events', '').on('click', handleAnswer);
}, 600);
}
}
$('.btn-answer').on('click', handleAnswer);
} }
}); });
} }
function mostrarFeedback(isCorrect, pregunta, questionIndex) { function mostrarFeedback(pregunta, questionIndex) {
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png', imageUrl: 'img/good.png',
text: retroalimentacion || '', text: pregunta.retroalimentacion_correcta || '',
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none', popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
@@ -408,7 +406,7 @@
width: "35em", width: "35em",
didClose: () => { didClose: () => {
const currentBtn = $(`.object-btn[data-obj="${questionIndex}"]`); const currentBtn = $(`.object-btn[data-obj="${questionIndex}"]`);
currentBtn.addClass(isCorrect ? 'completed good' : 'completed bad'); currentBtn.addClass('completed good');
currentQuestionIndex++; currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) { if (currentQuestionIndex >= questions.length) {
contenido/16.html
+186 -138
View File
@@ -31,7 +31,7 @@
} }
.bg-custom { .bg-custom {
box-shadow: 0 0 10px rgba(0, 0, 0, .5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} }
.btn-answer { .btn-answer {
@@ -63,7 +63,7 @@
.content-medidor { .content-medidor {
background-color: #fff; background-color: #fff;
box-shadow: 0 0 12px rgba(0, 0, 0, .5); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
border-radius: 40px; border-radius: 40px;
} }
@@ -73,8 +73,8 @@
grid-template-columns: repeat(11, 1fr); grid-template-columns: repeat(11, 1fr);
grid-template-rows: auto; grid-template-rows: auto;
gap: 0; gap: 0;
background: #E7E7E7; background: #e7e7e7;
background: linear-gradient(to left, #E7E7E7 0%, #C3C3C3 100%); background: linear-gradient(to left, #e7e7e7 0%, #c3c3c3 100%);
border-radius: 40px; border-radius: 40px;
} }
@@ -98,7 +98,7 @@
.med_style:first-child { .med_style:first-child {
border-top-left-radius: 40px; border-top-left-radius: 40px;
border-bottom-left-radius: 40px; border-bottom-left-radius: 40px;
background: #DF0000; background: #df0000;
/* background: linear-gradient(to top, #DF0000 0%, #4F0700 100%); */ /* background: linear-gradient(to top, #DF0000 0%, #4F0700 100%); */
} }
@@ -115,47 +115,47 @@
} }
.med_style:nth-child(2) { .med_style:nth-child(2) {
background: #D33F00; background: #d33f00;
/* background: linear-gradient(to top, #D33F00 0%, #c93000 100%); */ /* background: linear-gradient(to top, #D33F00 0%, #c93000 100%); */
} }
.med_style:nth-child(3) { .med_style:nth-child(3) {
background: #F77800; background: #f77800;
/* background: linear-gradient(to top, #ffce00 0%, #fe6a00 100%); */ /* background: linear-gradient(to top, #ffce00 0%, #fe6a00 100%); */
} }
.med_style:nth-child(4) { .med_style:nth-child(4) {
background: #F99D00; background: #f99d00;
/* background: linear-gradient(to top, #a4f800 0%, #ffe600 100%); */ /* background: linear-gradient(to top, #a4f800 0%, #ffe600 100%); */
} }
.med_style:nth-child(5) { .med_style:nth-child(5) {
background: #FBC100; background: #fbc100;
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */ /* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
} }
.med_style:nth-child(6) { .med_style:nth-child(6) {
background: #FDE600; background: #fde600;
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */ /* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
} }
.med_style:nth-child(7) { .med_style:nth-child(7) {
background: #CFE700; background: #cfe700;
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */ /* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
} }
.med_style:nth-child(8) { .med_style:nth-child(8) {
background: #A0E700; background: #a0e700;
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */ /* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
} }
.med_style:nth-child(9) { .med_style:nth-child(9) {
background: #7FCB00; background: #7fcb00;
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */ /* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
} }
.med_style:nth-child(10) { .med_style:nth-child(10) {
background: #7FCB00; background: #7fcb00;
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */ /* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
} }
@@ -177,15 +177,15 @@
width: 5%; width: 5%;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center align-items-center'> <div class="row justify-content-center align-items-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Procedimientos</h2> <h2 class="text-primary mb-1 fw-bold">Procedimientos</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> </div>
<div class="col-12 mb-1 text-center animate__animated animate__zoomIn"> <div class="col-12 mb-1 text-center animate__animated animate__zoomIn">
@@ -193,38 +193,51 @@
</div> </div>
<div class="col-5 text-center intro mb-3 animate__animated animate__flipInX"> <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"> <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>. Cada una <!-- <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 de ellas tiene sus propios procesos que debe seguir cuidadosamente para que la terapia
sea exitosa.</p> sea exitosa.</p>
<p class="my-0">En la siguiente actividad podrá poner a prueba sus conocimientos sobre los <p class="my-0">En la siguiente actividad podrá poner a prueba sus conocimientos sobre los
<b class="text-primary">procedimientos de conexión y desconexión de la DPA.</b> <b class="text-primary">procedimientos de conexión y desconexión de la DPA.</b>
</p> -->
<p>
Existen dos modalidades de diálisis peritoneal:
<b class="text-primary">la diálisis peritoneal automatizada (DPA)</b> y la
<b class="text-primary">diálisis peritoneal continua ambulatoria (DPCA)</b>. Cada una cuenta con
procesos específicos que se recomienda seguir conforme a la capacitación recibida.
</p>
<p class="mb-0">
En la siguiente actividad podrá poner a prueba sus conocimientos sobre los
<b class="text-primary">procedimientos de conexión y desconexión de la DPA</b>.<sup class="fw-bold"
>17</sup
>
</p> </p>
<div class="w-100 position-relative text-center mt-3"> <div class="w-100 position-relative text-center mt-3">
<div <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 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"> <img src="img/16.0.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;"> <div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-11 text-center animate__animated animate__bounceInDown"> <div class="col-11 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Procedimientos</h2> <h2 class="text-primary mb-1 fw-bold">Procedimientos</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> </div>
<div class="col-12 mb-1 text-center"> <div class="col-12 mb-1 text-center">
@@ -236,13 +249,12 @@
<div class="card bg-lila-rosa border-0 rounded-0 py-2 px-3"> <div class="card bg-lila-rosa border-0 rounded-0 py-2 px-3">
<div class="row justify-content-start"> <div class="row justify-content-start">
<div class="col-12"> <div class="col-12">
<div <div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4"> <img src="img/book1.png" class="img-fluid" />
<img src="img/book1.png" class="img-fluid"> <p class="mb-0">
<p class="mb-0"><strong>Instrucciones:</strong> Presione cada paso de la <strong>Instrucciones:</strong> Presione cada paso de la DPA, lea con atención las oraciones
DPA, lea con atención las oraciones que se presentan acerca de cómo que se presentan acerca de cómo llevarlo a cabo y determine si son falsas o verdaderas para
llevarlo a cabo y determine si son falsas o verdaderas para llenar llenar el medidor de salud del paciente.
el medidor de salud del paciente.
</p> </p>
</div> </div>
</div> </div>
@@ -252,14 +264,14 @@
</div> </div>
</div> </div>
<div class="col-11"> <div class="col-11">
<div <div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
class="row justify-content-center align-items-center animate__animated animate__slideInRight">
<div id="actividad-objects" class="col-12"> <div id="actividad-objects" class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 text-center" style="margin-bottom: 40px;"> <div class="col-12 text-center" style="margin-bottom: 40px">
<div <div
class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3"> class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3"
<img src="img/16.1.png" class="img-fluid w-custom"> >
<img src="img/16.1.png" class="img-fluid w-custom" />
<div class="termometro p-1"> <div class="termometro p-1">
<div id="med0" class="med_style"></div> <div id="med0" class="med_style"></div>
<div id="med1" class="med_style"></div> <div id="med1" class="med_style"></div>
@@ -272,59 +284,81 @@
<div id="med8" class="med_style"></div> <div id="med8" class="med_style"></div>
<div id="med9" class="med_style"></div> <div id="med9" class="med_style"></div>
<div id="med10" class="med_style"></div> <div id="med10" class="med_style"></div>
<div id="indicador" <div
class="indicador-med d-flex flex-row justify-content-center align-items-center"> id="indicador"
<img src="img/16.2.png" class="img-fluid"> class="indicador-med d-flex flex-row justify-content-center align-items-center"
>
<img src="img/16.2.png" class="img-fluid" />
</div> </div>
</div> </div>
<img src="img/16.3.png" class="img-fluid w-custom"> <img src="img/16.3.png" class="img-fluid w-custom" />
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-2"> <div class="d-flex flex-row justify-content-center align-items-center gap-2">
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="0"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.4.png" class="img-fluid"> data-obj="0"
>
<img src="img/16.4.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="1"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.5.png" class="img-fluid"> data-obj="1"
>
<img src="img/16.5.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="2"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.6.png" class="img-fluid"> data-obj="2"
>
<img src="img/16.6.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="3"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.7.png" class="img-fluid"> data-obj="3"
>
<img src="img/16.7.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="4"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.8.png" class="img-fluid"> data-obj="4"
>
<img src="img/16.8.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-2"> <div class="d-flex flex-row justify-content-center align-items-center gap-2">
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="5"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.9.png" class="img-fluid"> data-obj="5"
>
<img src="img/16.9.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="6"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.10.png" class="img-fluid"> data-obj="6"
>
<img src="img/16.10.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="7"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.11.png" class="img-fluid"> data-obj="7"
>
<img src="img/16.11.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="8"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.12.png" class="img-fluid"> data-obj="8"
>
<img src="img/16.12.png" class="img-fluid" />
</div> </div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" <div
data-obj="9"> class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
<img src="img/16.13.png" class="img-fluid"> data-obj="9"
>
<img src="img/16.13.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@@ -337,18 +371,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Procedimientos</h2> <h2 class="text-primary mb-1 fw-bold">Procedimientos</h2>
<hr class="border border-2 border-verde-oscuro w-75 my-0 opacity-100 w-100"> <hr class="border border-2 border-verde-oscuro w-75 my-0 opacity-100 w-100" />
</div> </div>
</div> </div>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@@ -357,10 +391,11 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
style="display: none;"> <div
<div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()"> onclick="CourseNav.reload()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5> <h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div> </div>
</div> </div>
@@ -384,10 +419,10 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
setTimeout(() => { setTimeout(() => {
$('.intro').removeClass('animate__flipInX'); $(".intro").removeClass("animate__flipInX");
}, 600); }, 600);
let questions; let questions;
@@ -396,30 +431,29 @@
let correctQuestions = 0; let correctQuestions = 0;
let currentObjectBtn; let currentObjectBtn;
let isCorrectAnswer = false; let isCorrectAnswer = false;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg'); const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound('audio/feedback-correct.mpeg'); const good = CourseNav.createSound("audio/feedback-correct.mpeg");
$('.btn-comenzar').click(function (e) { $(".btn-comenzar").click(function (e) {
e.preventDefault(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
function readExcelFile(url, callback) { function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open("GET", url, true);
xhr.responseType = 'arraybuffer'; xhr.responseType = "arraybuffer";
xhr.onload = function (e) { xhr.onload = function (e) {
var arrayBuffer = xhr.response; var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer); var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" }); var workbook = XLSX.read(data, { type: "array" });
var result = {}; var result = {};
workbook.SheetNames.forEach(sheetName => { workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName]; var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet); result[sheetName] = XLSX.utils.sheet_to_json(sheet);
}); });
@@ -429,21 +463,23 @@
} }
function procesarPreguntas(data) { function procesarPreguntas(data) {
const preguntas = data.map(fila => { const preguntas = data.map((fila) => {
const opciones = []; const opciones = [];
Object.keys(fila).forEach(key => { Object.keys(fila).forEach((key) => {
if (key.startsWith('opcion')) { if (key.startsWith("opcion")) {
opciones.push({ opciones.push({
text: fila[key].trim(), text: fila[key].trim(),
correct: key === 'opcion_c' correct: key === "opcion_c",
}); });
} }
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '', retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '' retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@@ -463,12 +499,12 @@
questions = procesarPreguntas(hojaDatos); questions = procesarPreguntas(hojaDatos);
}); });
$('.object-btn').click(function (e) { $(".object-btn").click(function (e) {
e.preventDefault(); e.preventDefault();
if ($(this).hasClass('disabled')) return; if ($(this).hasClass("disabled")) return;
CourseNav.soundClick(); CourseNav.soundClick();
currentObjectBtn = $(this); currentObjectBtn = $(this);
const objId = $(this).data('obj'); const objId = $(this).data("obj");
if (questions && questions.length > 0) { if (questions && questions.length > 0) {
showRandomQuestion(objId); showRandomQuestion(objId);
} }
@@ -487,10 +523,11 @@
const html = $("#pops-questions").html(); const html = $("#pops-questions").html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
customClass: { customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4', 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' confirmButton:
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: "Cerrar",
showConfirmButton: false, showConfirmButton: false,
@@ -502,7 +539,7 @@
didOpen: () => { didOpen: () => {
displayQuestion(); displayQuestion();
if (currentObjectBtn) { if (currentObjectBtn) {
currentObjectBtn.addClass('completed disabled'); currentObjectBtn.addClass("completed disabled");
} }
}, },
didClose: () => { didClose: () => {
@@ -513,21 +550,21 @@
function displayQuestion() { function displayQuestion() {
const contentSwal = $(Swal.getHtmlContainer()); const contentSwal = $(Swal.getHtmlContainer());
const txtPregunta = contentSwal.find('#txt-question'); const txtPregunta = contentSwal.find("#txt-question");
const txtAnswers = contentSwal.find('#txt-answers'); const txtAnswers = contentSwal.find("#txt-answers");
txtPregunta.html(currentQuestion.pregunta); txtPregunta.html(currentQuestion.pregunta);
// Aleatorizar respuestas // Aleatorizar respuestas
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]); const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
let answersHtml = ''; let answersHtml = "";
shuffledOpciones.forEach((opcion, index) => { shuffledOpciones.forEach((opcion, index) => {
// Determinar el icono según el texto // Determinar el icono según el texto
let icono = ''; let icono = "";
if (opcion.text.toLowerCase().includes('falso')) { if (opcion.text.toLowerCase().includes("falso")) {
icono = '<i class="fa-solid fa-times text-danger me-2"></i>'; icono = '<i class="fa-solid fa-times text-danger me-2"></i>';
} else if (opcion.text.toLowerCase().includes('verdadero')) { } else if (opcion.text.toLowerCase().includes("verdadero")) {
icono = '<i class="fa-solid fa-check text-success me-2"></i>'; icono = '<i class="fa-solid fa-check text-success me-2"></i>';
} }
@@ -537,9 +574,9 @@
txtAnswers.html(answersHtml); txtAnswers.html(answersHtml);
// Event listener para respuestas // Event listener para respuestas
contentSwal.find('.btn-answer').click(function () { contentSwal.find(".btn-answer").click(function () {
isCorrectAnswer = $(this).data('correct'); isCorrectAnswer = $(this).data("correct");
$(this).addClass('selected'); $(this).addClass("selected");
mostrarFeedback(isCorrectAnswer, currentQuestion); mostrarFeedback(isCorrectAnswer, currentQuestion);
@@ -565,13 +602,14 @@
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png', imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
text: retroalimentacion || '', text: retroalimentacion || "",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none', popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite' confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Continuar", confirmButtonText: "Continuar",
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
@@ -579,44 +617,54 @@
didOpen: () => { didOpen: () => {
moveIndicator(); moveIndicator();
if (currentObjectBtn) { if (currentObjectBtn) {
currentObjectBtn.addClass(isCorrect ? 'good' : 'bad'); currentObjectBtn.addClass(isCorrect ? "good" : "bad");
} }
}, },
didClose: () => { didClose: () => {
checkAllCompleted(); checkAllCompleted();
} },
}); });
} }
function moveIndicator() { function moveIndicator() {
const positions = ['left: 90px', 'left: 170px', 'left: 250px', 'left: 330px', 'left: 410px', 'left: 493px', 'left: 573px', 'left: 652px', 'left: 736px', 'left: 816px']; const positions = [
"left: 90px",
"left: 170px",
"left: 250px",
"left: 330px",
"left: 410px",
"left: 493px",
"left: 573px",
"left: 652px",
"left: 736px",
"left: 816px",
];
if (correctQuestions > 0 && correctQuestions <= 10) { if (correctQuestions > 0 && correctQuestions <= 10) {
const position = Math.min(correctQuestions - 1, 9); const position = Math.min(correctQuestions - 1, 9);
$('#indicador').attr('style', positions[position]); $("#indicador").attr("style", positions[position]);
} }
} }
function checkAllCompleted() { function checkAllCompleted() {
const totalButtons = $('.object-btn').length; const totalButtons = $(".object-btn").length;
const completedButtons = $('.object-btn.completed').length; const completedButtons = $(".object-btn.completed").length;
if (totalButtons === completedButtons) { if (totalButtons === completedButtons) {
setTimeout(() => { setTimeout(() => {
const porcentaje = (correctQuestions / questions.length) * 100; const porcentaje = (correctQuestions / questions.length) * 100;
const aprobado = porcentaje >= 60; const aprobado = porcentaje >= 60;
$('.wrap-course-content').addClass('fake2').removeClass('fake1'); $(".wrap-course-content").addClass("fake2").removeClass("fake1");
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
if (aprobado) { if (aprobado) {
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} }
}, 250); }, 250);
} }
img/01.0.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 337 KiB

After

Width:  |  Height:  |  Size: 275 KiB

img/04.0.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 190 KiB

img/04.1.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

img/04.2.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 62 KiB

img/04.3.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 57 KiB