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

update

Browse Source
This commit is contained in:
DavidMtz 2026-02-11 13:38:15 -06:00
parent 3eb2f49012
commit fd779d0724
8 changed files with 1012 additions and 717 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
contenido/01.html
View File

@ -6,25 +6,36 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
<div class='page-sco py-2 py-md-0 h-100'> <div 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-12 px-0'> <div class="col-12 px-0">
<div class='row'> <div class="row">
<div class="col-11 px-0"> <div class="col-11 px-0">
<div class="d-inline-block position-relative"> <div class="d-inline-block position-relative">
<img src="img/01.0.webp" class="img-fluid"> <img src="img/01.0.webp" class="img-fluid" />
<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 class="position-relative d-inline-block animate__animated animate__bounceInDown"> <div
<h1 class="text-white fw-bold">GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL <strong class="position-relative d-inline-block animate__animated animate__bounceInDown"
class="text-secondary">>>></strong></h1> >
<hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3"> <h1 class="text-white fw-bold">
GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL
<strong class="text-secondary">>>></strong>
</h1>
<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">Nuestra misión: Salvar y sostener vidas</p> <p class="text-white animate__animated animate__lightSpeedInLeft">
<div class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s"> Nuestra misión: Extender vida <span class="text-secondary">>>></span> Expandir
<div class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"> posibilidades
</p>
<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"
>
<h5 class="text-verde-oscuro fw-bold mb-0">Comenzar</h5> <h5 class="text-verde-oscuro fw-bold mb-0">Comenzar</h5>
</div> </div>
</div> </div>
@ -41,11 +52,11 @@
<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();

174
contenido/03.html
View File

