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

update modificacion de template adaptativo y modificacion de algunas actividades

Browse Source
This commit is contained in:
David Martinez
2025-09-18 11:58:18 -06:00
parent a57cba5f67
commit 07100d82de
35 changed files with 1004 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/05.html
+41 -302
View File
@@ -11,30 +11,18 @@
width: 50%;
}
.button-prev,
.button-next {
cursor: pointer;
width: 40px;
z-index: 50;
transition: opacity 0.3s;
}
.bg-custom {
background: #f0f4f2;
}
.bg-custom-transparent {
background: rgba(240, 244, 242, 0.6);
}
.drop-card {
border: 3px dashed var(--bs-primary);
width: 50px;
height: 50px;
width: 56px;
height: 56px;
}
/* .content-enfermedad {
width: 25%;
} */
.content-enfermedad img {
height: 200px;
height: 250px;
}
.card-drag {
@@ -58,131 +46,51 @@
margin: 0 auto;
max-width: 40%;
}
.card-sort {
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
transition: transform 0.2s ease;
}
.card-sort:hover {
transform: scale(1.05);
}
.ui-sortable-helper {
transform: rotate(5deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.swiper-container {
overflow: hidden;
}
#activity1 img {
max-height: 250px;
}
</style>
<div class='page-sco py-2 py-md-4 h-100'>
<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-11 mb-2">
<div class="col-11">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<h3 class="text-verde-oscuro fw-bold"><span class="text-gris">></span> Glucosa</h3>
<h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3>
</div>
<div class="col-12 mb-3">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un color que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución que les corresponde.</p>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
</div>
<div class="col-12">
<div class="row justify-content-center align-content-center">
<div class="col-1 d-flex justify-content-center align-items-center" style="z-index: 50;">
<img src="img/left.png" class="img-fluid button-prev" style="display: none;" alt="Left">
</div>
<div class="col-10">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-transparent text-white border-0">
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
<div class="col-12">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un
color
que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución
que
les corresponde.​</p>
</div>
</div>
</div>
<div id="drag-drop-activity" class="col-12">
<div class="row justify-content-center">
<div class="col-12">
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
</div>
<div class="col-12 mt-3">
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.1a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.2a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.3a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<img src="img/5.4a.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card border-0 bg-transparent">
<div class="card-body d-flex flex-column justify-content-center align-items-center">
<div class="col-9">
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para
colocarlos en el orden correcto.</p>
</div>
</div>
</div>
<div id="activity1" class="my-4">
<div id="sortable-cards" class="d-flex flex-row gap-3 justify-content-center flex-wrap">
<!-- Las tarjetas se generarán dinámicamente -->
</div>
</div>
</div>
</div>
</div>
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.1a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.2a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.3a.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
<img src="img/5.4a.png" class="img-fluid">
</div>
</div>
</div>
<div class="col-1 d-flex justify-content-center align-items-center" style="z-index: 50;">
<img src="img/right.png" class="img-fluid button-next" alt="Left">
</div>
</div>
</div>
@@ -375,175 +283,6 @@
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
igualarAlturaBgCustomTransparent();
});
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto
function igualarAlturaBgCustomTransparent() {
var maxHeight = 0;
$('.bg-custom-transparent').each(function () {
$(this).css('height', 'auto'); // Resetear altura para medir correctamente
var h = $(this).outerHeight();
if (h > maxHeight) maxHeight = h;
});
$('.bg-custom-transparent').css('height', maxHeight + 'px');
}
$(window).on('resize', igualarAlturaBgCustomTransparent);
igualarAlturaBgCustomTransparent();
// Función para mezclar array (algoritmo Fisher-Yates)
function shuffleArray(array) {
const 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]];
}
return shuffled;
}
// Crear y mezclar las tarjetas
function createShuffledCards() {
const cards = [1, 2, 3];
const shuffledCards = shuffleArray(cards);
const container = $('#sortable-cards');
// Limpiar contenedor
container.empty();
// Crear tarjetas mezcladas
shuffledCards.forEach(number => {
const cardHtml = `
<div class="card border-0 card-sort bg-verde-claro text-white fw-bold text-center"
data-order="${number}"
style="cursor:grab;">
<div class="card-body px-0 py-0">
<img src="img/5.${number}b.png" class="img-fluid">
</div>
</div>
`;
container.append(cardHtml);
});
}
// Verificar si las tarjetas están en orden correcto
function checkOrder() {
let correct = true;
$('#sortable-cards .card-sort').each(function (index) {
if ($(this).data('order') === index + 1) {
$(this).removeClass('bg-verde-claro').addClass('bg-success');
} else {
$(this).css('background', ''); // reset
correct = false;
}
});
return correct;
}
// Inicializar Swiper
var mySwiper = new Swiper('.swiper-container', {
loop: false,
allowTouchMove: false,
simulateTouch: false,
navigation: {
nextEl: '.button-next',
prevEl: '.button-prev',
},
});
// Función para actualizar botones de navegación
function updateNavButtons(swiper) {
var prevBtn = document.querySelector('.button-prev');
var nextBtn = document.querySelector('.button-next');
var totalSlides = swiper.slides ? swiper.slides.length : 0;
if (totalSlides <= 1) {
$(prevBtn).hide();
return;
}
if (swiper.activeIndex === 0) {
$(prevBtn).hide();
$(nextBtn).show();
} else if (swiper.activeIndex === totalSlides - 1) {
$(nextBtn).hide();
$(prevBtn).show();
} else {
$(prevBtn).show();
$(nextBtn).show();
}
}
// Eventos de Swiper
mySwiper.on('slideChange', function () {
updateNavButtons(mySwiper);
});
// Inicializar estado de los botones
updateNavButtons(mySwiper);
// Crear tarjetas mezcladas al cargar
createShuffledCards();
// Configurar sortable
$('#sortable-cards').sortable({
axis: 'x',
containment: '#activity1',
cursor: 'grabbing',
tolerance: 'pointer',
update: function (event, ui) {
if (checkOrder()) {
const html = $("#pop0").html();
Swal.fire({
html: html,
target: "body",
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'
},
confirmButtonText: "Cerrar",
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
CourseNav.setSlideVisited();
/* setTimeout(() => {
Swal.close();
CourseNav.nextSlide();
}, 100); */
},
});
}
},
start: function (event, ui) {
ui.item.addClass('ui-sortable-helper');
},
stop: function (event, ui) {
ui.item.removeClass('ui-sortable-helper');
}
});
// Hacer las tarjetas arrastrables
$('#sortable-cards').on('mousedown touchstart', '.card-sort', function () {
$(this).css('cursor', 'grabbing');
});
$(document).on('mouseup touchend', function () {
$('.card-sort').css('cursor', 'grab');
});
// Botón para reiniciar el juego (opcional)
$('.button-prev').on('click', function () {
setTimeout(createShuffledCards, 300); // Crear nuevas tarjetas mezcladas
});
});
</script>
</script>