This commit is contained in:
2026-07-01 02:25:52 -06:00
parent 8dd25c3b23
commit 0be4d028e1
34 changed files with 443 additions and 440 deletions
+26 -29
View File
@@ -47,7 +47,7 @@
<div class="position-relative d-inline-block">
<h2 class="text-center fw-bold text-primary">
Técnica correcta para higiene de manos <br />
de acuerdo con la técnica de la OMS
de acuerdo con la técnica de la OMS<sup class="fw-bold">12</sup>
</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
@@ -56,9 +56,7 @@
<div class="card bg-lila-rosa border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/14.12.png" class="img-fluid mx-3" />
<p class="mb-0 text-start">
Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.
</p>
<p class="mb-0 text-start">Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.</p>
</div>
</div>
</div>
@@ -130,11 +128,11 @@
</div>
<script>
$(function () {
"use strict";
$(".wrap-course-content").addClass("fake");
'use strict';
$('.wrap-course-content').addClass('fake');
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
@@ -145,22 +143,22 @@
}
// Shuffle elements
const $sortables = $(".img-sotable");
const $sortables = $('.img-sotable');
const shuffled = shuffleArray($sortables.toArray());
$(".custom-grid").empty().append(shuffled);
$('.custom-grid').empty().append(shuffled);
// Initialize sortable
$(".custom-grid").sortable({
items: ".img-sotable",
containment: ".wrap-course-content",
cursor: "grabbing",
tolerance: "pointer",
$('.custom-grid').sortable({
items: '.img-sotable',
containment: '.wrap-course-content',
cursor: 'grabbing',
tolerance: 'pointer',
forceHelperSize: true,
forcePlaceholderSize: true,
placeholder: "sortable-placeholder",
placeholder: 'sortable-placeholder',
distance: 5,
sort: function (event, ui) {
var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
var mouseX = event.pageX;
var mouseY = event.pageY;
ui.helper.css({
@@ -174,11 +172,11 @@
});
function checkOrder() {
const $items = $(".custom-grid .img-sotable");
const $items = $('.custom-grid .img-sotable');
let isCorrect = true;
$items.each(function (index) {
if (parseInt($(this).data("order")) !== index) {
if (parseInt($(this).data('order')) !== index) {
isCorrect = false;
return false;
}
@@ -186,31 +184,30 @@
if (isCorrect) {
good.play();
$(".custom-grid").sortable("disable");
$('.custom-grid').sortable('disable');
checkAllCompleted();
}
}
function checkAllCompleted() {
setTimeout(() => {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById("wrap-course-content"),
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",
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",
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();
$(".img-sotable").addClass("disabled");
$('.img-sotable').addClass('disabled');
},
});
}, 250);