@ -43,7 +43,7 @@
.btn-answer { .btn-answer {
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
} }
.letter { .letter {
@ -73,34 +73,50 @@
cursor: pointer; cursor: pointer;
} }
</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">Vivir con enfermedad renal</h2> <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</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/03.0.png" class="img-fluid"> <img src="img/03.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
<p class="mb-0">Cada año, <strong class="text-lila-claro">miles de personas desarrollan enfermedad crónica de los riñones. </strong>Como líder internacional class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
en el desarrollo de soluciones terapéuticas, Vantive ha desarrollado esta guía para que usted y su familia tengan >
<strong class="text-lila-claro">orientación y acompañamiento </strong>durante este proceso de aprendizaje y adaptación.</p> <p class="mb-0">
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.
</p>
</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"> <div
<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.</p> 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.
</p>
</div> </div>
<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="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"
>
<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>
@ -113,15 +129,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-12'> <div class="col-12">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-11 text-center"> <div class="col-11 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2> <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</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 px-0 mb-3"> <div class="col-12 px-0 mb-3">
@ -129,8 +145,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/book0.png" class="img-fluid"> <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.</p> <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.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -156,25 +175,31 @@
</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">Vivir con enfermedad renal</h2> <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</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
<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()"> 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()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5> <h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div> </div>
</div> </div>
@ -186,47 +211,51 @@
<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;
let currentQuestion; let currentQuestion;
let correctQuestions = 0; let correctQuestions = 0;
let maxQuestions = 5; let maxQuestions = 5;
let currentFichaIndex = 0; let currentFichaIndex = 0;
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");
function loadSVG() { function loadSVG() {
$.get('img/laberinto.svg', function (data) { $.get(
var svg = $(data).find('svg'); "img/laberinto.svg",
$('#svg-container').html(svg); function (data) {
var svg = $(data).find("svg");
$("#svg-container").html(svg);
// Remove width and height attributes to make SVG responsive // Remove width and height attributes to make SVG responsive
svg.removeAttr('width').removeAttr('height'); svg.removeAttr("width").removeAttr("height");
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"
);
} }
$('.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);
}); });
@ -236,13 +265,13 @@
} }
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",
}); });
} }
}); });
@ -250,7 +279,7 @@
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: 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(),
}; };
}); });
return preguntas; return preguntas;
@ -266,9 +295,9 @@
function displayQuestion() { function displayQuestion() {
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
$('.txt-question').text(currentQuestion.pregunta); $(".txt-question").text(currentQuestion.pregunta);
$('.content-answers').empty(); $(".content-answers").empty();
// Shuffle answers for current question // Shuffle answers for current question
const shuffledAnswers = shuffleArray([...currentQuestion.opciones]); const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
@ -280,25 +309,28 @@
<div class="txt-answer ps-3">${opcion.text}</div> <div class="txt-answer ps-3">${opcion.text}</div>
</div> </div>
`; `;
$('.content-answers').append(answerHtml); $(".content-answers").append(answerHtml);
}); });
initializeAnswers(); initializeAnswers();
} }
function initializeAnswers() { function initializeAnswers() {
$('.btn-answer').off('click').on('click', function() { $(".btn-answer")
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);
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)",
@ -307,8 +339,8 @@
if (isCorrect) { if (isCorrect) {
correctQuestions++; correctQuestions++;
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++;
@ -319,21 +351,21 @@
isCompleted(); isCompleted();
}, 500); }, 500);
} }
} },
}); });
}); });
} }
function isCompleted() { function isCompleted() {
const percentage = (correctQuestions / maxQuestions) * 100; const percentage = (correctQuestions / maxQuestions) * 100;
$('.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();
if (percentage < 80) { if (percentage < 80) {
$('.col-reintentar').show(); $(".col-reintentar").show();
} }
} }

377
contenido/05.html
View File

@ -30,8 +30,8 @@
border-radius: 15px; border-radius: 15px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
background: #B68FB2; background: #b68fb2;
background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%); background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
height: 50px; height: 50px;
} }
@ -46,7 +46,7 @@
} }
.num-card { .num-card {
border-radius: .5rem; border-radius: 0.5rem;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -81,15 +81,15 @@
cursor: pointer; cursor: pointer;
} }
</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 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@ -99,26 +99,42 @@
<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 class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"> <div
<p class="mb-0">La DP le ofrece una <strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria y reduce el class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
contagio</strong> de enfermedades infectocontagiosas. Le permite <strong>mayor libertad </strong>al ser una terapia >
portable, a diferencia de la hemodiálisis.</p> <p class="mb-0">
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.
</p>
</div> </div>
<div <div
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"> class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
<p class="mb-1"><strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong></p> >
<p class="mb-0">Realice la siguiente actividad para descubrir más sobre ellas.</p> <p class="mb-1">
<strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong>
</p>
<p class="mb-0">
Realice la siguiente actividad para descubrir más sobre ellas.
</p>
</div> </div>
<div 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="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"
>
<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 animate__animated animate__zoomIn"> <div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/05.0.png" class="img-fluid"> <img src="img/05.0.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@ -127,76 +143,66 @@
</div> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0' style="display: none;overflow: hidden;"> <div id="desarrollo" class="page-sco py-2 py-md-0" style="display: none; overflow: hidden">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center h-100'> <div class="row justify-content-center h-100">
<div class='col-12'> <div class="col-12">
<div class='row justify-content-center h-100'> <div class="row justify-content-center h-100">
<div class="col-12 mb-3 px-0"> <div class="col-12 mb-3 px-0">
<div class="card bg-rosa-lavanda border-0 rounded-0 shadow p-3"> <div class="card bg-rosa-lavanda border-0 rounded-0 shadow p-3">
<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 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"><strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos hacia el lugar que les corresponde en las imágenes.</p> <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.
</p>
</div> </div>
</div> </div>
<div class="col-12"> <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="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"> <div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
Diálisis Peritoneal Continua Ambulatoria
</div>
</div> </div>
</div> </div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="1"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="1">
<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">Atomizador</div>
Atomizador
</div>
</div> </div>
</div> </div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="2"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="2">
<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">Superficie de trabajo</div>
Superficie de trabajo
</div>
</div> </div>
</div> </div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="3"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="3">
<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">Diálisis Peritoneal Automatizada</div>
Diálisis Peritoneal Automatizada
</div>
</div> </div>
</div> </div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="4"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="4">
<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">Bolsa DPA</div>
Bolsa DPA
</div>
</div> </div>
</div> </div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="5"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="5">
<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">Línea</div>
Línea
</div>
</div> </div>
</div> </div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="6"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="6">
<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">Titanio</div>
Titanio
</div>
</div> </div>
</div> </div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="7"> <div class="drag-button px-3 py-2 text-white text-center" data-drag="7">
<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">Catéter</div>
Catéter
</div>
</div> </div>
</div> </div>
</div> </div>
@ -210,41 +216,62 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-4 text-center"> <div class="col-4 text-center">
<div class="d-inline-flex flex-column justify-content-center gap-3"> <div class="d-inline-flex flex-column justify-content-center gap-3">
<img src="img/05.1.png" class="img-fluid"> <img src="img/05.1.png" class="img-fluid" />
<div 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="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"
>
<h3 class="fw-bold text-white mb-0">1</h3> <h3 class="fw-bold text-white mb-0">1</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="0"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="0"
></div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-8"> <div class="col-8">
<div class="d-flex flex-row justify-content-center gap-3"> <div class="d-flex flex-row justify-content-center gap-3">
<div class="content-custom d-flex flex-column justify-content-center gap-3"> <div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.2.png" class="img-fluid align-self-center"> <img src="img/05.2.png" class="img-fluid align-self-center" />
<div 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="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"
>
<h3 class="fw-bold text-white mb-0">2</h3> <h3 class="fw-bold text-white mb-0">2</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="1"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="1"
></div>
</div> </div>
</div> </div>
<div class="content-custom d-flex flex-column justify-content-center gap-3"> <div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.3.png" class="img-fluid align-self-center"> <img src="img/05.3.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Paños limpios</p> <p class="mb-0 text-center h-txt">Paños limpios</p>
</div> </div>
<div class="content-custom d-flex flex-column justify-content-center gap-3"> <div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.4.png" class="img-fluid align-self-center"> <img src="img/05.4.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Lavamanos, jabón y toalla</p> <p class="mb-0 text-center h-txt">Lavamanos, jabón y toalla</p>
</div> </div>
<div class="content-custom d-flex flex-column justify-content-center gap-3"> <div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.5.png" class="img-fluid align-self-center"> <img src="img/05.5.png" class="img-fluid align-self-center" />
<div 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="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"
>
<h3 class="fw-bold text-white mb-0">3</h3> <h3 class="fw-bold text-white mb-0">3</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="2"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="2"
></div>
</div> </div>
</div> </div>
</div> </div>
@ -257,37 +284,62 @@
<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 class="d-flex flex-column justify-content-center gap-2 content-c4"> <div class="d-flex flex-column justify-content-center gap-2 content-c4">
<div 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="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"
>
<h3 class="fw-bold text-white mb-0">4</h3> <h3 class="fw-bold text-white mb-0">4</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="3"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="3"
></div>
</div> </div>
<img src="img/05.6.png" class="img-fluid align-self-center"> <img src="img/05.6.png" class="img-fluid align-self-center" />
</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-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"> <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 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="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"
>
<h3 class="fw-bold text-white mb-0">5</h3> <h3 class="fw-bold text-white mb-0">5</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="4"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="4"
></div>
</div> </div>
</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">Cubrebocas, lavamanos, jabón y toalla</p> <p class="mb-0 text-center h-txt">
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" />
<div 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="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"
>
<h3 class="fw-bold text-white mb-0">6</h3> <h3 class="fw-bold text-white mb-0">6</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="5"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="5"
></div>
</div> </div>
</div> </div>
</div> </div>
@ -297,35 +349,53 @@
<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 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"> <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 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="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"
>
<h3 class="fw-bold text-white mb-0">7</h3> <h3 class="fw-bold text-white mb-0">7</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="6"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="6"
></div>
</div> </div>
</div> </div>
<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.11.png" class="img-fluid align-self-center"> <img src="img/05.11.png" class="img-fluid align-self-center" />
<div 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="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"
>
<h3 class="fw-bold text-white mb-0">8</h3> <h3 class="fw-bold text-white mb-0">8</h3>
</div> </div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="7"></div> <div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="7"
></div>
</div> </div>
</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-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"> <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>
</div> </div>
<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.13.png" class="img-fluid align-self-center"> <img src="img/05.13.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Tapón</p> <p class="mb-0 text-center h-txt">Tapón</p>
</div> </div>
</div> </div>
@ -341,18 +411,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 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 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@ -361,10 +431,14 @@
<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>
@ -376,19 +450,19 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
$('.drops_parts').first().show(); $(".drops_parts").first().show();
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();
shuffleDragButtons(); shuffleDragButtons();
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
function shuffleArray(array) { function shuffleArray(array) {
@ -400,14 +474,14 @@
} }
function shuffleDragButtons() { function shuffleDragButtons() {
const container = document.getElementById('drag-container'); const container = document.getElementById("drag-container");
const buttons = Array.from(container.children); const buttons = Array.from(container.children);
const shuffled = shuffleArray(buttons); const shuffled = shuffleArray(buttons);
shuffled.forEach(button => container.appendChild(button)); shuffled.forEach((button) => container.appendChild(button));
} }
function recreateDragContainer() { function recreateDragContainer() {
$('#drag-container').html(` $("#drag-container").html(`
<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>
@ -449,17 +523,17 @@
</div> </div>
</div> </div>
`); `);
$('.drag-button').draggable({ $(".drag-button").draggable({
revert: 'invalid', revert: "invalid",
revertDuration: 300, revertDuration: 300,
cursor: "grabbing", cursor: "grabbing",
start: function (event, ui) { start: function (event, ui) {
$(this).css('z-index', 1000); $(this).css("z-index", 1000);
ui.position.left = 0; ui.position.left = 0;
ui.position.top = 0; ui.position.top = 0;
}, },
drag: function (event, ui) { drag: function (event, ui) {
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1; var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
var changeLeft = ui.position.left - ui.originalPosition.left; var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft / scale; var newLeft = ui.originalPosition.left + changeLeft / scale;
var changeTop = ui.position.top - ui.originalPosition.top; var changeTop = ui.position.top - ui.originalPosition.top;
@ -468,8 +542,8 @@
ui.position.top = newTop; ui.position.top = newTop;
}, },
stop: function (event, ui) { stop: function (event, ui) {
$(this).css('z-index', 1); $(this).css("z-index", 1);
} },
}); });
shuffleDragButtons(); shuffleDragButtons();
} }
@ -482,7 +556,7 @@
4: 4, 4: 4,
5: 5, 5: 5,
6: 6, 6: 6,
7: 7 7: 7,
}; };
let completedDrops = { part0: 0, part1: 0 }; let completedDrops = { part0: 0, part1: 0 };
@ -493,27 +567,27 @@
function finishActivity() { function finishActivity() {
const percentage = (correctCount / totalQuestions) * 100; const percentage = (correctCount / totalQuestions) * 100;
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
if (percentage < 80) { if (percentage < 80) {
$('.col-reintentar').show(); $(".col-reintentar").show();
} }
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} }
// Inicializar draggable para elementos iniciales // Inicializar draggable para elementos iniciales
$('.drag-button').draggable({ $(".drag-button").draggable({
revert: 'invalid', revert: "invalid",
revertDuration: 300, revertDuration: 300,
cursor: "grabbing", cursor: "grabbing",
start: function (event, ui) { start: function (event, ui) {
$(this).css('z-index', 1000); $(this).css("z-index", 1000);
ui.position.left = 0; ui.position.left = 0;
ui.position.top = 0; ui.position.top = 0;
}, },
drag: function (event, ui) { drag: function (event, ui) {
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1; var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
var changeLeft = ui.position.left - ui.originalPosition.left; var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft / scale; var newLeft = ui.originalPosition.left + changeLeft / scale;
var changeTop = ui.position.top - ui.originalPosition.top; var changeTop = ui.position.top - ui.originalPosition.top;
@ -522,60 +596,63 @@
ui.position.top = newTop; ui.position.top = newTop;
}, },
stop: function (event, ui) { stop: function (event, ui) {
$(this).css('z-index', 1); $(this).css("z-index", 1);
} },
}); });
$(".drop-option").droppable({
accept: ".drag-button",
$('.drop-option').droppable({
accept: '.drag-button',
drop: function (event, ui) { drop: function (event, ui) {
const draggedItem = ui.draggable; const draggedItem = ui.draggable;
const dragValue = parseInt(draggedItem.data('drag')); const dragValue = parseInt(draggedItem.data("drag"));
const dropValue = parseInt($(this).data('drop')); const dropValue = parseInt($(this).data("drop"));
const isCorrect = correctAnswers[dragValue] === dropValue; const isCorrect = correctAnswers[dragValue] === dropValue;
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
$(this).html(draggedItem.find('.col-12').text()).addClass('text-center d-flex align-items-center justify-content-center'); $(this)
$(this).droppable('disable'); // Disable this drop zone .html(draggedItem.find(".col-12").text())
.addClass("text-center d-flex align-items-center justify-content-center");
$(this).droppable("disable"); // Disable this drop zone
draggedItem.hide(); draggedItem.hide();
if (isCorrect) { if (isCorrect) {
correctCount++; correctCount++;
} else { } else {
$(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger'); $(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
} }
if ($('#part0').is(':visible')) { if ($("#part0").is(":visible")) {
completedDrops.part0++; completedDrops.part0++;
if (completedDrops.part0 >= totalDropsPart0) { if (completedDrops.part0 >= totalDropsPart0) {
setTimeout(() => { setTimeout(() => {
$('#part0').hide(); $("#part0").hide();
$('#part1').show(); $("#part1").show();
// Recrear todo el drag-container para la parte 2 // Recrear todo el drag-container para la parte 2
recreateDragContainer(); recreateDragContainer();
// 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).html('').removeClass('text-center d-flex align-items-center justify-content-center'); $(this)
$(this).siblings('.num-card').removeClass('bg-danger').addClass('bg-verde-pino'); .html("")
.removeClass("text-center d-flex align-items-center justify-content-center");
$(this).siblings(".num-card").removeClass("bg-danger").addClass("bg-verde-pino");
} }
}); });
}, 1000); }, 1000);
} }
} else if ($('#part1').is(':visible')) { } else if ($("#part1").is(":visible")) {
completedDrops.part1++; completedDrops.part1++;
} }
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)",
@ -585,9 +662,9 @@
if (completedDrops.part1 >= totalDropsPart1) { if (completedDrops.part1 >= totalDropsPart1) {
finishActivity(); finishActivity();
} }
} },
}); });
} },
}); });
}); });
</script> </script>

