update
This commit is contained in:
parent
736655e30f
commit
e2479b31cc
BIN
Actividades_Manual_Vantive.xlsx
Normal file
BIN
Actividades_Manual_Vantive.xlsx
Normal file
Binary file not shown.
@ -15,12 +15,63 @@
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fake2 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.btn-comenzar {
|
||||
border-radius: 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#svg-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#svg-container svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-answer {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.letter {
|
||||
background-color: #6c9d7a;
|
||||
border-radius: 10px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.btn-answer.selected {
|
||||
background-color: #d9c5d7;
|
||||
}
|
||||
|
||||
.btn-answer.selected .letter {
|
||||
background-color: #925c8d;
|
||||
}
|
||||
|
||||
.btn-answer:hover {
|
||||
background-color: #d9c5d7;
|
||||
}
|
||||
|
||||
.btn-answer:hover .letter {
|
||||
background-color: #925c8d;
|
||||
}
|
||||
|
||||
.btn-reintentar {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
@ -45,7 +96,7 @@
|
||||
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>
|
||||
<div class="position-relative w-100 bg-verde-claro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
||||
<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">
|
||||
@ -73,7 +124,7 @@
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 px-0">
|
||||
<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">
|
||||
@ -85,6 +136,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7">
|
||||
<div class="card bg-white border-0 rounded-4 bx-shadow p-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 txt-question"></div>
|
||||
<div class="col-12 content-answers"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 text-center">
|
||||
<div id="svg-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
|
||||
<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()">
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,6 +187,25 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.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');
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
e.preventDefault();
|
||||
@ -102,5 +214,134 @@
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
});
|
||||
|
||||
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
callback(result);
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
const preguntas = data.map(fila => {
|
||||
const opciones = [];
|
||||
Object.keys(fila).forEach(key => {
|
||||
if (key.startsWith('opcion')) {
|
||||
opciones.push({
|
||||
text: fila[key].trim(),
|
||||
correct: key === 'opcion_c'
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
pregunta: fila.pregunta.trim(),
|
||||
opciones: opciones,
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
|
||||
};
|
||||
});
|
||||
return preguntas;
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function displayQuestion() {
|
||||
currentQuestion = questions[currentQuestionIndex];
|
||||
$('.txt-question').text(currentQuestion.pregunta);
|
||||
|
||||
$('.content-answers').empty();
|
||||
|
||||
// Shuffle answers for current question
|
||||
const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
|
||||
|
||||
shuffledAnswers.forEach((opcion, index) => {
|
||||
const answerHtml = `
|
||||
<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>
|
||||
`;
|
||||
$('.content-answers').append(answerHtml);
|
||||
});
|
||||
|
||||
initializeAnswers();
|
||||
}
|
||||
|
||||
function initializeAnswers() {
|
||||
$('.btn-answer').off('click').on('click', function() {
|
||||
const isCorrect = $(this).data('correct');
|
||||
|
||||
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++;
|
||||
|
||||
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();
|
||||
|
||||
CourseNav.setSlideVisited();
|
||||
|
||||
if (percentage < 80) {
|
||||
$('.col-reintentar').show();
|
||||
}
|
||||
}
|
||||
|
||||
readExcelFile(urlExcelFile, function (data) {
|
||||
const hojaDatos = data["Diapositiva 4"];
|
||||
questions = shuffleArray(procesarPreguntas(hojaDatos)).slice(0, maxQuestions);
|
||||
loadSVG();
|
||||
displayQuestion();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
234
contenido/04.html
Normal file
234
contenido/04.html
Normal file
@ -0,0 +1,234 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fake1 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.btn-comenzar {
|
||||
border-radius: 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-grid {
|
||||
overflow: hidden;
|
||||
width: 1320px;
|
||||
height: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.img-sotable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.img-sotable.disabled {
|
||||
pointer-events: none;
|
||||
background-color: #84a816;
|
||||
}
|
||||
</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 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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/04.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card bg-verde-claro 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>La diálisis peritoneal (DP) equilibra líquidos y elimina compuestos de desecho al <strong class="text-primary">filtrar la sangre
|
||||
utilizando una membrana interna llamada peritoneo</strong>.</p>
|
||||
<p class="mb-0">El peritoneo, envuelve a la mayoría de los órganos abdominales y forma un espacio interno llamado: <strong class="text-primary">cavidad
|
||||
peritoneal.</strong></p>
|
||||
</div>
|
||||
<div
|
||||
class="position-relative w-100 bg-verde-claro-2 text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
||||
<p class="mb-0 text-verde-oscuro">A la secuencia de pasos que incluye al drenaje, permanencia e infusión se le conoce como: <strong>recambio</strong>
|
||||
</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">
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11' id="col-sortable">
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-10 text-center">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 mb-3">
|
||||
<div class="card bg-white border-0 rounded-3 bx-shadow py-2 px-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<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 recambio para colocarlos en el orden correcto.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-actividad">
|
||||
<div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
|
||||
<div class="img-sotable" data-order="0">
|
||||
<img src="img/04.1.webp" class="img-fluid">
|
||||
</div>
|
||||
<div class="img-sotable" data-order="1">
|
||||
<img src="img/04.2.webp" class="img-fluid">
|
||||
</div>
|
||||
<div class="img-sotable" data-order="2">
|
||||
<img src="img/04.3.webp" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
});
|
||||
|
||||
function shuffleArray(array) {
|
||||
let shuffled;
|
||||
do {
|
||||
shuffled = [...array];
|
||||
for (let i = shuffled.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
||||
}
|
||||
} while (isInCorrectOrder(shuffled));
|
||||
return shuffled;
|
||||
}
|
||||
|
||||
function isInCorrectOrder(array) {
|
||||
return array.every((item, index) => parseInt($(item).data('order')) === index);
|
||||
}
|
||||
|
||||
// Shuffle elements
|
||||
const $sortables = $('.img-sotable');
|
||||
const shuffled = shuffleArray($sortables.toArray());
|
||||
$('.custom-grid').empty().append(shuffled);
|
||||
|
||||
// Initialize sortable
|
||||
$('.custom-grid').sortable({
|
||||
items: '.img-sotable',
|
||||
cursor: 'grabbing',
|
||||
containment: "#coursenav-main-content",
|
||||
tolerance: 'pointer',
|
||||
helper: 'original',
|
||||
scroll: false,
|
||||
start: function (event, ui) {
|
||||
ui.item.css('z-index', 1000);
|
||||
},
|
||||
drag: function (event, ui) {
|
||||
ui.position.left = ui.position.left;
|
||||
ui.position.top = ui.position.top;
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
$('body').css('overflow', 'auto');
|
||||
},
|
||||
update: function () {
|
||||
checkOrder();
|
||||
}
|
||||
});
|
||||
|
||||
function checkOrder() {
|
||||
const $items = $('.custom-grid .img-sotable');
|
||||
let isCorrect = true;
|
||||
|
||||
$items.each(function (index) {
|
||||
if (parseInt($(this).data('order')) !== index) {
|
||||
isCorrect = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (isCorrect) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(good);
|
||||
$('.img-sotable').addClass('disabled');
|
||||
setTimeout(() => {
|
||||
isCompleted();
|
||||
}, 700);
|
||||
}
|
||||
}
|
||||
|
||||
function isCompleted() {
|
||||
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
591
contenido/05.html
Normal file
591
contenido/05.html
Normal file
@ -0,0 +1,591 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fake1 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.bg-custom {
|
||||
background-color: #ede3ec;
|
||||
}
|
||||
|
||||
.btn-comenzar {
|
||||
border-radius: 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drag-button {
|
||||
border-radius: 15px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background: #B68FB2;
|
||||
background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.drops_parts {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-drop {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.num-card {
|
||||
border-radius: .5rem;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.drop-option {
|
||||
width: 90%;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.content-custom {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.content-c2 {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.content-c3 {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.content-c4 {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.h-txt {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.btn-reintentar {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">DPCA y DPA</h4>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<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 ofrece <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>
|
||||
<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 la 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="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-6 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/05.0.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0' style="display: none;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center">
|
||||
<div id="part0" class="col-12 drops_parts">
|
||||
<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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="part1" class="col-12 drops_parts">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7">
|
||||
<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">
|
||||
<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>
|
||||
<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="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">
|
||||
<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>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<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">
|
||||
<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">
|
||||
<p class="mb-0 text-center h-txt">Tapón</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">DPCA y DPA</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
|
||||
$('.drops_parts').first().show();
|
||||
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
shuffleDragButtons();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
});
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function shuffleDragButtons() {
|
||||
const container = document.getElementById('drag-container');
|
||||
const buttons = Array.from(container.children);
|
||||
const shuffled = shuffleArray(buttons);
|
||||
shuffled.forEach(button => container.appendChild(button));
|
||||
}
|
||||
|
||||
function recreateDragContainer() {
|
||||
$('#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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
`);
|
||||
$('.drag-button').draggable({
|
||||
revert: 'invalid',
|
||||
revertDuration: 300,
|
||||
containment: "#desarrollo",
|
||||
cursor: "grabbing",
|
||||
start: function (event, ui) {
|
||||
$(this).css('z-index', 1000);
|
||||
ui.position.left = 0;
|
||||
ui.position.top = 0;
|
||||
},
|
||||
drag: function (event, ui) {
|
||||
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||
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;
|
||||
ui.position.left = newLeft / scale;
|
||||
ui.position.top = newTop / scale;
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
$(this).css('z-index', 1);
|
||||
}
|
||||
});
|
||||
shuffleDragButtons();
|
||||
}
|
||||
|
||||
const correctAnswers = {
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
6: 6,
|
||||
7: 7
|
||||
};
|
||||
|
||||
let completedDrops = { part0: 0, part1: 0 };
|
||||
let totalDropsPart0 = 3;
|
||||
let totalDropsPart1 = 5;
|
||||
let correctCount = 0;
|
||||
let totalQuestions = 8;
|
||||
|
||||
function finishActivity() {
|
||||
const percentage = (correctCount / totalQuestions) * 100;
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
if (percentage < 80) {
|
||||
$('.col-reintentar').show();
|
||||
}
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
$('.drag-button').draggable({
|
||||
revert: 'invalid',
|
||||
revertDuration: 300,
|
||||
containment: "#desarrollo",
|
||||
cursor: "grabbing",
|
||||
start: function (event, ui) {
|
||||
$(this).css('z-index', 1000);
|
||||
ui.position.left = 0;
|
||||
ui.position.top = 0;
|
||||
},
|
||||
drag: function (event, ui) {
|
||||
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||
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;
|
||||
ui.position.left = newLeft / scale;
|
||||
ui.position.top = newTop / scale;
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
$(this).css('z-index', 1);
|
||||
}
|
||||
});
|
||||
|
||||
$('.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 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');
|
||||
draggedItem.hide();
|
||||
|
||||
if (isCorrect) {
|
||||
correctCount++;
|
||||
} else {
|
||||
$(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger');
|
||||
}
|
||||
|
||||
if ($('#part0').is(':visible')) {
|
||||
completedDrops.part0++;
|
||||
if (completedDrops.part0 >= totalDropsPart0) {
|
||||
setTimeout(() => {
|
||||
$('#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');
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
} else if ($('#part1').is(':visible')) {
|
||||
completedDrops.part1++;
|
||||
}
|
||||
|
||||
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: () => {
|
||||
// Verificar si se completó la actividad después de cerrar el popup
|
||||
if (completedDrops.part1 >= totalDropsPart1) {
|
||||
finishActivity();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
354
contenido/06.html
Normal file
354
contenido/06.html
Normal file
@ -0,0 +1,354 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg02.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fake1 {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fake2 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.btn-respuesta {
|
||||
max-width: 550px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-comenzar {
|
||||
border-radius: 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-reintentar {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.indicator-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
</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 class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2>
|
||||
<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-6 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/06.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">El sitio de salida (SS) es <strong class="text-lila-claro">la piel que rodea al catéter</strong> y requiere de cuidados continuos para
|
||||
mantenerse en óptimas condiciones, permitiendo una terapia segura.</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">Descubramos más acerca de estos cuidados.</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">
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<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">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 mb-3">
|
||||
<div class="card bg-lila-claro text-white border-0 rounded-4 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/book2.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Lea lo que opinan dos doctores sobre los cuidados del sitio de salida. Analice sus argumentos y elija quién tiene la razón.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="d-flex justify-content-center align-items-center gap-2 flex-row indicadores-avance"></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div id="puzzle-versus" class="d-flex flex-row justify-content-center gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
|
||||
<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()">
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
|
||||
let questions;
|
||||
let currentQuestionIndex = 0;
|
||||
let currentQuestion;
|
||||
let correctQuestions = 0;
|
||||
let maxQuestions = 5;
|
||||
let currentFichaIndex = 0;
|
||||
let questionResults = [];
|
||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
|
||||
const imgPerso = ['img/06.1.png', 'img/06.2.png'];
|
||||
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('.wrap-course-content').addClass('fake1').removeClass('fake');
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
});
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
callback(result);
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
return data.map(fila => ({
|
||||
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
|
||||
opcion: fila.opcion ? String(fila.opcion).trim() : '',
|
||||
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : ''
|
||||
}));
|
||||
}
|
||||
|
||||
function createIndicators(total) {
|
||||
const container = $('.indicadores-avance');
|
||||
container.empty();
|
||||
for (let i = 0; i < total; i++) {
|
||||
const circle = $('<div class="indicator-circle"></div>');
|
||||
circle.css({
|
||||
'background-color': i === 0 ? '#2196F3' : '#E0E0E0'
|
||||
});
|
||||
circle.attr('data-index', i);
|
||||
container.append(circle);
|
||||
}
|
||||
}
|
||||
|
||||
function createVersusStructure() {
|
||||
if (currentQuestionIndex >= maxQuestions || currentQuestionIndex >= questions.length) {
|
||||
finishActivity();
|
||||
return;
|
||||
}
|
||||
|
||||
currentQuestion = questions[currentQuestionIndex];
|
||||
const shuffledImages = shuffleArray([...imgPerso]);
|
||||
const leftIsCorrect = Math.random() < 0.5;
|
||||
const leftResponse = leftIsCorrect ? currentQuestion.opcion_c : currentQuestion.opcion;
|
||||
const rightResponse = leftIsCorrect ? currentQuestion.opcion : currentQuestion.opcion_c;
|
||||
|
||||
const structure = `
|
||||
<div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${leftIsCorrect}">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
|
||||
<img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
|
||||
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="img/06.3.png" class="img-fluid mx-2 animate__animated animate__zoomIn">
|
||||
<div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${!leftIsCorrect}">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
|
||||
<img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
|
||||
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
$('#puzzle-versus').removeClass('animate__animated animate__zoomOut').html(structure);
|
||||
updateIndicators();
|
||||
initializeAnswers();
|
||||
}
|
||||
|
||||
function updateIndicators() {
|
||||
$('.indicator-circle').each(function(index) {
|
||||
if (index < currentQuestionIndex && questionResults[index] !== undefined) {
|
||||
const isCorrect = questionResults[index];
|
||||
$(this).css({
|
||||
'background-color': 'transparent',
|
||||
'background-image': `url(img/${isCorrect ? 'checkG' : 'checkB'}.png)`
|
||||
});
|
||||
} else if (index === currentQuestionIndex) {
|
||||
$(this).css({
|
||||
'background-color': '#2196F3',
|
||||
'background-image': 'none'
|
||||
});
|
||||
} else {
|
||||
$(this).css({
|
||||
'background-color': '#E0E0E0',
|
||||
'background-image': 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initializeAnswers() {
|
||||
$('.btn-respuesta').off('click').on('click', function() {
|
||||
const isCorrect = $(this).data('correct');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
|
||||
if (isCorrect) {
|
||||
correctQuestions++;
|
||||
}
|
||||
|
||||
questionResults[currentQuestionIndex] = isCorrect;
|
||||
|
||||
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: () => {
|
||||
$('#puzzle-versus').addClass('animate__animated animate__zoomOut');
|
||||
setTimeout(() => {
|
||||
currentQuestionIndex++;
|
||||
if (currentQuestionIndex < maxQuestions && currentQuestionIndex < questions.length) {
|
||||
createVersusStructure();
|
||||
} else {
|
||||
finishActivity();
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function finishActivity() {
|
||||
const totalQuestions = Math.min(maxQuestions, questions.length);
|
||||
const percentage = (correctQuestions / totalQuestions) * 100;
|
||||
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
|
||||
if (percentage < 80) {
|
||||
$('.col-reintentar').show();
|
||||
}
|
||||
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
// Cargar datos del Excel
|
||||
readExcelFile(urlExcelFile, function (data) {
|
||||
const hojaDatos = data["Diapositiva 12"];
|
||||
questions = shuffleArray(procesarPreguntas(hojaDatos));
|
||||
const totalQuestions = Math.min(maxQuestions, questions.length);
|
||||
createIndicators(totalQuestions);
|
||||
createVersusStructure();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
408
contenido/07.html
Normal file
408
contenido/07.html
Normal file
@ -0,0 +1,408 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fake1 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.btn-comenzar {
|
||||
border-radius: 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1280px; /* Esto limita el ancho total */
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
perspective: 1000px!important;
|
||||
}
|
||||
|
||||
.card-container.disabled {
|
||||
filter: grayscale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
</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 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-1 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-1 animate__animated animate__zoomIn">
|
||||
<img src="img/07.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
|
||||
<p>La línea de transferencia y el catéter deben <strong class="text-lila-claro">mantenerse alejados de gérmenes</strong> que ponen en riesgo su
|
||||
salud y vida.</p>
|
||||
<p class="mb-0">Por eso se utiliza una <strong class="text-lila-claro">técnica aséptica para la manipulación de su acceso peritoneal,</strong> ya sea para
|
||||
realizar un recambio, explorar su orificio de salida o procedimientos realizados por 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">
|
||||
Observemos los pasos que debe tomar en cuenta.
|
||||
</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">
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-10 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 mb-3 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 mb-3">
|
||||
<div class="card bg-verde-claro border-0 rounded-4 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/book3.png" class="img-fluid">
|
||||
<p class="mb-0"><strong>Instrucciones:</strong> Dé clic en las tarjetas para encontrar los pares y descubrir los pasos que se deben tener en cuenta para realizar una terapia segura en casa.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
|
||||
<div class="row-questions custom-grid" id="row-questions">
|
||||
<!--Carta 1 Up-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.2.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 2 Up-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.3.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 3 Up-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.4.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 4 Up-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 5 Up-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.6.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 6 Up-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.7.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-answer custom-grid" id="row-answer">
|
||||
<!--Carta 1 Down-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.2c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 2 Down-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.3c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 3 Down-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.4c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 4 Down-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.5c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 5 Down-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.6c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<!--Carta 6 Down-->
|
||||
<div class="card-container">
|
||||
<div class="front">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="back">
|
||||
<img src="img/07.7c.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
const flip_sound = CourseNav.createSound('audio/flip.mp3');
|
||||
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
});
|
||||
|
||||
// Función para asignar pares a cada tarjeta
|
||||
function assignPairs(fatherId) {
|
||||
const optionsContainer = document.getElementById(fatherId);
|
||||
const optionsArray = Array.from(optionsContainer.children);
|
||||
optionsArray.forEach((option, index) => {
|
||||
option.setAttribute('data-par', index);
|
||||
});
|
||||
}
|
||||
|
||||
// Función para mezclar las tarjetas dentro del contenedor especificado
|
||||
function randomizeOptions(fatherId) {
|
||||
const optionsContainer = document.getElementById(fatherId);
|
||||
const optionsArray = Array.from(optionsContainer.children);
|
||||
const shuffledOptions = optionsArray.sort(() => Math.random() - 0.5);
|
||||
shuffledOptions.forEach(option => optionsContainer.appendChild(option));
|
||||
}
|
||||
|
||||
// Inicializar el plugin flip y configurar la lógica del memorama con la restricción de fila
|
||||
function initializeFlip() {
|
||||
let flippedCards = [];
|
||||
let lastFlippedRow = ""; // Para rastrear la última fila girada
|
||||
|
||||
$(".card-container").flip({
|
||||
trigger: 'manual' // Control manual del volteo
|
||||
});
|
||||
|
||||
$(".card-container").on("click", function () {
|
||||
const $card = $(this);
|
||||
const currentRow = $card.closest(".row-answer").length > 0 ? "row-answer" : "row-questions";
|
||||
|
||||
// Limitar el giro a una carta por fila y evitar tres giros
|
||||
if (flippedCards.length < 2 && (flippedCards.length === 0 || currentRow !== lastFlippedRow)) {
|
||||
$card.flip(true);
|
||||
flippedCards.push($card);
|
||||
lastFlippedRow = currentRow;
|
||||
flip_sound.play();
|
||||
// Si hay dos cartas volteadas, verificar coincidencia
|
||||
if (flippedCards.length === 2) {
|
||||
const [firstCard, secondCard] = flippedCards;
|
||||
|
||||
if (firstCard.data("par") === secondCard.data("par")) {
|
||||
// Las tarjetas coinciden, dejarlas volteadas y marcar como emparejadas
|
||||
firstCard.addClass("disabled");
|
||||
secondCard.addClass("disabled");
|
||||
// Agregar el efecto de resplandor
|
||||
gsap.to(firstCard, {
|
||||
duration: 1,
|
||||
boxShadow: "0px 0px 20px 10px #fff",
|
||||
onComplete: function () {
|
||||
// Quitar el efecto de resplandor después de 2 segundos
|
||||
gsap.to(firstCard, {
|
||||
duration: 1,
|
||||
delay: 1,
|
||||
boxShadow: "0px 0px 0px 0px #fff"
|
||||
});
|
||||
}
|
||||
});
|
||||
// Agregar el efecto de resplandor
|
||||
gsap.to(secondCard, {
|
||||
duration: 1,
|
||||
boxShadow: "0px 0px 20px 10px #fff",
|
||||
onComplete: function () {
|
||||
// Quitar el efecto de resplandor después de 2 segundos
|
||||
gsap.to(secondCard, {
|
||||
duration: 1,
|
||||
delay: 1,
|
||||
boxShadow: "0px 0px 0px 0px #fff"
|
||||
});
|
||||
}
|
||||
});
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: 'img/good.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: () => {
|
||||
flippedCards = [];
|
||||
checkGameCompletion();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
|
||||
|
||||
Swal.fire({
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
imageUrl: '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: () => {
|
||||
// Las tarjetas no coinciden, voltearlas de nuevo después de un breve retraso
|
||||
setTimeout(() => {
|
||||
firstCard.flip(false);
|
||||
secondCard.flip(false);
|
||||
flippedCards = [];
|
||||
lastFlippedRow = ""; // Reiniciar el rastreo de fila
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Verificar si todas las tarjetas han sido emparejadas
|
||||
function checkGameCompletion() {
|
||||
const totalPairs = $(".card-container").length / 2;
|
||||
const matchedPairs = $(".card-container.disabled").length / 2;
|
||||
|
||||
if (matchedPairs === totalPairs) {
|
||||
setTimeout(isCompleted, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function isCompleted() {
|
||||
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
assignPairs('row-answer');
|
||||
assignPairs('row-questions');
|
||||
randomizeOptions('row-answer');
|
||||
randomizeOptions('row-questions');
|
||||
initializeFlip();
|
||||
});
|
||||
</script>
|
||||
368
contenido/08.html
Normal file
368
contenido/08.html
Normal file
@ -0,0 +1,368 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg01.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fake1 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.btn-comenzar {
|
||||
border-radius: 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drag-item {
|
||||
width: 25%;
|
||||
border-radius: 15px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.back-custom {
|
||||
width: 24%;
|
||||
}
|
||||
|
||||
.drop-item {
|
||||
width: 90%;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.btn-reintentar {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-11'>
|
||||
<div class='row justify-content-center'>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">Higiene y limpieza</h4>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 text-center animate__animated animate__zoomIn">
|
||||
<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>El jabón que utilice para el lavado de manos de preferencia debe ser <strong class="text-lila-claro">líquido</strong>, sin embargo, lo
|
||||
prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p>
|
||||
<p><strong class="text-lila-claro">Lo mismo ocurre con la toalla </strong>que utilice para secar sus manos.</p>
|
||||
<p class="mb-0">Sus manos, después de un correcto lavado, se encontrarán <strong class="text-lila-claro">limpias pero nunca estériles.</strong></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">Para un recambio seguro bajo ningún motivo debe tocar las zonas estériles (libres de gérmenes) en el sistema de DP.</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">
|
||||
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 mb-1 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">Higiene y limpieza</h4>
|
||||
</div>
|
||||
<div class="col-10 mb-3">
|
||||
<div class="card bg-lila-rosa border-0 rounded-4 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> 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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="col-12">
|
||||
<div id="content-drops" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<img src="img/cierre_actividad.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 text-center">
|
||||
<h4 class="fw-bold text-verde-pino">Higiene y limpieza</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
|
||||
$('.btn-comenzar').click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
$('#inicio').hide();
|
||||
$('#desarrollo').show();
|
||||
});
|
||||
|
||||
const imgDrop = ['img/08.0.png', 'img/08.0.png', 'img/08.0.png', 'img/08.0.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';
|
||||
|
||||
function readExcelFile(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.onload = function (e) {
|
||||
var arrayBuffer = xhr.response;
|
||||
var data = new Uint8Array(arrayBuffer);
|
||||
var workbook = XLSX.read(data, { type: "array" });
|
||||
var result = {};
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
var sheet = workbook.Sheets[sheetName];
|
||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||
});
|
||||
callback(result);
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function procesarPreguntas(data) {
|
||||
const preguntas = data.map(fila => {
|
||||
const opciones = [];
|
||||
Object.keys(fila).forEach(key => {
|
||||
if (key.startsWith('opcion') && fila[key]) {
|
||||
opciones.push({
|
||||
text: String(fila[key]).trim(),
|
||||
correct: key === 'opcion_c'
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
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() : ''
|
||||
};
|
||||
});
|
||||
return preguntas;
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function createDragItems() {
|
||||
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
|
||||
};
|
||||
questions.forEach((question, index) => {
|
||||
question.opciones.forEach((opcion, opcionIndex) => {
|
||||
const dragValue = dragMapping[opcion.text] !== undefined ? dragMapping[opcion.text] : 0;
|
||||
const dragItem = `
|
||||
<div class="drag-item px-3 py-2 bg-verde-claro-2 text-verde-oscuro fw-bold bx-shadow" data-drag="${dragValue}">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center w-100 h-100">${opcion.text}</div>
|
||||
</div>
|
||||
`;
|
||||
container.append(dragItem);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function createDropItems() {
|
||||
const container = $('#content-drops');
|
||||
container.empty();
|
||||
imgDrop.forEach((imagen, index) => {
|
||||
const dropItem = `
|
||||
<div class="card back-custom p-2 bx-shadow rounded-3 border-0">
|
||||
<div class="w-100 container-drop gap-2">
|
||||
<div class="position-relative w-100 text-center mx-auto">
|
||||
<img src="${imagen}" class="img-fluid">
|
||||
</div>
|
||||
<div class="card-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">${index + 1}</h3>
|
||||
</div>
|
||||
<div class="drop-item px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="${index}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
container.append(dropItem);
|
||||
});
|
||||
}
|
||||
|
||||
function initializeDragDrop() {
|
||||
let correctCount = 0;
|
||||
let totalItems = 4;
|
||||
|
||||
$('.drag-item').draggable({
|
||||
revert: 'invalid',
|
||||
revertDuration: 300,
|
||||
containment: "#desarrollo",
|
||||
cursor: "grabbing",
|
||||
start: function (event, ui) {
|
||||
$(this).css({'z-index': 1000, 'transform': 'scale(0.8)'});
|
||||
ui.position.left = 0;
|
||||
ui.position.top = 0;
|
||||
},
|
||||
drag: function (event, ui) {
|
||||
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||
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;
|
||||
ui.position.left = newLeft / scale;
|
||||
ui.position.top = newTop / scale;
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
$(this).css({'z-index': 1, 'transform': 'scale(1)'});
|
||||
}
|
||||
});
|
||||
|
||||
$('.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 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');
|
||||
draggedItem.hide();
|
||||
|
||||
if (isCorrect) {
|
||||
correctCount++;
|
||||
} else {
|
||||
$(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',
|
||||
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 ($('.drag-item:visible').length === 0) {
|
||||
const percentage = (correctCount / totalItems) * 100;
|
||||
$('#desarrollo').hide();
|
||||
$('#cierre').show();
|
||||
if (percentage < 80) {
|
||||
$('.col-reintentar').show();
|
||||
}
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function shuffleDragItems() {
|
||||
const container = $('#content-drags');
|
||||
const items = container.children().toArray();
|
||||
const shuffled = shuffleArray(items);
|
||||
shuffled.forEach(item => container.append(item));
|
||||
}
|
||||
|
||||
readExcelFile(urlExcelFile, function (data) {
|
||||
const hojaDatos = data["Diapositiva 16"];
|
||||
questions = shuffleArray(procesarPreguntas(hojaDatos)).slice(0, maxQuestions);
|
||||
createDragItems();
|
||||
createDropItems();
|
||||
shuffleDragItems();
|
||||
initializeDragDrop();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
2
css/theme.min.css
vendored
2
css/theme.min.css
vendored
File diff suppressed because one or more lines are too long
@ -13,6 +13,7 @@ $custom-colors: (
|
||||
'verde-pasto': #84a816,
|
||||
'verde-claro': #d6e3da,
|
||||
'verde-gris': #cadcd4,
|
||||
'verde-claro-2': #b3cdb9,
|
||||
'lila-claro': #905c8b,
|
||||
'morado-claro': #915c8c,
|
||||
'gris': #959595,
|
||||
|
||||
@ -73,6 +73,7 @@
|
||||
--bs-verde-pasto: #84a816;
|
||||
--bs-verde-claro: #d6e3da;
|
||||
--bs-verde-gris: #cadcd4;
|
||||
--bs-verde-claro-2: #b3cdb9;
|
||||
--bs-lila-claro: #905c8b;
|
||||
--bs-morado-claro: #915c8c;
|
||||
--bs-gris: #959595;
|
||||
@ -102,6 +103,7 @@
|
||||
--bs-verde-pasto-rgb: 132, 168, 22;
|
||||
--bs-verde-claro-rgb: 214, 227, 218;
|
||||
--bs-verde-gris-rgb: 202, 220, 212;
|
||||
--bs-verde-claro-2-rgb: 179, 205, 185;
|
||||
--bs-lila-claro-rgb: 144, 92, 139;
|
||||
--bs-morado-claro-rgb: 145, 92, 140;
|
||||
--bs-gris-rgb: 149, 149, 149;
|
||||
@ -3339,6 +3341,23 @@ textarea.form-control-lg {
|
||||
--bs-btn-disabled-border-color: #cadcd4;
|
||||
}
|
||||
|
||||
.btn-verde-claro-2 {
|
||||
--bs-btn-color: #000;
|
||||
--bs-btn-bg: #b3cdb9;
|
||||
--bs-btn-border-color: #b3cdb9;
|
||||
--bs-btn-hover-color: #000;
|
||||
--bs-btn-hover-bg: #bed5c4;
|
||||
--bs-btn-hover-border-color: #bbd2c0;
|
||||
--bs-btn-focus-shadow-rgb: 152, 174, 157;
|
||||
--bs-btn-active-color: #000;
|
||||
--bs-btn-active-bg: #c2d7c7;
|
||||
--bs-btn-active-border-color: #bbd2c0;
|
||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--bs-btn-disabled-color: #000;
|
||||
--bs-btn-disabled-bg: #b3cdb9;
|
||||
--bs-btn-disabled-border-color: #b3cdb9;
|
||||
}
|
||||
|
||||
.btn-lila-claro {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #905c8b;
|
||||
@ -3832,6 +3851,23 @@ textarea.form-control-lg {
|
||||
--bs-gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-verde-claro-2 {
|
||||
--bs-btn-color: #b3cdb9;
|
||||
--bs-btn-border-color: #b3cdb9;
|
||||
--bs-btn-hover-color: #000;
|
||||
--bs-btn-hover-bg: #b3cdb9;
|
||||
--bs-btn-hover-border-color: #b3cdb9;
|
||||
--bs-btn-focus-shadow-rgb: 179, 205, 185;
|
||||
--bs-btn-active-color: #000;
|
||||
--bs-btn-active-bg: #b3cdb9;
|
||||
--bs-btn-active-border-color: #b3cdb9;
|
||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--bs-btn-disabled-color: #b3cdb9;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #b3cdb9;
|
||||
--bs-gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-lila-claro {
|
||||
--bs-btn-color: #905c8b;
|
||||
--bs-btn-border-color: #905c8b;
|
||||
@ -5657,6 +5693,15 @@ textarea.form-control-lg {
|
||||
color: #414644;
|
||||
}
|
||||
|
||||
.alert-verde-claro-2 {
|
||||
--bs-alert-color: #48524a;
|
||||
--bs-alert-bg: #f0f5f1;
|
||||
--bs-alert-border-color: #e8f0ea;
|
||||
}
|
||||
.alert-verde-claro-2 .alert-link {
|
||||
color: #3a423b;
|
||||
}
|
||||
|
||||
.alert-lila-claro {
|
||||
--bs-alert-color: #563753;
|
||||
--bs-alert-bg: #e9dee8;
|
||||
@ -6340,6 +6385,20 @@ textarea.form-control-lg {
|
||||
border-color: #515855;
|
||||
}
|
||||
|
||||
.list-group-item-verde-claro-2 {
|
||||
color: #48524a;
|
||||
background-color: #f0f5f1;
|
||||
}
|
||||
.list-group-item-verde-claro-2.list-group-item-action:hover, .list-group-item-verde-claro-2.list-group-item-action:focus {
|
||||
color: #48524a;
|
||||
background-color: #d8ddd9;
|
||||
}
|
||||
.list-group-item-verde-claro-2.list-group-item-action.active {
|
||||
color: #ffffff;
|
||||
background-color: #48524a;
|
||||
border-color: #48524a;
|
||||
}
|
||||
|
||||
.list-group-item-lila-claro {
|
||||
color: #563753;
|
||||
background-color: #e9dee8;
|
||||
@ -8035,6 +8094,11 @@ textarea.form-control-lg {
|
||||
background-color: RGBA(202, 220, 212, var(--bs-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.text-bg-verde-claro-2 {
|
||||
color: #000 !important;
|
||||
background-color: RGBA(179, 205, 185, var(--bs-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.text-bg-lila-claro {
|
||||
color: #fff !important;
|
||||
background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
|
||||
@ -8232,6 +8296,13 @@ textarea.form-control-lg {
|
||||
color: #d5e3dd !important;
|
||||
}
|
||||
|
||||
.link-verde-claro-2 {
|
||||
color: #b3cdb9 !important;
|
||||
}
|
||||
.link-verde-claro-2:hover, .link-verde-claro-2:focus {
|
||||
color: #c2d7c7 !important;
|
||||
}
|
||||
|
||||
.link-lila-claro {
|
||||
color: #905c8b !important;
|
||||
}
|
||||
@ -8804,6 +8875,11 @@ textarea.form-control-lg {
|
||||
border-color: rgba(var(--bs-verde-gris-rgb), var(--bs-border-opacity)) !important;
|
||||
}
|
||||
|
||||
.border-verde-claro-2 {
|
||||
--bs-border-opacity: 1;
|
||||
border-color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-border-opacity)) !important;
|
||||
}
|
||||
|
||||
.border-lila-claro {
|
||||
--bs-border-opacity: 1;
|
||||
border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
|
||||
@ -9766,6 +9842,11 @@ textarea.form-control-lg {
|
||||
color: rgba(var(--bs-verde-gris-rgb), var(--bs-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.text-verde-claro-2 {
|
||||
--bs-text-opacity: 1;
|
||||
color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.text-lila-claro {
|
||||
--bs-text-opacity: 1;
|
||||
color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
|
||||
@ -9952,6 +10033,11 @@ textarea.form-control-lg {
|
||||
background-color: rgba(var(--bs-verde-gris-rgb), var(--bs-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.bg-verde-claro-2 {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.bg-lila-claro {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;
|
||||
|
||||
BIN
img/04.0.png
Normal file
BIN
img/04.0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
BIN
img/04.1.webp
Normal file
BIN
img/04.1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
img/04.2.webp
Normal file
BIN
img/04.2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
img/04.3.webp
Normal file
BIN
img/04.3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
img/05.0.png
Normal file
BIN
img/05.0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
img/05.1.png
Normal file
BIN
img/05.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
img/05.10.png
Normal file
BIN
img/05.10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
img/05.11.png
Normal file
BIN
img/05.11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
img/05.12.png
Normal file
BIN
img/05.12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/05.13.png
Normal file
BIN
img/05.13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/05.2.png
Normal file
BIN
img/05.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
img/05.3.png
Normal file
BIN
img/05.3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
img/05.4.png
Normal file
BIN
img/05.4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
img/05.5.png
Normal file
BIN
img/05.5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
img/05.6.png
Normal file
BIN
img/05.6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
img/05.7.png
Normal file
BIN
img/05.7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
img/05.8.png
Normal file
BIN
img/05.8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
img/05.9.png
Normal file
BIN
img/05.9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
img/06.0.png
Normal file
BIN
img/06.0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
img/06.1.png
Normal file
BIN
img/06.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
img/06.2.png
Normal file
BIN
img/06.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
img/06.3.png
Normal file
BIN
img/06.3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
img/07.0.png
Normal file
BIN
img/07.0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
img/07.1.png
Normal file
BIN
img/07.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
img/07.2.png
Normal file
BIN
img/07.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
img/07.2c.png
Normal file
BIN
img/07.2c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
img/07.3.png
Normal file
BIN
img/07.3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/07.3c.png
Normal file
BIN
img/07.3c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
img/07.4.png
Normal file
BIN
img/07.4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
img/07.4c.png
Normal file
BIN
img/07.4c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
img/07.5.png
Normal file
BIN
img/07.5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
img/07.5c.png
Normal file
BIN
img/07.5c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
img/07.6.png
Normal file
BIN
img/07.6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
img/07.6c.png
Normal file
BIN
img/07.6c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
img/07.7.png
Normal file
BIN
img/07.7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
img/07.7c.png
Normal file
BIN
img/07.7c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
img/08.0.png
Normal file
BIN
img/08.0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
img/bad.png
Normal file
BIN
img/bad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
img/bg03.jpg
Normal file
BIN
img/bg03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
img/bg04.jpg
Normal file
BIN
img/bg04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
img/book1.png
Normal file
BIN
img/book1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 471 B |
BIN
img/book2.png
Normal file
BIN
img/book2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
BIN
img/book3.png
Normal file
BIN
img/book3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 660 B |
BIN
img/checkB.png
Normal file
BIN
img/checkB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
img/checkG.png
Normal file
BIN
img/checkG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
img/cierre_actividad.png
Normal file
BIN
img/cierre_actividad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
img/good.png
Normal file
BIN
img/good.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
149
img/laberinto.svg
Normal file
149
img/laberinto.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.0 MiB |
@ -22,7 +22,7 @@
|
||||
<div class="wrap-course-adaptive overflow-hidden">
|
||||
<div class="wrap-course-content" id="wrap-course-content">
|
||||
<header>
|
||||
<nav class="navbar navbar-light bg-white sticky-top shadow-sm py-0" id="coursenav-navbar">
|
||||
<nav class="navbar navbar-light bg-transparent sticky-top shadow-sm py-0" id="coursenav-navbar">
|
||||
<div class="container-fluid d-flex align-items-center px-3">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand p-0 disabled ms-auto" href="#">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user