250 lines
9.3 KiB
HTML
250 lines
9.3 KiB
HTML
<style>
|
|
.fake {
|
|
background-image: url(img/bg04.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.fake1 {
|
|
background-image: url(img/bg03.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.btn-comenzar {
|
|
border-radius: 20px;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-grid {
|
|
overflow: hidden;
|
|
width: 1320px;
|
|
height: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.img-sotable {
|
|
cursor: move;
|
|
}
|
|
|
|
.img-sotable.disabled {
|
|
pointer-events: none;
|
|
background-color: #84a816;
|
|
}
|
|
</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 class="col-12 text-center animate__animated animate__bounceInDown">
|
|
<div class="position-relative d-inline-block">
|
|
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2>
|
|
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-3 text-center animate__animated animate__zoomIn">
|
|
<img src="img/04.0.png" class="img-fluid" />
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="card bg-verde-claro border-0 rounded-3 p-0 bx-shadow">
|
|
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
|
|
<p class="mb-0 text-verde-oscuro">
|
|
La diálisis peritoneal es un tratamiento que ayuda a eliminar productos de desecho y exceso de
|
|
líquidos del organismo mediante el uso del peritoneo, una membrana que recubre los órganos
|
|
abdominales y actúa como filtro natural durante el intercambio del líquido de diálisis.<sup
|
|
class="fw-bold"
|
|
>2</sup
|
|
>
|
|
</p>
|
|
<!-- <p>Su tratamiento de diálisis peritoneal (DP) equilibra líquidos y elimina compuestos de desecho al <strong class="text-primary">filtrar la sangre
|
|
utilizando una membrana interna llamada peritoneo</strong>.</p>
|
|
<p class="mb-0">El peritoneo, envuelve a la mayoría de los órganos abdominales y forma un espacio interno llamado: <strong class="text-primary">cavidad
|
|
peritoneal.</strong></p> -->
|
|
</div>
|
|
<!-- <div
|
|
class="position-relative w-100 bg-verde-claro-2 text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
|
|
<p class="mb-0 text-verde-oscuro">El peritoneo, envuelve a la mayoría de sus órganos abdominales y forma un espacio interno llamado <strong>recambio</strong>.
|
|
<p class="mb-0 text-verde-oscuro">
|
|
La diálisis peritoneal es un tratamiento que ayuda a eliminar productos de desecho y exceso de líquidos del organismo mediante el uso del peritoneo, una membrana que recubre los órganos abdominales y actúa como filtro natural durante el intercambio del líquido de diálisis.<sup class="fw-bold">2</sup>
|
|
</p>
|
|
</p>
|
|
</div> -->
|
|
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-1s">
|
|
<div
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="desarrollo" 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-11" id="col-sortable">
|
|
<div class="row justify-content-center">
|
|
<div class="col-10 text-center">
|
|
<div class="position-relative d-inline-block">
|
|
<h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2>
|
|
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
|
|
</div>
|
|
</div>
|
|
<div class="col-10 mb-3">
|
|
<div class="card bg-white border-0 rounded-3 bx-shadow py-2 px-3">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12">
|
|
<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 recambio para colocarlos en el orden
|
|
correcto.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-actividad">
|
|
<div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
|
|
<div class="img-sotable" data-order="0">
|
|
<img src="img/04.1.webp" class="img-fluid" />
|
|
</div>
|
|
<div class="img-sotable" data-order="1">
|
|
<img src="img/04.2.webp" class="img-fluid" />
|
|
</div>
|
|
<div class="img-sotable" data-order="2">
|
|
<img src="img/04.3.webp" class="img-fluid" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 class="row justify-content-center">
|
|
<div class="col-12 text-center mb-3">
|
|
<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">Inicio en la terapia de diálisis peritoneal</h2>
|
|
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 text-center mb-3">
|
|
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
|
</div>
|
|
</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");
|
|
|
|
$(".btn-comenzar").click(function (e) {
|
|
e.preventDefault();
|
|
CourseNav.soundClick();
|
|
$("#inicio").hide();
|
|
$("#desarrollo").show();
|
|
});
|
|
|
|
function shuffleArray(array) {
|
|
let shuffled;
|
|
do {
|
|
shuffled = [...array];
|
|
for (let i = shuffled.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
|
}
|
|
} while (isInCorrectOrder(shuffled));
|
|
return shuffled;
|
|
}
|
|
|
|
function isInCorrectOrder(array) {
|
|
return array.every((item, index) => parseInt($(item).data("order")) === index);
|
|
}
|
|
|
|
// Shuffle elements
|
|
const $sortables = $(".img-sotable");
|
|
const shuffled = shuffleArray($sortables.toArray());
|
|
$(".custom-grid").empty().append(shuffled);
|
|
|
|
// Initialize sortable
|
|
$(".custom-grid").sortable({
|
|
items: ".img-sotable",
|
|
cursor: "grabbing",
|
|
containment: "#coursenav-main-content",
|
|
tolerance: "pointer",
|
|
helper: "original",
|
|
scroll: false,
|
|
start: function (event, ui) {
|
|
ui.item.css("z-index", 1000);
|
|
},
|
|
drag: function (event, ui) {
|
|
ui.position.left = ui.position.left;
|
|
ui.position.top = ui.position.top;
|
|
},
|
|
stop: function (event, ui) {
|
|
$("body").css("overflow", "auto");
|
|
},
|
|
update: function () {
|
|
checkOrder();
|
|
},
|
|
});
|
|
|
|
function checkOrder() {
|
|
const $items = $(".custom-grid .img-sotable");
|
|
let isCorrect = true;
|
|
|
|
$items.each(function (index) {
|
|
if (parseInt($(this).data("order")) !== index) {
|
|
isCorrect = false;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
if (isCorrect) {
|
|
CourseNav.audioController.stopAllSoundsAndPlay(good);
|
|
$(".img-sotable").addClass("disabled");
|
|
setTimeout(() => {
|
|
isCompleted();
|
|
}, 700);
|
|
}
|
|
}
|
|
|
|
function isCompleted() {
|
|
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
|
|
$("#desarrollo").hide();
|
|
$("#cierre").show();
|
|
CourseNav.setSlideVisited();
|
|
}
|
|
});
|
|
</script>
|