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:
david.martinez
2026-07-01 15:28:02 -06:00
parent 9835ecfbb0
commit 7f9e7d1730
18 changed files with 1145 additions and 1065 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/03.html
+4 -1
View File
@@ -163,7 +163,10 @@
<div class="card bg-white border-0 rounded-4 bx-shadow p-3">
<div class="row justify-content-center">
<div class="col-12 mb-3 txt-question"></div>
<div class="col-12 content-answers"></div>
<div class="col-12 content-answers mb-3"></div>
<div class="col-12 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
</div>
</div>
</div>
contenido/04.html
+3
View File
@@ -120,6 +120,9 @@
</div>
</div>
</div>
<div class="col-12 mb-2 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-12 col-actividad">
<div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
<div class="img-sotable" data-order="0">
contenido/05.html
+3
View File
@@ -389,6 +389,9 @@
</div>
</div>
</div>
<div class="col-12 mt-2 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
</div>
</div>
</div>
contenido/06.html
+3
View File
@@ -129,6 +129,9 @@
</div>
</div>
</div>
<div class="col-12 mb-3 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-2">
contenido/07.html
+3
View File
@@ -122,6 +122,9 @@
</div>
</div>
</div>
<div class="col-12 mb-3 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-12">
<div class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
<div class="row-questions custom-grid" id="row-questions">
contenido/08.html
+3
View File
@@ -123,6 +123,9 @@
</div>
</div>
</div>
<div class="col-12 mb-3 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-3">
contenido/09.html
+20 -34
View File
@@ -195,18 +195,15 @@
<div class="row justify-content-center align-items-center">
<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 text-center"
>
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
<p class="mb-0">
El jabón que utilice para el lavado de manos de preferencia debe ser
<b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea
exclusivo para cuando usted realice los recambios en casa.
<b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea exclusivo para
cuando usted realice los recambios en casa.
</p>
<p>
<b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para
secar sus manos.
<b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
</p>
<p>
@@ -219,9 +216,7 @@
>
<p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></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"
>
@@ -251,7 +246,7 @@
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-11 mb-3 text-center">
<div class="col-11 mb-1 text-center">
<h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
</div>
<div class="col-12 px-0 mb-3">
@@ -261,35 +256,32 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
colocarlos en el orden correcto.
<strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para colocarlos en el orden
correcto.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mb-2 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-11">
<div class="row justify-content-center align-items-center">
<div class="col-12 anim1">
<div
class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
>
<div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
<div class="drag-sortable" data-order="0">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie.
Frótelas entre sí.
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Frótelas entre sí.
</div>
<div class="drag-sortable" data-order="1">
<span class="drag-number"></span>
<!-- MANO CON ANIMACIÓN -->
<span class="drag-hand-animate"
><i class="fa-duotone fa-solid fa-hand-pointer"></i
></span>
<span class="drag-hand-animate"><i class="fa-duotone fa-solid fa-hand-pointer"></i></span>
<span class="drag-icon">&#8597;</span>
Frótese la palma de la mano derecha contra el dorso de la mano izquierda
entrelazando los dedos.
Frótese la palma de la mano derecha contra el dorso de la mano izquierda entrelazando los dedos.
</div>
<div class="drag-sortable" data-order="2">
<span class="drag-number"></span>
@@ -304,14 +296,13 @@
<div class="drag-sortable" data-order="4">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un
movimiento de rotación y viceversa.
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
viceversa.
</div>
<div class="drag-sortable" data-order="5">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Frótese la punta de los dedos de la mano derecha contra la palma de la mano
izquierda.
Frótese la punta de los dedos de la mano derecha contra la palma de la mano izquierda.
</div>
<div class="drag-sortable" data-order="6">
<span class="drag-number"></span>
@@ -352,10 +343,7 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div>
<div
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
<div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()"
@@ -476,9 +464,7 @@
}
function mostrarPopup(isCorrect) {
CourseNav.audioController.stopAllSoundsAndPlay(
isCorrect ? feedbackcorrect : feedbackincorrect
);
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? feedbackcorrect : feedbackincorrect);
Swal.fire({
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
contenido/10.html
+92 -70
View File
@@ -27,8 +27,8 @@
}
.border-card {
background: #E31D73;
background: linear-gradient(to top, #E31D73 0%, #72256B 100%);
background: #e31d73;
background: linear-gradient(to top, #e31d73 0%, #72256b 100%);
}
.btn-answer {
@@ -47,15 +47,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">
@@ -64,22 +64,30 @@
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/10.0.png" class="img-fluid">
<img src="img/10.0.png" class="img-fluid" />
</div>
<div class="col-6">
<div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p>Omitir las medidas de seguridad podría provocarle <strong>infecciones del sitio de salida o peritonitis.</strong></p>
<p class="mb-0">Si utiliza DPCA y vive en un medio ambiente con temperaturas exteriores menores a 15°C, puede ser que sienta más
comodidad al <strong>precalentar la bolsa </strong>con solución dializante antes de utilizarla.</p>
<p>
Omitir las medidas de seguridad podría provocarle
<strong>infecciones del sitio de salida o peritonitis.</strong>
</p>
<p class="mb-0">
Si utiliza DPCA y vive en un medio ambiente con temperaturas exteriores menores a 15°C, puede ser
que sienta más comodidad al <strong>precalentar la bolsa </strong>con solución dializante antes de
utilizarla.
</p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
>
<p class="mb-0 fw-bold text-center">Conozcamos las medidas de seguridad para hacerlo.</p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -92,15 +100,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'>
<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">
<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">
@@ -111,20 +119,28 @@
<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> Lea las siguientes frases y determine si son verdaderas o falsas para identificar las medidas de seguridad al
precalentar la bolsa.</p>
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Lea las siguientes frases y determine si son verdaderas o falsas
para identificar las medidas de seguridad al precalentar la bolsa.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mb-3 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-8">
<div class="card border-card rounded-3 bx-shadow p-1 animate__animated animate__zoomIn" style="margin-top: 70px;">
<div
class="card border-card rounded-3 bx-shadow p-1 animate__animated animate__zoomIn"
style="margin-top: 70px"
>
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pb-3 pt-0">
<div class="row justify-content-center">
<div class="col-12 text-center mb-3">
<img src="img/10.1.png" class="img-fluid" style="margin-top: -70px;">
<img src="img/10.1.png" class="img-fluid" style="margin-top: -70px" />
</div>
<div class="col-12 txt-pregunta fw-bold text-verde-oscuro text-center mb-3"></div>
<div class="col-12">
@@ -139,18 +155,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">
@@ -159,10 +175,11 @@
<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>
@@ -174,7 +191,7 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
let questions;
let currentQuestionIndex = 0;
@@ -182,28 +199,28 @@
let correctQuestions = 0;
let maxQuestions = -1;
let currentFichaIndex = 0;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
});
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
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);
});
@@ -213,13 +230,13 @@
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion')) {
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion")) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
correct: key === "opcion_c",
});
}
});
@@ -227,7 +244,7 @@
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
};
});
return preguntas;
@@ -247,36 +264,40 @@
return;
}
$('.border-card').hide();
$(".border-card").hide();
currentQuestion = questions[currentQuestionIndex];
$('.txt-pregunta').text(currentQuestion.pregunta);
$(".txt-pregunta").text(currentQuestion.pregunta);
setTimeout(() => {
$('.border-card').removeClass('animate__zoomIn').addClass('animate__zoomIn').show();
$(".border-card").removeClass("animate__zoomIn").addClass("animate__zoomIn").show();
}, 100);
const answersContainer = $('.content-answers');
const answersContainer = $(".content-answers");
answersContainer.empty();
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
shuffledOpciones.forEach(opcion => {
const icon = opcion.text.toLowerCase().includes('verdadero') ? '<i class="fa-solid fa-check me-2"></i>' : '<i class="fa-solid fa-xmark me-2"></i>';
const btn = $(`<div class="btn-answer px-3 py-2 d-flex flex-row justify-content-center align-items-center" data-answer="${opcion.correct}">${icon}${opcion.text}</div>`);
shuffledOpciones.forEach((opcion) => {
const icon = opcion.text.toLowerCase().includes("verdadero")
? '<i class="fa-solid fa-check me-2"></i>'
: '<i class="fa-solid fa-xmark me-2"></i>';
const btn = $(
`<div class="btn-answer px-3 py-2 d-flex flex-row justify-content-center align-items-center" data-answer="${opcion.correct}">${icon}${opcion.text}</div>`,
);
answersContainer.append(btn);
});
$('.btn-answer').click(function() {
const isCorrect = $(this).data('answer') === true;
$(".btn-answer").click(function () {
const isCorrect = $(this).data("answer") === true;
$('.btn-answer').off('click').css('pointer-events', 'none');
$(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) {
$(this).addClass('bg-success text-white');
$(this).addClass("bg-success text-white");
correctQuestions++;
} else {
$(this).addClass('bg-danger text-white');
$(this).addClass("bg-danger text-white");
//$('.btn-answer[data-answer="true"]').addClass('bg-success text-white');
}
@@ -287,12 +308,13 @@
function showFeedback(isCorrect) {
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)",
@@ -300,7 +322,7 @@
didClose: () => {
currentQuestionIndex++;
displayQuestion();
}
},
});
}
@@ -311,12 +333,12 @@
CourseNav.setSlideVisited();
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();
}
}
contenido/11.html
+3
View File
@@ -159,6 +159,9 @@
<div class="row justify-content-center">
<div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
<div class="col-12 content-answers"></div>
<div class="col-12 mt-3 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
</div>
</div>
</div>
contenido/12.html
+4 -1
View File
@@ -449,9 +449,12 @@
<h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
<p class="text-muted">Puntos en juego: <strong>${puntajeEnJuego}</strong></p>
</div>
<div class="content-answers">
<div class="content-answers mb-3">
${opcionesHTML}
</div>
<div class="col-12 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
`,
showConfirmButton: false,
allowOutsideClick: false,
contenido/13.html
+5 -2
View File
@@ -316,7 +316,7 @@
let opcionesHTML = "";
pregunta.opciones.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntosEnJuego}">
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-3 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntosEnJuego}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
<div class="txt-answer text-start ps-3">${opcion.text}</div>
</div>`;
@@ -329,9 +329,12 @@
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
<p class="text-muted">Puntos en juego: <strong>${puntosEnJuego}</strong></p>
</div>
<div class="content-answers">
<div class="content-answers mb-3">
${opcionesHTML}
</div>
<div class="col-12 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
`,
showConfirmButton: false,
allowOutsideClick: false,
contenido/14.html
+14 -21
View File
@@ -120,13 +120,11 @@
<div class="position-relative w-100">
<p>
Gracias a que la diálisis peritoneal es una terapia
<strong class="text-lila-claro">portable,</strong> le permite mayores
posibilidades de actividad laboral, vida escolar y posibilidad de viajar.
<strong class="text-lila-claro">portable,</strong> le permite mayores posibilidades de actividad
laboral, vida escolar y posibilidad de viajar.
</p>
</div>
<div
class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s"
>
<div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
@@ -158,8 +156,8 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Haga clic en cada caja y responda
correctamente para recolectarla y completar la entrega domiciliaria.
<strong>Instrucciones:</strong> Haga clic en cada caja y responda correctamente para recolectarla
y completar la entrega domiciliaria.
</p>
</div>
</div>
@@ -254,10 +252,7 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div>
<div
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
<div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()"
@@ -324,9 +319,7 @@
return {
pregunta: fila.pregunta.trim(),
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta
? fila.retroalimentacion_correcta.trim()
: "",
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
@@ -362,9 +355,12 @@
<div class="text-center mb-3">
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
</div>
<div class="content-answers">
<div class="content-answers mb-3">
${opcionesHTML}
</div>
<div class="col-12 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
`,
showConfirmButton: false,
allowOutsideClick: false,
@@ -418,7 +414,8 @@
const camion = $("#camion-transporte");
const paqueteWidth = currentPaquete.outerWidth() + 15;
const currentX = camion.css("transform") === "none" ? 0 : parseFloat(camion.css("transform").split(",")[4]) || 0;
const currentX =
camion.css("transform") === "none" ? 0 : parseFloat(camion.css("transform").split(",")[4]) || 0;
camion.css("transform", `translateX(${currentX + paqueteWidth}px)`);
if (questionIndex < questions.length - 1) {
@@ -459,11 +456,7 @@
const paqueteId = $(this).attr("id");
const index = parseInt(paqueteId.replace("paquete", ""));
if (
!$(this).hasClass("disabled") &&
!$(this).hasClass("completed") &&
index < questions.length
) {
if (!$(this).hasClass("disabled") && !$(this).hasClass("completed") && index < questions.length) {
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
CourseNav.soundClick();
mostrarPregunta(index);
contenido/15.html
+123 -83
View File
@@ -50,12 +50,12 @@
height: 35px;
background: #4d4d4d;
border: 4px solid #808080;
box-shadow: 0 0 15px rgba(0,0,0,.5);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.med_style.bien {
background: #8EBA1F;
background: linear-gradient(to right, #8EBA1F 0%, #105742 100%);
background: #8eba1f;
background: linear-gradient(to right, #8eba1f 0%, #105742 100%);
border: 4px solid #ffffff;
}
@@ -67,7 +67,7 @@
.btn-answer {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.letter {
@@ -121,31 +121,35 @@
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">Actuación ante incidencias</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/15.0.png" class="img-fluid">
<img src="img/15.0.png" class="img-fluid" />
</div>
<div class="col-5">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
<p class="mb-0">Ante las situaciones que se presentan a continuación, es indispensable que <strong class="text-verde-ceniza">guarde la calma y actúe
oportunamente </strong>para recibir la atención adecuada.</p>
<p class="mb-0">
Ante las situaciones que se presentan a continuación, es indispensable que
<strong class="text-verde-ceniza">guarde la calma y actúe oportunamente </strong>para recibir la
atención adecuada.
</p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-1s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -158,15 +162,15 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div class='row justify-content-center'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<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">Actuación ante incidencias</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-12 px-0 mb-3">
@@ -174,8 +178,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/book1.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Dé clic en cada una de las salas y conteste la pregunta sobre cómo atender la incidencia para ganar los puntos.</p>
<img src="img/book1.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Dé clic en cada una de las salas y conteste la pregunta sobre cómo
atender la incidencia para ganar los puntos.
</p>
</div>
</div>
</div>
@@ -185,7 +192,8 @@
<div class="row justify-content-center align-items-center">
<div class="col-12 text-center mb-3">
<div
class="content-medidor bg-white rounded-5 p-3 d-inline-flex flex-row justify-content-center align-items-center gap-3">
class="content-medidor bg-white rounded-5 p-3 d-inline-flex flex-row justify-content-center align-items-center gap-3"
>
<h4 class="mb-0 fw-bold text-verde-pino">Puntos:</h4>
<div class="grids-med d-flex flex-row justify-content-center align-items-center gap-3">
<div id="#med0" class="med_style"></div>
@@ -200,27 +208,45 @@
<div class="col-11">
<div class="d-flex flex-row justify-content-center gap-2">
<div class="object-btn text-center d-inline-block" data-obj="0">
<img src="img/15.1.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
<img
src="img/15.1.png"
class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
/><br />
<h4 class="fw-bold text-center text-primary">Sala: Infección del sitio de salida</h4>
</div>
<div class="object-btn text-center d-inline-block" data-obj="1">
<img src="img/15.2.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
<img
src="img/15.2.png"
class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
/><br />
<h4 class="fw-bold text-center text-primary">Sala: Peritonitis</h4>
</div>
<div class="object-btn text-center d-inline-block" data-obj="2">
<img src="img/15.3.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
<img
src="img/15.3.png"
class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
/><br />
<h4 class="fw-bold text-center text-primary">Sala: Crisis hipertensiva</h4>
</div>
<div class="object-btn text-center d-inline-block" data-obj="3">
<img src="img/15.4.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
<img
src="img/15.4.png"
class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
/><br />
<h4 class="fw-bold text-center text-primary">Sala: Evento cardiovascular</h4>
</div>
<div class="object-btn text-center d-inline-block" data-obj="4">
<img src="img/15.5.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
<img
src="img/15.5.png"
class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
/><br />
<h4 class="fw-bold text-center text-primary">Sala: Desconexión accidental</h4>
</div>
<div class="object-btn text-center d-inline-block" data-obj="5">
<img src="img/15.6.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
<img
src="img/15.6.png"
class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
/><br />
<h4 class="fw-bold text-center text-primary">Sala: Fractura del catéter</h4>
</div>
</div>
@@ -232,27 +258,28 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Actuación ante incidencias</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
</div>
</div>
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
<div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()">
onclick="CourseNav.reload()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div>
</div>
@@ -264,37 +291,44 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
let maxQuestions = -1;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const imganesPop = ['<img src="img/15.1.png" class="img-fluid">', '<img src="img/15.2.png" class="img-fluid">', '<img src="img/15.3.png" class="img-fluid">', '<img src="img/15.4.png" class="img-fluid">', '<img src="img/15.5.png" class="img-fluid">', '<img src="img/15.6.png" class="img-fluid">'];
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const imganesPop = [
'<img src="img/15.1.png" class="img-fluid">',
'<img src="img/15.2.png" class="img-fluid">',
'<img src="img/15.3.png" class="img-fluid">',
'<img src="img/15.4.png" class="img-fluid">',
'<img src="img/15.5.png" class="img-fluid">',
'<img src="img/15.6.png" class="img-fluid">',
];
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$('#inicio').hide();
$('#desarrollo').show();
$(".wrap-course-content").addClass("fake1").removeClass("fake");
$("#inicio").hide();
$("#desarrollo").show();
});
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
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);
});
@@ -304,21 +338,23 @@
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion')) {
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion")) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
correct: key === "opcion_c",
});
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
};
});
return preguntas;
@@ -336,7 +372,7 @@
if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex];
let opcionesHTML = '';
let opcionesHTML = "";
pregunta.opciones.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
@@ -345,16 +381,19 @@
});
Swal.fire({
target: document.getElementById('wrap-course-content'),
target: document.getElementById("wrap-course-content"),
html: `
<div id="pops-questions">
<div class="container-fluid px-0" style="overflow: hidden;border-top-left-radius: 12px;border-top-right-radius: 12px;">
<div class="row justify-content-center align-items-center">
<div class="col-12 text-center mb-3 img-pregunta bg-secondary">${imganesPop[questionIndex]}</div>
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3 px-4">${pregunta.pregunta}</div>
<div class="col-12 px-4">
<div class="col-12 px-4 mb-3">
<div id="txt-answers" class="d-flex flex-column justify-content-center gap-3 text-start">${opcionesHTML}</div>
</div>
<div class="col-12 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
</div>
</div>
</div>
@@ -362,51 +401,52 @@
showConfirmButton: false,
allowOutsideClick: false,
customClass: {
popup: 'pop_html_style padd_perso border border-3 border-verde-pasto rounded-4'
popup: "pop_html_style padd_perso border border-3 border-verde-pasto rounded-4",
},
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
function handleAnswer() {
const isCorrect = $(this).data('correct') === true;
$('.btn-answer').off('click').css('pointer-events', 'none');
const isCorrect = $(this).data("correct") === true;
$(".btn-answer").off("click").css("pointer-events", "none");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) {
correctQuestions++;
$(`.med_style:eq(${questionIndex})`).addClass('bien');
$(`.med_style:eq(${questionIndex})`).addClass("bien");
setTimeout(() => {
Swal.close();
mostrarFeedback(pregunta, questionIndex);
}, 250);
} else {
setTimeout(() => {
$('.btn-answer').css('pointer-events', '').on('click', handleAnswer);
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
}
$('.btn-answer').on('click', handleAnswer);
}
$(".btn-answer").on("click", handleAnswer);
},
});
}
function mostrarFeedback(pregunta, questionIndex) {
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: 'img/good.png',
text: pregunta.retroalimentacion_correcta || '',
target: document.getElementById("wrap-course-content"),
imageUrl: "img/good.png",
text: pregunta.retroalimentacion_correcta || "",
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: "Continuar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
const currentBtn = $(`.object-btn[data-obj="${questionIndex}"]`);
currentBtn.addClass('completed good');
currentBtn.addClass("completed good");
currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) {
@@ -414,7 +454,7 @@
finalizarJuego();
}, 700);
}
}
},
});
}
@@ -422,25 +462,25 @@
const percentage = (correctQuestions / questions.length) * 100;
const aprobado = percentage >= 80;
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
CourseNav.setSlideVisited();
if (aprobado) {
$('#desarrollo').hide();
$('#cierre').show();
$("#desarrollo").hide();
$("#cierre").show();
} else {
$('.col-reintentar').show();
$('#desarrollo').hide();
$('#cierre').show();
$(".col-reintentar").show();
$("#desarrollo").hide();
$("#cierre").show();
}
}
$('.object-btn').click(function() {
const index = parseInt($(this).data('obj'));
if (!$(this).hasClass('completed') && !$(this).hasClass('disabled')) {
$(this).find('img').removeClass('animate__pulse animate__infinite');
$(this).addClass('disabled');
$(".object-btn").click(function () {
const index = parseInt($(this).data("obj"));
if (!$(this).hasClass("completed") && !$(this).hasClass("disabled")) {
$(this).find("img").removeClass("animate__pulse animate__infinite");
$(this).addClass("disabled");
CourseNav.soundClick();
mostrarPregunta(index);
}
contenido/16.html
+4 -1
View File
@@ -409,9 +409,12 @@
<div class="container-fluid">
<div class="row justify-content-center align-items-center">
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
<div class="col-12">
<div class="col-12 mb-3">
<div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
</div>
<div class="col-12 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
</div>
</div>
</div>
contenido/17.html
+481 -471
View File
File diff suppressed because it is too large Load Diff
contenido/18.html
+379 -376
View File
@@ -1,314 +1,317 @@
<style>
.fake {
background-image: url(img/bg02.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.fake {
background-image: url(img/bg02.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.fake1 {
background-image: url(img/bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.fake1 {
background-image: url(img/bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.fake2 {
background-image: url(img/bg03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.fake2 {
background-image: url(img/bg03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.btn-comenzar {
border-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
cursor: pointer;
}
.btn-comenzar {
border-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
cursor: pointer;
}
.alarm-img {
width: 90px;
margin: 10px 15px;
}
.alarm-img {
width: 90px;
margin: 10px 15px;
}
.border-style {
border-width: 4px;
border-style: solid;
border-image: linear-gradient(0deg, #E31D73, #72256B) 1;
border-radius: 18px;
}
.border-style {
border-width: 4px;
border-style: solid;
border-image: linear-gradient(0deg, #e31d73, #72256b) 1;
border-radius: 18px;
}
.no-overflow {
overflow: hidden;
}
.no-overflow {
overflow: hidden;
}
.btn-answer {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
background-color: #f8f9fa;
color: #333;
}
.btn-answer {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
background-color: #f8f9fa;
color: #333;
}
.letter {
background-color: #925c8d;
border-radius: 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.letter {
background-color: #925c8d;
border-radius: 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-answer.selected {
background-color: #C0D2CD;
}
.btn-answer.selected {
background-color: #c0d2cd;
}
.btn-answer.selected .letter {
background-color: #6c9d7a;
}
.btn-answer.selected .letter {
background-color: #6c9d7a;
}
.btn-answer:hover {
background-color: #C0D2CD;
}
.btn-answer:hover {
background-color: #c0d2cd;
}
.btn-answer:hover .letter {
background-color: #6c9d7a;
}
.btn-reintentar {
.btn-answer:hover .letter {
background-color: #6c9d7a;
}
.btn-reintentar {
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 align-items-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">Alarmas</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
</div>
</div>
<!-- <div class="col-12 mb-3 text-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 align-items-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">Alarmas</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
</div>
</div>
<!-- <div class="col-12 mb-3 text-center">
<h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
</div> -->
<div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
<p>En caso de incidencia, el equipo lanzará alarmas.</p>
<div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
<p>En caso de incidencia, el equipo lanzará alarmas.</p>
<p>Es importante conocerlas para llevar a cabo los procedimientos correctos y resolver el
problema. </p>
<div class="w-100 position-relative text-center">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
</div>
</div>
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/18.0.png" class="img-fluid">
</div>
<p>Es importante conocerlas para llevar a cabo los procedimientos correctos y resolver el problema.</p>
<div class="w-100 position-relative text-center">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
</div>
</div>
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
<img src="img/18.0.png" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
<div 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 mb-5'>
<div class="col-11 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
<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">
<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-12">
<div class="row justify-content-center mb-5">
<div class="col-11 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
<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">
<h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
</div> -->
<div class="col-12 px-0 mb-3">
<div class="row justify-content-center">
<div class="col-8">
<div class="card bg-verde-claro border-0 bx-shadow py-2 px-3"
style="border-radius: 25px;">
<div class="row justify-content-start">
<div class="col-12">
<div
class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
<img src="img/book3.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Seleccione una alarma.
Lea detenidamente la pregunta que se mostrará y elija la respuesta
que considere correcta. Su objetivo es apagar todas las alarmas.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-11">
<div
class="row justify-content-center align-items-center animate__animated animate__slideInRight">
<div class="col-10">
<div class="alarms alarms d-flex justify-content-center"></div>
</div>
<div class="col-8">
<div class="card mt-4 border-style">
<div class="card-body">
<div class="container-question"></div>
</div>
</div>
</div>
</div>
<div class="col-12 px-0 mb-3">
<div class="row justify-content-center">
<div class="col-8">
<div class="card bg-verde-claro border-0 bx-shadow py-2 px-3" style="border-radius: 25px">
<div class="row justify-content-start">
<div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
<img src="img/book3.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Seleccione una alarma. Lea detenidamente la pregunta que se
mostrará y elija la respuesta que considere correcta. Su objetivo es apagar todas las alarmas.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mb-3 text-center">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-11">
<div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
<div class="col-10">
<div class="alarms alarms d-flex justify-content-center"></div>
</div>
<div class="col-8">
<div class="card mt-4 border-style">
<div class="card-body">
<div class="container-question"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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 class="row justify-content-center">
<div class="col-12 text-center mb-3">
<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">Alarmas</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
</div>
</div>
<!-- <div class="col-12 mb-3 text-center">
<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" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
</div>
</div>
<!-- <div class="col-12 mb-3 text-center">
<h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
</div> -->
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none;">
<div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()">
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div>
</div>
</div>
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
<div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(function () {
"use strict";
$(".wrap-course-content").addClass("fake");
setTimeout(() => {
$('.intro').removeClass('animate__flipInX');
}, 600);
setTimeout(() => {
$(".intro").removeClass("animate__flipInX");
}, 600);
var preguntasActual = 0,
preguntasMax = 6,
preguntasCorrectas = 0;
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
var preguntasActual = 0,
preguntasMax = 6,
preguntasCorrectas = 0;
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
// Agregar imágenes de alarmas al iniciar la actividad
function inicializarAlarmas() {
const $alarms = $('.alarms');
$alarms.empty();
for (let i = 0; i < preguntasMax; i++) {
$alarms.append(`<img src="img/alarm_n.png" class="alarm-img" data-idx="${i}">`);
}
}
// Agregar imágenes de alarmas al iniciar la actividad
function inicializarAlarmas() {
const $alarms = $(".alarms");
$alarms.empty();
for (let i = 0; i < preguntasMax; i++) {
$alarms.append(`<img src="img/alarm_n.png" class="alarm-img" data-idx="${i}">`);
}
}
$('.btn-comenzar').click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$('#inicio').hide();
$('#desarrollo').show();
inicializarAlarmas();
mostrarPregunta();
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$(".wrap-course-content").addClass("fake1").removeClass("fake");
$("#inicio").hide();
$("#desarrollo").show();
inicializarAlarmas();
mostrarPregunta();
});
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
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) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
callback(result);
};
xhr.send();
}
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
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) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
callback(result);
};
xhr.send();
}
function procesarPreguntas(data) {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion")) {
opciones.push({
text: fila[key].trim(),
correct: key === "opcion_c",
});
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
};
function procesarPreguntas(data) {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach((key) => {
if (key.startsWith("opcion")) {
opciones.push({
text: fila[key].trim(),
correct: key === "opcion_c",
});
return preguntas;
}
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
};
});
return preguntas;
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
let questions = [];
let questions = [];
function mostrarPregunta() {
if (questions.length === 0) return;
function mostrarPregunta() {
if (questions.length === 0) return;
const QuestionPop = false;
const indiceAleatorio = Math.floor(Math.random() * questions.length);
const preguntaAleatoria = questions[indiceAleatorio];
questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
const QuestionPop = false;
const indiceAleatorio = Math.floor(Math.random() * questions.length);
const preguntaAleatoria = questions[indiceAleatorio];
questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
let opcionesHTML = '';
opcionesBarajadas.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => {
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
<div class="txt-answer ps-3">${opcion.text}</div>
</div>`;
});
});
if (QuestionPop) {
Swal.fire({
target: document.getElementById('wrap-course-content'),
html: `
if (QuestionPop) {
Swal.fire({
target: document.getElementById("wrap-course-content"),
html: `
<div class="text-center mb-3">
<h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
</div>
@@ -316,41 +319,41 @@
${opcionesHTML}
</div>
`,
showConfirmButton: false,
allowOutsideClick: false,
customClass: {
popup: 'swal-wide bg-white border-0 rounded-3 shadow'
},
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$('.btn-answer').click(function () {
const isCorrect = $(this).data('correct') === true;
// const puntos = $(this).data('puntos');
showConfirmButton: false,
allowOutsideClick: false,
customClass: {
popup: "swal-wide bg-white border-0 rounded-3 shadow",
},
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$(".btn-answer").click(function () {
const isCorrect = $(this).data("correct") === true;
// const puntos = $(this).data('puntos');
$('.btn-answer').off('click').css('pointer-events', 'none');
$(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) {
$(this).addClass('bg-success text-white');
// totalPuntos += puntos;
visualFeedBack(true);
} else {
visualFeedBack(false);
$(this).addClass('bg-danger text-white');
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
}
if (isCorrect) {
$(this).addClass("bg-success text-white");
// totalPuntos += puntos;
visualFeedBack(true);
} else {
visualFeedBack(false);
$(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => {
Swal.close();
mostrarFeedback(isCorrect, preguntaAleatoria);
}, 500);
});
}
});
} else {
$('.container-question').html(`
setTimeout(() => {
Swal.close();
mostrarFeedback(isCorrect, preguntaAleatoria);
}, 500);
});
},
});
} else {
$(".container-question").html(`
<div class="text-center mb-3">
<h4 class="fw-bold text-primary">${preguntaAleatoria.pregunta}</h4>
</div>
@@ -358,99 +361,99 @@
${opcionesHTML}
</div>
`);
$('.btn-answer').click(function () {
const isCorrect = $(this).data('correct') === true;
// const puntos = $(this).data('puntos');
$(".btn-answer").click(function () {
const isCorrect = $(this).data("correct") === true;
// const puntos = $(this).data('puntos');
$('.btn-answer').off('click').css('pointer-events', 'none');
$(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) {
$(this).addClass('bg-success text-white');
// totalPuntos += puntos;
visualFeedBack(true);
} else {
visualFeedBack(false);
$(this).addClass('bg-danger text-white');
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
}
if (isCorrect) {
$(this).addClass("bg-success text-white");
// totalPuntos += puntos;
visualFeedBack(true);
} else {
visualFeedBack(false);
$(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => {
// Swal.close();
mostrarFeedback(isCorrect, preguntaAleatoria);
}, 500);
});
}
}
function mostrarFeedback(isCorrect, pregunta) {
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
if (isCorrect) {
preguntasCorrectas++;
}
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
text: retroalimentacion || '',
showConfirmButton: true,
customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
},
confirmButtonText: "Continuar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
continuarJuego();
}
});
}
function continuarJuego() {
preguntasActual++;
if (preguntasActual >= preguntasMax) {
setTimeout(() => {
finalizarJuego();
}, 400);
} else {
mostrarPregunta();
}
}
function visualFeedBack(isCorrect) {
// Cambiar la imagen de la alarma correspondiente
const $alarms = $('.alarms .alarm-img');
if ($alarms.length > preguntasActual) {
$alarms.eq(preguntasActual).attr('src', isCorrect ? 'img/alarm_c.png' : 'img/alarm_i.png');
}
}
function finalizarJuego() {
const porcentaje = (preguntasCorrectas / preguntasMax) * 100;
const aprobado = porcentaje >= 60;
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
CourseNav.setSlideVisited();
if (aprobado) {
$('#desarrollo').hide();
$('#cierre').show();
} else {
$('.col-reintentar').show();
$('#desarrollo').hide();
$('#cierre').show();
}
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 39"];
questions = shuffleArray(procesarPreguntas(hojaDatos));
setTimeout(() => {
// Swal.close();
mostrarFeedback(isCorrect, preguntaAleatoria);
}, 500);
});
}
}
function mostrarFeedback(isCorrect, pregunta) {
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
if (isCorrect) {
preguntasCorrectas++;
}
Swal.fire({
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
text: retroalimentacion || "",
showConfirmButton: true,
customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
},
confirmButtonText: "Continuar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
continuarJuego();
},
});
}
function continuarJuego() {
preguntasActual++;
if (preguntasActual >= preguntasMax) {
setTimeout(() => {
finalizarJuego();
}, 400);
} else {
mostrarPregunta();
}
}
function visualFeedBack(isCorrect) {
// Cambiar la imagen de la alarma correspondiente
const $alarms = $(".alarms .alarm-img");
if ($alarms.length > preguntasActual) {
$alarms.eq(preguntasActual).attr("src", isCorrect ? "img/alarm_c.png" : "img/alarm_i.png");
}
}
function finalizarJuego() {
const porcentaje = (preguntasCorrectas / preguntasMax) * 100;
const aprobado = porcentaje >= 60;
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
CourseNav.setSlideVisited();
if (aprobado) {
$("#desarrollo").hide();
$("#cierre").show();
} else {
$(".col-reintentar").show();
$("#desarrollo").hide();
$("#cierre").show();
}
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 39"];
questions = shuffleArray(procesarPreguntas(hojaDatos));
});
});
</script>