200
contenido/08.html
View File

@ -43,15 +43,15 @@
cursor: pointer; cursor: pointer;
} }
</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-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 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@ -60,22 +60,32 @@
<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/08.0.png" class="img-fluid"> <img src="img/08.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
<p>Para un recambio seguro, bajo ningún motivo debe tocar las <b class="text-lila-claro">zonas class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
estériles (libres de gérmenes)</b> en su sistema de DP.</p> >
<p>
Para un recambio seguro, bajo ningún motivo debe tocar las
<b class="text-lila-claro">zonas estériles (libres de gérmenes)</b> en su
sistema de DP.
</p>
</div> </div>
<div <div
class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"> class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
<p class="mb-0 fw-bold text-center">Realice la siguiente actividad para identificar cuáles son estas >
zonas.</p> <p class="mb-0 fw-bold text-center">
Realice la siguiente actividad para identificar cuáles son estas zonas.
</p>
</div> </div>
<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="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"
>
<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>
@ -88,15 +98,15 @@
</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-11' id="dragAndDrop"> <div class="col-11" id="dragAndDrop">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 text-center animate__animated animate__bounceInDown"> <div class="col-10 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-2 opacity-100"> <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
</div> </div>
</div> </div>
<div class="col-10 mb-1 text-center"> <div class="col-10 mb-1 text-center">
@ -107,9 +117,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/book0.png" class="img-fluid"> <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 <p class="mb-0">
y arrastre sus nombres hacia la fotografía que les corresponda.</p> <strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema
de DP y arrastre sus nombres hacia la fotografía que les corresponda.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -118,11 +130,16 @@
<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 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>
<div class="col-12"> <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> </div>
</div> </div>
@ -131,18 +148,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 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@ -151,10 +168,14 @@
<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>
@ -166,33 +187,33 @@
<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();
CourseNav.soundClick(); CourseNav.soundClick();
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
const imgDrop = ['img/08.1.png', 'img/08.3.png', 'img/08.2.png', 'img/08.4.png']; const imgDrop = ["img/08.1.png", "img/08.3.png", "img/08.2.png", "img/08.4.png"];
let questions; let questions;
let correctQuestions = 0; let correctQuestions = 0;
let maxQuestions = 4; let maxQuestions = 4;
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 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);
}); });
@ -202,21 +223,25 @@
} }
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') && fila[key]) { if (key.startsWith("opcion") && fila[key]) {
opciones.push({ opciones.push({
text: String(fila[key]).trim(), text: String(fila[key]).trim(),
correct: key === 'opcion_c' correct: key === "opcion_c",
}); });
} }
}); });
return { return {
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '', pregunta: fila.pregunta ? String(fila.pregunta).trim() : "",
opciones: opciones, opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta ? String(fila.retroalimentacion_correcta).trim() : '', retroalimentacion_correcta: fila.retroalimentacion_correcta
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? String(fila.retroalimentacion_incorrecta).trim() : '' ? String(fila.retroalimentacion_correcta).trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? String(fila.retroalimentacion_incorrecta).trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@ -231,13 +256,13 @@
} }
function createDragItems() { function createDragItems() {
const container = $('#content-drags'); const container = $("#content-drags");
container.empty(); container.empty();
const dragMapping = { const dragMapping = {
'Zona interna del conector a paciente': 0, "Zona interna del conector a paciente": 0,
'Punta abierta en la línea de transferencia': 1, "Punta abierta en la línea de transferencia": 1,
'Sistema Ultrabag en DPCA o Cassette en DPA': 2, "Cassette en DPA": 2,
'Parte interna del tapón minicap': 3 "Parte interna del tapón minicap": 3,
}; };
questions.forEach((question, index) => { questions.forEach((question, index) => {
question.opciones.forEach((opcion, opcionIndex) => { question.opciones.forEach((opcion, opcionIndex) => {
@ -253,7 +278,7 @@
} }
function createDropItems() { function createDropItems() {
const container = $('#content-drops'); const container = $("#content-drops");
container.empty(); container.empty();
imgDrop.forEach((imagen, index) => { imgDrop.forEach((imagen, index) => {
const dropItem = ` const dropItem = `
@ -279,12 +304,12 @@
let correctCount = 0; let correctCount = 0;
let totalItems = 4; let totalItems = 4;
$('.drag-item').draggable({ $(".drag-item").draggable({
revert: 'invalid', revert: "invalid",
revertDuration: 300, revertDuration: 300,
cursor: "grabbing", cursor: "grabbing",
start: function (event, ui) { start: function (event, ui) {
$(this).css({ 'z-index': 1000, 'transform': 'scale(0.8)' }); $(this).css({ "z-index": 1000, transform: "scale(0.8)" });
ui.position.left = 0; ui.position.left = 0;
ui.position.top = 0; ui.position.top = 0;
}, },
@ -293,71 +318,74 @@
var newLeft = ui.originalPosition.left + changeLeft; var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top; var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop; var newTop = ui.originalPosition.top + changeTop;
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1; var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
ui.position.left = newLeft / scale; ui.position.left = newLeft / scale;
ui.position.top = newTop / scale; ui.position.top = newTop / scale;
}, },
stop: function (event, ui) { stop: function (event, ui) {
$(this).css({ 'z-index': 1, 'transform': 'scale(1)' }); $(this).css({ "z-index": 1, transform: "scale(1)" });
} },
}); });
$('.drop-item').droppable({ $(".drop-item").droppable({
accept: '.drag-item', accept: ".drag-item",
drop: function (event, ui) { drop: function (event, ui) {
const draggedItem = ui.draggable; const draggedItem = ui.draggable;
const dragValue = parseInt(draggedItem.data('drag')); const dragValue = parseInt(draggedItem.data("drag"));
const dropValue = parseInt($(this).data('drop')); const dropValue = parseInt($(this).data("drop"));
const isCorrect = dragValue === dropValue; const isCorrect = dragValue === dropValue;
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
$(this).html(draggedItem.find('.d-flex').text()).addClass('text-center d-flex align-items-center justify-content-center'); $(this)
.html(draggedItem.find(".d-flex").text())
.addClass("text-center d-flex align-items-center justify-content-center");
draggedItem.hide(); draggedItem.hide();
if (isCorrect) { if (isCorrect) {
correctCount++; correctCount++;
} else { } else {
$(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger'); $(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
} }
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: () => {
if ($('.drag-item:visible').length === 0) { if ($(".drag-item:visible").length === 0) {
const percentage = (correctCount / totalItems) * 100; const percentage = (correctCount / totalItems) * 100;
const passed = percentage >= 80; const passed = percentage >= 80;
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
if (passed) { if (passed) {
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
}
} }
} }
},
}); });
} },
}); });
} }
function shuffleDragItems() { function shuffleDragItems() {
const container = $('#content-drags'); const container = $("#content-drags");
const items = container.children().toArray(); const items = container.children().toArray();
const shuffled = shuffleArray(items); const shuffled = shuffleArray(items);
shuffled.forEach(item => container.append(item)); shuffled.forEach((item) => container.append(item));
} }
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {

203
contenido/09.html
View File

@ -32,15 +32,17 @@
.drag-sortable { .drag-sortable {
background: #f3e9df; background: #f3e9df;
border-radius: 1.25rem; border-radius: 1.25rem;
box-shadow: 0 6px 15px rgba(0, 0, 0, .2); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
gap: .2rem; gap: 0.2rem;
padding: .4rem; padding: 0.4rem;
font-weight: 500; font-weight: 500;
border: none; border: none;
position: relative; position: relative;
transition: box-shadow 0.16s, transform 0.12s; transition:
box-shadow 0.16s,
transform 0.12s;
cursor: grab; cursor: grab;
user-select: none; user-select: none;
} }
@ -64,17 +66,19 @@
font-size: 1.8rem; font-size: 1.8rem;
font-weight: bold; font-weight: bold;
border: 2.5px solid #72256b; border: 2.5px solid #72256b;
box-shadow: 0 2px 8px rgba(225, 0, 107, 0.10); box-shadow: 0 2px 8px rgba(225, 0, 107, 0.1);
flex-shrink: 0; flex-shrink: 0;
margin-right: 0.7rem; margin-right: 0.7rem;
transition: background 0.18s, color 0.16s; transition:
background 0.18s,
color 0.16s;
} }
/* Success: número en verde con fondo y borde */ /* Success: número en verde con fondo y borde */
.drag-number-correct { .drag-number-correct {
background: #e8fdf4 !important; background: #e8fdf4 !important;
color: #30C48D !important; color: #30c48d !important;
border-color: #30C48D !important; border-color: #30c48d !important;
box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important; box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important;
animation: correcto-bounce 0.7s; animation: correcto-bounce 0.7s;
} }
@ -112,7 +116,7 @@
.drag-placeholder { .drag-placeholder {
background: #fff6fc !important; background: #fff6fc !important;
border: 2px dashed #E1006B !important; border: 2px dashed #e1006b !important;
min-height: 60px; min-height: 60px;
} }
@ -134,7 +138,7 @@
color: #72256b; color: #72256b;
font-size: 2.1rem; font-size: 2.1rem;
margin-right: 1rem; margin-right: 1rem;
animation: hand-down-up 1.2s infinite cubic-bezier(.62, -0.01, .43, 1.01); animation: hand-down-up 1.2s infinite cubic-bezier(0.62, -0.01, 0.43, 1.01);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
@ -173,50 +177,61 @@
cursor: pointer; cursor: pointer;
} }
</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-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 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<h4 class="fw-bold text-verde-pino">Lavado de manos</h4> <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
</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-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 text-center"> <div
<p class="mb-0">El jabón que utilice para el lavado de manos de preferencia debe ser <b class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center"
class="text-lila-claro">líquido</b>, sin >
embargo, lo prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p> <p class="mb-0">
El jabón que utilice para el lavado de manos de preferencia debe ser
<p><b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos. <b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea
exclusivo para cuando usted realice los recambios en casa.
</p> </p>
<p>
<b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para
secar sus manos.
</p>
<p>Sus manos, después de un correcto lavado, se encontrarán <b class="text-lila-claro">limpias, pero nunca estériles.</b> <p>
Sus manos, después de un correcto lavado, se encontrarán
<b class="text-lila-claro">limpias, pero nunca estériles.</b>
</p> </p>
</div> </div>
<div <div
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"> class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
>
<p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p> <p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
</div> </div>
<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="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"
>
<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 animate__animated animate__zoomIn"> <div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/09.0.png" class="img-fluid"> <img src="img/09.0.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@ -225,28 +240,30 @@
</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 mb-5'> <div class="row justify-content-center mb-5">
<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">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-11 mb-3 text-center"> <div class="col-11 mb-3 text-center">
<h4 class="fw-bold text-verde-pino">Lavado de manos</h4> <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
</div> </div>
<div class="col-12 px-0 mb-3"> <div class="col-12 px-0 mb-3">
<div class="card bg-verde-claro border-0 rounded-0 bx-shadow py-2 px-3"> <div class="card bg-verde-claro border-0 rounded-0 bx-shadow py-2 px-3">
<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/book0.png" class="img-fluid"> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para <p class="mb-0">
colocarlos en el orden correcto.</p> <strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
colocarlos en el orden correcto.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -255,18 +272,24 @@
<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 anim1"> <div class="col-12 anim1">
<div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"> <div
class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
>
<div class="drag-sortable" data-order="0"> <div class="drag-sortable" data-order="0">
<span class="drag-number"></span> <span class="drag-number"></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Frótelas entre sí. Mójese las manos y aplique suficiente jabón para cubrir toda su superficie.
Frótelas entre sí.
</div> </div>
<div class="drag-sortable" data-order="1"> <div class="drag-sortable" data-order="1">
<span class="drag-number"></span> <span class="drag-number"></span>
<!-- MANO CON ANIMACIÓN --> <!-- MANO CON ANIMACIÓN -->
<span class="drag-hand-animate"><i class="fa-duotone fa-solid fa-hand-pointer"></i></span> <span class="drag-hand-animate"
><i class="fa-duotone fa-solid fa-hand-pointer"></i
></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Frótese la palma de la mano derecha contra el dorso de la mano izquierda entrelazando los dedos. Frótese la palma de la mano derecha contra el dorso de la mano izquierda
entrelazando los dedos.
</div> </div>
<div class="drag-sortable" data-order="2"> <div class="drag-sortable" data-order="2">
<span class="drag-number"></span> <span class="drag-number"></span>
@ -281,13 +304,14 @@
<div class="drag-sortable" data-order="4"> <div class="drag-sortable" data-order="4">
<span class="drag-number"></span> <span class="drag-number"></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un
viceversa. movimiento de rotación y viceversa.
</div> </div>
<div class="drag-sortable" data-order="5"> <div class="drag-sortable" data-order="5">
<span class="drag-number"></span> <span class="drag-number"></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Frótese la punta de los dedos de la mano derecha contra la palma de la mano izquierda. Frótese la punta de los dedos de la mano derecha contra la palma de la mano
izquierda.
</div> </div>
<div class="drag-sortable" data-order="6"> <div class="drag-sortable" data-order="6">
<span class="drag-number"></span> <span class="drag-number"></span>
@ -308,18 +332,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 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@ -328,10 +352,14 @@
<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>
@ -343,16 +371,16 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
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();
mezclarElementos(); mezclarElementos();
}); });
@ -365,8 +393,8 @@
} }
function mezclarElementos() { function mezclarElementos() {
const $container = $('.content-drags'); const $container = $(".content-drags");
const $elements = $container.children('.drag-sortable').detach(); const $elements = $container.children(".drag-sortable").detach();
const elementosMezclados = shuffleArray($elements.toArray()); const elementosMezclados = shuffleArray($elements.toArray());
$container.append(elementosMezclados); $container.append(elementosMezclados);
actualizarNumerosDrag(); actualizarNumerosDrag();
@ -374,23 +402,25 @@
} }
function actualizarNumerosDrag() { function actualizarNumerosDrag() {
$('.content-drags .drag-sortable').each(function (i) { $(".content-drags .drag-sortable").each(function (i) {
$(this).find('.drag-number').text(i + 1); $(this)
.find(".drag-number")
.text(i + 1);
}); });
} }
// ----------- FUNCIÓN OPCIONAL: INDICAR CORRECTOS ----------- // ----------- FUNCIÓN OPCIONAL: INDICAR CORRECTOS -----------
function resaltarDragCorrectos() { function resaltarDragCorrectos() {
$('.content-drags .drag-sortable').each(function (index) { $(".content-drags .drag-sortable").each(function (index) {
const correcto = parseInt($(this).data('order')) === index; const correcto = parseInt($(this).data("order")) === index;
$(this).find('.drag-number').toggleClass('drag-number-correct', correcto); $(this).find(".drag-number").toggleClass("drag-number-correct", correcto);
}); });
} }
// ---------------------------------------------------------- // ----------------------------------------------------------
// Oculta la mano cuando se haga cualquier drag // Oculta la mano cuando se haga cualquier drag
let handRemoved = false; let handRemoved = false;
$('.content-drags').sortable({ $(".content-drags").sortable({
update: function () { update: function () {
actualizarNumerosDrag(); actualizarNumerosDrag();
// Activa aquí para resaltar correctos tras cada movimiento: // Activa aquí para resaltar correctos tras cada movimiento:
@ -404,35 +434,35 @@
scroll: false, scroll: false,
helper: "clone", helper: "clone",
sort: function (event, ui) { sort: function (event, ui) {
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1; var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
var offset = ui.helper.offset(); var offset = ui.helper.offset();
var mouseX = event.pageX; var mouseX = event.pageX;
var mouseY = event.pageY; var mouseY = event.pageY;
ui.helper.css({ ui.helper.css({
left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 4, left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 4,
top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2 top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
}); });
}, },
start: function (event, ui) { start: function (event, ui) {
ui.helper.css('transform', 'scale(0.95)'); ui.helper.css("transform", "scale(0.95)");
if (!handRemoved) { if (!handRemoved) {
$('.drag-hand-animate').remove(); $(".drag-hand-animate").remove();
handRemoved = true; handRemoved = true;
} }
}, },
stop: function (event, ui) { stop: function (event, ui) {
ui.item.css('transform', 'scale(1)'); ui.item.css("transform", "scale(1)");
} },
}); });
actualizarNumerosDrag(); actualizarNumerosDrag();
function verificarOrden() { function verificarOrden() {
const $elementos = $('.content-drags .drag-sortable'); const $elementos = $(".content-drags .drag-sortable");
let todosCorrectos = true; let todosCorrectos = true;
$elementos.each(function (index) { $elementos.each(function (index) {
const ordenActual = parseInt($(this).data('order')); const ordenActual = parseInt($(this).data("order"));
if (ordenActual !== index) { if (ordenActual !== index) {
todosCorrectos = false; todosCorrectos = false;
return false; return false;
@ -440,20 +470,23 @@
}); });
if (todosCorrectos) { if (todosCorrectos) {
$('.content-drags').sortable('disable'); $(".content-drags").sortable("disable");
mostrarPopup(true); mostrarPopup(true);
} }
} }
function mostrarPopup(isCorrect) { function mostrarPopup(isCorrect) {
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? feedbackcorrect : feedbackincorrect); CourseNav.audioController.stopAllSoundsAndPlay(
isCorrect ? feedbackcorrect : feedbackincorrect
);
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)",
@ -462,14 +495,14 @@
if (isCorrect) { if (isCorrect) {
finalizarActividad(); finalizarActividad();
} }
} },
}); });
} }
function finalizarActividad() { function finalizarActividad() {
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} }
}); });

