281 lines
9.9 KiB
HTML
281 lines
9.9 KiB
HTML
<style>
|
|
.fake {
|
|
background-image: url(img/bg13.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
.hr-style {
|
|
opacity: 1;
|
|
width: 30%;
|
|
}
|
|
|
|
.content-grid {
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
grid-template-columns: 75% 25%;
|
|
grid-template-rows: auto;
|
|
gap: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.grid-drops-container {
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: auto;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.text-card {
|
|
position: relative;
|
|
height: 50px;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.drop-card {
|
|
position: relative;
|
|
width: 230px;
|
|
height: 230px;
|
|
background-color: #c0d2cd;
|
|
border: 2px dashed #85a89d;
|
|
border-radius: 15px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.drag-card-container {
|
|
position: relative;
|
|
background-color: #e3ece8;
|
|
border-radius: 15px;
|
|
border: 2px dashed #72256b;
|
|
width: 240px;
|
|
height: 240px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.drag-option {
|
|
cursor: move;
|
|
}
|
|
</style>
|
|
<div class='page-sco py-2 py-md-0 h-100'>
|
|
<div class='container h-100'>
|
|
<div class='row justify-content-center h-100'>
|
|
<div id="drag-drop-activity" class='col-12 h-100'>
|
|
<div class="content-grid">
|
|
<div class="content-drops w-100 h-100">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-10 mb-2 animate__animated animate__bounceInDown">
|
|
<h2 class="text-center fw-bold text-primary">Técnica Aséptica</h2>
|
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
|
</div>
|
|
<div class="col-10 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
|
|
<div class="card bg-primary border-0 my-2 rounded-15 bg-custom ps-4 pe-3 py-2 text-center">
|
|
<div class="d-flex justify-content-center align-items-center flex-row gap-2">
|
|
<img src="img/2.1.png" class="img-fluid mx-3" />
|
|
<p class="mb-0 text-start text-white"><strong>Instrucciones:</strong> Observa los objetos en las tarjetas y arrástralas hacia la categoría
|
|
correcta para clasificarlas según su nivel de
|
|
limpieza: Estéril, Desinfectado, Limpio o Sucio.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="grid-drops-container">
|
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
|
<div class="drop-card" data-drop="0"></div>
|
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-12 text-center">
|
|
Estéril
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
|
<div class="drop-card" data-drop="1"></div>
|
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-12 text-center">
|
|
Desinfectado
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
|
<div class="drop-card" data-drop="2"></div>
|
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-12 text-center">
|
|
Limpio
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
|
<div class="drop-card" data-drop="3"></div>
|
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-12 text-center">
|
|
Sucio/Contaminado
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-drags w-100 h-100">
|
|
<div class="row justify-content-end align-items-center h-100">
|
|
<div class="col-10 pe-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12">
|
|
<div class="drag-card-container d-flex justify-content-center align-items-center flex-row"></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/3.5.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">¡Bien hecho!</h3>
|
|
</div>
|
|
<div class="col-12 text-center">
|
|
<p class="mb-0">Has concluido la actividad.</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');
|
|
const changeDrag = ['<div class="drag-option" data-drag="0"><img src="img/15.0.png" class="img-fluid"></div>','<div class="drag-option" data-drag="1"><img src="img/15.1.png" class="img-fluid"></div>','<div class="drag-option" data-drag="2"><img src="img/15.2.png" class="img-fluid"></div>','<div class="drag-option" data-drag="3"><img src="img/15.3.png" class="img-fluid"></div>'];
|
|
|
|
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;
|
|
}
|
|
|
|
const shuffled = shuffleArray([...changeDrag]);
|
|
let currentIndex = 0;
|
|
|
|
function showNextDrag() {
|
|
if (currentIndex < shuffled.length) {
|
|
const $newDrag = $(shuffled[currentIndex]);
|
|
$('.drag-card-container').append($newDrag);
|
|
|
|
$newDrag.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);
|
|
}
|
|
});
|
|
|
|
currentIndex++;
|
|
}
|
|
}
|
|
|
|
$('.drop-card').droppable({
|
|
accept: '.drag-option',
|
|
tolerance: 'intersect',
|
|
drop: function (event, ui) {
|
|
const dragData = ui.helper.data('drag');
|
|
const dropData = $(this).data('drop');
|
|
|
|
if (dragData == dropData) {
|
|
good.play();
|
|
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
|
|
ui.helper.draggable('disable');
|
|
$(this).droppable('disable');
|
|
|
|
showNextDrag();
|
|
|
|
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
|
|
checkAllCompleted();
|
|
}
|
|
} else {
|
|
bad.play();
|
|
ui.helper.draggable('option', 'revert', true);
|
|
}
|
|
}
|
|
});
|
|
|
|
function checkAllCompleted() {
|
|
setTimeout(() => {
|
|
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,
|
|
backdrop: "rgba(65, 60, 60, .95)",
|
|
width: "35em",
|
|
didClose: () => {
|
|
CourseNav.setSlideVisited();
|
|
$('.drag-option').addClass('disabled');
|
|
}
|
|
});
|
|
}, 250);
|
|
}
|
|
|
|
// Show first drag element
|
|
showNextDrag();
|
|
});
|
|
</script>
|