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

update

Browse Source
This commit is contained in:
DavidMtz
2026-02-11 13:38:15 -06:00
parent 3eb2f49012
commit fd779d0724
8 changed files with 1012 additions and 717 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/08.html
+115 -87
View File
@@ -43,15 +43,15 @@
cursor: pointer;
}
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-12 mb-3 text-center">
@@ -60,22 +60,32 @@
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-3 text-center animate__animated animate__zoomIn">
<img src="img/08.0.png" class="img-fluid">
<img src="img/08.0.png" class="img-fluid" />
</div>
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>Para un recambio seguro, bajo ningún motivo debe tocar las <b class="text-lila-claro">zonas
estériles (libres de gérmenes)</b> en su sistema de DP.</p>
<div
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
>
<p>
Para un recambio seguro, bajo ningún motivo debe tocar las
<b class="text-lila-claro">zonas estériles (libres de gérmenes)</b> en su
sistema de DP.
</p>
</div>
<div
class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
<p class="mb-0 fw-bold text-center">Realice la siguiente actividad para identificar cuáles son estas
zonas.</p>
class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
>
<p class="mb-0 fw-bold text-center">
Realice la siguiente actividad para identificar cuáles son estas zonas.
</p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -88,15 +98,15 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11' id="dragAndDrop">
<div class='row justify-content-center'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11" id="dragAndDrop">
<div class="row justify-content-center">
<div class="col-10 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
</div>
</div>
<div class="col-10 mb-1 text-center">
@@ -107,9 +117,11 @@
<div class="row justify-content-center">
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema de DP
y arrastre sus nombres hacia la fotografía que les corresponda.</p>
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema
de DP y arrastre sus nombres hacia la fotografía que les corresponda.
</p>
</div>
</div>
</div>
@@ -118,11 +130,16 @@
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-3">
<div id="content-drags" class="d-flex flex-row justify-content-center align-items-center gap-3">
</div>
<div
id="content-drags"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
</div>
<div class="col-12">
<div id="content-drops" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
<div
id="content-drops"
class="d-flex flex-row justify-content-center align-items-center gap-3"
></div>
</div>
</div>
</div>
@@ -131,18 +148,18 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
</div>
</div>
<div class="col-12 mb-3 text-center">
@@ -151,10 +168,14 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
<div
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()">
onclick="CourseNav.reload()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div>
</div>
@@ -166,33 +187,33 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
});
const imgDrop = ['img/08.1.png', 'img/08.3.png', 'img/08.2.png', 'img/08.4.png'];
const imgDrop = ["img/08.1.png", "img/08.3.png", "img/08.2.png", "img/08.4.png"];
let questions;
let correctQuestions = 0;
let maxQuestions = 4;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const urlExcelFile = "Actividades_Manual_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 result = {};
workbook.SheetNames.forEach(sheetName => {
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
@@ -202,21 +223,25 @@
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion') && fila[key]) {
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion") && fila[key]) {
opciones.push({
text: String(fila[key]).trim(),
correct: key === 'opcion_c'
correct: key === "opcion_c",
});
}
});
return {
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
pregunta: fila.pregunta ? String(fila.pregunta).trim() : "",
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta ? String(fila.retroalimentacion_correcta).trim() : '',
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? String(fila.retroalimentacion_incorrecta).trim() : ''
retroalimentacion_correcta: fila.retroalimentacion_correcta
? String(fila.retroalimentacion_correcta).trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? String(fila.retroalimentacion_incorrecta).trim()
: "",
};
});
return preguntas;
@@ -231,13 +256,13 @@
}
function createDragItems() {
const container = $('#content-drags');
const container = $("#content-drags");
container.empty();
const dragMapping = {
'Zona interna del conector a paciente': 0,
'Punta abierta en la línea de transferencia': 1,
'Sistema Ultrabag en DPCA o Cassette en DPA': 2,
'Parte interna del tapón minicap': 3
"Zona interna del conector a paciente": 0,
"Punta abierta en la línea de transferencia": 1,
"Cassette en DPA": 2,
"Parte interna del tapón minicap": 3,
};
questions.forEach((question, index) => {
question.opciones.forEach((opcion, opcionIndex) => {
@@ -253,7 +278,7 @@
}
function createDropItems() {
const container = $('#content-drops');
const container = $("#content-drops");
container.empty();
imgDrop.forEach((imagen, index) => {
const dropItem = `
@@ -279,12 +304,12 @@
let correctCount = 0;
let totalItems = 4;
$('.drag-item').draggable({
revert: 'invalid',
$(".drag-item").draggable({
revert: "invalid",
revertDuration: 300,
cursor: "grabbing",
start: function (event, ui) {
$(this).css({ 'z-index': 1000, 'transform': 'scale(0.8)' });
$(this).css({ "z-index": 1000, transform: "scale(0.8)" });
ui.position.left = 0;
ui.position.top = 0;
},
@@ -293,71 +318,74 @@
var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop;
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
ui.position.left = newLeft / scale;
ui.position.top = newTop / scale;
},
stop: function (event, ui) {
$(this).css({ 'z-index': 1, 'transform': 'scale(1)' });
}
$(this).css({ "z-index": 1, transform: "scale(1)" });
},
});
$('.drop-item').droppable({
accept: '.drag-item',
$(".drop-item").droppable({
accept: ".drag-item",
drop: function (event, ui) {
const draggedItem = ui.draggable;
const dragValue = parseInt(draggedItem.data('drag'));
const dropValue = parseInt($(this).data('drop'));
const dragValue = parseInt(draggedItem.data("drag"));
const dropValue = parseInt($(this).data("drop"));
const isCorrect = dragValue === dropValue;
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
$(this).html(draggedItem.find('.d-flex').text()).addClass('text-center d-flex align-items-center justify-content-center');
$(this)
.html(draggedItem.find(".d-flex").text())
.addClass("text-center d-flex align-items-center justify-content-center");
draggedItem.hide();
if (isCorrect) {
correctCount++;
} else {
$(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger');
$(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
}
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
showConfirmButton: true,
customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
},
confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
if ($('.drag-item:visible').length === 0) {
if ($(".drag-item:visible").length === 0) {
const percentage = (correctCount / totalItems) * 100;
const passed = percentage >= 80;
CourseNav.setSlideVisited();
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$(".wrap-course-content").addClass("fake1").removeClass("fake");
if (passed) {
$('#desarrollo').hide();
$('#cierre').show();
$("#desarrollo").hide();
$("#cierre").show();
} else {
$('.col-reintentar').show();
$('#desarrollo').hide();
$('#cierre').show();
$(".col-reintentar").show();
$("#desarrollo").hide();
$("#cierre").show();
}
}
}
},
});
}
},
});
}
function shuffleDragItems() {
const container = $('#content-drags');
const container = $("#content-drags");
const items = container.children().toArray();
const shuffled = shuffleArray(items);
shuffled.forEach(item => container.append(item));
shuffled.forEach((item) => container.append(item));
}
readExcelFile(urlExcelFile, function (data) {
@@ -369,4 +397,4 @@
initializeDragDrop();
});
});
</script>
</script>