179
contenido/11.html
View File

@ -25,7 +25,7 @@
.btn-answer { .btn-answer {
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
} }
.letter { .letter {
@ -69,37 +69,44 @@
cursor: pointer; cursor: pointer;
} }
</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">Autocuidado</h2> <h2 class="text-primary mb-1 fw-bold">Autocuidado</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-3 text-center"> <div class="col-12 mb-3 text-center">
<h4 class="fw-bold text-verde-pino">Consumo y balance de líquidos</h4> <h4 class="fw-bold text-verde-pino">Consumo y balance de líquidos</h4>
</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/11.0.png" class="img-fluid"> <img src="img/11.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> La gran ventaja que le ofrece la DP es que se trata de un tratamiento <strong <p>
class="text-lila-claro">autoadministrado y domiciliario</strong>, sin embargo, es necesario que acuda a La gran ventaja que le ofrece la DP es que se trata de un tratamiento
todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y registros del tratamiento <strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que
que le solicite el personal de salud.</p> acuda a todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y
registros del tratamiento que le solicite el personal de salud.
</p>
</div> </div>
<div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3"> <div
<div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold"> 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. Un aspecto importante a tomar en cuenta es el consumo y balance de líquidos.
</div> </div>
</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>
@ -108,15 +115,15 @@
</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 mb-5'> <div class="row justify-content-center mb-5">
<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">Autocuidado</h2> <h2 class="text-primary mb-1 fw-bold">Autocuidado</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-11 mb-3 text-center"> <div class="col-11 mb-3 text-center">
@ -127,10 +134,12 @@
<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/book0.png" class="img-fluid"> <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 <p class="mb-0">
líquidos y conteste correctamente. Por cada acierto obtendrá una <strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del
pieza del rompecabezas, el reto es descubrir la imagen oculta.</p> control de líquidos y conteste correctamente. Por cada acierto obtendrá una
pieza del rompecabezas, el reto es descubrir la imagen oculta.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -142,10 +151,14 @@
<div id="svg-container"></div> <div id="svg-container"></div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div id="card-content-quiz-rompecabezas" <div
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow"> id="card-content-quiz-rompecabezas"
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow"
>
<div class="row justify-content-center"> <div class="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 class="col-12 content-answers"></div>
</div> </div>
</div> </div>
@ -157,18 +170,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">Autocuidado</h2> <h2 class="text-primary mb-1 fw-bold">Autocuidado</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 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@ -177,10 +190,14 @@
<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>
@ -192,47 +209,51 @@
<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;
let currentQuestion; let currentQuestion;
let correctQuestions = 0; let correctQuestions = 0;
let maxQuestions = -1; let maxQuestions = -1;
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");
function loadSVG() { function loadSVG() {
$.get('img/puzzle.svg', function (data) { $.get(
var svg = $(data).find('svg'); "img/puzzle.svg",
$('#svg-container').html(svg); function (data) {
var svg = $(data).find("svg");
$("#svg-container").html(svg);
// Remove width and height attributes to make SVG responsive // Remove width and height attributes to make SVG responsive
svg.removeAttr('width').removeAttr('height'); svg.removeAttr("width").removeAttr("height");
// 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"
);
} }
$('.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();
}); });
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);
}); });
@ -242,13 +263,13 @@
} }
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",
}); });
} }
}); });
@ -256,7 +277,7 @@
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: 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(),
}; };
}); });
return preguntas; return preguntas;
@ -278,32 +299,36 @@
return; return;
} }
$('#card-content-quiz-rompecabezas').hide(); $("#card-content-quiz-rompecabezas").hide();
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
$('.txt-question').text(currentQuestion.pregunta); $(".txt-question").text(currentQuestion.pregunta);
const answersContainer = $('.content-answers'); const answersContainer = $(".content-answers");
answersContainer.empty(); answersContainer.empty();
setTimeout(() => { setTimeout(() => {
$('#card-content-quiz-rompecabezas').removeClass('animate__zoomIn').addClass('animate__zoomIn').show(); $("#card-content-quiz-rompecabezas")
.removeClass("animate__zoomIn")
.addClass("animate__zoomIn")
.show();
}, 100); }, 100);
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]); const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
shuffledOpciones.forEach((opcion, index) => { shuffledOpciones.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}"> 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> <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>
</div>`); </div>`);
answersContainer.append(btn); answersContainer.append(btn);
}); });
$('.btn-answer').click(function () { $(".btn-answer").click(function () {
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) { if (isCorrect) {
correctQuestions++; correctQuestions++;
@ -316,12 +341,13 @@
function showFeedback(isCorrect) { function showFeedback(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)",
@ -332,7 +358,7 @@
} }
currentQuestionIndex++; currentQuestionIndex++;
displayQuestion(); displayQuestion();
} },
}); });
} }
@ -348,19 +374,20 @@
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
if (passed) { if (passed) {
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} }
} }
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 = maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions); questions =
maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
loadSVG(); loadSVG();
setTimeout(() => { setTimeout(() => {
displayQuestion(); displayQuestion();

240
contenido/13.html
View File

@ -50,7 +50,7 @@
.btn-answer { .btn-answer {
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
} }
.letter { .letter {
@ -80,53 +80,61 @@
cursor: pointer; cursor: pointer;
} }
</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">Manejo de medicamentos y terapia dialítica</h2> <h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</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-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>Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son <p>
controlados mediante la DP, sin embargo, es necesario que se apoye de medicamentos que solo su médico Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que,
puede y debe prescribir. </p> en parte, son controlados mediante la DP, sin embargo, es necesario que se apoye
de medicamentos que solo su médico puede y debe prescribir.
</p>
</div> </div>
<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">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>
<div 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="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"
>
<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/13.5.png" class="img-fluid"> <img src="img/13.5.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-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 text-center animate__animated animate__bounceInDown"> <div class="col-10 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">Manejo de medicamentos y terapia dialítica</h2> <h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100"> <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
</div> </div>
</div> </div>
<div class="col-10 mb-3"> <div class="col-10 mb-3">
@ -134,10 +142,12 @@
<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> Haga clic en cada tarjeta para revelar la pregunta <p class="mb-0">
acerca del manejo de medicamentos que apoyan la DP. <strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la
Por cada acierto sumará puntos, el objetivo es llegar a 1000.</p> pregunta acerca del manejo de medicamentos que apoyan la DP. Por cada acierto
sumará puntos.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -147,37 +157,62 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div <div
class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow"> class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow"
<img src="img/13.4.png" class="img-fluid me-2"> >
<img src="img/13.4.png" class="img-fluid me-2" />
<h4 class="text-white fw-bold mb-0">Puntos:</h4> <h4 class="text-white fw-bold mb-0">Puntos:</h4>
<h4 id="puntos" class="text-white fw-bold mb-0">000</h4> <h4 id="puntos" class="text-white fw-bold mb-0">000</h4>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="grip-jeopardy"> <div class="grip-jeopardy">
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100"> <div
<img src="img/13.0.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<img src="img/13.0.png" class="img-fluid" />
</div> </div>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200"> <div
<img src="img/13.2.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="200"
>
<img src="img/13.2.png" class="img-fluid" />
</div> </div>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50"> <div
<img src="img/13.1.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<img src="img/13.1.png" class="img-fluid" />
</div> </div>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100"> <div
<img src="img/13.0.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<img src="img/13.0.png" class="img-fluid" />
</div> </div>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50"> <div
<img src="img/13.1.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<img src="img/13.1.png" class="img-fluid" />
</div> </div>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100"> <div
<img src="img/13.0.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<img src="img/13.0.png" class="img-fluid" />
</div> </div>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200"> <div
<img src="img/13.2.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="200"
>
<img src="img/13.2.png" class="img-fluid" />
</div> </div>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200"> <div
<img src="img/13.2.png" class="img-fluid"> class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="200"
>
<img src="img/13.2.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@ -188,27 +223,31 @@
</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">Manejo de medicamentos y terapia dialítica</h2> <h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</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>
@ -220,35 +259,35 @@
<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;
let currentQuestion; let currentQuestion;
let correctQuestions = 0; let correctQuestions = 0;
let maxQuestions = -1; let maxQuestions = -1;
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();
}); });
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);
}); });
@ -258,21 +297,25 @@
} }
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
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '' ? fila.retroalimentacion_correcta.trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@ -292,7 +335,7 @@
const pregunta = questions[questionIndex]; const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]); const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
let opcionesHTML = ''; let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => { opcionesBarajadas.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>
@ -301,7 +344,7 @@
}); });
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
html: ` html: `
<div class="text-center mb-3"> <div class="text-center mb-3">
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4> <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
@ -314,22 +357,20 @@
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
customClass: { customClass: {
popup: 'swal-wide bg-white border-0 rounded-3 shadow' popup: "swal-wide bg-white border-0 rounded-3 shadow",
}, },
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
$(".btn-answer").click(function () {
const isCorrect = $(this).data("correct") === true;
$('.btn-answer').click(function () { const puntos = $(this).data("puntos");
const isCorrect = $(this).data('correct') === true; $(".btn-answer").off("click hover").css("pointer-events", "none");
const puntos = $(this).data('puntos');
$('.btn-answer').off('click hover').css('pointer-events', 'none');
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); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
@ -339,27 +380,30 @@
mostrarFeedback(isCorrect, pregunta, questionIndex); mostrarFeedback(isCorrect, pregunta, questionIndex);
}, 200); }, 200);
}); });
} },
}); });
} }
function mostrarFeedback(isCorrect, pregunta, questionIndex) { function mostrarFeedback(isCorrect, pregunta, questionIndex) {
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta; 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: 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)",
width: "35em", width: "35em",
didClose: () => { didClose: () => {
$('.btn-question-pop').eq(questionIndex).addClass('completed'); $(".btn-question-pop").eq(questionIndex).addClass("completed");
currentQuestionIndex++; currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) { if (currentQuestionIndex >= questions.length) {
@ -367,33 +411,33 @@
finalizarJuego(); finalizarJuego();
}, 500); }, 500);
} }
} },
}); });
} }
function finalizarJuego() { function finalizarJuego() {
const puntosFinal = parseInt($('#puntos').text()); const puntosFinal = parseInt($("#puntos").text());
const aprobado = puntosFinal >= 1000; const aprobado = puntosFinal >= 1000;
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
if (aprobado) { if (aprobado) {
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} }
} }
$('.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 (!$(this).hasClass('completed') && !$(this).hasClass('disabled')) { if (!$(this).hasClass("completed") && !$(this).hasClass("disabled")) {
$(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);
} }

