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

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

Browse Source
This commit is contained in:
david.martinez
2026-06-10 23:15:23 -06:00
parent 86391ea412
commit 447954b520
21 changed files with 1095 additions and 1110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/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="row justify-content-center align-items-center h-100">
<div class="col-8">
<div
class="position-relative d-inline-block animate__animated animate__bounceInDown"
>
<h1 class="text-white fw-bold">
<div class="position-relative d-inline-block animate__animated animate__bounceInDown">
<h1 class="text-primary fw-bold">
GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL
<strong class="text-secondary">>>></strong>
<strong class="text-verde-oscuro">>>></strong>
</h1>
<hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3" />
</div>
<p class="text-white animate__animated animate__lightSpeedInLeft">
Nuestra misión: Extender vidas
<span class="text-secondary">>>></span> Expandir posibilidades
<p class="text-primary animate__animated animate__lightSpeedInLeft">
<!-- Nuestra misión: -->
Extender vidas
<span class="text-verde-oscuro">>>></span>
Expandir posibilidades
</p>
<div
class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s"
>
<div class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s">
<div
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>
<script>
$(function () {
"use strict";
$(".wrap-course-content").addClass("fake");
'use strict';
$('.wrap-course-content').addClass('fake');
$(".btn-comenzar").click(function (e) {
$('.btn-comenzar').click(function (e) {
e.preventDefault();
$(this).removeClass("animate__animated animate__pulse animate__infinite");
$(this).removeClass('animate__animated animate__pulse animate__infinite');
CourseNav.soundClick();
CourseNav.setSlideVisited();
CourseNav.nextSlide();
contenido/03.html
+27 -31
View File
@@ -91,29 +91,30 @@
</div>
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
>
<p class="mb-0">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>
Cada año,
<strong class="text-lila-claro"
>miles de personas desarrollan enfermedad crónica de los riñones. </strong
>Por eso, hemos desarrollado esta guía para que
<strong class="text-lila-claro">usted y su familia</strong> tengan orientación
y acompañamiento durante este proceso de aprendizaje y adaptación.
<strong class="text-lila-claro">
miles de personas desarrollan enfermedad crónica de los riñones.
</strong>
Por eso, hemos desarrollado esta guía para que
<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>
</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"
>
<p class="mb-0 text-verde-oscuro fw-bold">
Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica
de los riñones.
Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica de los riñones.
</p>
</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
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">
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente
para ayudar al paciente a llegar a la unidad de diálisis.
<strong>Instrucciones:</strong>
Lea cada pregunta y conteste correctamente para ayudar al paciente a llegar a la unidad de
diálisis.
</p>
</div>
</div>
@@ -192,10 +194,7 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</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
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()"
@@ -232,7 +231,7 @@
svg.find('[id^="ficha"]').hide().addClass("ficha-move");
svg.find("#ficha0").show();
},
"xml"
"xml",
);
}
@@ -277,7 +276,7 @@
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
};
@@ -295,14 +294,11 @@
function displayQuestion() {
currentQuestion = questions[currentQuestionIndex];
$(".txt-question").text(currentQuestion.pregunta);
$(".txt-question").html(currentQuestion.pregunta);
$(".content-answers").empty();
// Shuffle answers for current question
const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
shuffledAnswers.forEach((opcion, index) => {
currentQuestion.opciones.forEach((opcion, index) => {
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="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++;
$("#svg-container").find('[id^="ficha"]').hide();
$("#svg-container").find(`#ficha${currentFichaIndex}`).show();
currentQuestionIndex++;
}
currentQuestionIndex++;
if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) {
displayQuestion();
} else {
if (isCorrect && (currentQuestionIndex >= questions.length || currentQuestionIndex >= maxQuestions)) {
setTimeout(() => {
isCompleted();
}, 500);
} else {
displayQuestion();
}
},
});
contenido/04.html
+68 -53
View File
@@ -38,38 +38,50 @@
background-color: #84a816;
}
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">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 class="col-12">
<div class="row justify-content-center align-items-center">
<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 class="col-6">
<div class="card bg-verde-claro border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>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>
<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
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">
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>
<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
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -82,15 +94,15 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11' id="col-sortable">
<div class='row justify-content-center'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11" id="col-sortable">
<div class="row justify-content-center">
<div class="col-10 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">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 class="col-10 mb-3">
@@ -98,8 +110,11 @@
<div class="row justify-content-center">
<div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para colocarlos en el orden correcto.</p>
<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>
</div>
</div>
</div>
@@ -108,13 +123,13 @@
<div class="col-12 col-actividad">
<div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
<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 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 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>
@@ -123,18 +138,18 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">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 class="col-12 text-center mb-3">
@@ -148,16 +163,16 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
});
function shuffleArray(array) {
@@ -173,43 +188,43 @@
}
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
const $sortables = $('.img-sotable');
const $sortables = $(".img-sotable");
const shuffled = shuffleArray($sortables.toArray());
$('.custom-grid').empty().append(shuffled);
$(".custom-grid").empty().append(shuffled);
// Initialize sortable
$('.custom-grid').sortable({
items: '.img-sotable',
cursor: 'grabbing',
$(".custom-grid").sortable({
items: ".img-sotable",
cursor: "grabbing",
containment: "#coursenav-main-content",
tolerance: 'pointer',
helper: 'original',
tolerance: "pointer",
helper: "original",
scroll: false,
start: function (event, ui) {
ui.item.css('z-index', 1000);
ui.item.css("z-index", 1000);
},
drag: function (event, ui) {
ui.position.left = ui.position.left;
ui.position.top = ui.position.top;
},
stop: function (event, ui) {
$('body').css('overflow', 'auto');
$("body").css("overflow", "auto");
},
update: function () {
checkOrder();
}
},
});
function checkOrder() {
const $items = $('.custom-grid .img-sotable');
const $items = $(".custom-grid .img-sotable");
let isCorrect = true;
$items.each(function (index) {
if (parseInt($(this).data('order')) !== index) {
if (parseInt($(this).data("order")) !== index) {
isCorrect = false;
return false;
}
@@ -217,7 +232,7 @@
if (isCorrect) {
CourseNav.audioController.stopAllSoundsAndPlay(good);
$('.img-sotable').addClass('disabled');
$(".img-sotable").addClass("disabled");
setTimeout(() => {
isCompleted();
}, 700);
@@ -225,9 +240,9 @@
}
function isCompleted() {
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
$("#desarrollo").hide();
$("#cierre").show();
CourseNav.setSlideVisited();
}
});
contenido/05.html
+22 -44
View File
@@ -99,17 +99,17 @@
<div class="row justify-content-center align-items-center">
<div class="col-6">
<div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
<div
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
>
<p class="mb-0">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>
La DP le ofrece una
<strong
>mejor calidad de vida, requiere menos traslados a la unidad
hospitalaria</strong
><strong>,</strong> <strong>reduce el contagio </strong>de enfermedades
infectocontagiosas y le permite <strong>mayor libertad </strong>al ser una
terapia portable.
<strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria</strong
><strong>,</strong> <strong>reduce el contagio </strong>de enfermedades infectocontagiosas y le
permite <strong>mayor libertad </strong>al ser una terapia portable.
</p>
<p class="mb-0">
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>
</div>
<div
@@ -118,13 +118,9 @@
<p class="mb-1">
<strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong>
</p>
<p class="mb-0">
Realice la siguiente actividad para descubrir más sobre ellas.
</p>
<p class="mb-0">Realice la siguiente actividad para descubrir más sobre ellas.</p>
</div>
<div
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
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">
<img src="img/book1.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos
hacia el lugar que les corresponde en las imágenes.
<strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos hacia el lugar que les
corresponde en las imágenes.
</p>
</div>
</div>
<div class="col-12">
<div
id="drag-container"
class="d-flex flex-wrap justify-content-center align-items-center gap-4"
>
<div 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="row justify-content-center align-items-center h-100">
<div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
@@ -220,9 +213,7 @@
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<div 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>
</div>
<div
@@ -301,9 +292,7 @@
</div>
</div>
<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">
<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" />
<div
@@ -322,9 +311,7 @@
</div>
<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" />
<p class="mb-0 text-center h-txt">
Cubrebocas, lavamanos, jabón y toalla
</p>
<p class="mb-0 text-center h-txt">Cubrebocas, lavamanos, jabón y toalla</p>
</div>
<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" />
@@ -349,9 +336,7 @@
<div class="col-5">
<div class="row justify-content-center">
<div class="col-12 mb-3">
<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">
<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" />
<div
@@ -387,9 +372,7 @@
</div>
</div>
<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">
<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" />
<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">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</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
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()"
@@ -633,9 +613,7 @@
// Limpiar drops incorrectos de la parte 0
$("#part0 .drop-option").each(function () {
if ($(this).siblings(".num-card").hasClass("bg-danger")) {
$(this)
.html("")
.removeClass("text-center d-flex align-items-center justify-content-center");
$(this).html("").removeClass("text-center d-flex align-items-center justify-content-center");
$(this).siblings(".num-card").removeClass("bg-danger").addClass("bg-verde-pino");
}
});
contenido/06.html
+106 -91
View File
@@ -54,35 +54,43 @@
background-position: center;
}
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">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 class="col-12">
<div class="row justify-content-center align-items-center">
<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 class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p class="mb-0">El sitio de salida (SS) es <strong class="text-lila-claro">la piel que rodea su catéter</strong> y requiere de cuidados continuos para
mantenerse en óptimas condiciones, permitiendo que su terapia se desarrolle de forma segura.</p>
<p class="mb-0">
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
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>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -95,15 +103,15 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-10 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">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 class="col-10 mb-3">
@@ -111,8 +119,11 @@
<div class="row justify-content-center">
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/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>
<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>
</div>
</div>
</div>
@@ -133,27 +144,28 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">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 class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</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
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>
</div>
</div>
@@ -165,7 +177,7 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
let questions;
let currentQuestionIndex = 0;
@@ -174,30 +186,30 @@
let maxQuestions = 5;
let currentFichaIndex = 0;
let questionResults = [];
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const imgPerso = ['img/06.1.png', 'img/06.2.png'];
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
const imgPerso = ["img/06.1.png", "img/06.2.png"];
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$('#inicio').hide();
$('#desarrollo').show();
$(".wrap-course-content").addClass("fake1").removeClass("fake");
$("#inicio").hide();
$("#desarrollo").show();
});
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var result = {};
workbook.SheetNames.forEach(sheetName => {
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
@@ -215,22 +227,22 @@
}
function procesarPreguntas(data) {
return data.map(fila => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
opcion: fila.opcion ? String(fila.opcion).trim() : '',
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : ''
return data.map((fila) => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : "",
opcion: fila.opcion ? String(fila.opcion).trim() : "",
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : "",
}));
}
function createIndicators(total) {
const container = $('.indicadores-avance');
const container = $(".indicadores-avance");
container.empty();
for (let i = 0; i < total; i++) {
const circle = $('<div class="indicator-circle"></div>');
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);
}
}
@@ -251,92 +263,95 @@
<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">
<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>
<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="d-flex flex-column justify-content-center align-items-center gap-0">
<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>
`;
$('#puzzle-versus').removeClass('animate__animated animate__zoomOut').html(structure);
$("#puzzle-versus").removeClass("animate__animated animate__zoomOut").html(structure);
updateIndicators();
initializeAnswers();
}
function updateIndicators() {
$('.indicator-circle').each(function(index) {
$(".indicator-circle").each(function (index) {
if (index < currentQuestionIndex && questionResults[index] !== undefined) {
const isCorrect = questionResults[index];
$(this).css({
'background-color': 'transparent',
'background-image': `url(img/${isCorrect ? 'checkG' : 'checkB'}.png)`
"background-color": "transparent",
"background-image": `url(img/${isCorrect ? "checkG" : "checkB"}.png)`,
});
} else if (index === currentQuestionIndex) {
$(this).css({
'background-color': '#2196F3',
'background-image': 'none'
"background-color": "#2196F3",
"background-image": "none",
});
} else {
$(this).css({
'background-color': '#E0E0E0',
'background-image': 'none'
"background-color": "#E0E0E0",
"background-image": "none",
});
}
});
}
function initializeAnswers() {
$('.btn-respuesta').off('click').on('click', function() {
const isCorrect = $(this).data('correct');
$(".btn-respuesta")
.off("click")
.on("click", function () {
const isCorrect = $(this).data("correct");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) {
correctQuestions++;
}
questionResults[currentQuestionIndex] = isCorrect;
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
showConfirmButton: true,
customClass: {
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'
},
confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
$('#puzzle-versus').addClass('animate__animated animate__zoomOut');
setTimeout(() => {
currentQuestionIndex++;
if (currentQuestionIndex < maxQuestions && currentQuestionIndex < questions.length) {
createVersusStructure();
} else {
finishActivity();
}
}, 500);
if (isCorrect) {
correctQuestions++;
}
questionResults[currentQuestionIndex] = isCorrect;
Swal.fire({
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
showConfirmButton: true,
customClass: {
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",
},
confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
$("#puzzle-versus").addClass("animate__animated animate__zoomOut");
setTimeout(() => {
currentQuestionIndex++;
if (currentQuestionIndex < maxQuestions && currentQuestionIndex < questions.length) {
createVersusStructure();
} else {
finishActivity();
}
}, 500);
},
});
});
});
}
function finishActivity() {
const totalQuestions = Math.min(maxQuestions, questions.length);
const percentage = (correctQuestions / totalQuestions) * 100;
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
$("#desarrollo").hide();
$("#cierre").show();
if (percentage < 80) {
$('.col-reintentar').show();
$(".col-reintentar").show();
}
CourseNav.setSlideVisited();
contenido/07.html
+86 -77
View File
@@ -48,30 +48,36 @@
pointer-events: none;
}
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
</div>
</div>
<div class="col-12 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/07.0.png" class="img-fluid">
<img src="img/07.0.png" class="img-fluid" />
</div>
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
<p class="my-0">Debe mantener su línea de transferencia y catéter <b class="text-lila-claro">alejados de
gérmenes</b> que ponen en riesgo
su salud y
vida. </p>
<p class="my-0">
Se recomienda mantener la línea de transferencia y el catéter en condiciones de higiene adecuadas. Es
importante utilizar técnica aséptica durante la manipulación del acceso peritoneal, ya sea en los
recambios, la revisión del sitio de salida o en procedimientos realizados por el personal de salud.<sup
class="fw-bold"
>6</sup
>
</p>
<p>Por eso, es necesario que utilice una <b class="text-lila-claro">técnica aséptica para la manipulación de
su acceso peritoneal</b>, ya
sea para realizar un recambio, explorar su orificio de salida o en procedimientos realizados por el
personal de salud.</p>
<p>
Por eso, es necesario que utilice una
<b class="text-lila-claro">técnica aséptica para la manipulación de su acceso peritoneal</b>, ya sea para
realizar un recambio, explorar su orificio de salida o en procedimientos realizados por el personal de
salud.
</p>
</div>
<div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
<div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold">
@@ -80,7 +86,8 @@
</div>
<div class="col-12 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -89,15 +96,15 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-10 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-10 mb-3">
@@ -105,9 +112,11 @@
<div class="row justify-content-center">
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book3.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong>Dé clic en las tarjetas para encontrar los pares y
descubrir los pasos que debe tener en cuenta para realizar su terapia de forma segura en casa.</p>
<img src="img/book3.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong>Dé clic en las tarjetas para encontrar los pares y descubrir los
pasos que debe tener en cuenta para realizar su terapia de forma segura en casa.
</p>
</div>
</div>
</div>
@@ -119,55 +128,55 @@
<!--Carta 1 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.2.png" class="img-fluid">
<img src="img/07.2.png" class="img-fluid" />
</div>
</div>
<!--Carta 2 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.3.png" class="img-fluid">
<img src="img/07.3.png" class="img-fluid" />
</div>
</div>
<!--Carta 3 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.4.png" class="img-fluid">
<img src="img/07.4.png" class="img-fluid" />
</div>
</div>
<!--Carta 4 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.5.png" class="img-fluid">
<img src="img/07.5.png" class="img-fluid" />
</div>
</div>
<!--Carta 5 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.6.png" class="img-fluid">
<img src="img/07.6.png" class="img-fluid" />
</div>
</div>
<!--Carta 6 Up-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.7.png" class="img-fluid">
<img src="img/07.7.png" class="img-fluid" />
</div>
</div>
</div>
@@ -175,55 +184,55 @@
<!--Carta 1 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.2c.png" class="img-fluid">
<img src="img/07.2c.png" class="img-fluid" />
</div>
</div>
<!--Carta 2 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.3c.png" class="img-fluid">
<img src="img/07.3c.png" class="img-fluid" />
</div>
</div>
<!--Carta 3 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.4c.png" class="img-fluid">
<img src="img/07.4c.png" class="img-fluid" />
</div>
</div>
<!--Carta 4 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.5c.png" class="img-fluid">
<img src="img/07.5c.png" class="img-fluid" />
</div>
</div>
<!--Carta 5 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.6c.png" class="img-fluid">
<img src="img/07.6c.png" class="img-fluid" />
</div>
</div>
<!--Carta 6 Down-->
<div class="card-container">
<div class="front">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid" />
</div>
<div class="back">
<img src="img/07.7c.png" class="img-fluid">
<img src="img/07.7c.png" class="img-fluid" />
</div>
</div>
</div>
@@ -234,18 +243,18 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
</div>
</div>
<div class="col-12 text-center mb-3">
@@ -259,16 +268,16 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
const flip_sound = CourseNav.createSound('audio/flip.mp3');
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
$(".wrap-course-content").addClass("fake");
const flip_sound = CourseNav.createSound("audio/flip.mp3");
const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
});
// Función para asignar pares a cada tarjeta
@@ -276,7 +285,7 @@
const optionsContainer = document.getElementById(fatherId);
const optionsArray = Array.from(optionsContainer.children);
optionsArray.forEach((option, index) => {
option.setAttribute('data-par', index);
option.setAttribute("data-par", index);
});
}
@@ -285,7 +294,7 @@
const optionsContainer = document.getElementById(fatherId);
const optionsArray = Array.from(optionsContainer.children);
const shuffledOptions = optionsArray.sort(() => Math.random() - 0.5);
shuffledOptions.forEach(option => optionsContainer.appendChild(option));
shuffledOptions.forEach((option) => optionsContainer.appendChild(option));
}
// Inicializar el plugin flip y configurar la lógica del memorama con la restricción de fila
@@ -294,7 +303,7 @@
let lastFlippedRow = ""; // Para rastrear la última fila girada
$(".card-container").flip({
trigger: 'manual' // Control manual del volteo
trigger: "manual", // Control manual del volteo
});
$(".card-container").on("click", function () {
@@ -324,9 +333,9 @@
gsap.to(firstCard, {
duration: 1,
delay: 1,
boxShadow: "0px 0px 0px 0px #fff"
boxShadow: "0px 0px 0px 0px #fff",
});
}
},
});
// Agregar el efecto de resplandor
gsap.to(secondCard, {
@@ -337,9 +346,9 @@
gsap.to(secondCard, {
duration: 1,
delay: 1,
boxShadow: "0px 0px 0px 0px #fff"
boxShadow: "0px 0px 0px 0px #fff",
});
}
},
});
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
flippedCards = [];
@@ -370,16 +379,16 @@
}
function isCompleted() {
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
$("#desarrollo").hide();
$("#cierre").show();
CourseNav.setSlideVisited();
}
assignPairs('row-answer');
assignPairs('row-questions');
randomizeOptions('row-answer');
randomizeOptions('row-questions');
assignPairs("row-answer");
assignPairs("row-questions");
randomizeOptions("row-answer");
randomizeOptions("row-questions");
initializeFlip();
});
</script>
</script>
contenido/08.html
+10 -23
View File
@@ -64,13 +64,11 @@
</div>
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
>
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>
Para un recambio seguro, bajo ningún motivo debe tocar las
<b class="text-lila-claro">zonas estériles (libres de gérmenes)</b> en su
sistema de DP.
Para el recambio, se recomienda evitar el contacto con las zonas estériles (libres de gérmenes)
del sistema de diálisis peritoneal, con el fin de mantener condiciones de higiene durante el
procedimiento.<sup class="fw-bold">6</sup>
</p>
</div>
<div
@@ -80,9 +78,7 @@
Realice la siguiente actividad para identificar cuáles son estas zonas.
</p>
</div>
<div
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
@@ -119,8 +115,8 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema
de DP y arrastre sus nombres hacia la fotografía que les corresponda.
<strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema de DP y arrastre sus
nombres hacia la fotografía que les corresponda.
</p>
</div>
</div>
@@ -130,16 +126,10 @@
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-3">
<div
id="content-drags"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
<div id="content-drags" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
</div>
<div class="col-12">
<div
id="content-drops"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
<div id="content-drops" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
</div>
</div>
</div>
@@ -168,10 +158,7 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</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
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()"
contenido/11.html
+26 -41
View File
@@ -89,17 +89,18 @@
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
<p>
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
acuda a todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y
registros del tratamiento que le solicite el personal de salud.
<strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que acuda a todas sus
consultas de seguimiento y lleve todos sus estudios de laboratorio y registros del tratamiento que le
solicite el personal de salud.
</p>
<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>
</div>
<div
class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3"
>
<div
class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold"
>
<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">
Un aspecto importante a tomar en cuenta es el consumo y balance de líquidos.
</div>
</div>
@@ -136,9 +137,9 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del
control de líquidos y conteste correctamente. Por cada acierto obtendrá una
pieza del rompecabezas, el reto es descubrir la imagen oculta.
<strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del control de líquidos y
conteste correctamente. Por cada acierto obtendrá una pieza del rompecabezas, el reto es descubrir
la imagen oculta.
</p>
</div>
</div>
@@ -156,9 +157,7 @@
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow"
>
<div class="row justify-content-center">
<div
class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"
></div>
<div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
<div class="col-12 content-answers"></div>
</div>
</div>
@@ -190,10 +189,7 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</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
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()"
@@ -231,7 +227,7 @@
// Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
svg.find('[id^="pz"]').hide().addClass("piece-puzzle");
},
"xml"
"xml",
);
}
@@ -275,7 +271,7 @@
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
};
@@ -299,24 +295,13 @@
return;
}
$("#card-content-quiz-rompecabezas").hide();
currentQuestion = questions[currentQuestionIndex];
$(".txt-question").text(currentQuestion.pregunta);
$(".txt-question").html(currentQuestion.pregunta);
const answersContainer = $(".content-answers");
answersContainer.empty();
setTimeout(() => {
$("#card-content-quiz-rompecabezas")
.removeClass("animate__zoomIn")
.addClass("animate__zoomIn")
.show();
}, 100);
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
shuffledOpciones.forEach((opcion, index) => {
currentQuestion.opciones.forEach((opcion, index) => {
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="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");
if (isCorrect) {
correctQuestions++;
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
showFeedback(isCorrect);
});
@@ -354,9 +335,14 @@
width: "35em",
didClose: () => {
if (isCorrect) {
correctQuestions++;
showPuzzlePiece();
currentQuestionIndex++;
$("#card-content-quiz-rompecabezas").hide();
setTimeout(() => {
$("#card-content-quiz-rompecabezas").removeClass("animate__zoomIn").addClass("animate__zoomIn").show();
}, 100);
}
currentQuestionIndex++;
displayQuestion();
},
});
@@ -386,8 +372,7 @@
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 22"];
const preguntasProcesadas = shuffleArray(procesarPreguntas(hojaDatos));
questions =
maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
questions = maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
loadSVG();
setTimeout(() => {
displayQuestion();
contenido/12.html
+34 -40
View File
@@ -133,7 +133,7 @@
</div>
<div class="col-5 text-center mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
<p>
<!-- <p>
<b class="text-lila-claro">La alimentación</b> balanceada es muy importante. Como
parte de su tratamiento <b class="text-lila-claro">se debe personalizar</b> con base
en sus necesidades.
@@ -142,6 +142,14 @@
También, es necesario
<strong class="text-lila-claro">mantener un estilo de vida activo </strong>para el
buen funcionamiento de músculos, huesos y corazón.
</p> -->
<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>
<div class="w-100 position-relative text-center">
<div
@@ -179,22 +187,15 @@
<div class="col-8">
<div
class="card bg-verde-claro border-0 bx-shadow py-2 px-3"
style="
border-radius: 15px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
"
style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0"
>
<div class="row justify-content-start">
<div class="col-12">
<div
class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4"
>
<div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
<img src="img/book1.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Dé clic en la ruleta y conteste
correctamente la pregunta acerca de su alimentación o actividad física
para ganar los puntos.
<strong>Instrucciones:</strong> Dé clic en la ruleta y conteste correctamente la pregunta
acerca de su alimentación o actividad física para ganar los puntos.
</p>
</div>
</div>
@@ -204,9 +205,7 @@
</div>
</div>
<div class="col-11">
<div
class="row justify-content-center align-items-center animate__animated animate__slideInRight"
>
<div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
<div class="col-6">
<div class="card custom-card bg-secondary border-0 shadow">
<div class="card-body">
@@ -305,10 +304,7 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</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
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()"
@@ -411,10 +407,8 @@
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta
? fila.retroalimentacion_correcta.trim()
: "",
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
@@ -438,11 +432,10 @@
const indiceAleatorio = Math.floor(Math.random() * questions.length);
const preguntaAleatoria = questions[indiceAleatorio];
questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
questions.splice(indiceAleatorio, 1);
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}">
<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>
@@ -468,37 +461,38 @@
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$(".btn-answer").click(function () {
function handleAnswer() {
const isCorrect = $(this).data("correct") === true;
const puntos = $(this).data("puntos");
$(".btn-answer").off("click").css("pointer-events", "none");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) {
$(this).addClass("bg-success text-white");
totalPuntos += puntos;
actualizarPuntos(true);
setTimeout(() => {
Swal.close();
mostrarFeedback(preguntaAleatoria);
}, 500);
} else {
actualizarPuntos(false);
$(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
setTimeout(() => {
$(this).removeClass("bg-danger text-white");
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => {
Swal.close();
mostrarFeedback(isCorrect, preguntaAleatoria);
}, 500);
});
}
$(".btn-answer").on("click", handleAnswer);
},
});
}
function mostrarFeedback(isCorrect, pregunta) {
function mostrarFeedback(pregunta) {
Swal.fire({
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
imageUrl: "img/good.png",
showConfirmButton: true,
customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
contenido/13.html
+39 -60
View File
@@ -94,22 +94,23 @@
<div class="col-5 text-center mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 px-0 pt-2 pb-0 bx-shadow">
<div class="position-relative w-100 px-3">
<p>
Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que,
en parte, son controlados mediante la DP, sin embargo, es necesario que se apoye
de medicamentos que solo su médico puede y debe prescribir.
<!-- <p>
Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son
controlados mediante la DP, sin embargo, es necesario que se apoye de medicamentos que solo su médico
puede y debe prescribir.
</p> -->
<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>
</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"
>
<p class="mb-0 fw-bold text-center">
Siga las recomendaciones del personal de salud.
</p>
<p class="mb-0 fw-bold text-center">Siga las recomendaciones del personal de salud.</p>
</div>
<div
class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s">
<div
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">
<img src="img/book3.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la
pregunta acerca del manejo de medicamentos que apoyan la DP. Por cada acierto
sumará puntos.
<strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la pregunta acerca del
manejo de medicamentos que apoyan la DP. Por cada acierto sumará puntos.
</p>
</div>
</div>
@@ -166,34 +166,19 @@
</div>
<div class="col-12">
<div class="grip-jeopardy">
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
<img src="img/13.0.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="200"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
<img src="img/13.2.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
<img src="img/13.1.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
<img src="img/13.0.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
<img src="img/13.1.png" class="img-fluid" />
</div>
<!-- <div
@@ -240,10 +225,7 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</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
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()"
@@ -309,10 +291,8 @@
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta
? fila.retroalimentacion_correcta.trim()
: "",
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
@@ -333,10 +313,9 @@
if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
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}">
<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>
@@ -362,32 +341,36 @@
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$(".btn-answer").click(function () {
function handleAnswer() {
const isCorrect = $(this).data("correct") === true;
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) {
correctQuestions++;
const puntosActuales = parseInt($("#puntos").text()) + puntos;
$("#puntos").text(puntosActuales.toString().padStart(3, "0"));
setTimeout(() => {
Swal.close();
mostrarFeedback(pregunta, questionIndex);
}, 200);
} else {
setTimeout(() => {
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => {
Swal.close();
mostrarFeedback(isCorrect, pregunta, questionIndex);
}, 200);
});
}
$(".btn-answer").on("click", handleAnswer);
},
});
}
function mostrarFeedback(isCorrect, pregunta, questionIndex) {
function mostrarFeedback(pregunta, questionIndex) {
Swal.fire({
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
imageUrl: "img/good.png",
showConfirmButton: true,
customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
@@ -431,11 +414,7 @@
$(".btn-question-pop").click(function () {
const index = $(this).index();
const puntosEnJuego = parseInt($(this).data("puntos"));
if (
!$(this).hasClass("completed") &&
!$(this).hasClass("disabled") &&
index < questions.length
) {
if (!$(this).hasClass("completed") && !$(this).hasClass("disabled") && index < questions.length) {
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
CourseNav.soundClick();
mostrarPregunta(index, puntosEnJuego);
contenido/14.html
+28 -51
View File
@@ -323,7 +323,7 @@
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta
? fila.retroalimentacion_correcta.trim()
: "",
@@ -347,10 +347,9 @@
if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
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}">
<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>
@@ -375,34 +374,34 @@
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$(".btn-answer").click(function () {
function handleAnswer() {
const isCorrect = $(this).data("correct") === true;
$(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) {
correctQuestions++;
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => {
Swal.close();
mostrarFeedback(isCorrect, pregunta, questionIndex);
}, 250);
});
if (isCorrect) {
correctQuestions++;
setTimeout(() => {
Swal.close();
mostrarFeedback(pregunta, questionIndex);
}, 250);
} else {
setTimeout(() => {
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
}
$(".btn-answer").on("click", handleAnswer);
},
});
}
function mostrarFeedback(isCorrect, pregunta, questionIndex) {
const retroalimentacion = isCorrect
? pregunta.retroalimentacion_correcta
: pregunta.retroalimentacion_incorrecta;
function mostrarFeedback(pregunta, questionIndex) {
Swal.fire({
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
text: retroalimentacion || "",
imageUrl: "img/good.png",
text: pregunta.retroalimentacion_correcta || "",
showConfirmButton: true,
customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
@@ -415,23 +414,13 @@
didClose: () => {
const currentPaquete = $(`#paquete${questionIndex}`);
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");
const camion = $("#camion-transporte");
const paqueteWidth = currentPaquete.outerWidth() + 15;
const currentX = camion.css("transform") === "none" ? 0 : parseFloat(camion.css("transform").split(",")[4]) || 0;
camion.css("transform", `translateX(${currentX + paqueteWidth}px)`);
if (isCorrect) {
// Mover camión
const camion = $("#camion-transporte");
const paqueteWidth = currentPaquete.outerWidth() + 15; // incluye gap
const currentTransform = camion.css("transform");
const currentX =
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) {
$(`#paquete${questionIndex + 1}`).removeClass("disabled");
}
@@ -439,23 +428,11 @@
currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) {
// Si respondió todas correctamente, mover al destino final
if (correctQuestions === questions.length) {
setTimeout(() => {
const camion = $("#camion-transporte");
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)`);
console.log("Moviendo camión al fin:", newX);
}, 1000);
}
const delay = correctQuestions === questions.length ? 3000 : 1500;
setTimeout(() => {
finalizarJuego();
}, delay);
const newX = (parseFloat(camion.css("transform").split(",")[4]) || 0) + currentPaquete.outerWidth() + 25;
camion.css("transform", `translateX(${newX}px)`);
}, 1000);
setTimeout(() => finalizarJuego(), 3000);
}
},
});
contenido/15.html
+19 -21
View File
@@ -316,7 +316,7 @@
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
};
@@ -336,10 +336,8 @@
if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
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}">
<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>
@@ -369,35 +367,35 @@
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$('.btn-answer').click(function() {
function handleAnswer() {
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) {
correctQuestions++;
$(`.med_style:eq(${questionIndex})`).addClass('bien');
setTimeout(() => {
Swal.close();
mostrarFeedback(pregunta, questionIndex);
}, 250);
} else {
$(`.med_style:eq(${questionIndex})`).addClass('mal');
setTimeout(() => {
$('.btn-answer').css('pointer-events', '').on('click', handleAnswer);
}, 600);
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => {
Swal.close();
mostrarFeedback(isCorrect, pregunta, questionIndex);
}, 250);
});
}
$('.btn-answer').on('click', handleAnswer);
}
});
}
function mostrarFeedback(isCorrect, pregunta, questionIndex) {
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
function mostrarFeedback(pregunta, questionIndex) {
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
text: retroalimentacion || '',
imageUrl: 'img/good.png',
text: pregunta.retroalimentacion_correcta || '',
showConfirmButton: true,
customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
@@ -408,7 +406,7 @@
width: "35em",
didClose: () => {
const currentBtn = $(`.object-btn[data-obj="${questionIndex}"]`);
currentBtn.addClass(isCorrect ? 'completed good' : 'completed bad');
currentBtn.addClass('completed good');
currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) {
contenido/16.html
+611 -563
View File
File diff suppressed because it is too large Load Diff