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/05.html
+227 -150
View File
@@ -30,8 +30,8 @@
border-radius: 15px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background: #B68FB2;
background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
background: #b68fb2;
background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
height: 50px;
}
@@ -46,7 +46,7 @@
}
.num-card {
border-radius: .5rem;
border-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@@ -81,15 +81,15 @@
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">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 mb-3 text-center">
@@ -99,26 +99,42 @@
<div class="row justify-content-center align-items-center">
<div class="col-6">
<div class="card bg-custom 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">La DP le ofrece una <strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria y reduce el
contagio</strong> de enfermedades infectocontagiosas. Le permite <strong>mayor libertad </strong>al ser una terapia
portable, a diferencia de la hemodiálisis.</p>
<div
class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
>
<p class="mb-0">
La DP le ofrece una
<strong
>mejor calidad de vida, requiere menos traslados a la unidad
hospitalaria</strong
><strong>,</strong> <strong>reduce el contagio </strong>de enfermedades
infectocontagiosas y le permite <strong>mayor libertad </strong>al ser una
terapia portable.
</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">
<p class="mb-1"><strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong></p>
<p class="mb-0">Realice la siguiente actividad para descubrir más sobre ellas.</p>
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-1">
<strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong>
</p>
<p class="mb-0">
Realice la siguiente actividad para descubrir más sobre ellas.
</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-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-verde-oscuro 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/05.0.png" class="img-fluid">
<img src="img/05.0.png" class="img-fluid" />
</div>
</div>
</div>
@@ -127,76 +143,66 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0' style="display: none;overflow: hidden;">
<div class='container h-100'>
<div class='row justify-content-center h-100'>
<div class='col-12'>
<div class='row justify-content-center h-100'>
<div id="desarrollo" class="page-sco py-2 py-md-0" style="display: none; overflow: hidden">
<div class="container h-100">
<div class="row justify-content-center h-100">
<div class="col-12">
<div class="row justify-content-center h-100">
<div class="col-12 mb-3 px-0">
<div class="card bg-rosa-lavanda border-0 rounded-0 shadow p-3">
<div class="row justify-content-center">
<div class="col-12 mb-3">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book1.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos hacia el lugar que les corresponde en las imágenes.</p>
<img src="img/book1.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos
hacia el lugar que les corresponde en las imágenes.
</p>
</div>
</div>
<div class="col-12">
<div id="drag-container" class="d-flex flex-wrap justify-content-center align-items-center gap-4">
<div
id="drag-container"
class="d-flex flex-wrap justify-content-center align-items-center gap-4"
>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="0">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Diálisis Peritoneal Continua Ambulatoria
</div>
<div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
</div>
</div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="1">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Atomizador
</div>
<div class="col-12">Atomizador</div>
</div>
</div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Superficie de trabajo
</div>
<div class="col-12">Superficie de trabajo</div>
</div>
</div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="3">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Diálisis Peritoneal Automatizada
</div>
<div class="col-12">Diálisis Peritoneal Automatizada</div>
</div>
</div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="4">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Bolsa DPA
</div>
<div class="col-12">Bolsa DPA</div>
</div>
</div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="5">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Línea
</div>
<div class="col-12">Línea</div>
</div>
</div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="6">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Titanio
</div>
<div class="col-12">Titanio</div>
</div>
</div>
<div class="drag-button px-3 py-2 text-white text-center" data-drag="7">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
Catéter
</div>
<div class="col-12">Catéter</div>
</div>
</div>
</div>
@@ -210,41 +216,62 @@
<div class="row justify-content-center align-items-center">
<div class="col-4 text-center">
<div class="d-inline-flex flex-column justify-content-center gap-3">
<img src="img/05.1.png" class="img-fluid">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<img src="img/05.1.png" class="img-fluid" />
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">1</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="0"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="0"
></div>
</div>
</div>
</div>
<div class="col-8">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.2.png" class="img-fluid align-self-center">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<img src="img/05.2.png" class="img-fluid align-self-center" />
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">2</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="1"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="1"
></div>
</div>
</div>
<div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.3.png" class="img-fluid align-self-center">
<img src="img/05.3.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Paños limpios</p>
</div>
<div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.4.png" class="img-fluid align-self-center">
<img src="img/05.4.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Lavamanos, jabón y toalla</p>
</div>
<div class="content-custom d-flex flex-column justify-content-center gap-3">
<img src="img/05.5.png" class="img-fluid align-self-center">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<img src="img/05.5.png" class="img-fluid align-self-center" />
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">3</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="2"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="2"
></div>
</div>
</div>
</div>
@@ -257,37 +284,62 @@
<div class="row justify-content-center">
<div class="col-12 mb-3">
<div class="d-flex flex-column justify-content-center gap-2 content-c4">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">4</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="3"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="3"
></div>
</div>
<img src="img/05.6.png" class="img-fluid align-self-center">
<img src="img/05.6.png" class="img-fluid align-self-center" />
</div>
</div>
<div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<div
class="d-flex flex-row justify-content-center align-items-center gap-3"
>
<div class="content-c2 d-flex flex-column justify-content-center gap-2">
<img src="img/05.7.png" class="img-fluid align-self-center">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<img src="img/05.7.png" class="img-fluid align-self-center" />
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">5</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="4"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="4"
></div>
</div>
</div>
<div class="content-c2 d-flex flex-column justify-content-center gap-2">
<img src="img/05.8.png" class="img-fluid align-self-center">
<p class="mb-0 text-center h-txt">Cubrebocas, lavamanos, jabón y toalla</p>
<img src="img/05.8.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">
Cubrebocas, lavamanos, jabón y toalla
</p>
</div>
<div class="content-c2 d-flex flex-column justify-content-center gap-2">
<img src="img/05.9.png" class="img-fluid align-self-center">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<img src="img/05.9.png" class="img-fluid align-self-center" />
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">6</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="5"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="5"
></div>
</div>
</div>
</div>
@@ -297,35 +349,53 @@
<div class="col-5">
<div class="row justify-content-center">
<div class="col-12 mb-3">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<div
class="d-flex flex-row justify-content-center align-items-center gap-3"
>
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
<img src="img/05.10.png" class="img-fluid align-self-center">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<img src="img/05.10.png" class="img-fluid align-self-center" />
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">7</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="6"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="6"
></div>
</div>
</div>
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
<img src="img/05.11.png" class="img-fluid align-self-center">
<div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
<div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
<img src="img/05.11.png" class="img-fluid align-self-center" />
<div
class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
>
<div
class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
>
<h3 class="fw-bold text-white mb-0">8</h3>
</div>
<div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="7"></div>
<div
class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
data-drop="7"
></div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<div
class="d-flex flex-row justify-content-center align-items-center gap-3"
>
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
<img src="img/05.12.png" class="img-fluid align-self-center">
<img src="img/05.12.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Atomizador y paños limpios</p>
</div>
<div class="content-c3 d-flex flex-column justify-content-center gap-2">
<img src="img/05.13.png" class="img-fluid align-self-center">
<img src="img/05.13.png" class="img-fluid align-self-center" />
<p class="mb-0 text-center h-txt">Tapón</p>
</div>
</div>
@@ -341,18 +411,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 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 mb-3 text-center">
@@ -361,10 +431,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>
@@ -376,19 +450,19 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
$('.drops_parts').first().show();
$(".drops_parts").first().show();
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();
shuffleDragButtons();
$('#inicio').hide();
$('#desarrollo').show();
$("#inicio").hide();
$("#desarrollo").show();
});
function shuffleArray(array) {
@@ -400,14 +474,14 @@
}
function shuffleDragButtons() {
const container = document.getElementById('drag-container');
const container = document.getElementById("drag-container");
const buttons = Array.from(container.children);
const shuffled = shuffleArray(buttons);
shuffled.forEach(button => container.appendChild(button));
shuffled.forEach((button) => container.appendChild(button));
}
function recreateDragContainer() {
$('#drag-container').html(`
$("#drag-container").html(`
<div class="drag-button px-3 py-2 text-white text-center" data-drag="0">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
@@ -449,17 +523,17 @@
</div>
</div>
`);
$('.drag-button').draggable({
revert: 'invalid',
$(".drag-button").draggable({
revert: "invalid",
revertDuration: 300,
cursor: "grabbing",
start: function (event, ui) {
$(this).css('z-index', 1000);
$(this).css("z-index", 1000);
ui.position.left = 0;
ui.position.top = 0;
},
drag: 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 changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft / scale;
var changeTop = ui.position.top - ui.originalPosition.top;
@@ -468,8 +542,8 @@
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
$(this).css("z-index", 1);
},
});
shuffleDragButtons();
}
@@ -482,7 +556,7 @@
4: 4,
5: 5,
6: 6,
7: 7
7: 7,
};
let completedDrops = { part0: 0, part1: 0 };
@@ -493,27 +567,27 @@
function finishActivity() {
const percentage = (correctCount / totalQuestions) * 100;
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake1").removeClass("fake");
$("#desarrollo").hide();
$("#cierre").show();
if (percentage < 80) {
$('.col-reintentar').show();
$(".col-reintentar").show();
}
CourseNav.setSlideVisited();
}
// Inicializar draggable para elementos iniciales
$('.drag-button').draggable({
revert: 'invalid',
$(".drag-button").draggable({
revert: "invalid",
revertDuration: 300,
cursor: "grabbing",
start: function (event, ui) {
$(this).css('z-index', 1000);
$(this).css("z-index", 1000);
ui.position.left = 0;
ui.position.top = 0;
},
drag: 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 changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft / scale;
var changeTop = ui.position.top - ui.originalPosition.top;
@@ -522,60 +596,63 @@
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
$(this).css("z-index", 1);
},
});
$('.drop-option').droppable({
accept: '.drag-button',
$(".drop-option").droppable({
accept: ".drag-button",
drop: function (event, ui) {
const draggedItem = ui.draggable;
const dragValue = parseInt(draggedItem.data('drag'));
const dropValue = parseInt($(this).data('drop'));
const dragValue = parseInt(draggedItem.data("drag"));
const dropValue = parseInt($(this).data("drop"));
const isCorrect = correctAnswers[dragValue] === dropValue;
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
$(this).html(draggedItem.find('.col-12').text()).addClass('text-center d-flex align-items-center justify-content-center');
$(this).droppable('disable'); // Disable this drop zone
$(this)
.html(draggedItem.find(".col-12").text())
.addClass("text-center d-flex align-items-center justify-content-center");
$(this).droppable("disable"); // Disable this drop zone
draggedItem.hide();
if (isCorrect) {
correctCount++;
} else {
$(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger');
$(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
}
if ($('#part0').is(':visible')) {
if ($("#part0").is(":visible")) {
completedDrops.part0++;
if (completedDrops.part0 >= totalDropsPart0) {
setTimeout(() => {
$('#part0').hide();
$('#part1').show();
$("#part0").hide();
$("#part1").show();
// Recrear todo el drag-container para la parte 2
recreateDragContainer();
// Limpiar drops incorrectos de la parte 0
$('#part0 .drop-option').each(function() {
if ($(this).siblings('.num-card').hasClass('bg-danger')) {
$(this).html('').removeClass('text-center d-flex align-items-center justify-content-center');
$(this).siblings('.num-card').removeClass('bg-danger').addClass('bg-verde-pino');
$("#part0 .drop-option").each(function () {
if ($(this).siblings(".num-card").hasClass("bg-danger")) {
$(this)
.html("")
.removeClass("text-center d-flex align-items-center justify-content-center");
$(this).siblings(".num-card").removeClass("bg-danger").addClass("bg-verde-pino");
}
});
}, 1000);
}
} else if ($('#part1').is(':visible')) {
} else if ($("#part1").is(":visible")) {
completedDrops.part1++;
}
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)",
@@ -585,9 +662,9 @@
if (completedDrops.part1 >= totalDropsPart1) {
finishActivity();
}
}
},
});
}
},
});
});
</script>