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,15 +381,18 @@
});
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>
@@ -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
+107 -97
View File
@@ -22,7 +22,6 @@
cursor: pointer;
}
/* Estilos para drag and drop */
.options {
display: grid;
@@ -34,7 +33,7 @@
.draggable-option {
cursor: grab;
background-image: url('img/17.2.png');
background-image: url("img/17.2.png");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
@@ -128,15 +127,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 align-items-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">Procedimientos</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
</div>
</div>
<div class="col-12 mb-3 text-center">
@@ -144,39 +143,41 @@
</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 class="my-0">Para que una terapia de diálisis tenga los resultados esperados, se deben
conocer los
pasos necesarios para llevarla a cabo.</p>
<p class="my-0">
Para que una terapia de diálisis tenga los resultados esperados, se deben conocer los pasos necesarios
para llevarla a cabo.
</p>
<p>En esta actividad podrá demostrar cuánto conoce acerca de los <b
class="text-morado-claro">procedimientos de
conexión
y desconexión de la DPCA.</b></p>
<p>
En esta actividad podrá demostrar cuánto conoce acerca de los
<b class="text-morado-claro">procedimientos de conexión y desconexión de la DPCA.</b>
</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">
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/17.0.png" class="img-fluid">
<img src="img/17.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 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">Procedimientos</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">
@@ -188,10 +189,11 @@
<div class="card bg-verde-claro border-0 rounded-0 py-2 px-3">
<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> Lea con atención cada descripción y arrastre hacia ella el sobre con el nombre del paso al que corresponde.
<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> Lea con atención cada descripción y arrastre hacia ella el
sobre con el nombre del paso al que corresponde.
</p>
</div>
</div>
@@ -200,24 +202,28 @@
</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 no-overflow">
class="row justify-content-center align-items-center animate__animated animate__slideInRight no-overflow"
>
<div class="col-4">
<div class="card border-0 bg-verde-pino rounded">
<div class="card-body">
<div class="row justify-content-center">
<div class="col-7">
<div
class="card bg-transparent border border-2 border-white custom-card p-5 container-drag">
<img src="img/17.1.png" class="img-fluid">
<div class="card bg-transparent border border-2 border-white custom-card p-5 container-drag">
<img src="img/17.1.png" class="img-fluid" />
</div>
</div>
<div class="col-10 text-white mt-3">
<div class="question">Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Minima aliquam placeat neque, officia est laborum
molestias voluptatibus pariatur, quaerat dolorum, et omnis mollitia.
Dolorum facere minima at quas? Quo, praesentium?</div>
<div class="question">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima aliquam placeat neque,
officia est laborum molestias voluptatibus pariatur, quaerat dolorum, et omnis mollitia.
Dolorum facere minima at quas? Quo, praesentium?
</div>
</div>
</div>
</div>
@@ -233,18 +239,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">Procedimientos</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">
@@ -253,10 +259,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="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()">
<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>
@@ -268,10 +275,10 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
setTimeout(() => {
$('.intro').removeClass('animate__flipInX');
$(".intro").removeClass("animate__flipInX");
}, 600);
var preguntasActual = 0,
@@ -280,11 +287,11 @@
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();
inicializarTodasLasOpciones();
mostrarPregunta();
});
@@ -323,8 +330,10 @@
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() : ''
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
};
});
return preguntas;
@@ -353,7 +362,7 @@
text: opcion.text,
correct: opcion.correct,
preguntaIndex: preguntaIndex,
id: `pregunta-${preguntaIndex}-opcion-${opcionIndex}`
id: `pregunta-${preguntaIndex}-opcion-${opcionIndex}`,
});
});
});
@@ -366,7 +375,7 @@
}
function mostrarTodasLasOpciones() {
const $options = $('.options');
const $options = $(".options");
$options.empty();
todasLasOpciones.forEach((opcion, index) => {
@@ -393,49 +402,49 @@
currentQuestion = questions[currentQuestionIndex];
// Mostrar la pregunta en el elemento .question
$('.question').text(currentQuestion.pregunta);
$(".question").text(currentQuestion.pregunta);
// Limpiar el área de drop
$('.container-drag').removeClass('has-answer').find('.dropped-option').remove();
$(".container-drag").removeClass("has-answer").find(".dropped-option").remove();
// Rehabilitar todas las opciones para la nueva pregunta
$('.draggable-option').attr('draggable', true).css({
'opacity': '1',
'pointer-events': 'auto'
$(".draggable-option").attr("draggable", true).css({
opacity: "1",
"pointer-events": "auto",
});
}
function setupDragAndDrop() {
const $draggables = $('.draggable-option');
const $dropZone = $('.container-drag');
const $draggables = $(".draggable-option");
const $dropZone = $(".container-drag");
// Eventos para elementos draggable
$draggables.on('dragstart', function (e) {
$(this).addClass('dragging');
e.originalEvent.dataTransfer.setData('text/plain', '');
e.originalEvent.dataTransfer.effectAllowed = 'move';
$draggables.on("dragstart", function (e) {
$(this).addClass("dragging");
e.originalEvent.dataTransfer.setData("text/plain", "");
e.originalEvent.dataTransfer.effectAllowed = "move";
});
$draggables.on('dragend', function (e) {
$(this).removeClass('dragging');
$draggables.on("dragend", function (e) {
$(this).removeClass("dragging");
});
// Eventos para zona de drop
$dropZone.on('dragover', function (e) {
$dropZone.on("dragover", function (e) {
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'move';
$(this).addClass('drag-over');
e.originalEvent.dataTransfer.dropEffect = "move";
$(this).addClass("drag-over");
});
$dropZone.on('dragleave', function (e) {
$(this).removeClass('drag-over');
$dropZone.on("dragleave", function (e) {
$(this).removeClass("drag-over");
});
$dropZone.on('drop', function (e) {
$dropZone.on("drop", function (e) {
e.preventDefault();
$(this).removeClass('drag-over');
$(this).removeClass("drag-over");
const $draggedElement = $('.dragging');
const $draggedElement = $(".dragging");
if ($draggedElement.length > 0) {
manejarDrop($draggedElement);
}
@@ -443,9 +452,9 @@
}
function manejarDrop($draggedElement) {
const isCorrect = $draggedElement.data('correct') === true;
const preguntaIndexOpcion = $draggedElement.data('pregunta-index');
const optionText = $draggedElement.find('.option-text').text() || $draggedElement.text();
const isCorrect = $draggedElement.data("correct") === true;
const preguntaIndexOpcion = $draggedElement.data("pregunta-index");
const optionText = $draggedElement.find(".option-text").text() || $draggedElement.text();
// Verificar si la opción corresponde a la pregunta actual
const esOpcionDeLaPreguntaActual = preguntaIndexOpcion === currentQuestionIndex;
@@ -453,14 +462,14 @@
// Crear elemento dropped
const $droppedOption = $(`<div class="dropped-option">${optionText}</div>`);
$('.container-drag').addClass('has-answer').find('.dropped-option').remove();
$('.container-drag').append($droppedOption);
$(".container-drag").addClass("has-answer").find(".dropped-option").remove();
$(".container-drag").append($droppedOption);
// NO eliminar la opción, mantenerla disponible
// Restaurar el estado normal de todas las opciones
$('.draggable-option').attr('draggable', true).css({
'opacity': '1',
'pointer-events': 'auto'
$(".draggable-option").attr("draggable", true).css({
opacity: "1",
"pointer-events": "auto",
});
// Reproducir sonido
@@ -481,20 +490,21 @@
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
text: retroalimentacion || '',
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'
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();
}
},
});
}
@@ -513,9 +523,9 @@
function visualFeedBack(isCorrect) {
// Cambiar la imagen de la alarma correspondiente
const $alarms = $('.alarms .alarm-img');
const $alarms = $(".alarms .alarm-img");
if ($alarms.length > preguntasActual) {
$alarms.eq(preguntasActual).attr('src', isCorrect ? 'img/alarm_c.png' : 'img/alarm_i.png');
$alarms.eq(preguntasActual).attr("src", isCorrect ? "img/alarm_c.png" : "img/alarm_i.png");
}
}
@@ -523,17 +533,17 @@
const porcentaje = (preguntasCorrectas / questions.length) * 100;
const aprobado = porcentaje >= 60;
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$(".wrap-course-content").addClass("fake1").removeClass("fake");
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();
}
}
contenido/18.html
+82 -79
View File
@@ -38,7 +38,7 @@
.border-style {
border-width: 4px;
border-style: solid;
border-image: linear-gradient(0deg, #E31D73, #72256B) 1;
border-image: linear-gradient(0deg, #e31d73, #72256b) 1;
border-radius: 18px;
}
@@ -49,7 +49,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);
background-color: #f8f9fa;
color: #333;
}
@@ -62,7 +62,7 @@
}
.btn-answer.selected {
background-color: #C0D2CD;
background-color: #c0d2cd;
}
.btn-answer.selected .letter {
@@ -70,7 +70,7 @@
}
.btn-answer:hover {
background-color: #C0D2CD;
background-color: #c0d2cd;
}
.btn-answer:hover .letter {
@@ -80,15 +80,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 align-items-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">
<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">
@@ -98,33 +98,33 @@
<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>
<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">
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">
<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 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">
<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">
@@ -133,16 +133,14 @@
<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="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.
<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>
@@ -151,9 +149,11 @@
</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="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>
@@ -171,18 +171,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">Alarmas</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">
@@ -191,10 +191,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="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()">
<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>
@@ -206,10 +207,10 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
setTimeout(() => {
$('.intro').removeClass('animate__flipInX');
$(".intro").removeClass("animate__flipInX");
}, 600);
var preguntasActual = 0,
@@ -220,19 +221,19 @@
// Agregar imágenes de alarmas al iniciar la actividad
function inicializarAlarmas() {
const $alarms = $('.alarms');
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) {
$(".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();
inicializarAlarmas();
mostrarPregunta();
});
@@ -271,8 +272,10 @@
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() : ''
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
};
});
return preguntas;
@@ -297,7 +300,7 @@
questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
let opcionesHTML = '';
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>
@@ -307,7 +310,7 @@
if (QuestionPop) {
Swal.fire({
target: document.getElementById('wrap-course-content'),
target: document.getElementById("wrap-course-content"),
html: `
<div class="text-center mb-3">
<h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
@@ -319,24 +322,24 @@
showConfirmButton: false,
allowOutsideClick: false,
customClass: {
popup: 'swal-wide bg-white border-0 rounded-3 shadow'
popup: "swal-wide bg-white border-0 rounded-3 shadow",
},
backdrop: "rgba(65, 60, 60, .95)",
width: "50em",
didOpen: () => {
$('.btn-answer').click(function () {
const isCorrect = $(this).data('correct') === true;
$(".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');
$(this).addClass("bg-success text-white");
// totalPuntos += puntos;
visualFeedBack(true);
} else {
visualFeedBack(false);
$(this).addClass('bg-danger text-white');
$(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
}
@@ -347,10 +350,10 @@
mostrarFeedback(isCorrect, preguntaAleatoria);
}, 500);
});
}
},
});
} else {
$('.container-question').html(`
$(".container-question").html(`
<div class="text-center mb-3">
<h4 class="fw-bold text-primary">${preguntaAleatoria.pregunta}</h4>
</div>
@@ -358,19 +361,19 @@
${opcionesHTML}
</div>
`);
$('.btn-answer').click(function () {
const isCorrect = $(this).data('correct') === true;
$(".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');
$(this).addClass("bg-success text-white");
// totalPuntos += puntos;
visualFeedBack(true);
} else {
visualFeedBack(false);
$(this).addClass('bg-danger text-white');
$(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
}
@@ -392,20 +395,21 @@
}
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
text: retroalimentacion || '',
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'
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();
}
},
});
}
@@ -423,9 +427,9 @@
function visualFeedBack(isCorrect) {
// Cambiar la imagen de la alarma correspondiente
const $alarms = $('.alarms .alarm-img');
const $alarms = $(".alarms .alarm-img");
if ($alarms.length > preguntasActual) {
$alarms.eq(preguntasActual).attr('src', isCorrect ? 'img/alarm_c.png' : 'img/alarm_i.png');
$alarms.eq(preguntasActual).attr("src", isCorrect ? "img/alarm_c.png" : "img/alarm_i.png");
}
}
@@ -433,21 +437,20 @@
const porcentaje = (preguntasCorrectas / preguntasMax) * 100;
const aprobado = porcentaje >= 60;
$('.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();
}
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 39"];
questions = shuffleArray(procesarPreguntas(hojaDatos));
js/config.js
-4
View File
@@ -190,10 +190,6 @@ function scaleWrapCourseContent() {
scale = scaleY;
}
// Limitar reducción excesiva
const minScale = 0.8;
scale = Math.max(minScale, scale);
content.style.transform = `scale(${scale})`;
content.style.transformOrigin = "top left";
content.style.width = baseWidth + "px";
js/config.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long