update
This commit is contained in:
parent
3eb2f49012
commit
fd779d0724
@ -6,25 +6,36 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12 px-0'>
|
||||
<div class='row'>
|
||||
<div class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12 px-0">
|
||||
<div class="row">
|
||||
<div class="col-11 px-0">
|
||||
<div class="d-inline-block position-relative">
|
||||
<img src="img/01.0.webp" class="img-fluid">
|
||||
<div class="position-absolute h-100 top-0 start-0" style="width: 65%;">
|
||||
<img src="img/01.0.webp" class="img-fluid" />
|
||||
<div class="position-absolute h-100 top-0 start-0" style="width: 65%">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-8">
|
||||
<div class="position-relative d-inline-block animate__animated animate__bounceInDown">
|
||||
<h1 class="text-white fw-bold">GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL <strong
|
||||
class="text-secondary">>>></strong></h1>
|
||||
<hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3">
|
||||
<div
|
||||
class="position-relative d-inline-block animate__animated animate__bounceInDown"
|
||||
>
|
||||
<h1 class="text-white fw-bold">
|
||||
GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL
|
||||
<strong class="text-secondary">>>></strong>
|
||||
</h1>
|
||||
<hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3" />
|
||||
</div>
|
||||
<p class="text-white animate__animated animate__lightSpeedInLeft">Nuestra misión: Salvar y sostener vidas</p>
|
||||
<div class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s">
|
||||
<div class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
<p class="text-white animate__animated animate__lightSpeedInLeft">
|
||||
Nuestra misión: Extender vida <span class="text-secondary">>>></span> Expandir
|
||||
posibilidades
|
||||
</p>
|
||||
<div
|
||||
class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s"
|
||||
>
|
||||
<div
|
||||
class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-verde-oscuro fw-bold mb-0">Comenzar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,11 +52,11 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
$(this).removeClass("animate__animated animate__pulse animate__infinite");
|
||||
CourseNav.soundClick();
|
||||
CourseNav.setSlideVisited();
|
||||
CourseNav.nextSlide();
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
.btn-answer {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,.5);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.letter {
|
||||
@ -73,34 +73,50 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-4 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/03.0.png" class="img-fluid">
|
||||
<img src="img/03.0.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
|
||||
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
|
||||
<p class="mb-0">Cada año, <strong class="text-lila-claro">miles de personas desarrollan enfermedad crónica de los riñones. </strong>Como líder internacional
|
||||
en el desarrollo de soluciones terapéuticas, Vantive ha desarrollado esta guía para que usted y su familia tengan
|
||||
<strong class="text-lila-claro">orientación y acompañamiento </strong>durante este proceso de aprendizaje y adaptación.</p>
|
||||
<div
|
||||
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
|
||||
>
|
||||
<p class="mb-0">
|
||||
Cada año,
|
||||
<strong class="text-lila-claro"
|
||||
>miles de personas desarrollan enfermedad crónica de los riñones. </strong
|
||||
>Por eso, hemos desarrollado esta guía para que
|
||||
<strong class="text-lila-claro">usted y su familia</strong> tengan orientación
|
||||
y acompañamiento durante este proceso de aprendizaje y adaptación.
|
||||
</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
||||
<p class="mb-0 text-verde-oscuro fw-bold">Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica de los riñones.</p>
|
||||
<div
|
||||
class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
|
||||
>
|
||||
<p class="mb-0 text-verde-oscuro fw-bold">
|
||||
Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica
|
||||
de los riñones.
|
||||
</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
|
||||
<div class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
<div
|
||||
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
|
||||
>
|
||||
<div
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,15 +129,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-11 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 px-0 mb-3">
|
||||
@ -129,8 +145,11 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book0.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente para ayudar al paciente a llegar a la unidad de diálisis.</p>
|
||||
<img src="img/book0.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente
|
||||
para ayudar al paciente a llegar a la unidad de diálisis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -156,25 +175,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" onclick="CourseNav.reload()">
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -186,47 +211,51 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
let currentQuestion;
|
||||
let correctQuestions = 0;
|
||||
let maxQuestions = 5;
|
||||
let currentFichaIndex = 0;
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
|
||||
function loadSVG() {
|
||||
$.get('img/laberinto.svg', function (data) {
|
||||
var svg = $(data).find('svg');
|
||||
$('#svg-container').html(svg);
|
||||
// Remove width and height attributes to make SVG responsive
|
||||
svg.removeAttr('width').removeAttr('height');
|
||||
svg.find('[id^="ficha"]').hide().addClass('ficha-move');
|
||||
svg.find('#ficha0').show();
|
||||
}, 'xml');
|
||||
$.get(
|
||||
"img/laberinto.svg",
|
||||
function (data) {
|
||||
var svg = $(data).find("svg");
|
||||
$("#svg-container").html(svg);
|
||||
// Remove width and height attributes to make SVG responsive
|
||||
svg.removeAttr("width").removeAttr("height");
|
||||
svg.find('[id^="ficha"]').hide().addClass("ficha-move");
|
||||
svg.find("#ficha0").show();
|
||||
},
|
||||
"xml"
|
||||
);
|
||||
}
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
$(".wrap-course-content").addClass("fake1").removeClass("fake");
|
||||
$("#inicio").hide();
|
||||
$("#desarrollo").show();
|
||||
});
|
||||
|
||||
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
|
||||
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.open("GET", url, true);
|
||||
xhr.responseType = "arraybuffer";
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
workbook.SheetNames.forEach((sheetName) => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
@ -236,13 +265,13 @@
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
const preguntas = data.map(fila => {
|
||||
const preguntas = data.map((fila) => {
|
||||
const opciones = [];
|
||||
Object.keys(fila).forEach(key => {
|
||||
if (key.startsWith('opcion')) {
|
||||
Object.keys(fila).forEach((key) => {
|
||||
if (key.startsWith("opcion")) {
|
||||
opciones.push({
|
||||
text: fila[key].trim(),
|
||||
correct: key === 'opcion_c'
|
||||
correct: key === "opcion_c",
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -250,7 +279,7 @@
|
||||
pregunta: fila.pregunta.trim(),
|
||||
opciones: opciones,
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
|
||||
};
|
||||
});
|
||||
return preguntas;
|
||||
@ -266,9 +295,9 @@
|
||||
|
||||
function displayQuestion() {
|
||||
currentQuestion = questions[currentQuestionIndex];
|
||||
$('.txt-question').text(currentQuestion.pregunta);
|
||||
$(".txt-question").text(currentQuestion.pregunta);
|
||||
|
||||
$('.content-answers').empty();
|
||||
$(".content-answers").empty();
|
||||
|
||||
// Shuffle answers for current question
|
||||
const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
|
||||
@ -280,60 +309,63 @@
|
||||
<div class="txt-answer ps-3">${opcion.text}</div>
|
||||
</div>
|
||||
`;
|
||||
$('.content-answers').append(answerHtml);
|
||||
$(".content-answers").append(answerHtml);
|
||||
});
|
||||
|
||||
initializeAnswers();
|
||||
}
|
||||
|
||||
function initializeAnswers() {
|
||||
$('.btn-answer').off('click').on('click', function() {
|
||||
const isCorrect = $(this).data('correct');
|
||||
$(".btn-answer")
|
||||
.off("click")
|
||||
.on("click", function () {
|
||||
const isCorrect = $(this).data("correct");
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
|
||||
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
if (isCorrect) {
|
||||
correctQuestions++;
|
||||
currentFichaIndex++;
|
||||
$('#svg-container').find('[id^="ficha"]').hide();
|
||||
$('#svg-container').find(`#ficha${currentFichaIndex}`).show();
|
||||
}
|
||||
currentQuestionIndex++;
|
||||
Swal.fire({
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
confirmButton:
|
||||
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
if (isCorrect) {
|
||||
correctQuestions++;
|
||||
currentFichaIndex++;
|
||||
$("#svg-container").find('[id^="ficha"]').hide();
|
||||
$("#svg-container").find(`#ficha${currentFichaIndex}`).show();
|
||||
}
|
||||
currentQuestionIndex++;
|
||||
|
||||
if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) {
|
||||
displayQuestion();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
isCompleted();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) {
|
||||
displayQuestion();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
isCompleted();
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function isCompleted() {
|
||||
const percentage = (correctQuestions / maxQuestions) * 100;
|
||||
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
|
||||
CourseNav.setSlideVisited();
|
||||
|
||||
if (percentage < 80) {
|
||||
$('.col-reintentar').show();
|
||||
$(".col-reintentar").show();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
border-radius: 15px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background: #B68FB2;
|
||||
background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
|
||||
background: #b68fb2;
|
||||
background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
.num-card {
|
||||
border-radius: .5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@ -81,15 +81,15 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
@ -99,26 +99,42 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
|
||||
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
|
||||
<p class="mb-0">La DP le ofrece una <strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria y reduce el
|
||||
contagio</strong> de enfermedades infectocontagiosas. Le permite <strong>mayor libertad </strong>al ser una terapia
|
||||
portable, a diferencia de la hemodiálisis.</p>
|
||||
<div
|
||||
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
|
||||
>
|
||||
<p class="mb-0">
|
||||
La DP le ofrece una
|
||||
<strong
|
||||
>mejor calidad de vida, requiere menos traslados a la unidad
|
||||
hospitalaria</strong
|
||||
><strong>,</strong> <strong>reduce el contagio </strong>de enfermedades
|
||||
infectocontagiosas y le permite <strong>mayor libertad </strong>al ser una
|
||||
terapia portable.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
||||
<p class="mb-1"><strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong></p>
|
||||
<p class="mb-0">Realice la siguiente actividad para descubrir más sobre ellas.</p>
|
||||
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
|
||||
>
|
||||
<p class="mb-1">
|
||||
<strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Realice la siguiente actividad para descubrir más sobre ellas.
|
||||
</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
|
||||
<div
|
||||
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
|
||||
>
|
||||
<div
|
||||
class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/05.0.png" class="img-fluid">
|
||||
<img src="img/05.0.png" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,76 +143,66 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0' style="display: none;overflow: hidden;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center h-100'>
|
||||
<div id="desarrollo" class="page-sco py-2 py-md-0" style="display: none; overflow: hidden">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-12 mb-3 px-0">
|
||||
<div class="card bg-rosa-lavanda border-0 rounded-0 shadow p-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book1.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos hacia el lugar que les corresponde en las imágenes.</p>
|
||||
<img src="img/book1.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos
|
||||
hacia el lugar que les corresponde en las imágenes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div id="drag-container" class="d-flex flex-wrap justify-content-center align-items-center gap-4">
|
||||
<div
|
||||
id="drag-container"
|
||||
class="d-flex flex-wrap justify-content-center align-items-center gap-4"
|
||||
>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="0">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Diálisis Peritoneal Continua Ambulatoria
|
||||
</div>
|
||||
<div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="1">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Atomizador
|
||||
</div>
|
||||
<div class="col-12">Atomizador</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="2">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Superficie de trabajo
|
||||
</div>
|
||||
<div class="col-12">Superficie de trabajo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Diálisis Peritoneal Automatizada
|
||||
</div>
|
||||
<div class="col-12">Diálisis Peritoneal Automatizada</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="4">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Bolsa DPA
|
||||
</div>
|
||||
<div class="col-12">Bolsa DPA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="5">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Línea
|
||||
</div>
|
||||
<div class="col-12">Línea</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="6">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Titanio
|
||||
</div>
|
||||
<div class="col-12">Titanio</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="7">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
Catéter
|
||||
</div>
|
||||
<div class="col-12">Catéter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,41 +216,62 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-4 text-center">
|
||||
<div class="d-inline-flex flex-column justify-content-center gap-3">
|
||||
<img src="img/05.1.png" class="img-fluid">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<img src="img/05.1.png" class="img-fluid" />
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">1</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="0"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="0"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="d-flex flex-row justify-content-center gap-3">
|
||||
<div class="content-custom d-flex flex-column justify-content-center gap-3">
|
||||
<img src="img/05.2.png" class="img-fluid align-self-center">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<img src="img/05.2.png" class="img-fluid align-self-center" />
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">2</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="1"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="1"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-custom d-flex flex-column justify-content-center gap-3">
|
||||
<img src="img/05.3.png" class="img-fluid align-self-center">
|
||||
<img src="img/05.3.png" class="img-fluid align-self-center" />
|
||||
<p class="mb-0 text-center h-txt">Paños limpios</p>
|
||||
</div>
|
||||
<div class="content-custom d-flex flex-column justify-content-center gap-3">
|
||||
<img src="img/05.4.png" class="img-fluid align-self-center">
|
||||
<img src="img/05.4.png" class="img-fluid align-self-center" />
|
||||
<p class="mb-0 text-center h-txt">Lavamanos, jabón y toalla</p>
|
||||
</div>
|
||||
<div class="content-custom d-flex flex-column justify-content-center gap-3">
|
||||
<img src="img/05.5.png" class="img-fluid align-self-center">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<img src="img/05.5.png" class="img-fluid align-self-center" />
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">3</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="2"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="2"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -257,37 +284,62 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<div class="d-flex flex-column justify-content-center gap-2 content-c4">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">4</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="3"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="3"
|
||||
></div>
|
||||
</div>
|
||||
<img src="img/05.6.png" class="img-fluid align-self-center">
|
||||
<img src="img/05.6.png" class="img-fluid align-self-center" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<div
|
||||
class="d-flex flex-row justify-content-center align-items-center gap-3"
|
||||
>
|
||||
<div class="content-c2 d-flex flex-column justify-content-center gap-2">
|
||||
<img src="img/05.7.png" class="img-fluid align-self-center">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<img src="img/05.7.png" class="img-fluid align-self-center" />
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">5</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="4"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="4"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-c2 d-flex flex-column justify-content-center gap-2">
|
||||
<img src="img/05.8.png" class="img-fluid align-self-center">
|
||||
<p class="mb-0 text-center h-txt">Cubrebocas, lavamanos, jabón y toalla</p>
|
||||
<img src="img/05.8.png" class="img-fluid align-self-center" />
|
||||
<p class="mb-0 text-center h-txt">
|
||||
Cubrebocas, lavamanos, jabón y toalla
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-c2 d-flex flex-column justify-content-center gap-2">
|
||||
<img src="img/05.9.png" class="img-fluid align-self-center">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<img src="img/05.9.png" class="img-fluid align-self-center" />
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">6</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="5"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="5"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -297,35 +349,53 @@
|
||||
<div class="col-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<div
|
||||
class="d-flex flex-row justify-content-center align-items-center gap-3"
|
||||
>
|
||||
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
|
||||
<img src="img/05.10.png" class="img-fluid align-self-center">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<img src="img/05.10.png" class="img-fluid align-self-center" />
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">7</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="6"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="6"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
|
||||
<img src="img/05.11.png" class="img-fluid align-self-center">
|
||||
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
|
||||
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
|
||||
<img src="img/05.11.png" class="img-fluid align-self-center" />
|
||||
<div
|
||||
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
|
||||
>
|
||||
<div
|
||||
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
|
||||
>
|
||||
<h3 class="fw-bold text-white mb-0">8</h3>
|
||||
</div>
|
||||
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="7"></div>
|
||||
<div
|
||||
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
|
||||
data-drop="7"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<div
|
||||
class="d-flex flex-row justify-content-center align-items-center gap-3"
|
||||
>
|
||||
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
|
||||
<img src="img/05.12.png" class="img-fluid align-self-center">
|
||||
<img src="img/05.12.png" class="img-fluid align-self-center" />
|
||||
<p class="mb-0 text-center h-txt">Atomizador y paños limpios</p>
|
||||
</div>
|
||||
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
|
||||
<img src="img/05.13.png" class="img-fluid align-self-center">
|
||||
<img src="img/05.13.png" class="img-fluid align-self-center" />
|
||||
<p class="mb-0 text-center h-txt">Tapón</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -341,18 +411,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
@ -361,10 +431,14 @@
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
onclick="CourseNav.reload()"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -376,19 +450,19 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
$('.drops_parts').first().show();
|
||||
$(".drops_parts").first().show();
|
||||
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
shuffleDragButtons();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
$("#inicio").hide();
|
||||
$("#desarrollo").show();
|
||||
});
|
||||
|
||||
function shuffleArray(array) {
|
||||
@ -400,14 +474,14 @@
|
||||
}
|
||||
|
||||
function shuffleDragButtons() {
|
||||
const container = document.getElementById('drag-container');
|
||||
const container = document.getElementById("drag-container");
|
||||
const buttons = Array.from(container.children);
|
||||
const shuffled = shuffleArray(buttons);
|
||||
shuffled.forEach(button => container.appendChild(button));
|
||||
shuffled.forEach((button) => container.appendChild(button));
|
||||
}
|
||||
|
||||
function recreateDragContainer() {
|
||||
$('#drag-container').html(`
|
||||
$("#drag-container").html(`
|
||||
<div class="drag-button px-3 py-2 text-white text-center" data-drag="0">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
|
||||
@ -449,17 +523,17 @@
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$('.drag-button').draggable({
|
||||
revert: 'invalid',
|
||||
$(".drag-button").draggable({
|
||||
revert: "invalid",
|
||||
revertDuration: 300,
|
||||
cursor: "grabbing",
|
||||
start: function (event, ui) {
|
||||
$(this).css('z-index', 1000);
|
||||
$(this).css("z-index", 1000);
|
||||
ui.position.left = 0;
|
||||
ui.position.top = 0;
|
||||
},
|
||||
drag: function (event, ui) {
|
||||
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||
var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
|
||||
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||
var newLeft = ui.originalPosition.left + changeLeft / scale;
|
||||
var changeTop = ui.position.top - ui.originalPosition.top;
|
||||
@ -468,8 +542,8 @@
|
||||
ui.position.top = newTop;
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
$(this).css('z-index', 1);
|
||||
}
|
||||
$(this).css("z-index", 1);
|
||||
},
|
||||
});
|
||||
shuffleDragButtons();
|
||||
}
|
||||
@ -482,7 +556,7 @@
|
||||
4: 4,
|
||||
5: 5,
|
||||
6: 6,
|
||||
7: 7
|
||||
7: 7,
|
||||
};
|
||||
|
||||
let completedDrops = { part0: 0, part1: 0 };
|
||||
@ -493,27 +567,27 @@
|
||||
|
||||
function finishActivity() {
|
||||
const percentage = (correctCount / totalQuestions) * 100;
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$(".wrap-course-content").addClass("fake1").removeClass("fake");
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
if (percentage < 80) {
|
||||
$('.col-reintentar').show();
|
||||
$(".col-reintentar").show();
|
||||
}
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
// Inicializar draggable para elementos iniciales
|
||||
$('.drag-button').draggable({
|
||||
revert: 'invalid',
|
||||
$(".drag-button").draggable({
|
||||
revert: "invalid",
|
||||
revertDuration: 300,
|
||||
cursor: "grabbing",
|
||||
start: function (event, ui) {
|
||||
$(this).css('z-index', 1000);
|
||||
$(this).css("z-index", 1000);
|
||||
ui.position.left = 0;
|
||||
ui.position.top = 0;
|
||||
},
|
||||
drag: function (event, ui) {
|
||||
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||
var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
|
||||
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||
var newLeft = ui.originalPosition.left + changeLeft / scale;
|
||||
var changeTop = ui.position.top - ui.originalPosition.top;
|
||||
@ -522,60 +596,63 @@
|
||||
ui.position.top = newTop;
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
$(this).css('z-index', 1);
|
||||
}
|
||||
$(this).css("z-index", 1);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('.drop-option').droppable({
|
||||
accept: '.drag-button',
|
||||
$(".drop-option").droppable({
|
||||
accept: ".drag-button",
|
||||
drop: function (event, ui) {
|
||||
const draggedItem = ui.draggable;
|
||||
const dragValue = parseInt(draggedItem.data('drag'));
|
||||
const dropValue = parseInt($(this).data('drop'));
|
||||
const dragValue = parseInt(draggedItem.data("drag"));
|
||||
const dropValue = parseInt($(this).data("drop"));
|
||||
const isCorrect = correctAnswers[dragValue] === dropValue;
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
|
||||
$(this).html(draggedItem.find('.col-12').text()).addClass('text-center d-flex align-items-center justify-content-center');
|
||||
$(this).droppable('disable'); // Disable this drop zone
|
||||
$(this)
|
||||
.html(draggedItem.find(".col-12").text())
|
||||
.addClass("text-center d-flex align-items-center justify-content-center");
|
||||
$(this).droppable("disable"); // Disable this drop zone
|
||||
draggedItem.hide();
|
||||
|
||||
if (isCorrect) {
|
||||
correctCount++;
|
||||
} else {
|
||||
$(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger');
|
||||
$(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
|
||||
}
|
||||
|
||||
if ($('#part0').is(':visible')) {
|
||||
if ($("#part0").is(":visible")) {
|
||||
completedDrops.part0++;
|
||||
if (completedDrops.part0 >= totalDropsPart0) {
|
||||
setTimeout(() => {
|
||||
$('#part0').hide();
|
||||
$('#part1').show();
|
||||
$("#part0").hide();
|
||||
$("#part1").show();
|
||||
// Recrear todo el drag-container para la parte 2
|
||||
recreateDragContainer();
|
||||
// Limpiar drops incorrectos de la parte 0
|
||||
$('#part0 .drop-option').each(function() {
|
||||
if ($(this).siblings('.num-card').hasClass('bg-danger')) {
|
||||
$(this).html('').removeClass('text-center d-flex align-items-center justify-content-center');
|
||||
$(this).siblings('.num-card').removeClass('bg-danger').addClass('bg-verde-pino');
|
||||
$("#part0 .drop-option").each(function () {
|
||||
if ($(this).siblings(".num-card").hasClass("bg-danger")) {
|
||||
$(this)
|
||||
.html("")
|
||||
.removeClass("text-center d-flex align-items-center justify-content-center");
|
||||
$(this).siblings(".num-card").removeClass("bg-danger").addClass("bg-verde-pino");
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
} else if ($('#part1').is(':visible')) {
|
||||
} else if ($("#part1").is(":visible")) {
|
||||
completedDrops.part1++;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
|
||||
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
confirmButton:
|
||||
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
@ -585,9 +662,9 @@
|
||||
if (completedDrops.part1 >= totalDropsPart1) {
|
||||
finishActivity();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -43,15 +43,15 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
@ -60,22 +60,32 @@
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-3 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/08.0.png" class="img-fluid">
|
||||
<img src="img/08.0.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
|
||||
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
|
||||
<p>Para un recambio seguro, bajo ningún motivo debe tocar las <b class="text-lila-claro">zonas
|
||||
estériles (libres de gérmenes)</b> en su sistema de DP.</p>
|
||||
<div
|
||||
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
|
||||
>
|
||||
<p>
|
||||
Para un recambio seguro, bajo ningún motivo debe tocar las
|
||||
<b class="text-lila-claro">zonas estériles (libres de gérmenes)</b> en su
|
||||
sistema de DP.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
||||
<p class="mb-0 fw-bold text-center">Realice la siguiente actividad para identificar cuáles son estas
|
||||
zonas.</p>
|
||||
class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
|
||||
>
|
||||
<p class="mb-0 fw-bold text-center">
|
||||
Realice la siguiente actividad para identificar cuáles son estas zonas.
|
||||
</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
|
||||
<div
|
||||
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
|
||||
>
|
||||
<div
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -88,15 +98,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11' id="dragAndDrop">
|
||||
<div class='row justify-content-center'>
|
||||
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11" id="dragAndDrop">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 mb-1 text-center">
|
||||
@ -107,9 +117,11 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book0.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema de DP
|
||||
y arrastre sus nombres hacia la fotografía que les corresponda.</p>
|
||||
<img src="img/book0.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema
|
||||
de DP y arrastre sus nombres hacia la fotografía que les corresponda.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,11 +130,16 @@
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<div id="content-drags" class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
</div>
|
||||
<div
|
||||
id="content-drags"
|
||||
class="d-flex flex-row justify-content-center align-items-center gap-3"
|
||||
></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div id="content-drops" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
|
||||
<div
|
||||
id="content-drops"
|
||||
class="d-flex flex-row justify-content-center align-items-center gap-3"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -131,18 +148,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
@ -151,10 +168,14 @@
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
onclick="CourseNav.reload()"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,33 +187,33 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
$("#inicio").hide();
|
||||
$("#desarrollo").show();
|
||||
});
|
||||
|
||||
const imgDrop = ['img/08.1.png', 'img/08.3.png', 'img/08.2.png', 'img/08.4.png'];
|
||||
const imgDrop = ["img/08.1.png", "img/08.3.png", "img/08.2.png", "img/08.4.png"];
|
||||
let questions;
|
||||
let correctQuestions = 0;
|
||||
let maxQuestions = 4;
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
|
||||
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.open("GET", url, true);
|
||||
xhr.responseType = "arraybuffer";
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
workbook.SheetNames.forEach((sheetName) => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
@ -202,21 +223,25 @@
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
const preguntas = data.map(fila => {
|
||||
const preguntas = data.map((fila) => {
|
||||
const opciones = [];
|
||||
Object.keys(fila).forEach(key => {
|
||||
if (key.startsWith('opcion') && fila[key]) {
|
||||
Object.keys(fila).forEach((key) => {
|
||||
if (key.startsWith("opcion") && fila[key]) {
|
||||
opciones.push({
|
||||
text: String(fila[key]).trim(),
|
||||
correct: key === 'opcion_c'
|
||||
correct: key === "opcion_c",
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
|
||||
pregunta: fila.pregunta ? String(fila.pregunta).trim() : "",
|
||||
opciones: opciones,
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta ? String(fila.retroalimentacion_correcta).trim() : '',
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? String(fila.retroalimentacion_incorrecta).trim() : ''
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta
|
||||
? String(fila.retroalimentacion_correcta).trim()
|
||||
: "",
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
|
||||
? String(fila.retroalimentacion_incorrecta).trim()
|
||||
: "",
|
||||
};
|
||||
});
|
||||
return preguntas;
|
||||
@ -231,13 +256,13 @@
|
||||
}
|
||||
|
||||
function createDragItems() {
|
||||
const container = $('#content-drags');
|
||||
const container = $("#content-drags");
|
||||
container.empty();
|
||||
const dragMapping = {
|
||||
'Zona interna del conector a paciente': 0,
|
||||
'Punta abierta en la línea de transferencia': 1,
|
||||
'Sistema Ultrabag en DPCA o Cassette en DPA': 2,
|
||||
'Parte interna del tapón minicap': 3
|
||||
"Zona interna del conector a paciente": 0,
|
||||
"Punta abierta en la línea de transferencia": 1,
|
||||
"Cassette en DPA": 2,
|
||||
"Parte interna del tapón minicap": 3,
|
||||
};
|
||||
questions.forEach((question, index) => {
|
||||
question.opciones.forEach((opcion, opcionIndex) => {
|
||||
@ -253,7 +278,7 @@
|
||||
}
|
||||
|
||||
function createDropItems() {
|
||||
const container = $('#content-drops');
|
||||
const container = $("#content-drops");
|
||||
container.empty();
|
||||
imgDrop.forEach((imagen, index) => {
|
||||
const dropItem = `
|
||||
@ -279,12 +304,12 @@
|
||||
let correctCount = 0;
|
||||
let totalItems = 4;
|
||||
|
||||
$('.drag-item').draggable({
|
||||
revert: 'invalid',
|
||||
$(".drag-item").draggable({
|
||||
revert: "invalid",
|
||||
revertDuration: 300,
|
||||
cursor: "grabbing",
|
||||
start: function (event, ui) {
|
||||
$(this).css({ 'z-index': 1000, 'transform': 'scale(0.8)' });
|
||||
$(this).css({ "z-index": 1000, transform: "scale(0.8)" });
|
||||
ui.position.left = 0;
|
||||
ui.position.top = 0;
|
||||
},
|
||||
@ -293,71 +318,74 @@
|
||||
var newLeft = ui.originalPosition.left + changeLeft;
|
||||
var changeTop = ui.position.top - ui.originalPosition.top;
|
||||
var newTop = ui.originalPosition.top + changeTop;
|
||||
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||
var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
|
||||
ui.position.left = newLeft / scale;
|
||||
ui.position.top = newTop / scale;
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
$(this).css({ 'z-index': 1, 'transform': 'scale(1)' });
|
||||
}
|
||||
$(this).css({ "z-index": 1, transform: "scale(1)" });
|
||||
},
|
||||
});
|
||||
|
||||
$('.drop-item').droppable({
|
||||
accept: '.drag-item',
|
||||
$(".drop-item").droppable({
|
||||
accept: ".drag-item",
|
||||
drop: function (event, ui) {
|
||||
const draggedItem = ui.draggable;
|
||||
const dragValue = parseInt(draggedItem.data('drag'));
|
||||
const dropValue = parseInt($(this).data('drop'));
|
||||
const dragValue = parseInt(draggedItem.data("drag"));
|
||||
const dropValue = parseInt($(this).data("drop"));
|
||||
const isCorrect = dragValue === dropValue;
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
|
||||
$(this).html(draggedItem.find('.d-flex').text()).addClass('text-center d-flex align-items-center justify-content-center');
|
||||
$(this)
|
||||
.html(draggedItem.find(".d-flex").text())
|
||||
.addClass("text-center d-flex align-items-center justify-content-center");
|
||||
draggedItem.hide();
|
||||
|
||||
if (isCorrect) {
|
||||
correctCount++;
|
||||
} else {
|
||||
$(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger');
|
||||
$(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
|
||||
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
confirmButton:
|
||||
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
if ($('.drag-item:visible').length === 0) {
|
||||
if ($(".drag-item:visible").length === 0) {
|
||||
const percentage = (correctCount / totalItems) * 100;
|
||||
const passed = percentage >= 80;
|
||||
CourseNav.setSlideVisited();
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$(".wrap-course-content").addClass("fake1").removeClass("fake");
|
||||
if (passed) {
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
} else {
|
||||
$('.col-reintentar').show();
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$(".col-reintentar").show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function shuffleDragItems() {
|
||||
const container = $('#content-drags');
|
||||
const container = $("#content-drags");
|
||||
const items = container.children().toArray();
|
||||
const shuffled = shuffleArray(items);
|
||||
shuffled.forEach(item => container.append(item));
|
||||
shuffled.forEach((item) => container.append(item));
|
||||
}
|
||||
|
||||
readExcelFile(urlExcelFile, function (data) {
|
||||
@ -369,4 +397,4 @@
|
||||
initializeDragDrop();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -32,15 +32,17 @@
|
||||
.drag-sortable {
|
||||
background: #f3e9df;
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .2rem;
|
||||
padding: .4rem;
|
||||
gap: 0.2rem;
|
||||
padding: 0.4rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
position: relative;
|
||||
transition: box-shadow 0.16s, transform 0.12s;
|
||||
transition:
|
||||
box-shadow 0.16s,
|
||||
transform 0.12s;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
@ -64,17 +66,19 @@
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
border: 2.5px solid #72256b;
|
||||
box-shadow: 0 2px 8px rgba(225, 0, 107, 0.10);
|
||||
box-shadow: 0 2px 8px rgba(225, 0, 107, 0.1);
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.7rem;
|
||||
transition: background 0.18s, color 0.16s;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.16s;
|
||||
}
|
||||
|
||||
/* Success: número en verde con fondo y borde */
|
||||
.drag-number-correct {
|
||||
background: #e8fdf4 !important;
|
||||
color: #30C48D !important;
|
||||
border-color: #30C48D !important;
|
||||
color: #30c48d !important;
|
||||
border-color: #30c48d !important;
|
||||
box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important;
|
||||
animation: correcto-bounce 0.7s;
|
||||
}
|
||||
@ -112,7 +116,7 @@
|
||||
|
||||
.drag-placeholder {
|
||||
background: #fff6fc !important;
|
||||
border: 2px dashed #E1006B !important;
|
||||
border: 2px dashed #e1006b !important;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
@ -134,7 +138,7 @@
|
||||
color: #72256b;
|
||||
font-size: 2.1rem;
|
||||
margin-right: 1rem;
|
||||
animation: hand-down-up 1.2s infinite cubic-bezier(.62, -0.01, .43, 1.01);
|
||||
animation: hand-down-up 1.2s infinite cubic-bezier(0.62, -0.01, 0.43, 1.01);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -173,50 +177,61 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">Lavado de manos</h4>
|
||||
<h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
|
||||
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
|
||||
<p class="mb-0">El jabón que utilice para el lavado de manos de preferencia debe ser <b
|
||||
class="text-lila-claro">líquido</b>, sin
|
||||
embargo, lo prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p>
|
||||
|
||||
<p><b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
|
||||
<div
|
||||
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center"
|
||||
>
|
||||
<p class="mb-0">
|
||||
El jabón que utilice para el lavado de manos de preferencia debe ser
|
||||
<b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea
|
||||
exclusivo para cuando usted realice los recambios en casa.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para
|
||||
secar sus manos.
|
||||
</p>
|
||||
|
||||
<p>Sus manos, después de un correcto lavado, se encontrarán <b class="text-lila-claro">limpias, pero nunca estériles.</b>
|
||||
<p>
|
||||
Sus manos, después de un correcto lavado, se encontrarán
|
||||
<b class="text-lila-claro">limpias, pero nunca estériles.</b>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
||||
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
|
||||
>
|
||||
<p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
|
||||
</div>
|
||||
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
|
||||
<div
|
||||
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
|
||||
>
|
||||
<div
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/09.0.png" class="img-fluid">
|
||||
<img src="img/09.0.png" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -225,28 +240,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center mb-5'>
|
||||
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-11 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11 mb-3 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">Lavado de manos</h4>
|
||||
<h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
|
||||
</div>
|
||||
<div class="col-12 px-0 mb-3">
|
||||
<div class="card bg-verde-claro border-0 rounded-0 bx-shadow py-2 px-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book0.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
|
||||
colocarlos en el orden correcto.</p>
|
||||
<img src="img/book0.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
|
||||
colocarlos en el orden correcto.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -255,18 +272,24 @@
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 anim1">
|
||||
<div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
|
||||
<div
|
||||
class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
|
||||
>
|
||||
<div class="drag-sortable" data-order="0">
|
||||
<span class="drag-number"></span>
|
||||
<span class="drag-icon">↕</span>
|
||||
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Frótelas entre sí.
|
||||
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie.
|
||||
Frótelas entre sí.
|
||||
</div>
|
||||
<div class="drag-sortable" data-order="1">
|
||||
<span class="drag-number"></span>
|
||||
<!-- MANO CON ANIMACIÓN -->
|
||||
<span class="drag-hand-animate"><i class="fa-duotone fa-solid fa-hand-pointer"></i></span>
|
||||
<span class="drag-hand-animate"
|
||||
><i class="fa-duotone fa-solid fa-hand-pointer"></i
|
||||
></span>
|
||||
<span class="drag-icon">↕</span>
|
||||
Frótese la palma de la mano derecha contra el dorso de la mano izquierda entrelazando los dedos.
|
||||
Frótese la palma de la mano derecha contra el dorso de la mano izquierda
|
||||
entrelazando los dedos.
|
||||
</div>
|
||||
<div class="drag-sortable" data-order="2">
|
||||
<span class="drag-number"></span>
|
||||
@ -281,13 +304,14 @@
|
||||
<div class="drag-sortable" data-order="4">
|
||||
<span class="drag-number"></span>
|
||||
<span class="drag-icon">↕</span>
|
||||
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
|
||||
viceversa.
|
||||
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un
|
||||
movimiento de rotación y viceversa.
|
||||
</div>
|
||||
<div class="drag-sortable" data-order="5">
|
||||
<span class="drag-number"></span>
|
||||
<span class="drag-icon">↕</span>
|
||||
Frótese la punta de los dedos de la mano derecha contra la palma de la mano izquierda.
|
||||
Frótese la punta de los dedos de la mano derecha contra la palma de la mano
|
||||
izquierda.
|
||||
</div>
|
||||
<div class="drag-sortable" data-order="6">
|
||||
<span class="drag-number"></span>
|
||||
@ -308,18 +332,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
@ -328,10 +352,14 @@
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
onclick="CourseNav.reload()"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -343,16 +371,16 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
$("#inicio").hide();
|
||||
$("#desarrollo").show();
|
||||
mezclarElementos();
|
||||
});
|
||||
|
||||
@ -365,8 +393,8 @@
|
||||
}
|
||||
|
||||
function mezclarElementos() {
|
||||
const $container = $('.content-drags');
|
||||
const $elements = $container.children('.drag-sortable').detach();
|
||||
const $container = $(".content-drags");
|
||||
const $elements = $container.children(".drag-sortable").detach();
|
||||
const elementosMezclados = shuffleArray($elements.toArray());
|
||||
$container.append(elementosMezclados);
|
||||
actualizarNumerosDrag();
|
||||
@ -374,23 +402,25 @@
|
||||
}
|
||||
|
||||
function actualizarNumerosDrag() {
|
||||
$('.content-drags .drag-sortable').each(function (i) {
|
||||
$(this).find('.drag-number').text(i + 1);
|
||||
$(".content-drags .drag-sortable").each(function (i) {
|
||||
$(this)
|
||||
.find(".drag-number")
|
||||
.text(i + 1);
|
||||
});
|
||||
}
|
||||
|
||||
// ----------- FUNCIÓN OPCIONAL: INDICAR CORRECTOS -----------
|
||||
function resaltarDragCorrectos() {
|
||||
$('.content-drags .drag-sortable').each(function (index) {
|
||||
const correcto = parseInt($(this).data('order')) === index;
|
||||
$(this).find('.drag-number').toggleClass('drag-number-correct', correcto);
|
||||
$(".content-drags .drag-sortable").each(function (index) {
|
||||
const correcto = parseInt($(this).data("order")) === index;
|
||||
$(this).find(".drag-number").toggleClass("drag-number-correct", correcto);
|
||||
});
|
||||
}
|
||||
// ----------------------------------------------------------
|
||||
|
||||
// Oculta la mano cuando se haga cualquier drag
|
||||
let handRemoved = false;
|
||||
$('.content-drags').sortable({
|
||||
$(".content-drags").sortable({
|
||||
update: function () {
|
||||
actualizarNumerosDrag();
|
||||
// Activa aquí para resaltar correctos tras cada movimiento:
|
||||
@ -404,35 +434,35 @@
|
||||
scroll: false,
|
||||
helper: "clone",
|
||||
sort: function (event, ui) {
|
||||
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||
var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
|
||||
var offset = ui.helper.offset();
|
||||
var mouseX = event.pageX;
|
||||
var mouseY = event.pageY;
|
||||
ui.helper.css({
|
||||
left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 4,
|
||||
top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2
|
||||
top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
|
||||
});
|
||||
},
|
||||
start: function (event, ui) {
|
||||
ui.helper.css('transform', 'scale(0.95)');
|
||||
ui.helper.css("transform", "scale(0.95)");
|
||||
if (!handRemoved) {
|
||||
$('.drag-hand-animate').remove();
|
||||
$(".drag-hand-animate").remove();
|
||||
handRemoved = true;
|
||||
}
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
ui.item.css('transform', 'scale(1)');
|
||||
}
|
||||
ui.item.css("transform", "scale(1)");
|
||||
},
|
||||
});
|
||||
|
||||
actualizarNumerosDrag();
|
||||
|
||||
function verificarOrden() {
|
||||
const $elementos = $('.content-drags .drag-sortable');
|
||||
const $elementos = $(".content-drags .drag-sortable");
|
||||
let todosCorrectos = true;
|
||||
|
||||
$elementos.each(function (index) {
|
||||
const ordenActual = parseInt($(this).data('order'));
|
||||
const ordenActual = parseInt($(this).data("order"));
|
||||
if (ordenActual !== index) {
|
||||
todosCorrectos = false;
|
||||
return false;
|
||||
@ -440,20 +470,23 @@
|
||||
});
|
||||
|
||||
if (todosCorrectos) {
|
||||
$('.content-drags').sortable('disable');
|
||||
$(".content-drags").sortable("disable");
|
||||
mostrarPopup(true);
|
||||
}
|
||||
}
|
||||
|
||||
function mostrarPopup(isCorrect) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? feedbackcorrect : feedbackincorrect);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(
|
||||
isCorrect ? feedbackcorrect : feedbackincorrect
|
||||
);
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
|
||||
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
confirmButton:
|
||||
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
@ -462,15 +495,15 @@
|
||||
if (isCorrect) {
|
||||
finalizarActividad();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function finalizarActividad() {
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$(".wrap-course-content").addClass("fake1").removeClass("fake");
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
.btn-answer {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.letter {
|
||||
@ -69,37 +69,44 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Autocuidado</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">Consumo y balance de líquidos</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-1 animate__animated animate__zoomIn">
|
||||
<img src="img/11.0.png" class="img-fluid">
|
||||
<img src="img/11.0.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
|
||||
<p> La gran ventaja que le ofrece la DP es que se trata de un tratamiento <strong
|
||||
class="text-lila-claro">autoadministrado y domiciliario</strong>, sin embargo, es necesario que acuda a
|
||||
todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y registros del tratamiento
|
||||
que le solicite el personal de salud.</p>
|
||||
<p>
|
||||
La gran ventaja que le ofrece la DP es que se trata de un tratamiento
|
||||
<strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que
|
||||
acuda a todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y
|
||||
registros del tratamiento que le solicite el personal de salud.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
|
||||
<div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold">
|
||||
<div
|
||||
class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3"
|
||||
>
|
||||
<div
|
||||
class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold"
|
||||
>
|
||||
Un aspecto importante a tomar en cuenta es el consumo y balance de líquidos.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center animate__animated animate__zoomIn animate__delay-2s">
|
||||
<div
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -108,15 +115,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center mb-5'>
|
||||
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-11 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Autocuidado</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11 mb-3 text-center">
|
||||
@ -127,10 +134,12 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book0.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del control de
|
||||
líquidos y conteste correctamente. Por cada acierto obtendrá una
|
||||
pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
|
||||
<img src="img/book0.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del
|
||||
control de líquidos y conteste correctamente. Por cada acierto obtendrá una
|
||||
pieza del rompecabezas, el reto es descubrir la imagen oculta.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,10 +151,14 @@
|
||||
<div id="svg-container"></div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div id="card-content-quiz-rompecabezas"
|
||||
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow">
|
||||
<div
|
||||
id="card-content-quiz-rompecabezas"
|
||||
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
@ -157,18 +170,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Autocuidado</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
@ -177,10 +190,14 @@
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
onclick="CourseNav.reload()"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -192,47 +209,51 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
let currentQuestion;
|
||||
let correctQuestions = 0;
|
||||
let maxQuestions = -1;
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
|
||||
function loadSVG() {
|
||||
$.get('img/puzzle.svg', function (data) {
|
||||
var svg = $(data).find('svg');
|
||||
$('#svg-container').html(svg);
|
||||
// Remove width and height attributes to make SVG responsive
|
||||
svg.removeAttr('width').removeAttr('height');
|
||||
$.get(
|
||||
"img/puzzle.svg",
|
||||
function (data) {
|
||||
var svg = $(data).find("svg");
|
||||
$("#svg-container").html(svg);
|
||||
// Remove width and height attributes to make SVG responsive
|
||||
svg.removeAttr("width").removeAttr("height");
|
||||
|
||||
// Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
|
||||
svg.find('[id^="pz"]').hide().addClass('piece-puzzle');
|
||||
}, 'xml');
|
||||
// Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
|
||||
svg.find('[id^="pz"]').hide().addClass("piece-puzzle");
|
||||
},
|
||||
"xml"
|
||||
);
|
||||
}
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
$("#inicio").hide();
|
||||
$("#desarrollo").show();
|
||||
});
|
||||
|
||||
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
|
||||
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.open("GET", url, true);
|
||||
xhr.responseType = "arraybuffer";
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
workbook.SheetNames.forEach((sheetName) => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
@ -242,13 +263,13 @@
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
const preguntas = data.map(fila => {
|
||||
const preguntas = data.map((fila) => {
|
||||
const opciones = [];
|
||||
Object.keys(fila).forEach(key => {
|
||||
if (key.startsWith('opcion')) {
|
||||
Object.keys(fila).forEach((key) => {
|
||||
if (key.startsWith("opcion")) {
|
||||
opciones.push({
|
||||
text: fila[key].trim(),
|
||||
correct: key === 'opcion_c'
|
||||
correct: key === "opcion_c",
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -256,7 +277,7 @@
|
||||
pregunta: fila.pregunta.trim(),
|
||||
opciones: opciones,
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
|
||||
};
|
||||
});
|
||||
return preguntas;
|
||||
@ -278,32 +299,36 @@
|
||||
return;
|
||||
}
|
||||
|
||||
$('#card-content-quiz-rompecabezas').hide();
|
||||
$("#card-content-quiz-rompecabezas").hide();
|
||||
|
||||
currentQuestion = questions[currentQuestionIndex];
|
||||
$('.txt-question').text(currentQuestion.pregunta);
|
||||
$(".txt-question").text(currentQuestion.pregunta);
|
||||
|
||||
const answersContainer = $('.content-answers');
|
||||
const answersContainer = $(".content-answers");
|
||||
answersContainer.empty();
|
||||
|
||||
setTimeout(() => {
|
||||
$('#card-content-quiz-rompecabezas').removeClass('animate__zoomIn').addClass('animate__zoomIn').show();
|
||||
$("#card-content-quiz-rompecabezas")
|
||||
.removeClass("animate__zoomIn")
|
||||
.addClass("animate__zoomIn")
|
||||
.show();
|
||||
}, 100);
|
||||
|
||||
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
|
||||
|
||||
shuffledOpciones.forEach((opcion, index) => {
|
||||
const btn = $(`<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
|
||||
const btn =
|
||||
$(`<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
|
||||
<div class="txt-answer ps-3">${opcion.text}</div>
|
||||
</div>`);
|
||||
answersContainer.append(btn);
|
||||
});
|
||||
|
||||
$('.btn-answer').click(function () {
|
||||
const isCorrect = $(this).data('correct') === true;
|
||||
$(".btn-answer").click(function () {
|
||||
const isCorrect = $(this).data("correct") === true;
|
||||
|
||||
$('.btn-answer').off('click').css('pointer-events', 'none');
|
||||
$(".btn-answer").off("click").css("pointer-events", "none");
|
||||
|
||||
if (isCorrect) {
|
||||
correctQuestions++;
|
||||
@ -316,12 +341,13 @@
|
||||
|
||||
function showFeedback(isCorrect) {
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
|
||||
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
confirmButton:
|
||||
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
@ -332,7 +358,7 @@
|
||||
}
|
||||
currentQuestionIndex++;
|
||||
displayQuestion();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -348,23 +374,24 @@
|
||||
CourseNav.setSlideVisited();
|
||||
|
||||
if (passed) {
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
} else {
|
||||
$('.col-reintentar').show();
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$(".col-reintentar").show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
}
|
||||
}
|
||||
|
||||
readExcelFile(urlExcelFile, function (data) {
|
||||
const hojaDatos = data["Diapositiva 22"];
|
||||
const preguntasProcesadas = shuffleArray(procesarPreguntas(hojaDatos));
|
||||
questions = maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
|
||||
questions =
|
||||
maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
|
||||
loadSVG();
|
||||
setTimeout(() => {
|
||||
displayQuestion();
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
.btn-answer {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.letter {
|
||||
@ -80,53 +80,61 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 text-center mb-3 animate__animated animate__flipInX">
|
||||
<div class="card bg-white border-0 rounded-3 px-0 pt-2 pb-0 bx-shadow">
|
||||
<div class="position-relative w-100 px-3">
|
||||
<p>Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son
|
||||
controlados mediante la DP, sin embargo, es necesario que se apoye de medicamentos que solo su médico
|
||||
puede y debe prescribir. </p>
|
||||
<p>
|
||||
Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que,
|
||||
en parte, son controlados mediante la DP, sin embargo, es necesario que se apoye
|
||||
de medicamentos que solo su médico puede y debe prescribir.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
||||
<p class="mb-0 fw-bold text-center">Siga las recomendaciones del personal de salud.</p>
|
||||
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">
|
||||
Siga las recomendaciones del personal de salud.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s">
|
||||
<div
|
||||
class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s"
|
||||
>
|
||||
<div
|
||||
class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
|
||||
<img src="img/13.5.png" class="img-fluid">
|
||||
<img src="img/13.5.png" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 mb-3">
|
||||
@ -134,10 +142,12 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book3.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la pregunta
|
||||
acerca del manejo de medicamentos que apoyan la DP.
|
||||
Por cada acierto sumará puntos, el objetivo es llegar a 1000.</p>
|
||||
<img src="img/book3.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la
|
||||
pregunta acerca del manejo de medicamentos que apoyan la DP. Por cada acierto
|
||||
sumará puntos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -147,37 +157,62 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div
|
||||
class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow">
|
||||
<img src="img/13.4.png" class="img-fluid me-2">
|
||||
class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow"
|
||||
>
|
||||
<img src="img/13.4.png" class="img-fluid me-2" />
|
||||
<h4 class="text-white fw-bold mb-0">Puntos:</h4>
|
||||
<h4 id="puntos" class="text-white fw-bold mb-0">000</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="grip-jeopardy">
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
|
||||
<img src="img/13.0.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="100"
|
||||
>
|
||||
<img src="img/13.0.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
|
||||
<img src="img/13.2.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="200"
|
||||
>
|
||||
<img src="img/13.2.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
|
||||
<img src="img/13.1.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="50"
|
||||
>
|
||||
<img src="img/13.1.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
|
||||
<img src="img/13.0.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="100"
|
||||
>
|
||||
<img src="img/13.0.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
|
||||
<img src="img/13.1.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="50"
|
||||
>
|
||||
<img src="img/13.1.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
|
||||
<img src="img/13.0.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="100"
|
||||
>
|
||||
<img src="img/13.0.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
|
||||
<img src="img/13.2.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="200"
|
||||
>
|
||||
<img src="img/13.2.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
|
||||
<img src="img/13.2.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-question-pop animate__animated animate__pulse animate__infinite"
|
||||
data-puntos="200"
|
||||
>
|
||||
<img src="img/13.2.png" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -188,27 +223,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
onclick="CourseNav.reload()"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -220,35 +259,35 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
let currentQuestion;
|
||||
let correctQuestions = 0;
|
||||
let maxQuestions = -1;
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
$("#inicio").hide();
|
||||
$("#desarrollo").show();
|
||||
});
|
||||
|
||||
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
|
||||
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.open("GET", url, true);
|
||||
xhr.responseType = "arraybuffer";
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
workbook.SheetNames.forEach((sheetName) => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
@ -258,21 +297,25 @@
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
const preguntas = data.map(fila => {
|
||||
const preguntas = data.map((fila) => {
|
||||
const opciones = [];
|
||||
Object.keys(fila).forEach(key => {
|
||||
if (key.startsWith('opcion')) {
|
||||
Object.keys(fila).forEach((key) => {
|
||||
if (key.startsWith("opcion")) {
|
||||
opciones.push({
|
||||
text: fila[key].trim(),
|
||||
correct: key === 'opcion_c'
|
||||
correct: key === "opcion_c",
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
pregunta: fila.pregunta.trim(),
|
||||
opciones: opciones,
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta
|
||||
? fila.retroalimentacion_correcta.trim()
|
||||
: "",
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
|
||||
? fila.retroalimentacion_incorrecta.trim()
|
||||
: "",
|
||||
};
|
||||
});
|
||||
return preguntas;
|
||||
@ -292,7 +335,7 @@
|
||||
const pregunta = questions[questionIndex];
|
||||
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
|
||||
|
||||
let opcionesHTML = '';
|
||||
let opcionesHTML = "";
|
||||
opcionesBarajadas.forEach((opcion, index) => {
|
||||
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" 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>
|
||||
@ -301,7 +344,7 @@
|
||||
});
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
html: `
|
||||
<div class="text-center mb-3">
|
||||
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
|
||||
@ -314,22 +357,20 @@
|
||||
showConfirmButton: false,
|
||||
allowOutsideClick: false,
|
||||
customClass: {
|
||||
popup: 'swal-wide bg-white border-0 rounded-3 shadow'
|
||||
popup: "swal-wide bg-white border-0 rounded-3 shadow",
|
||||
},
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "50em",
|
||||
didOpen: () => {
|
||||
|
||||
|
||||
$('.btn-answer').click(function () {
|
||||
const isCorrect = $(this).data('correct') === true;
|
||||
const puntos = $(this).data('puntos');
|
||||
$('.btn-answer').off('click hover').css('pointer-events', 'none');
|
||||
$(".btn-answer").click(function () {
|
||||
const isCorrect = $(this).data("correct") === true;
|
||||
const puntos = $(this).data("puntos");
|
||||
$(".btn-answer").off("click hover").css("pointer-events", "none");
|
||||
|
||||
if (isCorrect) {
|
||||
correctQuestions++;
|
||||
const puntosActuales = parseInt($('#puntos').text()) + puntos;
|
||||
$('#puntos').text(puntosActuales.toString().padStart(3, '0'));
|
||||
const puntosActuales = parseInt($("#puntos").text()) + puntos;
|
||||
$("#puntos").text(puntosActuales.toString().padStart(3, "0"));
|
||||
}
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
@ -339,27 +380,30 @@
|
||||
mostrarFeedback(isCorrect, pregunta, questionIndex);
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function mostrarFeedback(isCorrect, pregunta, questionIndex) {
|
||||
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
|
||||
const retroalimentacion = isCorrect
|
||||
? pregunta.retroalimentacion_correcta
|
||||
: pregunta.retroalimentacion_incorrecta;
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
|
||||
text: retroalimentacion || '',
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
text: retroalimentacion || "",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
|
||||
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
confirmButton:
|
||||
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
},
|
||||
confirmButtonText: "Continuar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
$('.btn-question-pop').eq(questionIndex).addClass('completed');
|
||||
$(".btn-question-pop").eq(questionIndex).addClass("completed");
|
||||
currentQuestionIndex++;
|
||||
|
||||
if (currentQuestionIndex >= questions.length) {
|
||||
@ -367,33 +411,33 @@
|
||||
finalizarJuego();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function finalizarJuego() {
|
||||
const puntosFinal = parseInt($('#puntos').text());
|
||||
const puntosFinal = parseInt($("#puntos").text());
|
||||
const aprobado = puntosFinal >= 1000;
|
||||
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$(".wrap-course-content").addClass("fake1").removeClass("fake");
|
||||
|
||||
if (aprobado) {
|
||||
CourseNav.setSlideVisited();
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
} else {
|
||||
CourseNav.setSlideVisited();
|
||||
$('.col-reintentar').show();
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$(".col-reintentar").show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
}
|
||||
}
|
||||
|
||||
$('.btn-question-pop').click(function () {
|
||||
$(".btn-question-pop").click(function () {
|
||||
const index = $(this).index();
|
||||
const puntosEnJuego = parseInt($(this).data('puntos'));
|
||||
if (!$(this).hasClass('completed') && !$(this).hasClass('disabled')) {
|
||||
$(this).removeClass('animate__pulse animate__infinite').addClass('disabled');
|
||||
const puntosEnJuego = parseInt($(this).data("puntos"));
|
||||
if (!$(this).hasClass("completed") && !$(this).hasClass("disabled")) {
|
||||
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
|
||||
CourseNav.soundClick();
|
||||
mostrarPregunta(index, puntosEnJuego);
|
||||
}
|
||||
@ -404,4 +448,4 @@
|
||||
questions = shuffleArray(procesarPreguntas(hojaDatos));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
}
|
||||
|
||||
.bg-rosa-mixto {
|
||||
background: #D9C5D7;
|
||||
background: linear-gradient(to bottom, #D9C5D7 0%, #EDE3EC 100%);
|
||||
background: #d9c5d7;
|
||||
background: linear-gradient(to bottom, #d9c5d7 0%, #ede3ec 100%);
|
||||
}
|
||||
|
||||
.paqueteria {
|
||||
@ -57,11 +57,11 @@
|
||||
}
|
||||
|
||||
.btn-paquete.disabled {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-paquete.completed {
|
||||
opacity: 1!important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#camion-transporte {
|
||||
@ -71,7 +71,7 @@
|
||||
.btn-answer {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,.5);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.letter {
|
||||
@ -101,29 +101,35 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-center mb-1 animate__animated animate__zoomIn mb-3">
|
||||
<img src="img/14.0.png" class="img-fluid">
|
||||
<img src="img/14.0.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-7 text-center animate__animated animate__flipInX">
|
||||
<div class="card bg-transparent border-0 rounded-3 p-0 shadow-none">
|
||||
<div class="position-relative w-100">
|
||||
<p>Gracias a que la diálisis peritoneal es una terapia <strong class="text-lila-claro">portable y autoadministrada,</strong> le permite mayores
|
||||
posibilidades de actividad laboral, vida escolar y posibilidad de viajar.</p>
|
||||
<p>
|
||||
Gracias a que la diálisis peritoneal es una terapia
|
||||
<strong class="text-lila-claro">portable,</strong> le permite mayores
|
||||
posibilidades de actividad laboral, vida escolar y posibilidad de viajar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s">
|
||||
<div
|
||||
class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s"
|
||||
>
|
||||
<div
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,15 +140,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center'>
|
||||
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 px-0">
|
||||
@ -150,8 +156,11 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book0.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Haga clic en cada caja y responda correctamente para recolectarla y completar la entrega domiciliaria.</p>
|
||||
<img src="img/book0.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Haga clic en cada caja y responda
|
||||
correctamente para recolectarla y completar la entrega domiciliaria.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -160,47 +169,64 @@
|
||||
<div class="col-12 px-0 bg-rosa-mixto pt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10 text-center">
|
||||
<div class="d-inline-flex position-relative camino-entrega flex-column justify-content-center align-items-center gap-2">
|
||||
<div
|
||||
class="d-inline-flex position-relative camino-entrega flex-column justify-content-center align-items-center gap-2"
|
||||
>
|
||||
<div id="camion-transporte" class="paqueteria position-absolute">
|
||||
<img src="img/14.2.png" class="img-fluid">
|
||||
<img src="img/14.2.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="recorrido ms-auto">
|
||||
<div id="paquete0" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite">
|
||||
<div
|
||||
id="paquete0"
|
||||
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<div class="position-absolute check-question w-100">
|
||||
<img src="img/14.5.png" class="img-fluid">
|
||||
<img src="img/14.5.png" class="img-fluid" />
|
||||
</div>
|
||||
<img src="img/14.3.png" class="img-fluid">
|
||||
<img src="img/14.3.png" class="img-fluid" />
|
||||
</div>
|
||||
<div id="paquete1" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
|
||||
<div
|
||||
id="paquete1"
|
||||
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
|
||||
>
|
||||
<div class="position-absolute check-question w-100">
|
||||
<img src="img/14.6.png" class="img-fluid">
|
||||
<img src="img/14.6.png" class="img-fluid" />
|
||||
</div>
|
||||
<img src="img/14.3.png" class="img-fluid">
|
||||
<img src="img/14.3.png" class="img-fluid" />
|
||||
</div>
|
||||
<div id="paquete2" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
|
||||
<div
|
||||
id="paquete2"
|
||||
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
|
||||
>
|
||||
<div class="position-absolute check-question w-100">
|
||||
<img src="img/14.7.png" class="img-fluid">
|
||||
<img src="img/14.7.png" class="img-fluid" />
|
||||
</div>
|
||||
<img src="img/14.3.png" class="img-fluid">
|
||||
<img src="img/14.3.png" class="img-fluid" />
|
||||
</div>
|
||||
<div id="paquete3" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
|
||||
<div
|
||||
id="paquete3"
|
||||
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
|
||||
>
|
||||
<div class="position-absolute check-question w-100">
|
||||
<img src="img/14.8.png" class="img-fluid">
|
||||
<img src="img/14.8.png" class="img-fluid" />
|
||||
</div>
|
||||
<img src="img/14.3.png" class="img-fluid">
|
||||
<img src="img/14.3.png" class="img-fluid" />
|
||||
</div>
|
||||
<div id="paquete4" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
|
||||
<div
|
||||
id="paquete4"
|
||||
class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
|
||||
>
|
||||
<div class="position-absolute check-question w-100">
|
||||
<img src="img/14.9.png" class="img-fluid">
|
||||
<img src="img/14.9.png" class="img-fluid" />
|
||||
</div>
|
||||
<img src="img/14.3.png" class="img-fluid">
|
||||
<img src="img/14.3.png" class="img-fluid" />
|
||||
</div>
|
||||
<div id="fin" class="text-center position-relative">
|
||||
<img src="img/14.4.png" class="img-fluid">
|
||||
<img src="img/14.4.png" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="carretera">
|
||||
<img src="img/14.1.png" class="img-fluid">
|
||||
<img src="img/14.1.png" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -211,27 +237,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
onclick="CourseNav.reload()"
|
||||
>
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -243,35 +273,35 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
let currentQuestion;
|
||||
let correctQuestions = 0;
|
||||
let maxQuestions = -1;
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
$(".btn-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
$("#inicio").hide();
|
||||
$("#desarrollo").show();
|
||||
});
|
||||
|
||||
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
|
||||
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.open("GET", url, true);
|
||||
xhr.responseType = "arraybuffer";
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
workbook.SheetNames.forEach((sheetName) => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
@ -281,21 +311,25 @@
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
const preguntas = data.map(fila => {
|
||||
const preguntas = data.map((fila) => {
|
||||
const opciones = [];
|
||||
Object.keys(fila).forEach(key => {
|
||||
if (key.startsWith('opcion')) {
|
||||
Object.keys(fila).forEach((key) => {
|
||||
if (key.startsWith("opcion")) {
|
||||
opciones.push({
|
||||
text: fila[key].trim(),
|
||||
correct: key === 'opcion_c'
|
||||
correct: key === "opcion_c",
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
pregunta: fila.pregunta.trim(),
|
||||
opciones: opciones,
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta
|
||||
? fila.retroalimentacion_correcta.trim()
|
||||
: "",
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
|
||||
? fila.retroalimentacion_incorrecta.trim()
|
||||
: "",
|
||||
};
|
||||
});
|
||||
return preguntas;
|
||||
@ -315,7 +349,7 @@
|
||||
const pregunta = questions[questionIndex];
|
||||
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
|
||||
|
||||
let opcionesHTML = '';
|
||||
let opcionesHTML = "";
|
||||
opcionesBarajadas.forEach((opcion, index) => {
|
||||
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
|
||||
@ -324,7 +358,7 @@
|
||||
});
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
html: `
|
||||
<div class="text-center mb-3">
|
||||
<h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
|
||||
@ -336,14 +370,14 @@
|
||||
showConfirmButton: false,
|
||||
allowOutsideClick: false,
|
||||
customClass: {
|
||||
popup: 'swal-wide bg-white border-0 rounded-3 shadow'
|
||||
popup: "swal-wide bg-white border-0 rounded-3 shadow",
|
||||
},
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "50em",
|
||||
didOpen: () => {
|
||||
$('.btn-answer').click(function() {
|
||||
const isCorrect = $(this).data('correct') === true;
|
||||
$('.btn-answer').off('click').css('pointer-events', 'none');
|
||||
$(".btn-answer").click(function () {
|
||||
const isCorrect = $(this).data("correct") === true;
|
||||
$(".btn-answer").off("click").css("pointer-events", "none");
|
||||
|
||||
if (isCorrect) {
|
||||
correctQuestions++;
|
||||
@ -356,46 +390,50 @@
|
||||
mostrarFeedback(isCorrect, pregunta, questionIndex);
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function mostrarFeedback(isCorrect, pregunta, questionIndex) {
|
||||
const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
|
||||
const retroalimentacion = isCorrect
|
||||
? pregunta.retroalimentacion_correcta
|
||||
: pregunta.retroalimentacion_incorrecta;
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
|
||||
text: retroalimentacion || '',
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
text: retroalimentacion || "",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
|
||||
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
confirmButton:
|
||||
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
},
|
||||
confirmButtonText: "Continuar",
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
didClose: () => {
|
||||
const currentPaquete = $(`#paquete${questionIndex}`);
|
||||
currentPaquete.removeClass('animate__pulse animate__infinite').addClass('completed');
|
||||
currentPaquete.removeClass("animate__pulse animate__infinite").addClass("completed");
|
||||
|
||||
// Cambiar imagen del check
|
||||
const checkImg = currentPaquete.find('.check-question img');
|
||||
checkImg.attr('src', isCorrect ? 'img/14.11.png' : 'img/14.10.png');
|
||||
const checkImg = currentPaquete.find(".check-question img");
|
||||
checkImg.attr("src", isCorrect ? "img/14.11.png" : "img/14.10.png");
|
||||
|
||||
if (isCorrect) {
|
||||
// Mover camión
|
||||
const camion = $('#camion-transporte');
|
||||
const camion = $("#camion-transporte");
|
||||
const paqueteWidth = currentPaquete.outerWidth() + 15; // incluye gap
|
||||
const currentTransform = camion.css('transform');
|
||||
const currentX = currentTransform === 'none' ? 0 : parseFloat(currentTransform.split(',')[4]) || 0;
|
||||
const currentTransform = camion.css("transform");
|
||||
const currentX =
|
||||
currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
|
||||
const newX = currentX + paqueteWidth;
|
||||
camion.css('transform', `translateX(${newX}px)`);
|
||||
camion.css("transform", `translateX(${newX}px)`);
|
||||
}
|
||||
|
||||
// Habilitar siguiente paquete
|
||||
if (questionIndex < questions.length - 1) {
|
||||
$(`#paquete${questionIndex + 1}`).removeClass('disabled');
|
||||
$(`#paquete${questionIndex + 1}`).removeClass("disabled");
|
||||
}
|
||||
|
||||
currentQuestionIndex++;
|
||||
@ -404,13 +442,14 @@
|
||||
// Si respondió todas correctamente, mover al destino final
|
||||
if (correctQuestions === questions.length) {
|
||||
setTimeout(() => {
|
||||
const camion = $('#camion-transporte');
|
||||
const currentTransform = camion.css('transform');
|
||||
const currentX = currentTransform === 'none' ? 0 : parseFloat(currentTransform.split(',')[4]) || 0;
|
||||
const camion = $("#camion-transporte");
|
||||
const currentTransform = camion.css("transform");
|
||||
const currentX =
|
||||
currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
|
||||
const paqueteWidth = currentPaquete.outerWidth() + 25;
|
||||
const newX = currentX + paqueteWidth;
|
||||
camion.css('transform', `translateX(${newX}px)`);
|
||||
console.log('Moviendo camión al fin:', newX);
|
||||
camion.css("transform", `translateX(${newX}px)`);
|
||||
console.log("Moviendo camión al fin:", newX);
|
||||
}, 1000);
|
||||
}
|
||||
const delay = correctQuestions === questions.length ? 3000 : 1500;
|
||||
@ -418,33 +457,37 @@
|
||||
finalizarJuego();
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function finalizarJuego() {
|
||||
const aprobado = correctQuestions >= Math.ceil(questions.length * 0.75);
|
||||
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$(".wrap-course-content").addClass("fake1").removeClass("fake");
|
||||
|
||||
CourseNav.setSlideVisited();
|
||||
|
||||
if (aprobado) {
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
} else {
|
||||
$('.col-reintentar').show();
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
$(".col-reintentar").show();
|
||||
$("#desarrollo").hide();
|
||||
$("#cierre").show();
|
||||
}
|
||||
}
|
||||
|
||||
$('.btn-paquete').click(function() {
|
||||
const paqueteId = $(this).attr('id');
|
||||
const index = parseInt(paqueteId.replace('paquete', ''));
|
||||
$(".btn-paquete").click(function () {
|
||||
const paqueteId = $(this).attr("id");
|
||||
const index = parseInt(paqueteId.replace("paquete", ""));
|
||||
|
||||
if (!$(this).hasClass('disabled') && !$(this).hasClass('completed') && index < questions.length) {
|
||||
$(this).removeClass('animate__pulse animate__infinite').addClass('disabled');
|
||||
if (
|
||||
!$(this).hasClass("disabled") &&
|
||||
!$(this).hasClass("completed") &&
|
||||
index < questions.length
|
||||
) {
|
||||
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
|
||||
CourseNav.soundClick();
|
||||
mostrarPregunta(index);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user