217 lines
7.4 KiB
HTML
217 lines
7.4 KiB
HTML
|
<style>
|
||
|
|
.fake {
|
||
|
|
background-image: url(img/bg01.jpg);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hr-style {
|
||
|
|
opacity: 1;
|
||
|
|
width: 15%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-drop {
|
||
|
|
position: relative;
|
||
|
|
background-color: #85a89d;
|
||
|
|
border-radius: 12px;
|
||
|
|
height: 63px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.num {
|
||
|
|
background-color: #115742;
|
||
|
|
border-radius: 12px;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-drag {
|
||
|
|
background: #B68FB2;
|
||
|
|
background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
|
||
|
|
border-radius: 12px;
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
width: 280px;
|
||
|
|
cursor: grab;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-drag:active {
|
||
|
|
cursor: grabbing;
|
||
|
|
}
|
||
|
|
|
||
|
|
.obj-drop {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class='page-sco py-2 py-md-0 h-100'>
|
||
|
|
<div class='container h-100'>
|
||
|
|
<div class='row justify-content-center align-items-center h-100'>
|
||
|
|
<div class='col-12'>
|
||
|
|
<div class='row justify-content-center'>
|
||
|
|
<div class="col-10 mb-2">
|
||
|
|
<h2 class="text-center fw-bold text-primary">Registros</h2>
|
||
|
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
||
|
|
</div>
|
||
|
|
<div class="col-10 px-0 mb-1">
|
||
|
|
<div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
|
||
|
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||
|
|
<img src="img/08.0.png" class="img-fluid mx-3">
|
||
|
|
<p class="mb-0"><strong>Instrucciones:</strong> Toma los tipos de terapia que se presentan en la caja y arrástralos hacia el registro que les corresponde.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12" id="drag-drop-activity">
|
||
|
|
<div class="row justify-content-center align-items-center">
|
||
|
|
<div class="col-4 col-drags">
|
||
|
|
<div class="d-flex justify-content-center align-items-center flex-column gap-3 content-drags">
|
||
|
|
<div class="btn-drag px-3 py-2 text-start" data-drag="0">
|
||
|
|
<p class="mb-0 text-white">Diálisis Peritoneal Continua Ambulatoria <strong>(DPCA)</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="btn-drag px-3 py-2 text-start" data-drag="1">
|
||
|
|
<p class="mb-0 text-white">Diálisis Peritoneal Automatizada <strong>(DPA)</strong></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-7">
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="row justify-content-center align-items-center">
|
||
|
|
<div class="col-6 text-center">
|
||
|
|
<img src="img/17.0.png" class="img-fluid mb-3"><br>
|
||
|
|
<div class="content-drop d-flex flex-row align-items-center gap-0">
|
||
|
|
<div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">0</h3></div>
|
||
|
|
<div class="obj-drop" data-drop="0"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 text-center">
|
||
|
|
<img src="img/17.1.png" class="img-fluid mb-3"><br>
|
||
|
|
<div class="content-drop d-flex flex-row align-items-center gap-0">
|
||
|
|
<div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">1</h3></div>
|
||
|
|
<div class="obj-drop" data-drop="1"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-none">
|
||
|
|
<div id="pop0">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class=" w-100 text-center">
|
||
|
|
<img src="img/17.2.png" class="img-fluid">
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-12 text-center mb-2">
|
||
|
|
<h3 class="text-secondary-dark fw-bold">¡No lo olvides!</h3>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 text-center">
|
||
|
|
<p class="mb-0">Siempre que acudas a la unidad de diálisis, debes llevarlos.</p>
|
||
|
|
</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');
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Shuffle btn-drag elements
|
||
|
|
const $dragElements = $('.btn-drag');
|
||
|
|
const shuffled = shuffleArray($dragElements.toArray());
|
||
|
|
$('.content-drags').empty().append(shuffled);
|
||
|
|
|
||
|
|
$('.btn-drag').draggable({
|
||
|
|
revert: 'invalid',
|
||
|
|
revertDuration: 300,
|
||
|
|
containment: "#drag-drop-activity",
|
||
|
|
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;
|
||
|
|
ui.position.left = newLeft;
|
||
|
|
ui.position.top = newTop;
|
||
|
|
},
|
||
|
|
stop: function (event, ui) {
|
||
|
|
$(this).css('z-index', 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.obj-drop').droppable({
|
||
|
|
accept: '.btn-drag',
|
||
|
|
tolerance: 'pointer',
|
||
|
|
drop: function (event, ui) {
|
||
|
|
const dragData = ui.helper.data('drag');
|
||
|
|
const dropData = $(this).data('drop');
|
||
|
|
|
||
|
|
if (dragData == dropData) {
|
||
|
|
CourseNav.audioController.stopAllSoundsAndPlay(good);
|
||
|
|
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
|
||
|
|
ui.helper.draggable('disable');
|
||
|
|
$(this).droppable('disable');
|
||
|
|
|
||
|
|
// Verificar si todos están completados
|
||
|
|
if ($('.obj-drop:not(.ui-droppable-disabled)').length === 0) {
|
||
|
|
Completed();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
CourseNav.audioController.stopAllSoundsAndPlay(bad);
|
||
|
|
ui.helper.draggable('option', 'revert', true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function Completed() {
|
||
|
|
$('.col-drags').hide();
|
||
|
|
const html = $("#pop0").html();
|
||
|
|
Swal.fire({
|
||
|
|
html: html,
|
||
|
|
target: document.getElementById('wrap-course-content'),
|
||
|
|
customClass: {
|
||
|
|
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
||
|
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||
|
|
},
|
||
|
|
confirmButtonText: "Cerrar",
|
||
|
|
showConfirmButton: true,
|
||
|
|
allowOutsideClick: false,
|
||
|
|
allowEscapeKey: false,
|
||
|
|
focusConfirm: false,
|
||
|
|
backdrop: "rgba(65, 60, 60, .95)",
|
||
|
|
width: "35em",
|
||
|
|
didOpen: () => {
|
||
|
|
},
|
||
|
|
didClose: () => {
|
||
|
|
CourseNav.audioController.stopAudio();
|
||
|
|
CourseNav.setSlideVisited();
|
||
|
|
$('.obj-drop').addClass('disabled');
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|