update
This commit is contained in:
+26
-29
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user