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

update

Browse Source
This commit is contained in:
david.martinez
2026-07-01 02:25:52 -06:00
parent 8dd25c3b23
commit 0be4d028e1
34 changed files with 443 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc
+6
View File
@@ -0,0 +1,6 @@
{
"htmlWhitespaceSensitivity": "css",
"printWidth": 300,
"tabWidth": 2,
"singleQuote": true
}
Actividades_Rotafolio_Vantive.xlsx
BIN
View File
Binary file not shown.
Drag_Drop2.xlsx
BIN
View File
Binary file not shown.
config.json
+4
View File
@@ -83,6 +83,10 @@
{
"title": "Despedida",
"content": "contenido/19.html"
},
{
"title": "Referencias",
"content": "contenido/20.html"
}
]
}
contenido/01.html
+12 -8
View File
@@ -13,17 +13,21 @@
background-size: 100% auto;
}
</style>
<div class='page-sco py-2 py-md-4 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12 w-container'>
<div class='row justify-content-center'>
<div class="page-sco py-2 py-md-4 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 w-container">
<div class="row justify-content-center">
<div class="col-11">
<div class="row justify-content-center align-items-center">
<div class="col-8">
<h1 class="text-white fw-bold">INDUCCIÓN AL PROGRAMA DE <br> DIÁLISIS PERITONEAL<span
class="fw-bold text-verde-ceniza">>>></span></h1>
<p class="text-white">Pioneros en el cuidado de la enfermedad renal crónica</p>
<h1 class="text-primary fw-bold">
INDUCCIÓN AL PROGRAMA DE
<br />
DIÁLISIS PERITONEAL
<span class="fw-bold text-verde-oscuro">>>></span>
</h1>
<p class="text-primary">Pioneros en el cuidado de la enfermedad renal crónica</p>
</div>
<div class="col-4">
<img src="img/0.1.png" class="img-fluid" alt="" />
contenido/03.html
+46 -60
View File
@@ -46,25 +46,18 @@
</style>
<div class="page-sco py-2 py-md-4 h-100">
<div class="container h-100">
<div
id="drag-drop-activity"
class="row justify-content-center align-items-center h-100"
style="overflow: hidden"
>
<div id="drag-drop-activity" class="row justify-content-center align-items-center h-100" style="overflow: hidden">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-10 mb-2">
<h2 class="text-center fw-bold text-primary">¿Cuál es el tratamiento?</h2>
<h2 class="text-center fw-bold text-primary">¿Cuál es el tratamiento<sup class="fw-bold">1,4</sup>?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
<div class="col-12 px-0">
<div class="card bg-custom border-0 my-2 rounded-0 shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/3.1.png" class="img-fluid mx-3" />
<p class="mb-0">
<strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que
corresponden.
</p>
<p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que corresponden.</p>
</div>
</div>
</div>
@@ -77,23 +70,17 @@
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div
class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2"
>
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
<img src="img/3.2.png" class="img-fluid" />
</div>
</div>
<div class="content-enfermedad text-center">
<div
class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2"
>
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
<img src="img/3.3.png" class="img-fluid" />
</div>
</div>
<div class="content-enfermedad text-center">
<div
class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2"
>
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
<img src="img/3.4.png" class="img-fluid" />
</div>
</div>
@@ -126,26 +113,26 @@
</div>
<script>
$(function () {
"use strict";
$(".wrap-course-content").addClass("fake");
'use strict';
$('.wrap-course-content').addClass('fake');
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = "Drag_Drop.xlsx";
const urlExcelFile = 'Drag_Drop.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var workbook = XLSX.read(data, { type: 'array' });
var result = {};
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
@@ -160,10 +147,10 @@
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion")) {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === "opcion_c",
correct: key === 'opcion_c',
});
}
});
@@ -186,10 +173,10 @@
}
function CreateDragAndDrop() {
$(".content-enfermedad").each(function (index) {
$('.content-enfermedad').each(function (index) {
if (questions && questions[index]) {
const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
$(dropDiv).insertBefore($(this).find(".card"));
$(dropDiv).insertBefore($(this).find('.card'));
}
});
@@ -204,18 +191,18 @@
allOptions = shuffleArray(allOptions);
allOptions.forEach((option) => {
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 rounded-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$("#content-drags").append(dragDiv);
$('#content-drags').append(dragDiv);
});
}
function initializeDragAndDrop() {
$(".card-drag").draggable({
revert: "invalid",
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
/* containment: "#drag-drop-activity", */
cursor: "grabbing",
cursor: 'grabbing',
start: function (event, ui) {
$(this).css("z-index", 1000);
$(this).css('z-index', 1000);
ui.position.left = 0;
ui.position.top = 0;
},
@@ -228,52 +215,51 @@
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css("z-index", 1);
$(this).css('z-index', 1);
},
});
$(".drop-card").droppable({
accept: ".card-drag",
tolerance: "pointer",
$('.drop-card').droppable({
accept: '.card-drag',
tolerance: 'pointer',
drop: function (event, ui) {
const dragData = ui.helper.data("drag");
const dropData = $(this).data("drop");
const dragData = ui.helper.data('drag');
const dropData = $(this).data('drop');
if (dragData == dropData) {
good.play();
ui.helper.css({ position: "static", top: "auto", left: "auto" }).appendTo(this);
ui.helper.draggable("disable");
$(this).droppable("disable");
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable('disable');
$(this).droppable('disable');
// Verificar si todos están completados
if ($(".drop-card:not(.ui-droppable-disabled)").length === 0) {
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
Completed();
}
} else {
bad.play();
ui.helper.draggable("option", "revert", true);
ui.helper.draggable('option', 'revert', true);
}
},
});
}
function Completed() {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById("wrap-course-content"),
target: document.getElementById('wrap-course-content'),
customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4",
confirmButton:
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didOpen: () => {},
didClose: () => {
CourseNav.audioController.stopAudio();
@@ -288,7 +274,7 @@
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
const hojaDatos = data['DragAndDrop'];
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
@@ -298,14 +284,14 @@
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto
function igualarAlturaBgCustomTransparent() {
var maxHeight = 0;
$(".bg-custom-transparent").each(function () {
$(this).css("height", "auto"); // Resetear altura para medir correctamente
$('.bg-custom-transparent').each(function () {
$(this).css('height', 'auto'); // Resetear altura para medir correctamente
var h = $(this).outerHeight();
if (h > maxHeight) maxHeight = h;
});
$(".bg-custom-transparent").css("height", maxHeight + "px");
$('.bg-custom-transparent').css('height', maxHeight + 'px');
}
$(window).on("resize", igualarAlturaBgCustomTransparent);
$(window).on('resize', igualarAlturaBgCustomTransparent);
igualarAlturaBgCustomTransparent();
});
</script>
contenido/04.html
+52 -80
View File
@@ -17,11 +17,7 @@
.bg-custom-transparent {
background: rgba(242, 232, 222, 0.76);
background: linear-gradient(
to bottom,
rgba(242, 232, 222, 0.6) 0%,
rgba(240, 244, 242, 0.9) 100%
);
background: linear-gradient(to bottom, rgba(242, 232, 222, 0.6) 0%, rgba(240, 244, 242, 0.9) 100%);
}
/* .bg-custom-transparent img {
@@ -78,11 +74,7 @@
</style>
<div class="page-sco py-2 py-md-4 h-100">
<div class="container h-100">
<div
id="drag-drop-activity"
class="row justify-content-center align-items-center h-100"
style="overflow: hidden"
>
<div id="drag-drop-activity" class="row justify-content-center align-items-center h-100" style="overflow: hidden">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-10 mb-2">
@@ -93,10 +85,7 @@
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3" />
<p class="mb-0">
<strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que
les corresponda en las imágenes.
</p>
<p class="mb-0"><strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que les corresponda en las imágenes.</p>
</div>
</div>
</div>
@@ -106,60 +95,44 @@
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.1.png" class="img-fluid" />
</div>
<div
class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">1</div>
<div class="option w-100"></div>
</div>
</div>
</div>
<div class="content-enfermedad text-center">
<div
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.2.png" class="img-fluid" />
</div>
<div
class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">2</div>
<div class="option w-100"></div>
</div>
</div>
</div>
<div class="content-enfermedad text-center">
<div
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.3.png" class="img-fluid" />
</div>
<div
class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">3</div>
<div class="option w-100"></div>
</div>
</div>
</div>
<div class="content-enfermedad text-center">
<div
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.4.png" class="img-fluid" />
</div>
<div
class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">4</div>
<div class="option w-100"></div>
</div>
@@ -197,26 +170,26 @@
</div>
<script>
$(function () {
"use strict";
$(".wrap-course-content").addClass("fake");
'use strict';
$('.wrap-course-content').addClass('fake');
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = "Drag_Drop2.xlsx";
const urlExcelFile = 'Drag_Drop2.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var workbook = XLSX.read(data, { type: 'array' });
var result = {};
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
@@ -231,10 +204,10 @@
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion")) {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === "opcion_c",
text: String(fila[key]).trim(),
correct: key === 'opcion_c',
});
}
});
@@ -257,10 +230,10 @@
}
function CreateDragAndDrop() {
$(".content-enfermedad").each(function (index) {
$('.content-enfermedad').each(function (index) {
if (questions && questions[index]) {
const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
$(this).find(".option").append(dropDiv);
$(this).find('.option').append(dropDiv);
}
});
@@ -274,19 +247,19 @@
allOptions = shuffleArray(allOptions);
allOptions.forEach((option) => {
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$("#content-drags").append(dragDiv);
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}"><p class="mb-0">${option.text}</p></div>`;
$('#content-drags').append(dragDiv);
});
}
function initializeDragAndDrop() {
$(".card-drag").draggable({
revert: "invalid",
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
/* containment: "#drag-drop-activity", */
cursor: "grabbing",
cursor: 'grabbing',
start: function (event, ui) {
$(this).css("z-index", 1000);
$(this).css('z-index', 1000);
ui.position.left = 0;
ui.position.top = 0;
},
@@ -299,52 +272,51 @@
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css("z-index", 1);
$(this).css('z-index', 1);
},
});
$(".drop-card").droppable({
accept: ".card-drag",
tolerance: "pointer",
$('.drop-card').droppable({
accept: '.card-drag',
tolerance: 'pointer',
drop: function (event, ui) {
const dragData = ui.helper.data("drag");
const dropData = $(this).data("drop");
const dragData = ui.helper.data('drag');
const dropData = $(this).data('drop');
if (dragData == dropData) {
good.play();
ui.helper.css({ position: "static", top: "auto", left: "auto" }).appendTo(this);
ui.helper.draggable("disable");
$(this).droppable("disable");
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable('disable');
$(this).droppable('disable');
// Verificar si todos están completados
if ($(".drop-card:not(.ui-droppable-disabled)").length === 0) {
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
Completed();
}
} else {
bad.play();
ui.helper.draggable("option", "revert", true);
ui.helper.draggable('option', 'revert', true);
}
},
});
}
function Completed() {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById("wrap-course-content"),
target: document.getElementById('wrap-course-content'),
customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4",
confirmButton:
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didOpen: () => {},
didClose: () => {
CourseNav.audioController.stopAudio();
@@ -359,7 +331,7 @@
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
const hojaDatos = data['DragAndDrop'];
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
@@ -369,12 +341,12 @@
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto
function igualarAlturaBgCustomTransparent() {
var maxHeight = 0;
$(".bg-custom-transparent").each(function () {
$(this).css("height", "auto"); // Resetear altura para medir correctamente
$('.bg-custom-transparent').each(function () {
$(this).css('height', 'auto'); // Resetear altura para medir correctamente
var h = $(this).outerHeight();
if (h > maxHeight) maxHeight = h;
});
$(".bg-custom-transparent").css("height", maxHeight + "px");
$('.bg-custom-transparent').css('height', maxHeight + 'px');
}
/* $(window).on('resize', igualarAlturaBgCustomTransparent);
contenido/05.html
+37 -38
View File
@@ -13,8 +13,8 @@
.drop-card {
border: 3px dashed var(--bs-primary);
width: 56px;
height: 56px;
width: 80px;
height: 80px;
}
/* .content-enfermedad {
@@ -27,8 +27,8 @@
.card-drag {
cursor: grab;
width: 50px;
height: 50px;
width: 75px;
height: 75px;
}
.card-drag img {
@@ -47,20 +47,20 @@
max-width: 40%;
}
</style>
<div class='page-sco py-2 py-md-4 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100' style="overflow: hidden;">
<div class='col-12'>
<div id="drag-drop-activity" class='row justify-content-center'>
<div class="page-sco py-2 py-md-4 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100" style="overflow: hidden">
<div class="col-12">
<div id="drag-drop-activity" class="row justify-content-center">
<div class="col-11">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3>
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?<sup class="fw-bold">1,2,4,5</sup></h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
<!-- <h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3> -->
</div>
<div class="col-12 mb-3">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<img src="img/2.1.png" class="img-fluid mx-3" />
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un color que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución que les corresponde.</p>
</div>
</div>
@@ -73,22 +73,22 @@
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.1a.png" class="img-fluid">
<img src="img/5.1a.png" class="img-fluid" />
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.2a.png" class="img-fluid">
<img src="img/5.2a.png" class="img-fluid" />
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.3a.png" class="img-fluid">
<img src="img/5.3a.png" class="img-fluid" />
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.4a.png" class="img-fluid">
<img src="img/5.4a.png" class="img-fluid" />
</div>
</div>
</div>
@@ -102,8 +102,8 @@
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
<div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid" />
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
@@ -136,9 +136,9 @@
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var workbook = XLSX.read(data, { type: 'array' });
var result = {};
workbook.SheetNames.forEach(sheetName => {
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
@@ -148,13 +148,13 @@
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach(key => {
Object.keys(fila).forEach((key) => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
correct: key === 'opcion_c',
});
}
});
@@ -162,7 +162,7 @@
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
};
});
return preguntas;
@@ -187,13 +187,13 @@
// Crear todas las respuestas en #content-drags
let allOptions = [];
questions.forEach((question, index) => {
question.opciones.forEach(opcion => {
question.opciones.forEach((opcion) => {
allOptions.push({ text: opcion.text, index: index });
});
});
allOptions = shuffleArray(allOptions);
allOptions.forEach(option => {
allOptions.forEach((option) => {
const dragDiv = `<div class="card card-drag bg-transparent border border-2 border-secondary rounded-0 shadow-none text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$('#content-drags').append(dragDiv);
});
@@ -203,7 +203,7 @@
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
cursor: "grabbing",
cursor: 'grabbing',
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
@@ -220,7 +220,7 @@
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
},
});
$('.drop-card').droppable({
@@ -244,28 +244,27 @@
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
},
});
}
function Completed() {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById('wrap-course-content'),
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didOpen: () => {},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
@@ -279,7 +278,7 @@
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
const hojaDatos = data['DragAndDrop'];
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
contenido/06.html
+19 -20
View File
@@ -15,19 +15,19 @@
width: 23%;
}
</style>
<div class='page-sco py-2 py-md-4 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="page-sco py-2 py-md-4 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-11 mb-2">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?<sup class="fw-bold">1,2,4,6</sup></h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
<div class="col-9 mb-3">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<img src="img/2.1.png" class="img-fluid mx-3" />
<p class="mb-0"><strong>Instrucciones:</strong> Arrastra los pasos del recambio para colocarlos en el orden correcto.</p>
</div>
</div>
@@ -47,8 +47,8 @@
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
<div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid" />
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
@@ -63,7 +63,7 @@
</div>
<script>
$(function () {
"use strict";
'use strict';
$('.wrap-course-content').addClass('fake');
// Función para mezclar array (algoritmo Fisher-Yates)
@@ -141,30 +141,29 @@
containment: '#activity1',
cursor: 'grabbing',
tolerance: 'pointer',
helper: "clone",
helper: 'clone',
cursorAt: { top: 50, left: 50 },
cancel: '.locked',
update: function (event, ui) {
// updateCardNumbers();
if (checkOrder()) {
$('#sortable-cards').sortable('disable');
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById('wrap-course-content'),
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didOpen: () => {},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
@@ -199,7 +198,7 @@
},
stop: function (event, ui) {
ui.item.removeClass('ui-sortable-helper');
}
},
});
// Hacer las tarjetas arrastrables
contenido/07.html
+51 -82
View File
@@ -133,9 +133,7 @@
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/3.1.png" class="img-fluid mx-3" />
<p class="mb-0">
<strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las
oraciones que se presentan acerca de los tipos de diálisis y determina si son
falsas o verdaderas.
<strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas.
<!-- para llenar el medidor de salud del paciente. -->
</p>
</div>
@@ -144,9 +142,7 @@
<div id="actividad-objects" class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-12 text-center mb-5">
<div
class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3"
>
<div class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/07.7.png" class="img-fluid" />
<div class="termometro p-1">
<div id="#med0" class="med_style"></div>
@@ -155,10 +151,7 @@
<div id="#med3" class="med_style"></div>
<div id="#med4" class="med_style"></div>
<div id="#med5" class="med_style"></div>
<div
id="indicador"
class="indicador-med d-flex flex-row justify-content-center align-items-center"
>
<div id="indicador" class="indicador-med d-flex flex-row justify-content-center align-items-center">
<img src="img/07.5.png" class="img-fluid" />
</div>
</div>
@@ -167,34 +160,19 @@
</div>
<div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<div
class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
data-obj="0"
>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
<img src="img/07.4.png" class="img-fluid" />
</div>
<div
class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
data-obj="1"
>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
<img src="img/07.3.png" class="img-fluid" />
</div>
<div
class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
data-obj="2"
>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
<img src="img/07.2.png" class="img-fluid" />
</div>
<div
class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
data-obj="3"
>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
<img src="img/07.1.png" class="img-fluid" style="max-width: 223px" />
</div>
<div
class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
data-obj="4"
>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
<img src="img/07.0.png" class="img-fluid" />
</div>
</div>
@@ -212,10 +190,7 @@
<div class="row justify-content-center align-items-center">
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
<div class="col-12">
<div
id="txt-answers"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
<div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
</div>
</div>
</div>
@@ -238,8 +213,8 @@
</div>
<script>
$(function () {
"use strict";
$(".wrap-course-content").addClass("fake");
'use strict';
$('.wrap-course-content').addClass('fake');
let questions;
let currentQuestionIndex = 0;
@@ -247,19 +222,19 @@
let correctQuestions = 0;
let currentObjectBtn;
let isCorrectAnswer = false;
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = "Actividades_Rotafolio_Vantive.xlsx";
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var workbook = XLSX.read(data, { type: 'array' });
var result = {};
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
@@ -274,22 +249,18 @@
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion")) {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === "opcion_c",
text: String(fila[key]).trim(),
correct: key === 'opcion_c',
});
}
});
return {
pregunta: fila.pregunta.trim(),
pregunta: String(fila.pregunta).trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta
? fila.retroalimentacion_correcta.trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '',
};
});
return preguntas;
@@ -305,13 +276,13 @@
// Cargar preguntas al inicio
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 7"];
const hojaDatos = data['Diapositiva 7'];
questions = procesarPreguntas(hojaDatos);
});
$(".object-btn").click(function (e) {
$('.object-btn').click(function (e) {
e.preventDefault();
if ($(this).hasClass("disabled")) return;
if ($(this).hasClass('disabled')) return;
CourseNav.soundClick();
currentObjectBtn = $(this);
if (questions && questions.length > 0) {
@@ -324,29 +295,28 @@
currentQuestion = questions[currentQuestionIndex];
currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
const html = $("#pops-questions").html();
const html = $('#pops-questions').html();
Swal.fire({
html: html,
target: document.getElementById("wrap-course-content"),
target: document.getElementById('wrap-course-content'),
customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4",
confirmButton:
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "45em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '45em',
didOpen: () => {
displayQuestion();
},
didClose: () => {
CourseNav.audioController.stopAudio();
if (currentObjectBtn) {
currentObjectBtn.addClass("completed disabled");
currentObjectBtn.addClass('completed disabled');
checkAllCompleted();
}
},
@@ -355,15 +325,15 @@
function displayQuestion() {
const contentSwal = $(Swal.getHtmlContainer());
const txtPregunta = contentSwal.find("#txt-question");
const txtAnswers = contentSwal.find("#txt-answers");
const txtPregunta = contentSwal.find('#txt-question');
const txtAnswers = contentSwal.find('#txt-answers');
txtPregunta.html(currentQuestion.pregunta);
// Aleatorizar respuestas
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
let answersHtml = "";
let answersHtml = '';
shuffledOpciones.forEach((opcion, index) => {
answersHtml += `<div class="btn-answer text-white p-2 px-3" data-correct="${opcion.correct}">${opcion.text}</div>`;
});
@@ -371,9 +341,9 @@
txtAnswers.html(answersHtml);
// Event listener para respuestas
contentSwal.find(".btn-answer").click(function () {
isCorrectAnswer = $(this).data("correct");
$(this).addClass("selected");
contentSwal.find('.btn-answer').click(function () {
isCorrectAnswer = $(this).data('correct');
$(this).addClass('selected');
if (isCorrectAnswer) {
good.play();
correctQuestions++;
@@ -386,33 +356,32 @@
}
function moveIndicator() {
const positions = ["left: 90px", "left: 170px", "left: 250px", "left: 330px", "left: 410px"];
const positions = ['left: 90px', 'left: 170px', 'left: 250px', 'left: 330px', 'left: 410px'];
if (correctQuestions <= 5) {
$("#indicador").attr("style", positions[correctQuestions - 1]);
$('#indicador').attr('style', positions[correctQuestions - 1]);
}
}
function checkAllCompleted() {
const totalButtons = $(".object-btn").length;
const completedButtons = $(".object-btn.completed").length;
const totalButtons = $('.object-btn').length;
const completedButtons = $('.object-btn.completed').length;
if (totalButtons === completedButtons) {
setTimeout(() => {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById("wrap-course-content"),
target: document.getElementById('wrap-course-content'),
customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4",
confirmButton:
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didClose: () => {
CourseNav.setSlideVisited();
},
contenido/08.html
+1 -1
View File
@@ -173,7 +173,7 @@
<h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
<p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia<sup class="fw-bold">2,7,8</sup>.</p>
</div>
</div>
</div>
contenido/10.html
+9 -9
View File
@@ -17,19 +17,19 @@
width: 60%;
}
</style>
<div class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12 ps-0'>
<div class='row justify-content-center align-items-center'>
<div class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 ps-0">
<div class="row justify-content-center align-items-center">
<div class="col-5 animate__animated animate__lightSpeedInLeft">
<div class="card card-style bg-verde-oscuro ps-5 pr-3 py-3 border-0 text-center">
<h2 class="text-white fw-bold">¿Qué es un catéter?</h2>
<hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0">
<h2 class="text-white fw-bold">¿Qué es un catéter<sup>1,4,8,9</sup>?</h2>
<hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0" />
</div>
</div>
<div class="col-7 text-center animate__animated animate__zoomIn">
<img src="img/10.0.png" class="img-fluid">
<img src="img/10.0.png" class="img-fluid" />
</div>
</div>
</div>
@@ -38,7 +38,7 @@
</div>
<script>
$(function () {
"use strict";
'use strict';
$('.wrap-course-content').addClass('fake');
CourseNav.setSlideVisited();
});
contenido/12.html
+31 -31
View File
@@ -28,19 +28,19 @@
font-weight: bold;
}
</style>
<div class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-10 mb-2">
<h2 class="text-center fw-bold text-primary">Cuidados del sitio de salida y complicaciones</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
<div class="col-10 px-0 mb-1 col-instrucciones">
<div class="card bg-lila-claro border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/12.3.png" class="img-fluid mx-3">
<img src="img/12.3.png" class="img-fluid mx-3" />
<p class="mb-0 text-white text-start">Lee lo que opinan dos doctores sobre los cuidados del sitio de salida y las complicaciones que pueden surgir si no se hacen correctamente. Analiza cuidadosamente sus argumentos y elige quién tiene la razón.</p>
</div>
</div>
@@ -63,8 +63,8 @@
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
<div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid" />
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
@@ -79,12 +79,12 @@
</div>
<script>
$(function () {
"use strict";
'use strict';
$('.wrap-course-content').addClass('fake');
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const imgPerso = ['img/12.0.png','img/12.1.png'];
const imgPerso = ['img/12.0.png', 'img/12.1.png'];
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
let versusData;
let currentQuestionIndex = 0;
@@ -96,9 +96,9 @@
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var workbook = XLSX.read(data, { type: 'array' });
var result = {};
workbook.SheetNames.forEach(sheetName => {
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
@@ -116,10 +116,10 @@
}
function procesarPreguntas(data) {
return data.map(fila => ({
return data.map((fila) => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
opcion: fila.opcion ? String(fila.opcion).trim() : '',
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : ''
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : '',
}));
}
@@ -129,7 +129,7 @@
for (let i = 0; i < total; i++) {
const circle = $('<div class="indicator-circle"></div>');
circle.css({
'background-color': i === 0 ? '#2196F3' : '#E0E0E0'
'background-color': i === 0 ? '#2196F3' : '#E0E0E0',
});
circle.attr('data-index', i);
container.append(circle);
@@ -137,13 +137,13 @@
}
function updateIndicators() {
$('.indicator-circle').each(function(index) {
$('.indicator-circle').each(function (index) {
const $this = $(this);
if (index < currentQuestionIndex) {
$this.empty();
const img = $('<img>').attr({
'src': 'img/11.check.png',
'style': 'width: 100%; height: 100%;'
src: 'img/11.check.png',
style: 'width: 100%; height: 100%;',
});
$this.append(img);
} else if (index === currentQuestionIndex) {
@@ -177,14 +177,14 @@
<div class="btn-respuesta" data-correct="${leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ''}</div>
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${leftResponse || ''}</p></div>
</div>
</div>
<img src="img/12.2.png" class="img-fluid mx-2">
<div class="btn-respuesta" data-correct="${!leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ''}</div>
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${rightResponse || ''}</p></div>
</div>
</div>
`;
@@ -196,7 +196,7 @@
container.removeClass('animate__animated animate__zoomIn');
}, 1000);
$('.btn-respuesta').click(function() {
$('.btn-respuesta').click(function () {
const isCorrect = $(this).data('correct');
if (isCorrect) {
@@ -235,31 +235,31 @@
function checkAllCompleted() {
setTimeout(() => {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById('wrap-course-content'),
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didClose: () => {
CourseNav.setSlideVisited();
$(".card-container2").addClass('disabled');
}
$('.card-container2').addClass('disabled');
},
});
}, 250);
}
// Cargar datos del Excel
readExcelFile(urlExcelFile, function(data) {
const hojaDatos = data["Diapositiva 14"];
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data['Diapositiva 14'];
versusData = procesarPreguntas(hojaDatos);
console.log('Datos cargados:', versusData);
createIndicators(versusData.length);
contenido/13.html
+15 -13
View File
@@ -11,19 +11,21 @@
}
.card-style {
background-color: rgba(182, 143, 178, .31);
background-color: rgba(182, 143, 178, 0.31);
}
</style>
<div class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12 px-0'>
<div class='row justify-content-center'>
<div class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 px-0">
<div class="row justify-content-center">
<div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center">
<div class="position-relative d-inline-block">
<h2 class="text-center fw-bold text-primary">Lavado de manos de acuerdo con la técnica de la <br> OMS y uso correcto de
cubrebocas</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<h2 class="text-center fw-bold text-primary">
Lavado de manos de acuerdo con la técnica de la <br />
OMS y uso correcto de cubrebocas<sup class="fw-bold">12</sup>
</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
</div>
<div class="col-12 px-0">
@@ -32,13 +34,13 @@
<div class="col-10">
<div class="row justify-content-center align-items-center">
<div class="col-4 text-center animate__animated animate__flipInX">
<img src="img/13.0.png" class="img-fluid">
<img src="img/13.0.png" class="img-fluid" />
</div>
<div class="col-4 text-center animate__animated animate__zoomIn animate__delay-1s">
<img src="img/13.1.png" class="img-fluid">
<img src="img/13.1.png" class="img-fluid" />
</div>
<div class="col-4 text-center animate__animated animate__rotateInDownRight animate__delay-2s">
<img src="img/13.2.png" class="img-fluid">
<img src="img/13.2.png" class="img-fluid" />
</div>
</div>
</div>
@@ -52,7 +54,7 @@
</div>
<script>
$(function () {
"use strict";
'use strict';
$('.wrap-course-content').addClass('fake');
CourseNav.setSlideVisited();
});
contenido/14.html
+26 -29
View File
@@ -47,7 +47,7 @@
<div class="position-relative d-inline-block">
<h2 class="text-center fw-bold text-primary">
Técnica correcta para higiene de manos <br />
de acuerdo con la técnica de la OMS
de acuerdo con la técnica de la OMS<sup class="fw-bold">12</sup>
</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
@@ -56,9 +56,7 @@
<div class="card bg-lila-rosa border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/14.12.png" class="img-fluid mx-3" />
<p class="mb-0 text-start">
Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.
</p>
<p class="mb-0 text-start">Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.</p>
</div>
</div>
</div>
@@ -130,11 +128,11 @@
</div>
<script>
$(function () {
"use strict";
$(".wrap-course-content").addClass("fake");
'use strict';
$('.wrap-course-content').addClass('fake');
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
@@ -145,22 +143,22 @@
}
// Shuffle elements
const $sortables = $(".img-sotable");
const $sortables = $('.img-sotable');
const shuffled = shuffleArray($sortables.toArray());
$(".custom-grid").empty().append(shuffled);
$('.custom-grid').empty().append(shuffled);
// Initialize sortable
$(".custom-grid").sortable({
items: ".img-sotable",
containment: ".wrap-course-content",
cursor: "grabbing",
tolerance: "pointer",
$('.custom-grid').sortable({
items: '.img-sotable',
containment: '.wrap-course-content',
cursor: 'grabbing',
tolerance: 'pointer',
forceHelperSize: true,
forcePlaceholderSize: true,
placeholder: "sortable-placeholder",
placeholder: 'sortable-placeholder',
distance: 5,
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 mouseX = event.pageX;
var mouseY = event.pageY;
ui.helper.css({
@@ -174,11 +172,11 @@
});
function checkOrder() {
const $items = $(".custom-grid .img-sotable");
const $items = $('.custom-grid .img-sotable');
let isCorrect = true;
$items.each(function (index) {
if (parseInt($(this).data("order")) !== index) {
if (parseInt($(this).data('order')) !== index) {
isCorrect = false;
return false;
}
@@ -186,31 +184,30 @@
if (isCorrect) {
good.play();
$(".custom-grid").sortable("disable");
$('.custom-grid').sortable('disable');
checkAllCompleted();
}
}
function checkAllCompleted() {
setTimeout(() => {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById("wrap-course-content"),
target: document.getElementById('wrap-course-content'),
customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4",
confirmButton:
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didClose: () => {
CourseNav.setSlideVisited();
$(".img-sotable").addClass("disabled");
$('.img-sotable').addClass('disabled');
},
});
}, 250);
contenido/16.html
+34 -31
View File
@@ -18,7 +18,7 @@
.btn-answer {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.letter {
@@ -58,11 +58,11 @@
transition: all 0.5s ease;
}
</style>
<div class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-10 mb-2 animate__animated animate__bounceInDown">
<h2 class="text-center fw-bold text-primary">Control de líquidos</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
@@ -71,8 +71,7 @@
<div class="card bg-inst border-0 my-2 rounded-0 bg-custom ps-4 pe-3 py-2 text-center">
<div class="d-flex justify-content-center align-items-center flex-row gap-2">
<img src="img/3.1.png" class="img-fluid mx-3" />
<p class="mb-0 text-start"><strong>Instrucciones:</strong> Lee cada una de las preguntas acerca del control de líquidos y contesta correctamente. Por cada acierto obtendrás una
pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
<p class="mb-0 text-start"><strong>Instrucciones:</strong> Lee cada una de las preguntas acerca del control de líquidos y contesta correctamente. Por cada acierto obtendrás una pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
</div>
</div>
</div>
@@ -82,7 +81,7 @@
<div id="svg-container"></div>
</div>
<div class="col-7 col-actividad">
<div id="card-content-quiz-rompecabezas" class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn" style="box-shadow: 0 0 12px rgba(0,0,0,.5);">
<div id="card-content-quiz-rompecabezas" class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn" style="box-shadow: 0 0 12px rgba(0, 0, 0, 0.5)">
<div class="row justify-content-center">
<div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
<div class="col-12 content-answers"></div>
@@ -99,8 +98,8 @@
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
<div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid" />
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
@@ -115,7 +114,7 @@
</div>
<script>
$(function () {
"use strict";
'use strict';
$('.wrap-course-content').addClass('fake');
let questions;
let currentQuestionIndex = 0;
@@ -125,7 +124,9 @@
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
function loadSVG() {
$.get('img/puzzle.svg', function (data) {
$.get(
'img/puzzle.svg',
function (data) {
var svg = $(data).find('svg');
$('#svg-container').html(svg);
// Remove width and height attributes to make SVG responsive
@@ -133,7 +134,9 @@
// Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
svg.find('[id^="pz"]').hide().addClass('piece-puzzle');
}, 'xml');
},
'xml',
);
}
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
@@ -145,9 +148,9 @@
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var workbook = XLSX.read(data, { type: 'array' });
var result = {};
workbook.SheetNames.forEach(sheetName => {
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
@@ -157,21 +160,21 @@
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach(key => {
Object.keys(fila).forEach((key) => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
text: String(fila[key]).trim(),
correct: key === 'opcion_c',
});
}
});
return {
pregunta: fila.pregunta.trim(),
pregunta: String(fila.pregunta).trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
};
});
return preguntas;
@@ -188,7 +191,7 @@
function displayQuestion() {
if (currentQuestionIndex < questions.length) {
currentQuestion = questions[currentQuestionIndex];
$('.txt-question').text(currentQuestion.pregunta);
$('.txt-question').html(currentQuestion.pregunta);
$('.content-answers').empty();
@@ -208,7 +211,7 @@
}
function initializeAnswers() {
$('#card-content-quiz-rompecabezas').on('click', '.btn-answer', function() {
$('#card-content-quiz-rompecabezas').on('click', '.btn-answer', function () {
const isCorrect = $(this).data('correct');
if (isCorrect) {
@@ -241,29 +244,29 @@
function checkAllCompleted() {
setTimeout(() => {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById('wrap-course-content'),
customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didClose: () => {
CourseNav.setSlideVisited();
}
},
});
}, 250);
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 17"];
const hojaDatos = data['Diapositiva 17'];
questions = shuffleArray(procesarPreguntas(hojaDatos));
loadSVG();
displayQuestion();
contenido/20.html
+62
View File
@@ -0,0 +1,62 @@
<style>
.fake {
background-image: url(img/bg05.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
ol > li {
margin-bottom: 0.6rem;
}
</style>
<div class="page-sco h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center align-content-center">
<div class="col-12">
<h1 class="fw-bold text-primary text-center">Referencias</h1>
<ol class="mb-0">
<li>International Society for Peritoneal Dialysis (ISPD). Peritoneal dialysis-related definitions and description of technique. Perit Dial Int. 2020;40(3):244–253.</li>
<li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
<li>National Kidney Foundation. Hemodialysis. Am J Kidney Dis. 2015;66(5):884–930.</li>
<li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for the evaluation and management of chronic kidney disease. Kidney Int. 2024;105(Suppl 4):S1–S150.</li>
<li>Blake PG, Jain AK. Icodextrin as an osmotic agent in peritoneal dialysis. Kidney Int. 2002;62(Suppl 81):S38–S44.</li>
<li>Kidney Disease: Improving Global Outcomes (KDIGO). Krediet RT. The peritoneal membrane in peritoneal dialysis: physiology and pathophysiology. Nat Rev Nephrol. 2014;10(7):366–374.</li>
<li>Kidney Disease: Improving Global Outcomes (KDIGO). World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
<li>International Society for Peritoneal Dialysis (ISPD). Catheter-related infection recommendations: 2023 update. Perit Dial Int. 2023;43(1):1–21.</li>
<li>Crabtree JH. Selected best demonstrated practices in peritoneal dialysis access. Kidney Int Suppl. 2006;(103):S27–S37</li>
<li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
<li>International Society for Peritoneal Dialysis (ISPD). Peritonitis recommendations: 2022 update. Perit Dial Int. 2022;42(2):110–153.</li>
<li>World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
<li>National Kidney Foundation. KDOQI Clinical Practice Guideline for Nutrition in CKD. Am J Kidney Dis. 2020;76(3 Suppl 1):S1–S107.</li>
<li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for anemia in chronic kidney disease. Kidney Int Suppl. 2021;11(4):1–115.</li>
<li>idney Disease: Improving Global Outcomes (KDIGO). CKD–Mineral and Bone Disorder guideline. Kidney Int Suppl. 2017;7(1):1–59.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
'use strict';
$('.wrap-course-content').addClass('fake');
gsap.from('ol > li', {
y: 40,
opacity: 0,
duration: 0.5,
stagger: 0.08,
ease: 'power2.out',
});
CourseNav.setSlideVisited();
CourseNav.setLessonStatus('completed');
CourseNav.save();
});
</script>
img/10.0.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 276 KiB

After

Width:  |  Height:  |  Size: 283 KiB

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

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

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

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

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

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 111 KiB

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

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

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

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 99 KiB

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

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

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

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

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

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 55 KiB

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

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 39 KiB

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

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

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

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 28 KiB

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

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 73 KiB

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

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

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

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 62 KiB

img/bg00.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 20 KiB

img/w-xx1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 11 KiB