253
contenido/14.html
View File

@ -23,8 +23,8 @@
} }
.bg-rosa-mixto { .bg-rosa-mixto {
background: #D9C5D7; background: #d9c5d7;
background: linear-gradient(to bottom, #D9C5D7 0%, #EDE3EC 100%); background: linear-gradient(to bottom, #d9c5d7 0%, #ede3ec 100%);
} }
.paqueteria { .paqueteria {
@ -57,11 +57,11 @@
} }
.btn-paquete.disabled { .btn-paquete.disabled {
opacity: .5; opacity: 0.5;
} }
.btn-paquete.completed { .btn-paquete.completed {
opacity: 1!important; opacity: 1 !important;
} }
#camion-transporte { #camion-transporte {
@ -71,7 +71,7 @@
.btn-answer { .btn-answer {
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
} }
.letter { .letter {
@ -101,29 +101,35 @@
cursor: pointer; cursor: pointer;
} }
</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">Entrega domiciliaria</h2> <h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</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-6 text-center mb-1 animate__animated animate__zoomIn mb-3"> <div class="col-6 text-center mb-1 animate__animated animate__zoomIn mb-3">
<img src="img/14.0.png" class="img-fluid"> <img src="img/14.0.png" class="img-fluid" />
</div> </div>
<div class="col-7 text-center animate__animated animate__flipInX"> <div class="col-7 text-center animate__animated animate__flipInX">
<div class="card bg-transparent border-0 rounded-3 p-0 shadow-none"> <div class="card bg-transparent border-0 rounded-3 p-0 shadow-none">
<div class="position-relative w-100"> <div class="position-relative w-100">
<p>Gracias a que la diálisis peritoneal es una terapia <strong class="text-lila-claro">portable y autoadministrada,</strong> le permite mayores <p>
posibilidades de actividad laboral, vida escolar y posibilidad de viajar.</p> Gracias a que la diálisis peritoneal es una terapia
<strong class="text-lila-claro">portable,</strong> le permite mayores
posibilidades de actividad laboral, vida escolar y posibilidad de viajar.
</p>
</div> </div>
<div class="w-100 position-relative 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="w-100 position-relative 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"
>
<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>
@ -134,15 +140,15 @@
</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-10 text-center animate__animated animate__bounceInDown"> <div class="col-10 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">Entrega domiciliaria</h2> <h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100"> <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
</div> </div>
</div> </div>
<div class="col-12 px-0"> <div class="col-12 px-0">
@ -150,8 +156,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/book0.png" class="img-fluid"> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"><strong>Instrucciones:</strong> Haga clic en cada caja y responda correctamente para recolectarla y completar la entrega domiciliaria.</p> <p class="mb-0">
<strong>Instrucciones:</strong> Haga clic en cada caja y responda
correctamente para recolectarla y completar la entrega domiciliaria.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -160,47 +169,64 @@
<div class="col-12 px-0 bg-rosa-mixto pt-5"> <div class="col-12 px-0 bg-rosa-mixto pt-5">
<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="d-inline-flex position-relative camino-entrega flex-column justify-content-center align-items-center gap-2"> <div
class="d-inline-flex position-relative camino-entrega flex-column justify-content-center align-items-center gap-2"
>
<div id="camion-transporte" class="paqueteria position-absolute"> <div id="camion-transporte" class="paqueteria position-absolute">
<img src="img/14.2.png" class="img-fluid"> <img src="img/14.2.png" class="img-fluid" />
</div> </div>
<div class="recorrido ms-auto"> <div class="recorrido ms-auto">
<div id="paquete0" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite"> <div
id="paquete0"
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite"
>
<div class="position-absolute check-question w-100"> <div class="position-absolute check-question w-100">
<img src="img/14.5.png" class="img-fluid"> <img src="img/14.5.png" class="img-fluid" />
</div> </div>
<img src="img/14.3.png" class="img-fluid"> <img src="img/14.3.png" class="img-fluid" />
</div> </div>
<div id="paquete1" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"> <div
id="paquete1"
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
>
<div class="position-absolute check-question w-100"> <div class="position-absolute check-question w-100">
<img src="img/14.6.png" class="img-fluid"> <img src="img/14.6.png" class="img-fluid" />
</div> </div>
<img src="img/14.3.png" class="img-fluid"> <img src="img/14.3.png" class="img-fluid" />
</div> </div>
<div id="paquete2" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"> <div
id="paquete2"
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
>
<div class="position-absolute check-question w-100"> <div class="position-absolute check-question w-100">
<img src="img/14.7.png" class="img-fluid"> <img src="img/14.7.png" class="img-fluid" />
</div> </div>
<img src="img/14.3.png" class="img-fluid"> <img src="img/14.3.png" class="img-fluid" />
</div> </div>
<div id="paquete3" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"> <div
id="paquete3"
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
>
<div class="position-absolute check-question w-100"> <div class="position-absolute check-question w-100">
<img src="img/14.8.png" class="img-fluid"> <img src="img/14.8.png" class="img-fluid" />
</div> </div>
<img src="img/14.3.png" class="img-fluid"> <img src="img/14.3.png" class="img-fluid" />
</div> </div>
<div id="paquete4" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"> <div
id="paquete4"
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
>
<div class="position-absolute check-question w-100"> <div class="position-absolute check-question w-100">
<img src="img/14.9.png" class="img-fluid"> <img src="img/14.9.png" class="img-fluid" />
</div> </div>
<img src="img/14.3.png" class="img-fluid"> <img src="img/14.3.png" class="img-fluid" />
</div> </div>
<div id="fin" class="text-center position-relative"> <div id="fin" class="text-center position-relative">
<img src="img/14.4.png" class="img-fluid"> <img src="img/14.4.png" class="img-fluid" />
</div> </div>
</div> </div>
<div class="carretera"> <div class="carretera">
<img src="img/14.1.png" class="img-fluid"> <img src="img/14.1.png" class="img-fluid" />
</div> </div>
</div> </div>
</div> </div>
@ -211,27 +237,31 @@
</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">Entrega domiciliaria</h2> <h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</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>
@ -243,35 +273,35 @@
<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;
let currentQuestion; let currentQuestion;
let correctQuestions = 0; let correctQuestions = 0;
let maxQuestions = -1; let maxQuestions = -1;
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();
}); });
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);
}); });
@ -281,21 +311,25 @@
} }
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
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '' ? fila.retroalimentacion_correcta.trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@ -315,7 +349,7 @@
const pregunta = questions[questionIndex]; const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]); const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
let opcionesHTML = ''; let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => { opcionesBarajadas.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>
@ -324,7 +358,7 @@
}); });
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
html: ` html: `
<div class="text-center mb-3"> <div class="text-center mb-3">
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4> <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
@ -336,14 +370,14 @@
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
customClass: { customClass: {
popup: 'swal-wide bg-white border-0 rounded-3 shadow' popup: "swal-wide bg-white border-0 rounded-3 shadow",
}, },
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
$('.btn-answer').click(function() { $(".btn-answer").click(function () {
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) { if (isCorrect) {
correctQuestions++; correctQuestions++;
@ -356,46 +390,50 @@
mostrarFeedback(isCorrect, pregunta, questionIndex); mostrarFeedback(isCorrect, pregunta, questionIndex);
}, 250); }, 250);
}); });
} },
}); });
} }
function mostrarFeedback(isCorrect, pregunta, questionIndex) { function mostrarFeedback(isCorrect, pregunta, questionIndex) {
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta; 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: 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)",
width: "35em", width: "35em",
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");
// Cambiar imagen del check // Cambiar imagen del check
const checkImg = currentPaquete.find('.check-question img'); const checkImg = currentPaquete.find(".check-question img");
checkImg.attr('src', isCorrect ? 'img/14.11.png' : 'img/14.10.png'); checkImg.attr("src", isCorrect ? "img/14.11.png" : "img/14.10.png");
if (isCorrect) { if (isCorrect) {
// Mover camión // Mover camión
const camion = $('#camion-transporte'); const camion = $("#camion-transporte");
const paqueteWidth = currentPaquete.outerWidth() + 15; // incluye gap const paqueteWidth = currentPaquete.outerWidth() + 15; // incluye gap
const currentTransform = camion.css('transform'); const currentTransform = camion.css("transform");
const currentX = currentTransform === 'none' ? 0 : parseFloat(currentTransform.split(',')[4]) || 0; const currentX =
currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
const newX = currentX + paqueteWidth; const newX = currentX + paqueteWidth;
camion.css('transform', `translateX(${newX}px)`); camion.css("transform", `translateX(${newX}px)`);
} }
// Habilitar siguiente paquete // Habilitar siguiente paquete
if (questionIndex < questions.length - 1) { if (questionIndex < questions.length - 1) {
$(`#paquete${questionIndex + 1}`).removeClass('disabled'); $(`#paquete${questionIndex + 1}`).removeClass("disabled");
} }
currentQuestionIndex++; currentQuestionIndex++;
@ -404,13 +442,14 @@
// Si respondió todas correctamente, mover al destino final // Si respondió todas correctamente, mover al destino final
if (correctQuestions === questions.length) { if (correctQuestions === questions.length) {
setTimeout(() => { setTimeout(() => {
const camion = $('#camion-transporte'); const camion = $("#camion-transporte");
const currentTransform = camion.css('transform'); const currentTransform = camion.css("transform");
const currentX = currentTransform === 'none' ? 0 : parseFloat(currentTransform.split(',')[4]) || 0; const currentX =
currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
const paqueteWidth = currentPaquete.outerWidth() + 25; const paqueteWidth = currentPaquete.outerWidth() + 25;
const newX = currentX + paqueteWidth; const newX = currentX + paqueteWidth;
camion.css('transform', `translateX(${newX}px)`); camion.css("transform", `translateX(${newX}px)`);
console.log('Moviendo camión al fin:', newX); console.log("Moviendo camión al fin:", newX);
}, 1000); }, 1000);
} }
const delay = correctQuestions === questions.length ? 3000 : 1500; const delay = correctQuestions === questions.length ? 3000 : 1500;
@ -418,33 +457,37 @@
finalizarJuego(); finalizarJuego();
}, delay); }, delay);
} }
} },
}); });
} }
function finalizarJuego() { function finalizarJuego() {
const aprobado = correctQuestions >= Math.ceil(questions.length * 0.75); const aprobado = correctQuestions >= Math.ceil(questions.length * 0.75);
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
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();
} }
} }
$('.btn-paquete').click(function() { $(".btn-paquete").click(function () {
const paqueteId = $(this).attr('id'); const paqueteId = $(this).attr("id");
const index = parseInt(paqueteId.replace('paquete', '')); const index = parseInt(paqueteId.replace("paquete", ""));
if (!$(this).hasClass('disabled') && !$(this).hasClass('completed') && index < questions.length) { if (
$(this).removeClass('animate__pulse animate__infinite').addClass('disabled'); !$(this).hasClass("disabled") &&
!$(this).hasClass("completed") &&
index < questions.length
) {
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
CourseNav.soundClick(); CourseNav.soundClick();
mostrarPregunta(index); mostrarPregunta(index);
} }