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

actualizacion de super indices, cambios de imagenes y textos. Asi como funcionabilidad de actividades

Browse Source
This commit is contained in:
david.martinez
2026-06-10 23:15:23 -06:00
parent 86391ea412
commit 447954b520
21 changed files with 1095 additions and 1110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/04.html
+68 -53
View File
@@ -38,38 +38,50 @@
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 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">
<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">
<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>Su tratamiento de diálisis peritoneal (DP) equilibra líquidos y elimina compuestos de desecho al <strong class="text-primary">filtrar la sangre
<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>
peritoneal.</strong></p> -->
</div>
<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-2s">
</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">
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>
@@ -82,15 +94,15 @@
</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 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">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-10 mb-3">
@@ -98,8 +110,11 @@
<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>
<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>
@@ -108,13 +123,13 @@
<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">
<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">
<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">
<img src="img/04.3.webp" class="img-fluid" />
</div>
</div>
</div>
@@ -123,18 +138,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">Inicio en la terapia de diálisis peritoneal</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 text-center mb-3">
@@ -148,16 +163,16 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".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");
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
});
function shuffleArray(array) {
@@ -173,43 +188,43 @@
}
function isInCorrectOrder(array) {
return array.every((item, index) => parseInt($(item).data('order')) === index);
return array.every((item, index) => parseInt($(item).data("order")) === index);
}
// 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',
cursor: 'grabbing',
$(".custom-grid").sortable({
items: ".img-sotable",
cursor: "grabbing",
containment: "#coursenav-main-content",
tolerance: 'pointer',
helper: 'original',
tolerance: "pointer",
helper: "original",
scroll: false,
start: function (event, ui) {
ui.item.css('z-index', 1000);
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');
$("body").css("overflow", "auto");
},
update: function () {
checkOrder();
}
},
});
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;
}
@@ -217,7 +232,7 @@
if (isCorrect) {
CourseNav.audioController.stopAllSoundsAndPlay(good);
$('.img-sotable').addClass('disabled');
$(".img-sotable").addClass("disabled");
setTimeout(() => {
isCompleted();
}, 700);
@@ -225,9 +240,9 @@
}
function isCompleted() {
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
$("#desarrollo").hide();
$("#cierre").show();
CourseNav.setSlideVisited();
}
});