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="card bg-white border-0 rounded-4 bx-shadow p-3">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-3 txt-question"></div> <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> </div>
</div> </div>
contenido/04.html
+3
View File
@@ -120,6 +120,9 @@
</div> </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-12 col-actividad"> <div class="col-12 col-actividad">
<div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center"> <div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
<div class="img-sotable" data-order="0"> <div class="img-sotable" data-order="0">
contenido/05.html
+3
View File
@@ -389,6 +389,9 @@
</div> </div>
</div> </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> </div>
</div> </div>
contenido/06.html
+3
View File
@@ -129,6 +129,9 @@
</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-12"> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-2"> <div class="col-12 mb-2">
contenido/07.html
+3
View File
@@ -122,6 +122,9 @@
</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-12"> <div class="col-12">
<div class="tablero d-flex flex-column justify-content-center align-items-center gap-2"> <div class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
<div class="row-questions custom-grid" id="row-questions"> <div class="row-questions custom-grid" id="row-questions">
contenido/08.html
+3
View File
@@ -123,6 +123,9 @@
</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-12"> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-3"> <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="row justify-content-center align-items-center">
<div class="col-6"> <div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow"> <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center"
>
<p class="mb-0"> <p class="mb-0">
El jabón que utilice para el lavado de manos de preferencia debe ser 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 <b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea exclusivo para
exclusivo para cuando usted realice los recambios en casa. cuando usted realice los recambios en casa.
</p> </p>
<p> <p>
<b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para <b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
secar sus manos.
</p> </p>
<p> <p>
@@ -219,9 +216,7 @@
> >
<p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p> <p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
</div> </div>
<div <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div <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"
> >
@@ -251,7 +246,7 @@
<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> </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> <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
</div> </div>
<div class="col-12 px-0 mb-3"> <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"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" /> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para <strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para colocarlos en el orden
colocarlos en el orden correcto. correcto.
</p> </p>
</div> </div>
</div> </div>
</div> </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="col-11">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 anim1"> <div class="col-12 anim1">
<div <div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
>
<div class="drag-sortable" data-order="0"> <div class="drag-sortable" data-order="0">
<span class="drag-number"></span> <span class="drag-number"></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Frótelas entre sí.
Frótelas entre sí.
</div> </div>
<div class="drag-sortable" data-order="1"> <div class="drag-sortable" data-order="1">
<span class="drag-number"></span> <span class="drag-number"></span>
<!-- MANO CON ANIMACIÓN --> <!-- MANO CON ANIMACIÓN -->
<span class="drag-hand-animate" <span class="drag-hand-animate"><i class="fa-duotone fa-solid fa-hand-pointer"></i></span>
><i class="fa-duotone fa-solid fa-hand-pointer"></i
></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Frótese la palma de la mano derecha contra el dorso de la mano izquierda Frótese la palma de la mano derecha contra el dorso de la mano izquierda entrelazando los dedos.
entrelazando los dedos.
</div> </div>
<div class="drag-sortable" data-order="2"> <div class="drag-sortable" data-order="2">
<span class="drag-number"></span> <span class="drag-number"></span>
@@ -304,14 +296,13 @@
<div class="drag-sortable" data-order="4"> <div class="drag-sortable" data-order="4">
<span class="drag-number"></span> <span class="drag-number"></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
movimiento de rotación y viceversa. viceversa.
</div> </div>
<div class="drag-sortable" data-order="5"> <div class="drag-sortable" data-order="5">
<span class="drag-number"></span> <span class="drag-number"></span>
<span class="drag-icon">&#8597;</span> <span class="drag-icon">&#8597;</span>
Frótese la punta de los dedos de la mano derecha contra la palma de la mano Frótese la punta de los dedos de la mano derecha contra la palma de la mano izquierda.
izquierda.
</div> </div>
<div class="drag-sortable" data-order="6"> <div class="drag-sortable" data-order="6">
<span class="drag-number"></span> <span class="drag-number"></span>
@@ -352,10 +343,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" 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()"
@@ -476,9 +464,7 @@
} }
function mostrarPopup(isCorrect) { function mostrarPopup(isCorrect) {
CourseNav.audioController.stopAllSoundsAndPlay( CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? feedbackcorrect : feedbackincorrect);
isCorrect ? feedbackcorrect : feedbackincorrect
);
Swal.fire({ Swal.fire({
target: document.getElementById("wrap-course-content"), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png", imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
contenido/10.html
+92 -70
View File
@@ -27,8 +27,8 @@
} }
.border-card { .border-card {
background: #E31D73; background: #e31d73;
background: linear-gradient(to top, #E31D73 0%, #72256B 100%); background: linear-gradient(to top, #e31d73 0%, #72256b 100%);
} }
.btn-answer { .btn-answer {
@@ -47,15 +47,15 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2> <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> </div>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@@ -64,22 +64,30 @@
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-4 text-center animate__animated animate__zoomIn"> <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>
<div class="col-6"> <div class="col-6">
<div class="card bg-custom border-0 rounded-3 p-0 bx-shadow"> <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"> <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>
<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 Omitir las medidas de seguridad podría provocarle
comodidad al <strong>precalentar la bolsa </strong>con solución dializante antes de utilizarla.</p> <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>
<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> <p class="mb-0 fw-bold text-center">Conozcamos las medidas de seguridad para hacerlo.</p>
</div> </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 <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
@@ -92,15 +100,15 @@
</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 id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 text-center animate__animated animate__bounceInDown"> <div class="col-10 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2> <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> </div>
<div class="col-10 mb-1 text-center"> <div class="col-10 mb-1 text-center">
@@ -111,20 +119,28 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-10"> <div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid"> <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 <p class="mb-0">
precalentar la bolsa.</p> <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>
</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="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="card-body bg-white border-0 rounded-3 shadow-none px-3 pb-3 pt-0">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 txt-pregunta fw-bold text-verde-oscuro text-center mb-3"></div> <div class="col-12 txt-pregunta fw-bold text-verde-oscuro text-center mb-3"></div>
<div class="col-12"> <div class="col-12">
@@ -139,18 +155,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2> <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> </div>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@@ -159,10 +175,11 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </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 <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" 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> <h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div> </div>
</div> </div>
@@ -174,7 +191,7 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
let questions; let questions;
let currentQuestionIndex = 0; let currentQuestionIndex = 0;
@@ -182,28 +199,28 @@
let correctQuestions = 0; let correctQuestions = 0;
let maxQuestions = -1; let maxQuestions = -1;
let currentFichaIndex = 0; let currentFichaIndex = 0;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg'); const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound('audio/feedback-correct.mpeg'); const good = CourseNav.createSound("audio/feedback-correct.mpeg");
$('.btn-comenzar').click(function (e) { $(".btn-comenzar").click(function (e) {
e.preventDefault(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx'; const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
function readExcelFile(url, callback) { function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open("GET", url, true);
xhr.responseType = 'arraybuffer'; xhr.responseType = "arraybuffer";
xhr.onload = function (e) { xhr.onload = function (e) {
var arrayBuffer = xhr.response; var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer); var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" }); var workbook = XLSX.read(data, { type: "array" });
var result = {}; var result = {};
workbook.SheetNames.forEach(sheetName => { workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName]; var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet); result[sheetName] = XLSX.utils.sheet_to_json(sheet);
}); });
@@ -213,13 +230,13 @@
} }
function procesarPreguntas(data) { function procesarPreguntas(data) {
const preguntas = data.map(fila => { const preguntas = data.map((fila) => {
const opciones = []; const opciones = [];
Object.keys(fila).forEach(key => { Object.keys(fila).forEach((key) => {
if (key.startsWith('opcion')) { if (key.startsWith("opcion")) {
opciones.push({ opciones.push({
text: fila[key].trim(), text: fila[key].trim(),
correct: key === 'opcion_c' correct: key === "opcion_c",
}); });
} }
}); });
@@ -227,7 +244,7 @@
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(), retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim() retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
}; };
}); });
return preguntas; return preguntas;
@@ -247,36 +264,40 @@
return; return;
} }
$('.border-card').hide(); $(".border-card").hide();
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
$('.txt-pregunta').text(currentQuestion.pregunta); $(".txt-pregunta").text(currentQuestion.pregunta);
setTimeout(() => { setTimeout(() => {
$('.border-card').removeClass('animate__zoomIn').addClass('animate__zoomIn').show(); $(".border-card").removeClass("animate__zoomIn").addClass("animate__zoomIn").show();
}, 100); }, 100);
const answersContainer = $('.content-answers'); const answersContainer = $(".content-answers");
answersContainer.empty(); answersContainer.empty();
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]); const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
shuffledOpciones.forEach(opcion => { 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 icon = opcion.text.toLowerCase().includes("verdadero")
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>`); ? '<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); answersContainer.append(btn);
}); });
$('.btn-answer').click(function() { $(".btn-answer").click(function () {
const isCorrect = $(this).data('answer') === true; const isCorrect = $(this).data("answer") === true;
$('.btn-answer').off('click').css('pointer-events', 'none'); $(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) { if (isCorrect) {
$(this).addClass('bg-success text-white'); $(this).addClass("bg-success text-white");
correctQuestions++; correctQuestions++;
} else { } else {
$(this).addClass('bg-danger text-white'); $(this).addClass("bg-danger text-white");
//$('.btn-answer[data-answer="true"]').addClass('bg-success text-white'); //$('.btn-answer[data-answer="true"]').addClass('bg-success text-white');
} }
@@ -287,12 +308,13 @@
function showFeedback(isCorrect) { function showFeedback(isCorrect) {
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png', imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none', 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' confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Cerrar", confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
@@ -300,7 +322,7 @@
didClose: () => { didClose: () => {
currentQuestionIndex++; currentQuestionIndex++;
displayQuestion(); displayQuestion();
} },
}); });
} }
@@ -311,12 +333,12 @@
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
if (passed) { if (passed) {
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} }
} }
contenido/11.html
+3
View File
@@ -159,6 +159,9 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div> <div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
<div class="col-12 content-answers"></div> <div class="col-12 content-answers"></div>
<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> </div>
</div> </div>
contenido/12.html
+4 -1
View File
@@ -449,9 +449,12 @@
<h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4> <h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
<p class="text-muted">Puntos en juego: <strong>${puntajeEnJuego}</strong></p> <p class="text-muted">Puntos en juego: <strong>${puntajeEnJuego}</strong></p>
</div> </div>
<div class="content-answers"> <div class="content-answers mb-3">
${opcionesHTML} ${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>
`, `,
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
contenido/13.html
+5 -2
View File
@@ -316,7 +316,7 @@
let opcionesHTML = ""; let opcionesHTML = "";
pregunta.opciones.forEach((opcion, index) => { 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="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 class="txt-answer text-start ps-3">${opcion.text}</div>
</div>`; </div>`;
@@ -329,9 +329,12 @@
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4> <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
<p class="text-muted">Puntos en juego: <strong>${puntosEnJuego}</strong></p> <p class="text-muted">Puntos en juego: <strong>${puntosEnJuego}</strong></p>
</div> </div>
<div class="content-answers"> <div class="content-answers mb-3">
${opcionesHTML} ${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>
`, `,
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
contenido/14.html
+14 -21
View File
@@ -120,13 +120,11 @@
<div class="position-relative w-100"> <div class="position-relative w-100">
<p> <p>
Gracias a que la diálisis peritoneal es una terapia Gracias a que la diálisis peritoneal es una terapia
<strong class="text-lila-claro">portable,</strong> le permite mayores <strong class="text-lila-claro">portable,</strong> le permite mayores posibilidades de actividad
posibilidades de actividad laboral, vida escolar y posibilidad de viajar. laboral, vida escolar y posibilidad de viajar.
</p> </p>
</div> </div>
<div <div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s">
class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s"
>
<div <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"
> >
@@ -158,8 +156,8 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" /> <img src="img/book0.png" class="img-fluid" />
<p class="mb-0"> <p class="mb-0">
<strong>Instrucciones:</strong> Haga clic en cada caja y responda <strong>Instrucciones:</strong> Haga clic en cada caja y responda correctamente para recolectarla
correctamente para recolectarla y completar la entrega domiciliaria. y completar la entrega domiciliaria.
</p> </p>
</div> </div>
</div> </div>
@@ -254,10 +252,7 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" 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()"
@@ -324,9 +319,7 @@
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: shuffleArray(opciones), opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
? fila.retroalimentacion_correcta.trim()
: "",
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim() ? fila.retroalimentacion_incorrecta.trim()
: "", : "",
@@ -362,9 +355,12 @@
<div class="text-center mb-3"> <div class="text-center mb-3">
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4> <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
</div> </div>
<div class="content-answers"> <div class="content-answers mb-3">
${opcionesHTML} ${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>
`, `,
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
@@ -418,7 +414,8 @@
const camion = $("#camion-transporte"); const camion = $("#camion-transporte");
const paqueteWidth = currentPaquete.outerWidth() + 15; 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)`); camion.css("transform", `translateX(${currentX + paqueteWidth}px)`);
if (questionIndex < questions.length - 1) { if (questionIndex < questions.length - 1) {
@@ -459,11 +456,7 @@
const paqueteId = $(this).attr("id"); const paqueteId = $(this).attr("id");
const index = parseInt(paqueteId.replace("paquete", "")); const index = parseInt(paqueteId.replace("paquete", ""));
if ( if (!$(this).hasClass("disabled") && !$(this).hasClass("completed") && index < questions.length) {
!$(this).hasClass("disabled") &&
!$(this).hasClass("completed") &&
index < questions.length
) {
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled"); $(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
CourseNav.soundClick(); CourseNav.soundClick();
mostrarPregunta(index); mostrarPregunta(index);
contenido/15.html
+123 -83
View File
@@ -50,12 +50,12 @@
height: 35px; height: 35px;
background: #4d4d4d; background: #4d4d4d;
border: 4px solid #808080; 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 { .med_style.bien {
background: #8EBA1F; background: #8eba1f;
background: linear-gradient(to right, #8EBA1F 0%, #105742 100%); background: linear-gradient(to right, #8eba1f 0%, #105742 100%);
border: 4px solid #ffffff; border: 4px solid #ffffff;
} }
@@ -67,7 +67,7 @@
.btn-answer { .btn-answer {
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 2px rgba(0,0,0,.5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
} }
.letter { .letter {
@@ -121,31 +121,35 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Actuación ante incidencias</h2> <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> </div>
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-4 text-center animate__animated animate__zoomIn"> <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>
<div class="col-5"> <div class="col-5">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow"> <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">Ante las situaciones que se presentan a continuación, es indispensable que <strong class="text-verde-ceniza">guarde la calma y actúe <p class="mb-0">
oportunamente </strong>para recibir la atención adecuada.</p> 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>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-1s"> <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-1s">
<div <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
@@ -158,15 +162,15 @@
</div> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class='row justify-content-center'> <div class="row justify-content-center">
<div class="col-10 text-center animate__animated animate__bounceInDown"> <div class="col-10 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Actuación ante incidencias</h2> <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> </div>
<div class="col-12 px-0 mb-3"> <div class="col-12 px-0 mb-3">
@@ -174,8 +178,11 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-10"> <div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3"> <div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book1.png" class="img-fluid"> <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> <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> </div>
</div> </div>
@@ -185,7 +192,8 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<div <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> <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 class="grids-med d-flex flex-row justify-content-center align-items-center gap-3">
<div id="#med0" class="med_style"></div> <div id="#med0" class="med_style"></div>
@@ -200,27 +208,45 @@
<div class="col-11"> <div class="col-11">
<div class="d-flex flex-row justify-content-center gap-2"> <div class="d-flex flex-row justify-content-center gap-2">
<div class="object-btn text-center d-inline-block" data-obj="0"> <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> <h4 class="fw-bold text-center text-primary">Sala: Infección del sitio de salida</h4>
</div> </div>
<div class="object-btn text-center d-inline-block" data-obj="1"> <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> <h4 class="fw-bold text-center text-primary">Sala: Peritonitis</h4>
</div> </div>
<div class="object-btn text-center d-inline-block" data-obj="2"> <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> <h4 class="fw-bold text-center text-primary">Sala: Crisis hipertensiva</h4>
</div> </div>
<div class="object-btn text-center d-inline-block" data-obj="3"> <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> <h4 class="fw-bold text-center text-primary">Sala: Evento cardiovascular</h4>
</div> </div>
<div class="object-btn text-center d-inline-block" data-obj="4"> <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> <h4 class="fw-bold text-center text-primary">Sala: Desconexión accidental</h4>
</div> </div>
<div class="object-btn text-center d-inline-block" data-obj="5"> <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> <h4 class="fw-bold text-center text-primary">Sala: Fractura del catéter</h4>
</div> </div>
</div> </div>
@@ -232,27 +258,28 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Actuación ante incidencias</h2> <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> </div>
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </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 <div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" 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> <h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div> </div>
</div> </div>
@@ -264,37 +291,44 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
let questions; let questions;
let currentQuestionIndex = 0; let currentQuestionIndex = 0;
let currentQuestion; let currentQuestion;
let correctQuestions = 0; let correctQuestions = 0;
let maxQuestions = -1; let maxQuestions = -1;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg'); const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound('audio/feedback-correct.mpeg'); const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const 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 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(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
}); });
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx'; const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
function readExcelFile(url, callback) { function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open("GET", url, true);
xhr.responseType = 'arraybuffer'; xhr.responseType = "arraybuffer";
xhr.onload = function (e) { xhr.onload = function (e) {
var arrayBuffer = xhr.response; var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer); var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" }); var workbook = XLSX.read(data, { type: "array" });
var result = {}; var result = {};
workbook.SheetNames.forEach(sheetName => { workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName]; var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet); result[sheetName] = XLSX.utils.sheet_to_json(sheet);
}); });
@@ -304,21 +338,23 @@
} }
function procesarPreguntas(data) { function procesarPreguntas(data) {
const preguntas = data.map(fila => { const preguntas = data.map((fila) => {
const opciones = []; const opciones = [];
Object.keys(fila).forEach(key => { Object.keys(fila).forEach((key) => {
if (key.startsWith('opcion')) { if (key.startsWith("opcion")) {
opciones.push({ opciones.push({
text: fila[key].trim(), text: fila[key].trim(),
correct: key === 'opcion_c' correct: key === "opcion_c",
}); });
} }
}); });
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: shuffleArray(opciones), 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() : '' retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@@ -336,7 +372,7 @@
if (questionIndex >= questions.length) return; if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex]; const pregunta = questions[questionIndex];
let opcionesHTML = ''; let opcionesHTML = "";
pregunta.opciones.forEach((opcion, index) => { 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}"> 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="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({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
html: ` html: `
<div id="pops-questions"> <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="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="row justify-content-center align-items-center">
<div class="col-12 text-center mb-3 img-pregunta bg-secondary">${imganesPop[questionIndex]}</div> <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 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 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>
</div> </div>
@@ -362,51 +401,52 @@
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
customClass: { 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)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
function handleAnswer() { function handleAnswer() {
const isCorrect = $(this).data('correct') === true; const isCorrect = $(this).data("correct") === true;
$('.btn-answer').off('click').css('pointer-events', 'none'); $(".btn-answer").off("click").css("pointer-events", "none");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad); CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) { if (isCorrect) {
correctQuestions++; correctQuestions++;
$(`.med_style:eq(${questionIndex})`).addClass('bien'); $(`.med_style:eq(${questionIndex})`).addClass("bien");
setTimeout(() => { setTimeout(() => {
Swal.close(); Swal.close();
mostrarFeedback(pregunta, questionIndex); mostrarFeedback(pregunta, questionIndex);
}, 250); }, 250);
} else { } else {
setTimeout(() => { setTimeout(() => {
$('.btn-answer').css('pointer-events', '').on('click', handleAnswer); $(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600); }, 600);
} }
} }
$('.btn-answer').on('click', handleAnswer); $(".btn-answer").on("click", handleAnswer);
} },
}); });
} }
function mostrarFeedback(pregunta, questionIndex) { function mostrarFeedback(pregunta, questionIndex) {
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
imageUrl: 'img/good.png', imageUrl: "img/good.png",
text: pregunta.retroalimentacion_correcta || '', text: pregunta.retroalimentacion_correcta || "",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none', 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' confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Continuar", confirmButtonText: "Continuar",
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "35em", width: "35em",
didClose: () => { didClose: () => {
const currentBtn = $(`.object-btn[data-obj="${questionIndex}"]`); const currentBtn = $(`.object-btn[data-obj="${questionIndex}"]`);
currentBtn.addClass('completed good'); currentBtn.addClass("completed good");
currentQuestionIndex++; currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) { if (currentQuestionIndex >= questions.length) {
@@ -414,7 +454,7 @@
finalizarJuego(); finalizarJuego();
}, 700); }, 700);
} }
} },
}); });
} }
@@ -422,25 +462,25 @@
const percentage = (correctQuestions / questions.length) * 100; const percentage = (correctQuestions / questions.length) * 100;
const aprobado = percentage >= 80; const aprobado = percentage >= 80;
$('.wrap-course-content').addClass('fake2').removeClass('fake1'); $(".wrap-course-content").addClass("fake2").removeClass("fake1");
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
if (aprobado) { if (aprobado) {
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} }
} }
$('.object-btn').click(function() { $(".object-btn").click(function () {
const index = parseInt($(this).data('obj')); const index = parseInt($(this).data("obj"));
if (!$(this).hasClass('completed') && !$(this).hasClass('disabled')) { if (!$(this).hasClass("completed") && !$(this).hasClass("disabled")) {
$(this).find('img').removeClass('animate__pulse animate__infinite'); $(this).find("img").removeClass("animate__pulse animate__infinite");
$(this).addClass('disabled'); $(this).addClass("disabled");
CourseNav.soundClick(); CourseNav.soundClick();
mostrarPregunta(index); mostrarPregunta(index);
} }
contenido/16.html
+4 -1
View File
@@ -409,9 +409,12 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div> <div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
<div class="col-12"> <div class="col-12 mb-3">
<div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div> <div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
</div> </div>
<div 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> </div>
</div> </div>
contenido/17.html
+107 -97
View File
@@ -22,7 +22,6 @@
cursor: pointer; cursor: pointer;
} }
/* Estilos para drag and drop */ /* Estilos para drag and drop */
.options { .options {
display: grid; display: grid;
@@ -34,7 +33,7 @@
.draggable-option { .draggable-option {
cursor: grab; cursor: grab;
background-image: url('img/17.2.png'); background-image: url("img/17.2.png");
background-size: 100% auto; background-size: 100% auto;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -128,15 +127,15 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center align-items-center'> <div class="row justify-content-center align-items-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Procedimientos</h2> <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> </div>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@@ -144,39 +143,41 @@
</div> </div>
<div class="col-5 text-center intro mb-3 animate__animated animate__flipInX"> <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"> <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 <p class="my-0">
conocer los Para que una terapia de diálisis tenga los resultados esperados, se deben conocer los pasos necesarios
pasos necesarios para llevarla a cabo.</p> para llevarla a cabo.
</p>
<p>En esta actividad podrá demostrar cuánto conoce acerca de los <b <p>
class="text-morado-claro">procedimientos de En esta actividad podrá demostrar cuánto conoce acerca de los
conexión <b class="text-morado-claro">procedimientos de conexión y desconexión de la DPCA.</b>
y desconexión de la DPCA.</b></p> </p>
<div class="w-100 position-relative text-center"> <div class="w-100 position-relative text-center">
<div <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn"> <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> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;"> <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="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class='row justify-content-center mb-5'> <div class="row justify-content-center mb-5">
<div class="col-11 text-center animate__animated animate__bounceInDown"> <div class="col-11 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Procedimientos</h2> <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> </div>
<div class="col-12 mb-3 text-center"> <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="card bg-verde-claro border-0 rounded-0 py-2 px-3">
<div class="row justify-content-start"> <div class="row justify-content-start">
<div class="col-12"> <div class="col-12">
<div <div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4"> <img src="img/book3.png" class="img-fluid" />
<img src="img/book3.png" class="img-fluid"> <p class="mb-0">
<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. <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> </p>
</div> </div>
</div> </div>
@@ -200,24 +202,28 @@
</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="col-11">
<div <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="col-4">
<div class="card border-0 bg-verde-pino rounded"> <div class="card border-0 bg-verde-pino rounded">
<div class="card-body"> <div class="card-body">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-7"> <div class="col-7">
<div <div class="card bg-transparent border border-2 border-white custom-card p-5 container-drag">
class="card bg-transparent border border-2 border-white custom-card p-5 container-drag"> <img src="img/17.1.png" class="img-fluid" />
<img src="img/17.1.png" class="img-fluid">
</div> </div>
</div> </div>
<div class="col-10 text-white mt-3"> <div class="col-10 text-white mt-3">
<div class="question">Lorem ipsum dolor, sit amet consectetur <div class="question">
adipisicing elit. Minima aliquam placeat neque, officia est laborum Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima aliquam placeat neque,
molestias voluptatibus pariatur, quaerat dolorum, et omnis mollitia. officia est laborum molestias voluptatibus pariatur, quaerat dolorum, et omnis mollitia.
Dolorum facere minima at quas? Quo, praesentium?</div> Dolorum facere minima at quas? Quo, praesentium?
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -233,18 +239,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Procedimientos</h2> <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> </div>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
@@ -253,10 +259,11 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
style="display: none;"> <div
<div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" 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> <h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div> </div>
</div> </div>
@@ -268,10 +275,10 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
setTimeout(() => { setTimeout(() => {
$('.intro').removeClass('animate__flipInX'); $(".intro").removeClass("animate__flipInX");
}, 600); }, 600);
var preguntasActual = 0, var preguntasActual = 0,
@@ -280,11 +287,11 @@
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg"); const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg"); const good = CourseNav.createSound("audio/feedback-correct.mpeg");
$('.btn-comenzar').click(function (e) { $(".btn-comenzar").click(function (e) {
e.preventDefault(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
inicializarTodasLasOpciones(); inicializarTodasLasOpciones();
mostrarPregunta(); mostrarPregunta();
}); });
@@ -323,8 +330,10 @@
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: 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() : '' retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@@ -353,7 +362,7 @@
text: opcion.text, text: opcion.text,
correct: opcion.correct, correct: opcion.correct,
preguntaIndex: preguntaIndex, preguntaIndex: preguntaIndex,
id: `pregunta-${preguntaIndex}-opcion-${opcionIndex}` id: `pregunta-${preguntaIndex}-opcion-${opcionIndex}`,
}); });
}); });
}); });
@@ -366,7 +375,7 @@
} }
function mostrarTodasLasOpciones() { function mostrarTodasLasOpciones() {
const $options = $('.options'); const $options = $(".options");
$options.empty(); $options.empty();
todasLasOpciones.forEach((opcion, index) => { todasLasOpciones.forEach((opcion, index) => {
@@ -393,49 +402,49 @@
currentQuestion = questions[currentQuestionIndex]; currentQuestion = questions[currentQuestionIndex];
// Mostrar la pregunta en el elemento .question // Mostrar la pregunta en el elemento .question
$('.question').text(currentQuestion.pregunta); $(".question").text(currentQuestion.pregunta);
// Limpiar el área de drop // 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 // Rehabilitar todas las opciones para la nueva pregunta
$('.draggable-option').attr('draggable', true).css({ $(".draggable-option").attr("draggable", true).css({
'opacity': '1', opacity: "1",
'pointer-events': 'auto' "pointer-events": "auto",
}); });
} }
function setupDragAndDrop() { function setupDragAndDrop() {
const $draggables = $('.draggable-option'); const $draggables = $(".draggable-option");
const $dropZone = $('.container-drag'); const $dropZone = $(".container-drag");
// Eventos para elementos draggable // Eventos para elementos draggable
$draggables.on('dragstart', function (e) { $draggables.on("dragstart", function (e) {
$(this).addClass('dragging'); $(this).addClass("dragging");
e.originalEvent.dataTransfer.setData('text/plain', ''); e.originalEvent.dataTransfer.setData("text/plain", "");
e.originalEvent.dataTransfer.effectAllowed = 'move'; e.originalEvent.dataTransfer.effectAllowed = "move";
}); });
$draggables.on('dragend', function (e) { $draggables.on("dragend", function (e) {
$(this).removeClass('dragging'); $(this).removeClass("dragging");
}); });
// Eventos para zona de drop // Eventos para zona de drop
$dropZone.on('dragover', function (e) { $dropZone.on("dragover", function (e) {
e.preventDefault(); e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'move'; e.originalEvent.dataTransfer.dropEffect = "move";
$(this).addClass('drag-over'); $(this).addClass("drag-over");
}); });
$dropZone.on('dragleave', function (e) { $dropZone.on("dragleave", function (e) {
$(this).removeClass('drag-over'); $(this).removeClass("drag-over");
}); });
$dropZone.on('drop', function (e) { $dropZone.on("drop", function (e) {
e.preventDefault(); e.preventDefault();
$(this).removeClass('drag-over'); $(this).removeClass("drag-over");
const $draggedElement = $('.dragging'); const $draggedElement = $(".dragging");
if ($draggedElement.length > 0) { if ($draggedElement.length > 0) {
manejarDrop($draggedElement); manejarDrop($draggedElement);
} }
@@ -443,9 +452,9 @@
} }
function manejarDrop($draggedElement) { function manejarDrop($draggedElement) {
const isCorrect = $draggedElement.data('correct') === true; const isCorrect = $draggedElement.data("correct") === true;
const preguntaIndexOpcion = $draggedElement.data('pregunta-index'); const preguntaIndexOpcion = $draggedElement.data("pregunta-index");
const optionText = $draggedElement.find('.option-text').text() || $draggedElement.text(); const optionText = $draggedElement.find(".option-text").text() || $draggedElement.text();
// Verificar si la opción corresponde a la pregunta actual // Verificar si la opción corresponde a la pregunta actual
const esOpcionDeLaPreguntaActual = preguntaIndexOpcion === currentQuestionIndex; const esOpcionDeLaPreguntaActual = preguntaIndexOpcion === currentQuestionIndex;
@@ -453,14 +462,14 @@
// Crear elemento dropped // Crear elemento dropped
const $droppedOption = $(`<div class="dropped-option">${optionText}</div>`); const $droppedOption = $(`<div class="dropped-option">${optionText}</div>`);
$('.container-drag').addClass('has-answer').find('.dropped-option').remove(); $(".container-drag").addClass("has-answer").find(".dropped-option").remove();
$('.container-drag').append($droppedOption); $(".container-drag").append($droppedOption);
// NO eliminar la opción, mantenerla disponible // NO eliminar la opción, mantenerla disponible
// Restaurar el estado normal de todas las opciones // Restaurar el estado normal de todas las opciones
$('.draggable-option').attr('draggable', true).css({ $(".draggable-option").attr("draggable", true).css({
'opacity': '1', opacity: "1",
'pointer-events': 'auto' "pointer-events": "auto",
}); });
// Reproducir sonido // Reproducir sonido
@@ -481,20 +490,21 @@
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta; const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png', imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
text: retroalimentacion || '', text: retroalimentacion || "",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none', 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' confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Continuar", confirmButtonText: "Continuar",
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "35em", width: "35em",
didClose: () => { didClose: () => {
continuarJuego(); continuarJuego();
} },
}); });
} }
@@ -513,9 +523,9 @@
function visualFeedBack(isCorrect) { function visualFeedBack(isCorrect) {
// Cambiar la imagen de la alarma correspondiente // Cambiar la imagen de la alarma correspondiente
const $alarms = $('.alarms .alarm-img'); const $alarms = $(".alarms .alarm-img");
if ($alarms.length > preguntasActual) { 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 porcentaje = (preguntasCorrectas / questions.length) * 100;
const aprobado = porcentaje >= 60; const aprobado = porcentaje >= 60;
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
if (aprobado) { if (aprobado) {
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} }
} }
contenido/18.html
+82 -79
View File
@@ -38,7 +38,7 @@
.border-style { .border-style {
border-width: 4px; border-width: 4px;
border-style: solid; border-style: solid;
border-image: linear-gradient(0deg, #E31D73, #72256B) 1; border-image: linear-gradient(0deg, #e31d73, #72256b) 1;
border-radius: 18px; border-radius: 18px;
} }
@@ -49,7 +49,7 @@
.btn-answer { .btn-answer {
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
background-color: #f8f9fa; background-color: #f8f9fa;
color: #333; color: #333;
} }
@@ -62,7 +62,7 @@
} }
.btn-answer.selected { .btn-answer.selected {
background-color: #C0D2CD; background-color: #c0d2cd;
} }
.btn-answer.selected .letter { .btn-answer.selected .letter {
@@ -70,7 +70,7 @@
} }
.btn-answer:hover { .btn-answer:hover {
background-color: #C0D2CD; background-color: #c0d2cd;
} }
.btn-answer:hover .letter { .btn-answer:hover .letter {
@@ -80,15 +80,15 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'> <div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-11'> <div class="col-11">
<div class='row justify-content-center align-items-center'> <div class="row justify-content-center align-items-center">
<div class="col-12 text-center animate__animated animate__bounceInDown"> <div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Alarmas</h2> <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> </div>
<!-- <div class="col-12 mb-3 text-center"> <!-- <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"> <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>En caso de incidencia, el equipo lanzará alarmas.</p>
<p>Es importante conocerlas para llevar a cabo los procedimientos correctos y resolver el <p>Es importante conocerlas para llevar a cabo los procedimientos correctos y resolver el problema.</p>
problema. </p>
<div class="w-100 position-relative text-center"> <div class="w-100 position-relative text-center">
<div <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> <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn"> <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> </div>
</div> </div>
</div> </div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;"> <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="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class='row justify-content-center mb-5'> <div class="row justify-content-center mb-5">
<div class="col-11 text-center animate__animated animate__bounceInDown"> <div class="col-11 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Alarmas</h2> <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> </div>
<!-- <div class="col-12 mb-3 text-center"> <!-- <div class="col-12 mb-3 text-center">
@@ -133,16 +133,14 @@
<div class="col-12 px-0 mb-3"> <div class="col-12 px-0 mb-3">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-8"> <div class="col-8">
<div class="card bg-verde-claro border-0 bx-shadow py-2 px-3" <div class="card bg-verde-claro border-0 bx-shadow py-2 px-3" style="border-radius: 25px">
style="border-radius: 25px;">
<div class="row justify-content-start"> <div class="row justify-content-start">
<div class="col-12"> <div class="col-12">
<div <div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4"> <img src="img/book3.png" class="img-fluid" />
<img src="img/book3.png" class="img-fluid"> <p class="mb-0">
<p class="mb-0"><strong>Instrucciones:</strong> Seleccione una alarma. <strong>Instrucciones:</strong> Seleccione una alarma. Lea detenidamente la pregunta que se
Lea detenidamente la pregunta que se mostrará y elija la respuesta mostrará y elija la respuesta que considere correcta. Su objetivo es apagar todas las alarmas.
que considere correcta. Su objetivo es apagar todas las alarmas.
</p> </p>
</div> </div>
</div> </div>
@@ -151,9 +149,11 @@
</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="col-11">
<div <div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
class="row justify-content-center align-items-center animate__animated animate__slideInRight">
<div class="col-10"> <div class="col-10">
<div class="alarms alarms d-flex justify-content-center"></div> <div class="alarms alarms d-flex justify-content-center"></div>
</div> </div>
@@ -171,18 +171,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;"> <div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class='container h-100'> <div class="container h-100">
<div class='row justify-content-center align-items-center h-100'> <div class="row justify-content-center align-items-center h-100">
<div class='col-12'> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 text-center mb-3"> <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>
<div class="col-12 mb-3 text-center"> <div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block"> <div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Alarmas</h2> <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> </div>
<!-- <div class="col-12 mb-3 text-center"> <!-- <div class="col-12 mb-3 text-center">
@@ -191,10 +191,11 @@
<div class="col-12 text-center mb-3"> <div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4> <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div> </div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
style="display: none;"> <div
<div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" 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> <h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div> </div>
</div> </div>
@@ -206,10 +207,10 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
setTimeout(() => { setTimeout(() => {
$('.intro').removeClass('animate__flipInX'); $(".intro").removeClass("animate__flipInX");
}, 600); }, 600);
var preguntasActual = 0, var preguntasActual = 0,
@@ -220,19 +221,19 @@
// Agregar imágenes de alarmas al iniciar la actividad // Agregar imágenes de alarmas al iniciar la actividad
function inicializarAlarmas() { function inicializarAlarmas() {
const $alarms = $('.alarms'); const $alarms = $(".alarms");
$alarms.empty(); $alarms.empty();
for (let i = 0; i < preguntasMax; i++) { for (let i = 0; i < preguntasMax; i++) {
$alarms.append(`<img src="img/alarm_n.png" class="alarm-img" data-idx="${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(); e.preventDefault();
CourseNav.soundClick(); CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake'); $(".wrap-course-content").addClass("fake1").removeClass("fake");
$('#inicio').hide(); $("#inicio").hide();
$('#desarrollo').show(); $("#desarrollo").show();
inicializarAlarmas(); inicializarAlarmas();
mostrarPregunta(); mostrarPregunta();
}); });
@@ -271,8 +272,10 @@
return { return {
pregunta: fila.pregunta.trim(), pregunta: fila.pregunta.trim(),
opciones: opciones, opciones: 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() : '' retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
? fila.retroalimentacion_incorrecta.trim()
: "",
}; };
}); });
return preguntas; return preguntas;
@@ -297,7 +300,7 @@
questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]); const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
let opcionesHTML = ''; let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => { 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}"> 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="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) { if (QuestionPop) {
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
html: ` html: `
<div class="text-center mb-3"> <div class="text-center mb-3">
<h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4> <h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
@@ -319,24 +322,24 @@
showConfirmButton: false, showConfirmButton: false,
allowOutsideClick: false, allowOutsideClick: false,
customClass: { 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)", backdrop: "rgba(65, 60, 60, .95)",
width: "50em", width: "50em",
didOpen: () => { didOpen: () => {
$('.btn-answer').click(function () { $(".btn-answer").click(function () {
const isCorrect = $(this).data('correct') === true; const isCorrect = $(this).data("correct") === true;
// const puntos = $(this).data('puntos'); // const puntos = $(this).data('puntos');
$('.btn-answer').off('click').css('pointer-events', 'none'); $(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) { if (isCorrect) {
$(this).addClass('bg-success text-white'); $(this).addClass("bg-success text-white");
// totalPuntos += puntos; // totalPuntos += puntos;
visualFeedBack(true); visualFeedBack(true);
} else { } else {
visualFeedBack(false); visualFeedBack(false);
$(this).addClass('bg-danger text-white'); $(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white'); //$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
} }
@@ -347,10 +350,10 @@
mostrarFeedback(isCorrect, preguntaAleatoria); mostrarFeedback(isCorrect, preguntaAleatoria);
}, 500); }, 500);
}); });
} },
}); });
} else { } else {
$('.container-question').html(` $(".container-question").html(`
<div class="text-center mb-3"> <div class="text-center mb-3">
<h4 class="fw-bold text-primary">${preguntaAleatoria.pregunta}</h4> <h4 class="fw-bold text-primary">${preguntaAleatoria.pregunta}</h4>
</div> </div>
@@ -358,19 +361,19 @@
${opcionesHTML} ${opcionesHTML}
</div> </div>
`); `);
$('.btn-answer').click(function () { $(".btn-answer").click(function () {
const isCorrect = $(this).data('correct') === true; const isCorrect = $(this).data("correct") === true;
// const puntos = $(this).data('puntos'); // const puntos = $(this).data('puntos');
$('.btn-answer').off('click').css('pointer-events', 'none'); $(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) { if (isCorrect) {
$(this).addClass('bg-success text-white'); $(this).addClass("bg-success text-white");
// totalPuntos += puntos; // totalPuntos += puntos;
visualFeedBack(true); visualFeedBack(true);
} else { } else {
visualFeedBack(false); visualFeedBack(false);
$(this).addClass('bg-danger text-white'); $(this).addClass("bg-danger text-white");
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white'); //$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
} }
@@ -392,20 +395,21 @@
} }
Swal.fire({ Swal.fire({
target: document.getElementById('wrap-course-content'), target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png', imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
text: retroalimentacion || '', text: retroalimentacion || "",
showConfirmButton: true, showConfirmButton: true,
customClass: { customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none', 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' confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
}, },
confirmButtonText: "Continuar", confirmButtonText: "Continuar",
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(65, 60, 60, .95)",
width: "35em", width: "35em",
didClose: () => { didClose: () => {
continuarJuego(); continuarJuego();
} },
}); });
} }
@@ -423,9 +427,9 @@
function visualFeedBack(isCorrect) { function visualFeedBack(isCorrect) {
// Cambiar la imagen de la alarma correspondiente // Cambiar la imagen de la alarma correspondiente
const $alarms = $('.alarms .alarm-img'); const $alarms = $(".alarms .alarm-img");
if ($alarms.length > preguntasActual) { 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 porcentaje = (preguntasCorrectas / preguntasMax) * 100;
const aprobado = porcentaje >= 60; const aprobado = porcentaje >= 60;
$('.wrap-course-content').addClass('fake2').removeClass('fake1'); $(".wrap-course-content").addClass("fake2").removeClass("fake1");
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
if (aprobado) { if (aprobado) {
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} else { } else {
$('.col-reintentar').show(); $(".col-reintentar").show();
$('#desarrollo').hide(); $("#desarrollo").hide();
$('#cierre').show(); $("#cierre").show();
} }
} }
readExcelFile(urlExcelFile, function (data) { readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 39"]; const hojaDatos = data["Diapositiva 39"];
questions = shuffleArray(procesarPreguntas(hojaDatos)); questions = shuffleArray(procesarPreguntas(hojaDatos));
js/config.js
-4
View File
@@ -190,10 +190,6 @@ function scaleWrapCourseContent() {
scale = scaleY; scale = scaleY;
} }
// Limitar reducción excesiva
const minScale = 0.8;
scale = Math.max(minScale, scale);
content.style.transform = `scale(${scale})`; content.style.transform = `scale(${scale})`;
content.style.transformOrigin = "top left"; content.style.transformOrigin = "top left";
content.style.width = baseWidth + "px"; 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