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", "title": "Despedida",
"content": "contenido/19.html" "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; background-size: 100% auto;
} }
</style> </style>
<div class='page-sco py-2 py-md-4 h-100'> <div class="page-sco py-2 py-md-4 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 w-container'> <div class="col-12 w-container">
<div class='row justify-content-center'> <div class="row justify-content-center">
<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-8"> <div class="col-8">
<h1 class="text-white fw-bold">INDUCCIÓN AL PROGRAMA DE <br> DIÁLISIS PERITONEAL<span <h1 class="text-primary fw-bold">
class="fw-bold text-verde-ceniza">>>></span></h1> INDUCCIÓN AL PROGRAMA DE
<p class="text-white">Pioneros en el cuidado de la enfermedad renal crónica</p> <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>
<div class="col-4"> <div class="col-4">
<img src="img/0.1.png" class="img-fluid" alt="" /> <img src="img/0.1.png" class="img-fluid" alt="" />
contenido/03.html
+46 -60
View File
@@ -46,25 +46,18 @@
</style> </style>
<div class="page-sco py-2 py-md-4 h-100"> <div class="page-sco py-2 py-md-4 h-100">
<div class="container h-100"> <div class="container h-100">
<div <div id="drag-drop-activity" class="row justify-content-center align-items-center h-100" style="overflow: hidden">
id="drag-drop-activity"
class="row justify-content-center align-items-center h-100"
style="overflow: hidden"
>
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-10 mb-2"> <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" /> <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div> </div>
<div class="col-12 px-0"> <div class="col-12 px-0">
<div class="card bg-custom border-0 my-2 rounded-0 shadow p-3 text-center"> <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"> <div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/3.1.png" class="img-fluid mx-3" /> <img src="img/3.1.png" class="img-fluid mx-3" />
<p class="mb-0"> <p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que corresponden.</p>
<strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que
corresponden.
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -77,23 +70,17 @@
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0"> <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="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div <div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
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" /> <img src="img/3.2.png" class="img-fluid" />
</div> </div>
</div> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div <div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
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" /> <img src="img/3.3.png" class="img-fluid" />
</div> </div>
</div> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div <div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
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" /> <img src="img/3.4.png" class="img-fluid" />
</div> </div>
</div> </div>
@@ -126,26 +113,26 @@
</div> </div>
<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;
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 = "Drag_Drop.xlsx"; const urlExcelFile = 'Drag_Drop.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];
@@ -160,10 +147,10 @@
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',
}); });
} }
}); });
@@ -186,10 +173,10 @@
} }
function CreateDragAndDrop() { function CreateDragAndDrop() {
$(".content-enfermedad").each(function (index) { $('.content-enfermedad').each(function (index) {
if (questions && questions[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>`; 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 = shuffleArray(allOptions);
allOptions.forEach((option) => { 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>`; 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() { function initializeDragAndDrop() {
$(".card-drag").draggable({ $('.card-drag').draggable({
revert: "invalid", revert: 'invalid',
revertDuration: 300, revertDuration: 300,
/* containment: "#drag-drop-activity", */ /* containment: "#drag-drop-activity", */
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;
}, },
@@ -228,52 +215,51 @@
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-card").droppable({ $('.drop-card').droppable({
accept: ".card-drag", accept: '.card-drag',
tolerance: "pointer", tolerance: 'pointer',
drop: function (event, ui) { drop: function (event, ui) {
const dragData = ui.helper.data("drag"); const dragData = ui.helper.data('drag');
const dropData = $(this).data("drop"); const dropData = $(this).data('drop');
if (dragData == dropData) { if (dragData == dropData) {
good.play(); good.play();
ui.helper.css({ position: "static", top: "auto", left: "auto" }).appendTo(this); ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable("disable"); ui.helper.draggable('disable');
$(this).droppable("disable"); $(this).droppable('disable');
// Verificar si todos están completados // 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(); Completed();
} }
} else { } else {
bad.play(); bad.play();
ui.helper.draggable("option", "revert", true); ui.helper.draggable('option', 'revert', true);
} }
}, },
}); });
} }
function Completed() { function Completed() {
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById("wrap-course-content"), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4", popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
focusConfirm: false, focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didOpen: () => {}, didOpen: () => {},
didClose: () => { didClose: () => {
CourseNav.audioController.stopAudio(); CourseNav.audioController.stopAudio();
@@ -288,7 +274,7 @@
} }
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"]; const hojaDatos = data['DragAndDrop'];
questions = procesarPreguntas(hojaDatos); questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop(); CreateDragAndDrop();
initializeDragAndDrop(); initializeDragAndDrop();
@@ -298,14 +284,14 @@
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto // Ajustar altura de todos los elementos .bg-custom-transparent al más alto
function igualarAlturaBgCustomTransparent() { function igualarAlturaBgCustomTransparent() {
var maxHeight = 0; var maxHeight = 0;
$(".bg-custom-transparent").each(function () { $('.bg-custom-transparent').each(function () {
$(this).css("height", "auto"); // Resetear altura para medir correctamente $(this).css('height', 'auto'); // Resetear altura para medir correctamente
var h = $(this).outerHeight(); var h = $(this).outerHeight();
if (h > maxHeight) maxHeight = h; 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(); igualarAlturaBgCustomTransparent();
}); });
</script> </script>
contenido/04.html
+52 -80
View File
@@ -17,11 +17,7 @@
.bg-custom-transparent { .bg-custom-transparent {
background: rgba(242, 232, 222, 0.76); background: rgba(242, 232, 222, 0.76);
background: linear-gradient( background: linear-gradient(to bottom, rgba(242, 232, 222, 0.6) 0%, rgba(240, 244, 242, 0.9) 100%);
to bottom,
rgba(242, 232, 222, 0.6) 0%,
rgba(240, 244, 242, 0.9) 100%
);
} }
/* .bg-custom-transparent img { /* .bg-custom-transparent img {
@@ -78,11 +74,7 @@
</style> </style>
<div class="page-sco py-2 py-md-4 h-100"> <div class="page-sco py-2 py-md-4 h-100">
<div class="container h-100"> <div class="container h-100">
<div <div id="drag-drop-activity" class="row justify-content-center align-items-center h-100" style="overflow: hidden">
id="drag-drop-activity"
class="row justify-content-center align-items-center h-100"
style="overflow: hidden"
>
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-10 mb-2"> <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="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"> <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"> <p class="mb-0"><strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que les corresponda en las imágenes.</p>
<strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que
les corresponda en las imágenes.
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -106,60 +95,44 @@
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0"> <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="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card-header bg-transparent"> <div class="card-header bg-transparent">
<img src="img/4.1.png" class="img-fluid" /> <img src="img/4.1.png" class="img-fluid" />
</div> </div>
<div <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
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="bg-secondary text-white fw-bold py-2 px-2">1</div>
<div class="option w-100"></div> <div class="option w-100"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card-header bg-transparent"> <div class="card-header bg-transparent">
<img src="img/4.2.png" class="img-fluid" /> <img src="img/4.2.png" class="img-fluid" />
</div> </div>
<div <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
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="bg-secondary text-white fw-bold py-2 px-2">2</div>
<div class="option w-100"></div> <div class="option w-100"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card-header bg-transparent"> <div class="card-header bg-transparent">
<img src="img/4.3.png" class="img-fluid" /> <img src="img/4.3.png" class="img-fluid" />
</div> </div>
<div <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
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="bg-secondary text-white fw-bold py-2 px-2">3</div>
<div class="option w-100"></div> <div class="option w-100"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
>
<div class="card-header bg-transparent"> <div class="card-header bg-transparent">
<img src="img/4.4.png" class="img-fluid" /> <img src="img/4.4.png" class="img-fluid" />
</div> </div>
<div <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
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="bg-secondary text-white fw-bold py-2 px-2">4</div>
<div class="option w-100"></div> <div class="option w-100"></div>
</div> </div>
@@ -197,26 +170,26 @@
</div> </div>
<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;
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 = "Drag_Drop2.xlsx"; const urlExcelFile = 'Drag_Drop2.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];
@@ -231,10 +204,10 @@
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: String(fila[key]).trim(),
correct: key === "opcion_c", correct: key === 'opcion_c',
}); });
} }
}); });
@@ -257,10 +230,10 @@
} }
function CreateDragAndDrop() { function CreateDragAndDrop() {
$(".content-enfermedad").each(function (index) { $('.content-enfermedad').each(function (index) {
if (questions && questions[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>`; 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 = shuffleArray(allOptions);
allOptions.forEach((option) => { 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>`; 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); $('#content-drags').append(dragDiv);
}); });
} }
function initializeDragAndDrop() { function initializeDragAndDrop() {
$(".card-drag").draggable({ $('.card-drag').draggable({
revert: "invalid", revert: 'invalid',
revertDuration: 300, revertDuration: 300,
/* containment: "#drag-drop-activity", */ /* containment: "#drag-drop-activity", */
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;
}, },
@@ -299,52 +272,51 @@
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-card").droppable({ $('.drop-card').droppable({
accept: ".card-drag", accept: '.card-drag',
tolerance: "pointer", tolerance: 'pointer',
drop: function (event, ui) { drop: function (event, ui) {
const dragData = ui.helper.data("drag"); const dragData = ui.helper.data('drag');
const dropData = $(this).data("drop"); const dropData = $(this).data('drop');
if (dragData == dropData) { if (dragData == dropData) {
good.play(); good.play();
ui.helper.css({ position: "static", top: "auto", left: "auto" }).appendTo(this); ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable("disable"); ui.helper.draggable('disable');
$(this).droppable("disable"); $(this).droppable('disable');
// Verificar si todos están completados // 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(); Completed();
} }
} else { } else {
bad.play(); bad.play();
ui.helper.draggable("option", "revert", true); ui.helper.draggable('option', 'revert', true);
} }
}, },
}); });
} }
function Completed() { function Completed() {
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById("wrap-course-content"), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4", popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
focusConfirm: false, focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didOpen: () => {}, didOpen: () => {},
didClose: () => { didClose: () => {
CourseNav.audioController.stopAudio(); CourseNav.audioController.stopAudio();
@@ -359,7 +331,7 @@
} }
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"]; const hojaDatos = data['DragAndDrop'];
questions = procesarPreguntas(hojaDatos); questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop(); CreateDragAndDrop();
initializeDragAndDrop(); initializeDragAndDrop();
@@ -369,12 +341,12 @@
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto // Ajustar altura de todos los elementos .bg-custom-transparent al más alto
function igualarAlturaBgCustomTransparent() { function igualarAlturaBgCustomTransparent() {
var maxHeight = 0; var maxHeight = 0;
$(".bg-custom-transparent").each(function () { $('.bg-custom-transparent').each(function () {
$(this).css("height", "auto"); // Resetear altura para medir correctamente $(this).css('height', 'auto'); // Resetear altura para medir correctamente
var h = $(this).outerHeight(); var h = $(this).outerHeight();
if (h > maxHeight) maxHeight = h; 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);
contenido/05.html
+36 -37
View File
@@ -13,8 +13,8 @@
.drop-card { .drop-card {
border: 3px dashed var(--bs-primary); border: 3px dashed var(--bs-primary);
width: 56px; width: 80px;
height: 56px; height: 80px;
} }
/* .content-enfermedad { /* .content-enfermedad {
@@ -27,8 +27,8 @@
.card-drag { .card-drag {
cursor: grab; cursor: grab;
width: 50px; width: 75px;
height: 50px; height: 75px;
} }
.card-drag img { .card-drag img {
@@ -47,20 +47,20 @@
max-width: 40%; max-width: 40%;
} }
</style> </style>
<div class='page-sco py-2 py-md-4 h-100'> <div class="page-sco py-2 py-md-4 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100' style="overflow: hidden;"> <div class="row justify-content-center align-items-center h-100" style="overflow: hidden">
<div class='col-12'> <div class="col-12">
<div id="drag-drop-activity" class='row justify-content-center'> <div id="drag-drop-activity" class="row justify-content-center">
<div class="col-11"> <div class="col-11">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2> <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"> <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> <!-- <h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3> -->
</div> </div>
<div class="col-12 mb-3"> <div class="col-12 mb-3">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center"> <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"> <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> <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>
</div> </div>
@@ -73,22 +73,22 @@
<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-enfermedad text-center"> <div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3"> <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> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3"> <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> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3"> <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> </div>
<div class="content-enfermedad text-center"> <div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3"> <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> </div>
</div> </div>
@@ -103,7 +103,7 @@
<div id="pop0"> <div id="pop0">
<div class="container-fluid"> <div class="container-fluid">
<div class="w-100 text-center"> <div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid"> <img src="img/3.5.png" class="img-fluid" />
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-2"> <div class="col-12 text-center mb-2">
@@ -136,9 +136,9 @@
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);
}); });
@@ -148,13 +148,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',
}); });
} }
}); });
@@ -162,7 +162,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;
@@ -187,13 +187,13 @@
// Crear todas las respuestas en #content-drags // Crear todas las respuestas en #content-drags
let allOptions = []; let allOptions = [];
questions.forEach((question, index) => { questions.forEach((question, index) => {
question.opciones.forEach(opcion => { question.opciones.forEach((opcion) => {
allOptions.push({ text: opcion.text, index: index }); allOptions.push({ text: opcion.text, index: index });
}); });
}); });
allOptions = shuffleArray(allOptions); 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>`; 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); $('#content-drags').append(dragDiv);
}); });
@@ -203,7 +203,7 @@
$('.card-drag').draggable({ $('.card-drag').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;
@@ -220,7 +220,7 @@
}, },
stop: function (event, ui) { stop: function (event, ui) {
$(this).css('z-index', 1); $(this).css('z-index', 1);
} },
}); });
$('.drop-card').droppable({ $('.drop-card').droppable({
@@ -244,28 +244,27 @@
bad.play(); bad.play();
ui.helper.draggable('option', 'revert', true); ui.helper.draggable('option', 'revert', true);
} }
} },
}); });
} }
function Completed() { function Completed() {
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById('wrap-course-content'), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4', popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
focusConfirm: false, focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didOpen: () => { didOpen: () => {},
},
didClose: () => { didClose: () => {
CourseNav.audioController.stopAudio(); CourseNav.audioController.stopAudio();
//CourseNav.soundClick(); //CourseNav.soundClick();
@@ -279,7 +278,7 @@
} }
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"]; const hojaDatos = data['DragAndDrop'];
questions = procesarPreguntas(hojaDatos); questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop(); CreateDragAndDrop();
initializeDragAndDrop(); initializeDragAndDrop();
contenido/06.html
+18 -19
View File
@@ -15,19 +15,19 @@
width: 23%; width: 23%;
} }
</style> </style>
<div class='page-sco py-2 py-md-4 h-100'> <div class="page-sco py-2 py-md-4 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'> <div class="col-12">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-11 mb-2"> <div class="col-11 mb-2">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2> <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"> <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div> </div>
<div class="col-9 mb-3"> <div class="col-9 mb-3">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center"> <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"> <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> <p class="mb-0"><strong>Instrucciones:</strong> Arrastra los pasos del recambio para colocarlos en el orden correcto.</p>
</div> </div>
</div> </div>
@@ -48,7 +48,7 @@
<div id="pop0"> <div id="pop0">
<div class="container-fluid"> <div class="container-fluid">
<div class="w-100 text-center"> <div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid"> <img src="img/3.5.png" class="img-fluid" />
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-2"> <div class="col-12 text-center mb-2">
@@ -63,7 +63,7 @@
</div> </div>
<script> <script>
$(function () { $(function () {
"use strict"; 'use strict';
$('.wrap-course-content').addClass('fake'); $('.wrap-course-content').addClass('fake');
// Función para mezclar array (algoritmo Fisher-Yates) // Función para mezclar array (algoritmo Fisher-Yates)
@@ -141,30 +141,29 @@
containment: '#activity1', containment: '#activity1',
cursor: 'grabbing', cursor: 'grabbing',
tolerance: 'pointer', tolerance: 'pointer',
helper: "clone", helper: 'clone',
cursorAt: { top: 50, left: 50 }, cursorAt: { top: 50, left: 50 },
cancel: '.locked', cancel: '.locked',
update: function (event, ui) { update: function (event, ui) {
// updateCardNumbers(); // updateCardNumbers();
if (checkOrder()) { if (checkOrder()) {
$('#sortable-cards').sortable('disable'); $('#sortable-cards').sortable('disable');
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById('wrap-course-content'), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4', popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
focusConfirm: false, focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didOpen: () => { didOpen: () => {},
},
didClose: () => { didClose: () => {
CourseNav.audioController.stopAudio(); CourseNav.audioController.stopAudio();
//CourseNav.soundClick(); //CourseNav.soundClick();
@@ -199,7 +198,7 @@
}, },
stop: function (event, ui) { stop: function (event, ui) {
ui.item.removeClass('ui-sortable-helper'); ui.item.removeClass('ui-sortable-helper');
} },
}); });
// Hacer las tarjetas arrastrables // 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"> <div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/3.1.png" class="img-fluid mx-3" /> <img src="img/3.1.png" class="img-fluid mx-3" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las <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.
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. --> <!-- para llenar el medidor de salud del paciente. -->
</p> </p>
</div> </div>
@@ -144,9 +142,7 @@
<div id="actividad-objects" class="col-12"> <div id="actividad-objects" class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 text-center mb-5"> <div class="col-12 text-center mb-5">
<div <div class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3"
>
<img src="img/07.7.png" class="img-fluid" /> <img src="img/07.7.png" class="img-fluid" />
<div class="termometro p-1"> <div class="termometro p-1">
<div id="#med0" class="med_style"></div> <div id="#med0" class="med_style"></div>
@@ -155,10 +151,7 @@
<div id="#med3" class="med_style"></div> <div id="#med3" class="med_style"></div>
<div id="#med4" class="med_style"></div> <div id="#med4" class="med_style"></div>
<div id="#med5" class="med_style"></div> <div id="#med5" class="med_style"></div>
<div <div id="indicador" class="indicador-med d-flex flex-row justify-content-center align-items-center">
id="indicador"
class="indicador-med d-flex flex-row justify-content-center align-items-center"
>
<img src="img/07.5.png" class="img-fluid" /> <img src="img/07.5.png" class="img-fluid" />
</div> </div>
</div> </div>
@@ -167,34 +160,19 @@
</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 <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
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" /> <img src="img/07.4.png" class="img-fluid" />
</div> </div>
<div <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
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" /> <img src="img/07.3.png" class="img-fluid" />
</div> </div>
<div <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
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" /> <img src="img/07.2.png" class="img-fluid" />
</div> </div>
<div <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
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" /> <img src="img/07.1.png" class="img-fluid" style="max-width: 223px" />
</div> </div>
<div <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
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" /> <img src="img/07.0.png" class="img-fluid" />
</div> </div>
</div> </div>
@@ -212,10 +190,7 @@
<div class="row justify-content-center align-items-center"> <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 id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
<div class="col-12"> <div class="col-12">
<div <div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
id="txt-answers"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
</div> </div>
</div> </div>
</div> </div>
@@ -238,8 +213,8 @@
</div> </div>
<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;
@@ -247,19 +222,19 @@
let correctQuestions = 0; let correctQuestions = 0;
let currentObjectBtn; let currentObjectBtn;
let isCorrectAnswer = false; let isCorrectAnswer = false;
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg"); const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound("audio/feedback-correct.mpeg"); const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = "Actividades_Rotafolio_Vantive.xlsx"; const urlExcelFile = 'Actividades_Rotafolio_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];
@@ -274,22 +249,18 @@
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: String(fila[key]).trim(),
correct: key === "opcion_c", correct: key === 'opcion_c',
}); });
} }
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: String(fila.pregunta).trim(),
opciones: opciones, opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
? fila.retroalimentacion_correcta.trim() retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '',
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@@ -305,13 +276,13 @@
// Cargar preguntas al inicio // Cargar preguntas al inicio
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 7"]; const hojaDatos = data['Diapositiva 7'];
questions = procesarPreguntas(hojaDatos); questions = procesarPreguntas(hojaDatos);
}); });
$(".object-btn").click(function (e) { $('.object-btn').click(function (e) {
e.preventDefault(); e.preventDefault();
if ($(this).hasClass("disabled")) return; if ($(this).hasClass('disabled')) return;
CourseNav.soundClick(); CourseNav.soundClick();
currentObjectBtn = $(this); currentObjectBtn = $(this);
if (questions && questions.length > 0) { if (questions && questions.length > 0) {
@@ -324,29 +295,28 @@
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
currentQuestionIndex = (currentQuestionIndex + 1) % questions.length; currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
const html = $("#pops-questions").html(); const html = $('#pops-questions').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById("wrap-course-content"), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4", popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
focusConfirm: false, focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "45em", width: '45em',
didOpen: () => { didOpen: () => {
displayQuestion(); displayQuestion();
}, },
didClose: () => { didClose: () => {
CourseNav.audioController.stopAudio(); CourseNav.audioController.stopAudio();
if (currentObjectBtn) { if (currentObjectBtn) {
currentObjectBtn.addClass("completed disabled"); currentObjectBtn.addClass('completed disabled');
checkAllCompleted(); checkAllCompleted();
} }
}, },
@@ -355,15 +325,15 @@
function displayQuestion() { function displayQuestion() {
const contentSwal = $(Swal.getHtmlContainer()); const contentSwal = $(Swal.getHtmlContainer());
const txtPregunta = contentSwal.find("#txt-question"); const txtPregunta = contentSwal.find('#txt-question');
const txtAnswers = contentSwal.find("#txt-answers"); const txtAnswers = contentSwal.find('#txt-answers');
txtPregunta.html(currentQuestion.pregunta); txtPregunta.html(currentQuestion.pregunta);
// Aleatorizar respuestas // Aleatorizar respuestas
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]); const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
let answersHtml = ""; let answersHtml = '';
shuffledOpciones.forEach((opcion, index) => { shuffledOpciones.forEach((opcion, index) => {
answersHtml += `<div class="btn-answer text-white p-2 px-3" data-correct="${opcion.correct}">${opcion.text}</div>`; 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); txtAnswers.html(answersHtml);
// Event listener para respuestas // Event listener para respuestas
contentSwal.find(".btn-answer").click(function () { contentSwal.find('.btn-answer').click(function () {
isCorrectAnswer = $(this).data("correct"); isCorrectAnswer = $(this).data('correct');
$(this).addClass("selected"); $(this).addClass('selected');
if (isCorrectAnswer) { if (isCorrectAnswer) {
good.play(); good.play();
correctQuestions++; correctQuestions++;
@@ -386,33 +356,32 @@
} }
function moveIndicator() { 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) { if (correctQuestions <= 5) {
$("#indicador").attr("style", positions[correctQuestions - 1]); $('#indicador').attr('style', positions[correctQuestions - 1]);
} }
} }
function checkAllCompleted() { function checkAllCompleted() {
const totalButtons = $(".object-btn").length; const totalButtons = $('.object-btn').length;
const completedButtons = $(".object-btn.completed").length; const completedButtons = $('.object-btn.completed').length;
if (totalButtons === completedButtons) { if (totalButtons === completedButtons) {
setTimeout(() => { setTimeout(() => {
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById("wrap-course-content"), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4", popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didClose: () => { didClose: () => {
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
}, },
contenido/08.html
+1 -1
View File
@@ -173,7 +173,7 @@
<h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3> <h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
</div> </div>
<div class="col-12 text-center"> <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> </div>
</div> </div>
contenido/10.html
+9 -9
View File
@@ -17,19 +17,19 @@
width: 60%; width: 60%;
} }
</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 ps-0'> <div class="col-12 ps-0">
<div class='row justify-content-center align-items-center'> <div class="row justify-content-center align-items-center">
<div class="col-5 animate__animated animate__lightSpeedInLeft"> <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"> <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> <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"> <hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0" />
</div> </div>
</div> </div>
<div class="col-7 text-center animate__animated animate__zoomIn"> <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> </div>
</div> </div>
@@ -38,7 +38,7 @@
</div> </div>
<script> <script>
$(function () { $(function () {
"use strict"; 'use strict';
$('.wrap-course-content').addClass('fake'); $('.wrap-course-content').addClass('fake');
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
}); });
contenido/12.html
+26 -26
View File
@@ -28,19 +28,19 @@
font-weight: bold; font-weight: bold;
} }
</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'> <div class="col-12">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 mb-2"> <div class="col-10 mb-2">
<h2 class="text-center fw-bold text-primary">Cuidados del sitio de salida y complicaciones</h2> <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>
<div class="col-10 px-0 mb-1 col-instrucciones"> <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="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"> <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> <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>
</div> </div>
@@ -64,7 +64,7 @@
<div id="pop0"> <div id="pop0">
<div class="container-fluid"> <div class="container-fluid">
<div class="w-100 text-center"> <div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid"> <img src="img/3.5.png" class="img-fluid" />
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-2"> <div class="col-12 text-center mb-2">
@@ -79,7 +79,7 @@
</div> </div>
<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');
@@ -96,9 +96,9 @@
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);
}); });
@@ -116,10 +116,10 @@
} }
function procesarPreguntas(data) { function procesarPreguntas(data) {
return data.map(fila => ({ return data.map((fila) => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '', pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
opcion: fila.opcion ? String(fila.opcion).trim() : '', opcion: fila.opcion ? String(fila.opcion).trim() : '',
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : '' opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : '',
})); }));
} }
@@ -129,7 +129,7 @@
for (let i = 0; i < total; i++) { for (let i = 0; i < total; i++) {
const circle = $('<div class="indicator-circle"></div>'); const circle = $('<div class="indicator-circle"></div>');
circle.css({ circle.css({
'background-color': i === 0 ? '#2196F3' : '#E0E0E0' 'background-color': i === 0 ? '#2196F3' : '#E0E0E0',
}); });
circle.attr('data-index', i); circle.attr('data-index', i);
container.append(circle); container.append(circle);
@@ -142,8 +142,8 @@
if (index < currentQuestionIndex) { if (index < currentQuestionIndex) {
$this.empty(); $this.empty();
const img = $('<img>').attr({ const img = $('<img>').attr({
'src': 'img/11.check.png', src: 'img/11.check.png',
'style': 'width: 100%; height: 100%;' style: 'width: 100%; height: 100%;',
}); });
$this.append(img); $this.append(img);
} else if (index === currentQuestionIndex) { } else if (index === currentQuestionIndex) {
@@ -177,14 +177,14 @@
<div class="btn-respuesta" data-correct="${leftIsCorrect}"> <div class="btn-respuesta" data-correct="${leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0"> <div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;"> <img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ''}</div> <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${leftResponse || ''}</p></div>
</div> </div>
</div> </div>
<img src="img/12.2.png" class="img-fluid mx-2"> <img src="img/12.2.png" class="img-fluid mx-2">
<div class="btn-respuesta" data-correct="${!leftIsCorrect}"> <div class="btn-respuesta" data-correct="${!leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0"> <div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;"> <img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ''}</div> <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${rightResponse || ''}</p></div>
</div> </div>
</div> </div>
`; `;
@@ -235,31 +235,31 @@
function checkAllCompleted() { function checkAllCompleted() {
setTimeout(() => { setTimeout(() => {
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById('wrap-course-content'), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4', popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didClose: () => { didClose: () => {
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
$(".card-container2").addClass('disabled'); $('.card-container2').addClass('disabled');
} },
}); });
}, 250); }, 250);
} }
// Cargar datos del Excel // Cargar datos del Excel
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 14"]; const hojaDatos = data['Diapositiva 14'];
versusData = procesarPreguntas(hojaDatos); versusData = procesarPreguntas(hojaDatos);
console.log('Datos cargados:', versusData); console.log('Datos cargados:', versusData);
createIndicators(versusData.length); createIndicators(versusData.length);
contenido/13.html
+15 -13
View File
@@ -11,19 +11,21 @@
} }
.card-style { .card-style {
background-color: rgba(182, 143, 178, .31); background-color: rgba(182, 143, 178, 0.31);
} }
</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 justify-content-center'> <div class="row justify-content-center">
<div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center"> <div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center">
<div class="position-relative d-inline-block"> <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 <h2 class="text-center fw-bold text-primary">
cubrebocas</h2> Lavado de manos de acuerdo con la técnica de la <br />
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0"> 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> </div>
<div class="col-12 px-0"> <div class="col-12 px-0">
@@ -32,13 +34,13 @@
<div class="col-10"> <div class="col-10">
<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__flipInX"> <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>
<div class="col-4 text-center animate__animated animate__zoomIn animate__delay-1s"> <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>
<div class="col-4 text-center animate__animated animate__rotateInDownRight animate__delay-2s"> <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> </div>
</div> </div>
@@ -52,7 +54,7 @@
</div> </div>
<script> <script>
$(function () { $(function () {
"use strict"; 'use strict';
$('.wrap-course-content').addClass('fake'); $('.wrap-course-content').addClass('fake');
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
}); });
contenido/14.html
+26 -29
View File
@@ -47,7 +47,7 @@
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-center fw-bold text-primary"> <h2 class="text-center fw-bold text-primary">
Técnica correcta para higiene de manos <br /> 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> </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>
@@ -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="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"> <div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/14.12.png" class="img-fluid mx-3" /> <img src="img/14.12.png" class="img-fluid mx-3" />
<p class="mb-0 text-start"> <p class="mb-0 text-start">Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.</p>
Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -130,11 +128,11 @@
</div> </div>
<script> <script>
$(function () { $(function () {
"use strict"; 'use strict';
$(".wrap-course-content").addClass("fake"); $('.wrap-course-content').addClass('fake');
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg"); const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound("audio/feedback-correct.mpeg"); const good = CourseNav.createSound('audio/feedback-correct.mpeg');
function shuffleArray(array) { function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) { for (let i = array.length - 1; i > 0; i--) {
@@ -145,22 +143,22 @@
} }
// Shuffle elements // Shuffle elements
const $sortables = $(".img-sotable"); const $sortables = $('.img-sotable');
const shuffled = shuffleArray($sortables.toArray()); const shuffled = shuffleArray($sortables.toArray());
$(".custom-grid").empty().append(shuffled); $('.custom-grid').empty().append(shuffled);
// Initialize sortable // Initialize sortable
$(".custom-grid").sortable({ $('.custom-grid').sortable({
items: ".img-sotable", items: '.img-sotable',
containment: ".wrap-course-content", containment: '.wrap-course-content',
cursor: "grabbing", cursor: 'grabbing',
tolerance: "pointer", tolerance: 'pointer',
forceHelperSize: true, forceHelperSize: true,
forcePlaceholderSize: true, forcePlaceholderSize: true,
placeholder: "sortable-placeholder", placeholder: 'sortable-placeholder',
distance: 5, distance: 5,
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 mouseX = event.pageX; var mouseX = event.pageX;
var mouseY = event.pageY; var mouseY = event.pageY;
ui.helper.css({ ui.helper.css({
@@ -174,11 +172,11 @@
}); });
function checkOrder() { function checkOrder() {
const $items = $(".custom-grid .img-sotable"); const $items = $('.custom-grid .img-sotable');
let isCorrect = true; let isCorrect = true;
$items.each(function (index) { $items.each(function (index) {
if (parseInt($(this).data("order")) !== index) { if (parseInt($(this).data('order')) !== index) {
isCorrect = false; isCorrect = false;
return false; return false;
} }
@@ -186,31 +184,30 @@
if (isCorrect) { if (isCorrect) {
good.play(); good.play();
$(".custom-grid").sortable("disable"); $('.custom-grid').sortable('disable');
checkAllCompleted(); checkAllCompleted();
} }
} }
function checkAllCompleted() { function checkAllCompleted() {
setTimeout(() => { setTimeout(() => {
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById("wrap-course-content"), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: "pop_html_style border border-3 border-primary rounded-4", popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
"btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didClose: () => { didClose: () => {
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
$(".img-sotable").addClass("disabled"); $('.img-sotable').addClass('disabled');
}, },
}); });
}, 250); }, 250);
contenido/16.html
+32 -29
View File
@@ -18,7 +18,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 {
@@ -58,11 +58,11 @@
transition: all 0.5s ease; transition: all 0.5s ease;
} }
</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'> <div class="col-12">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 mb-2 animate__animated animate__bounceInDown"> <div class="col-10 mb-2 animate__animated animate__bounceInDown">
<h2 class="text-center fw-bold text-primary">Control de líquidos</h2> <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" /> <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="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"> <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" /> <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 <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>
pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -82,7 +81,7 @@
<div id="svg-container"></div> <div id="svg-container"></div>
</div> </div>
<div class="col-7 col-actividad"> <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="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>
@@ -100,7 +99,7 @@
<div id="pop0"> <div id="pop0">
<div class="container-fluid"> <div class="container-fluid">
<div class="w-100 text-center"> <div class="w-100 text-center">
<img src="img/3.5.png" class="img-fluid"> <img src="img/3.5.png" class="img-fluid" />
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-2"> <div class="col-12 text-center mb-2">
@@ -115,7 +114,7 @@
</div> </div>
<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;
@@ -125,7 +124,9 @@
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(
'img/puzzle.svg',
function (data) {
var svg = $(data).find('svg'); var svg = $(data).find('svg');
$('#svg-container').html(svg); $('#svg-container').html(svg);
// Remove width and height attributes to make SVG responsive // 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' // 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',
);
} }
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx'; const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
@@ -145,9 +148,9 @@
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);
}); });
@@ -157,21 +160,21 @@
} }
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: String(fila[key]).trim(),
correct: key === 'opcion_c' correct: key === 'opcion_c',
}); });
} }
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: String(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;
@@ -188,7 +191,7 @@
function displayQuestion() { function displayQuestion() {
if (currentQuestionIndex < questions.length) { if (currentQuestionIndex < questions.length) {
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
$('.txt-question').text(currentQuestion.pregunta); $('.txt-question').html(currentQuestion.pregunta);
$('.content-answers').empty(); $('.content-answers').empty();
@@ -241,29 +244,29 @@
function checkAllCompleted() { function checkAllCompleted() {
setTimeout(() => { setTimeout(() => {
const html = $("#pop0").html(); const html = $('#pop0').html();
Swal.fire({ Swal.fire({
html: html, html: html,
target: document.getElementById('wrap-course-content'), target: document.getElementById('wrap-course-content'),
customClass: { customClass: {
popup: 'pop_html_style border border-3 border-primary rounded-4', popup: 'pop_html_style border border-3 border-primary rounded-4',
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
}, },
confirmButtonText: "Cerrar", confirmButtonText: 'Cerrar',
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: 'rgba(65, 60, 60, .95)',
width: "35em", width: '35em',
didClose: () => { didClose: () => {
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} },
}); });
}, 250); }, 250);
} }
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 17"]; const hojaDatos = data['Diapositiva 17'];
questions = shuffleArray(procesarPreguntas(hojaDatos)); questions = shuffleArray(procesarPreguntas(hojaDatos));
loadSVG(); loadSVG();
displayQuestion(); 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