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

update

Browse Source
This commit is contained in:
DavidMtz
2026-02-11 13:38:15 -06:00
parent 3eb2f49012
commit fd779d0724
8 changed files with 1012 additions and 717 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/09.html
+119 -86
View File
@@ -32,15 +32,17 @@
.drag-sortable {
background: #f3e9df;
border-radius: 1.25rem;
box-shadow: 0 6px 15px rgba(0, 0, 0, .2);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: .2rem;
padding: .4rem;
gap: 0.2rem;
padding: 0.4rem;
font-weight: 500;
border: none;
position: relative;
transition: box-shadow 0.16s, transform 0.12s;
transition:
box-shadow 0.16s,
transform 0.12s;
cursor: grab;
user-select: none;
}
@@ -64,17 +66,19 @@
font-size: 1.8rem;
font-weight: bold;
border: 2.5px solid #72256b;
box-shadow: 0 2px 8px rgba(225, 0, 107, 0.10);
box-shadow: 0 2px 8px rgba(225, 0, 107, 0.1);
flex-shrink: 0;
margin-right: 0.7rem;
transition: background 0.18s, color 0.16s;
transition:
background 0.18s,
color 0.16s;
}
/* Success: número en verde con fondo y borde */
.drag-number-correct {
background: #e8fdf4 !important;
color: #30C48D !important;
border-color: #30C48D !important;
color: #30c48d !important;
border-color: #30c48d !important;
box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important;
animation: correcto-bounce 0.7s;
}
@@ -112,7 +116,7 @@
.drag-placeholder {
background: #fff6fc !important;
border: 2px dashed #E1006B !important;
border: 2px dashed #e1006b !important;
min-height: 60px;
}
@@ -134,7 +138,7 @@
color: #72256b;
font-size: 2.1rem;
margin-right: 1rem;
animation: hand-down-up 1.2s infinite cubic-bezier(.62, -0.01, .43, 1.01);
animation: hand-down-up 1.2s infinite cubic-bezier(0.62, -0.01, 0.43, 1.01);
display: inline-flex;
align-items: center;
}
@@ -173,50 +177,61 @@
cursor: pointer;
}
</style>
<div id="inicio" 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-11'>
<div class='row justify-content-center'>
<div id="inicio" 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-11">
<div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-12 mb-3 text-center">
<h4 class="fw-bold text-verde-pino">Lavado de manos</h4>
<h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
<p class="mb-0">El jabón que utilice para el lavado de manos de preferencia debe ser <b
class="text-lila-claro">líquido</b>, sin
embargo, lo prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p>
<p><b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
<div
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center"
>
<p class="mb-0">
El jabón que utilice para el lavado de manos de preferencia debe ser
<b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea
exclusivo para cuando usted realice los recambios en casa.
</p>
<p>
<b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para
secar sus manos.
</p>
<p>Sus manos, después de un correcto lavado, se encontrarán <b class="text-lila-claro">limpias, pero nunca estériles.</b>
<p>
Sus manos, después de un correcto lavado, se encontrarán
<b class="text-lila-claro">limpias, pero nunca estériles.</b>
</p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
>
<p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
</div>
</div>
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/09.0.png" class="img-fluid">
<img src="img/09.0.png" class="img-fluid" />
</div>
</div>
</div>
@@ -225,28 +240,30 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
<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 mb-5'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
<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 mb-5">
<div class="col-11 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-11 mb-3 text-center">
<h4 class="fw-bold text-verde-pino">Lavado de manos</h4>
<h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
</div>
<div class="col-12 px-0 mb-3">
<div class="card bg-verde-claro border-0 rounded-0 bx-shadow py-2 px-3">
<div class="row justify-content-center">
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
colocarlos en el orden correcto.</p>
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
colocarlos en el orden correcto.
</p>
</div>
</div>
</div>
@@ -255,18 +272,24 @@
<div class="col-11">
<div class="row justify-content-center align-items-center">
<div class="col-12 anim1">
<div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
<div
class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
>
<div class="drag-sortable" data-order="0">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Frótelas entre sí.
Mójese las manos y aplique suficiente jabón para cubrir toda su superficie.
Frótelas entre sí.
</div>
<div class="drag-sortable" data-order="1">
<span class="drag-number"></span>
<!-- MANO CON ANIMACIÓN -->
<span class="drag-hand-animate"><i class="fa-duotone fa-solid fa-hand-pointer"></i></span>
<span class="drag-hand-animate"
><i class="fa-duotone fa-solid fa-hand-pointer"></i
></span>
<span class="drag-icon">&#8597;</span>
Frótese la palma de la mano derecha contra el dorso de la mano izquierda entrelazando los dedos.
Frótese la palma de la mano derecha contra el dorso de la mano izquierda
entrelazando los dedos.
</div>
<div class="drag-sortable" data-order="2">
<span class="drag-number"></span>
@@ -281,13 +304,14 @@
<div class="drag-sortable" data-order="4">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
viceversa.
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un
movimiento de rotación y viceversa.
</div>
<div class="drag-sortable" data-order="5">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Frótese la punta de los dedos de la mano derecha contra la palma de la mano izquierda.
Frótese la punta de los dedos de la mano derecha contra la palma de la mano
izquierda.
</div>
<div class="drag-sortable" data-order="6">
<span class="drag-number"></span>
@@ -308,18 +332,18 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<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-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
</div>
</div>
<div class="col-12 mb-3 text-center">
@@ -328,10 +352,14 @@
<div class="col-12 text-center mb-3">
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
</div>
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
<div
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
style="display: none"
>
<div
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()">
onclick="CourseNav.reload()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div>
</div>
@@ -343,16 +371,16 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
mezclarElementos();
});
@@ -365,8 +393,8 @@
}
function mezclarElementos() {
const $container = $('.content-drags');
const $elements = $container.children('.drag-sortable').detach();
const $container = $(".content-drags");
const $elements = $container.children(".drag-sortable").detach();
const elementosMezclados = shuffleArray($elements.toArray());
$container.append(elementosMezclados);
actualizarNumerosDrag();
@@ -374,23 +402,25 @@
}
function actualizarNumerosDrag() {
$('.content-drags .drag-sortable').each(function (i) {
$(this).find('.drag-number').text(i + 1);
$(".content-drags .drag-sortable").each(function (i) {
$(this)
.find(".drag-number")
.text(i + 1);
});
}
// ----------- FUNCIÓN OPCIONAL: INDICAR CORRECTOS -----------
function resaltarDragCorrectos() {
$('.content-drags .drag-sortable').each(function (index) {
const correcto = parseInt($(this).data('order')) === index;
$(this).find('.drag-number').toggleClass('drag-number-correct', correcto);
$(".content-drags .drag-sortable").each(function (index) {
const correcto = parseInt($(this).data("order")) === index;
$(this).find(".drag-number").toggleClass("drag-number-correct", correcto);
});
}
// ----------------------------------------------------------
// Oculta la mano cuando se haga cualquier drag
let handRemoved = false;
$('.content-drags').sortable({
$(".content-drags").sortable({
update: function () {
actualizarNumerosDrag();
// Activa aquí para resaltar correctos tras cada movimiento:
@@ -404,35 +434,35 @@
scroll: false,
helper: "clone",
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 offset = ui.helper.offset();
var mouseX = event.pageX;
var mouseY = event.pageY;
ui.helper.css({
left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 4,
top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2
top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
});
},
start: function (event, ui) {
ui.helper.css('transform', 'scale(0.95)');
ui.helper.css("transform", "scale(0.95)");
if (!handRemoved) {
$('.drag-hand-animate').remove();
$(".drag-hand-animate").remove();
handRemoved = true;
}
},
stop: function (event, ui) {
ui.item.css('transform', 'scale(1)');
}
ui.item.css("transform", "scale(1)");
},
});
actualizarNumerosDrag();
function verificarOrden() {
const $elementos = $('.content-drags .drag-sortable');
const $elementos = $(".content-drags .drag-sortable");
let todosCorrectos = true;
$elementos.each(function (index) {
const ordenActual = parseInt($(this).data('order'));
const ordenActual = parseInt($(this).data("order"));
if (ordenActual !== index) {
todosCorrectos = false;
return false;
@@ -440,20 +470,23 @@
});
if (todosCorrectos) {
$('.content-drags').sortable('disable');
$(".content-drags").sortable("disable");
mostrarPopup(true);
}
}
function mostrarPopup(isCorrect) {
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? feedbackcorrect : feedbackincorrect);
CourseNav.audioController.stopAllSoundsAndPlay(
isCorrect ? feedbackcorrect : feedbackincorrect
);
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
showConfirmButton: true,
customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
},
confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)",
@@ -462,15 +495,15 @@
if (isCorrect) {
finalizarActividad();
}
}
},
});
}
function finalizarActividad() {
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake1").removeClass("fake");
$("#desarrollo").hide();
$("#cierre").show();
CourseNav.setSlideVisited();
}
});
</script>
</script>