Vantive/Rotafilio_Vantive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
david.martinez
2026-07-01 15:47:43 -06:00
parent 0be4d028e1
commit 2e304d7a99
15 changed files with 314 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/15.html
+30 -33
View File
@@ -69,10 +69,10 @@
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' style="overflow: hidden;">
<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" style="overflow: hidden">
<div class="content-grid">
<div class="content-drops w-100 h-100">
<div class="row justify-content-center align-items-center h-100">
@@ -86,22 +86,20 @@
<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>
<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 text-center mb-3">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</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 class="col-12 text-center">Estéril</div>
</div>
</div>
</div>
@@ -109,9 +107,7 @@
<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 class="col-12 text-center">Desinfectado</div>
</div>
</div>
</div>
@@ -119,9 +115,7 @@
<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 class="col-12 text-center">Limpio</div>
</div>
</div>
</div>
@@ -129,9 +123,7 @@
<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 class="col-12 text-center">Sucio/Contaminado</div>
</div>
</div>
</div>
@@ -160,8 +152,8 @@
<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 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">
@@ -176,11 +168,16 @@
</div>
<script>
$(function () {
"use strict";
'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>'];
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--) {
@@ -201,7 +198,7 @@
$newDrag.draggable({
revert: 'invalid',
revertDuration: 300,
cursor: "grabbing",
cursor: 'grabbing',
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
@@ -218,7 +215,7 @@
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
},
});
currentIndex++;
@@ -247,29 +244,29 @@
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
},
});
function checkAllCompleted() {
setTimeout(() => {
const html = $("#pop0").html();
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'
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didClose: () => {
CourseNav.setSlideVisited();
$('.drag-option').addClass('disabled');
}
},
});
}, 250);
}