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

Compare commits

base: Vantive:a57cba5f67a8a74e8b7d66e4c8e4ee78fb12c380
Branches Tags
Vantive:main
Vantive:add-first
..
compare: Vantive:22980b5f4dfd4be84a61af902cda71a421de2c66
Branches Tags
Vantive:main
Vantive:add-first

No commits in common. "a57cba5f67a8a74e8b7d66e4c8e4ee78fb12c380" and "22980b5f4dfd4be84a61af902cda71a421de2c66" have entirely different histories.
a57cba5f67 ... 22980b5f4d

45 changed files with 259 additions and 1634 deletions
Show Stats Expand all files Collapse all files

BIN
Drag_Drop2.xlsx
View File

Binary file not shown.

BIN
Drag_Drop3.xlsx
View File

Binary file not shown.

16
config.json
View File

@ -9,22 +9,10 @@
"content": "contenido/01.html"
},
{
"title": "Portada",
"title": "Navegación",
"content": "contenido/02.html"
},
{
"title": "Navegación",
"content": "contenido/03.html"
},
{
"title": "Navegación",
"content": "contenido/04.html"
},
{
"title": "Navegación",
"content": "contenido/05.html"
}
]
}
]
}
}

292
contenido/01.html
View File

@ -1,53 +1,261 @@
<style>
.fake {
background-image: url(img/bg00.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.fake {
background-image: url(img/bg00.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.w-container {
background-image: url(img/w-xx1.png);
background-repeat: no-repeat;
background-position: left;
background-size: 100% auto;
}
.drop-card {
border: 3px dashed var(--bs-primary);
width: 200px;
height: 40px;
}
.card-drag {
cursor: grab;
width: 194px;
height: 34px;
}
.card-drag.ui-draggable-dragging {
cursor: grabbing;
}
.img-retro {
top: -75px;
left: 0;
right: 0;
margin: 0 auto;
max-width: 40%;
}
</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 w-container'>
<div class='row justify-content-center'>
<div class="col-11">
<div class="row justify-content-center align-items-center">
<div class="col-8">
<h1 class="text-white fw-bold">INDUCCIÓN AL PACIENTE EN<br>DIÁLISIS PERIOTONIAL <span
class="fw-bold text-verde-ceniza">>>></span></h1>
<p class="text-white">Pioneros en el cuidado de la enfermedad renal crónica</p>
</div>
<div class="col-4">
<img src="img/0.1.png" class="img-fluid" alt="" />
</div>
</div>
</div>
<!-- <div class="col-10 text-center">
<button class="btn btn-verde-oscuro btn-comenzar">
<h4 class="my-0 fw-bold">Comenzar</h4>
</button>
</div> -->
</div>
<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-10 mb-3">
<div class="card bg-primary text-white text-center border border-3 border-secondary shadow-none p-3 mb-2 position-relative">
<h4>¿Cuál es el tratamiento?</h4>
</div>
<div class="card bg-transparent border border-4 border-primary shadow-none p-3 text-center">
<p class="text-lila-claro mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes de la columna A con la terapia a la
que corresponden en la columna B</p>
</div>
</div>
<div id="drag-drop-activity" class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-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">
<img src="img/01.png" class="img-fluid mb-2"><br>
</div>
<div class="content-enfermedad text-center">
<img src="img/00.png" class="img-fluid mb-2"><br>
</div>
<div class="content-enfermedad text-center">
<img src="img/02.png" class="img-fluid mb-2"><br>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class="img-retro position-absolute w-100 text-center">
<img src="img/03.png" class="img-fluid">
</div>
<div class="row justify-content-center pt-5">
<div class="col-12 text-center mb-2">
<h3 class="text-primary fw-bold">¡Bien hecho!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0 text-morado-claro">Has concluido la actividad.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
'use strict';
$('.wrap-course-content').addClass('fake');
CourseNav.setSlideVisited();
$(function () {
"use strict";
$('body').addClass('fake');
// $('.btn-comenzar').on('click', function () {
// CourseNav.nextSlide();
// });
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = 'Drag_Drop.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var result = {};
workbook.SheetNames.forEach(sheetName => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
callback(result);
};
xhr.send();
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
});
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
};
});
return preguntas;
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function CreateDragAndDrop() {
$('.content-enfermedad').each(function (index) {
if (questions && questions[index]) {
const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0" data-drop="${index}"></div>`;
$(this).append(dropDiv);
}
});
// Crear todas las respuestas en #content-drags
let allOptions = [];
questions.forEach((question, index) => {
question.opciones.forEach(opcion => {
allOptions.push({text: opcion.text, index: index});
});
});
allOptions = shuffleArray(allOptions);
allOptions.forEach(option => {
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 rounded-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$('#content-drags').append(dragDiv);
});
}
function initializeDragAndDrop() {
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing",
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
ui.position.top = 0;
},
drag: function (event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop;
ui.position.left = newLeft;
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
});
$('.drop-card').droppable({
accept: '.card-drag',
tolerance: 'pointer',
drop: function (event, ui) {
const dragData = ui.helper.data('drag');
const dropData = $(this).data('drop');
if (dragData == dropData) {
good.play();
ui.helper.css({position: 'static', top: 'auto', left: 'auto'}).appendTo(this);
ui.helper.draggable('disable');
$(this).droppable('disable');
// Verificar si todos están completados
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
Completed();
}
} else {
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
});
}
function Completed() {
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-verde-oscuro 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); */
},
});
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();
});
</script>
});
</script>

355
contenido/02.html
View File

@ -1,350 +1,9 @@
<style>
.fake {
background-image: url(img/bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hr-style {
opacity: 1;
width: 30%;
}
#customVideo {
cursor: pointer;
}
.bg-custom {
background: #b68fb2;
border-radius: 15px 0px 0px 15px;
}
/* Ajustar los controles para que estén en la parte inferior del video */
.video-controls {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 10 !important;
background: rgb(255 255 255 / 85%) !important;
color: var(--bs-primary);
opacity: 0 !important;
transition: opacity 0.3s ease !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 8px 12px !important;
}
#centerPlayPause {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
background: var(--bs-primary);
border-radius: 50%;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
cursor: pointer;
color: rgb(255, 255, 255);
border: 5px dashed rgb(255, 255, 255);
}
/* Mostrar controles al pasar el cursor sobre el video */
.video-custom:hover .video-controls {
opacity: 1 !important;
}
.video-controls .btn {
background-color: var(--bs-secondary);
border: none !important;
color: var(--bs-primary) !important;
margin: 0 2px !important;
}
.video-controls .btn:hover {
background-color: var(--bs-primary);
color: var(--bs-secondary) !important;
}
/* Fondo más oscuro para la barra de progreso */
.video-controls input[type="range"] {
background: linear-gradient(90deg, #22222233 0%, #44444481 100%) !important;
border-radius: 8px;
height: 6px;
}
.video-controls input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #22222233 0%, #44444481 100%) !important;
height: 6px;
border-radius: 8px;
}
.video-controls input[type="range"]::-moz-range-track {
background: linear-gradient(90deg, #22222233 0%, #44444481 100%) !important;
height: 6px;
border-radius: 8px;
}
.video-controls input[type="range"]::-ms-fill-lower {
background: #222 !important;
}
.video-controls input[type="range"]::-ms-fill-upper {
background: #444 !important;
}
.video-controls input[type="range"]::-webkit-slider-thumb {
background: var(--bs-primary) !important;
border: none !important;
border-radius: 50% !important;
width: 16px !important;
height: 16px !important;
}
</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-10 text-center">
<h2 class="text-primary fw-bold">¿Qué son los riñones?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0 mb-3">
</div>
<div class="col-12">
<div class="row justify-content-end">
<div class="col-10 px-0">
<div class="card border-0 bg-custom">
<div class="card-body d-flex flex-row justify-content-between align-items-center">
<img src="img/2.1.png" alt="Riñones" class="img-fluid mx-3">
<p class="text-white my-0"><b>Instrucciones:</b> Observa el siguiente video para
conocer un poco más
acerca
de los riñones, sus funciones y cómo se manifiesta en ellos la enfermedad
crónica. </p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 my-2">
<div class="row justify-content-center align-items-center">
<div class="col-3">
<img src="img/2.2.png" alt="Riñones" class="img-fluid">
</div>
<div class="col-xl-5 col-8">
<div class="main-video bg-primary rounded">
<div
class="video-custom rounded overflow-hidden border-0 border-primary shadow-sm position-relative">
<video id="customVideo" class="w-100 h-100" preload="metadata"
poster="img/poster.png" playsinline>
<source src="video/demo.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
<div class="video-controls justify-content-between align-items-center"
style="gap: 8px; display: none;">
<button id="playPauseBtn" class="btn btn-sm rounded-circle"
title="Reproducir/Pausar">
<i class="fa-solid fa-play"></i>
</button>
<input id="videoSeek" type="range" min="0" value="0" step="0.1"
class="form-range flex-grow-1" style="max-width: none;">
<button id="muteBtn" class="btn btn-sm rounded-circle" title="Silenciar">
<i class="fa-solid fa-volume-up"></i>
</button>
<!-- El control de volumen se moverá aquí por JavaScript -->
<button id="fullscreenBtn" class="btn btn-sm rounded-circle"
title="Pantalla completa">
<i class="fa-solid fa-expand"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style></style>
<section class='page-sco py-md-4 py-2'>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat totam cum ea hic est unde, cupiditate officia odio molestiae dolores voluptate sed quis, at accusamus ratione ipsa asperiores? Est, porro!</h2>
</section>
<script>
$(function () {
'use strict';
$('body').addClass('fake');
});
// Solución definitiva al error de declaración duplicada
(function () {
'use strict';
// Variables y constantes
const videoElement = document.getElementById('customVideo');
const playPauseButton = document.getElementById('playPauseBtn');
const muteButton = document.getElementById('muteBtn');
const fullscreenButton = document.getElementById('fullscreenBtn');
const videoSeekBar = document.getElementById('videoSeek');
const playIconHTML = '<i class="fa-solid fa-play"></i>';
const pauseIconHTML = '<i class="fa-solid fa-pause"></i>';
const volumeIconHTML = '<i class="fa-solid fa-volume-up"></i>';
const muteIconHTML = '<i class="fa-solid fa-volume-mute"></i>';
const expandIconHTML = '<i class="fa-solid fa-expand"></i>';
const compressIconHTML = '<i class="fa-solid fa-compress"></i>';
// Play/Pause
playPauseButton.addEventListener('click', function () {
$('.video-controls').show().addClass('d-flex');
if (videoElement.paused || videoElement.ended) {
videoElement.play();
} else {
videoElement.pause();
}
});
videoElement.addEventListener('play', function () {
playPauseButton.innerHTML = pauseIconHTML;
});
videoElement.addEventListener('pause', function () {
playPauseButton.innerHTML = playIconHTML;
});
videoElement.addEventListener('ended', function () {
playPauseButton.innerHTML = playIconHTML;
videoSeekBar.value = 0;
});
// Mute/Unmute
muteButton.addEventListener('click', function () {
videoElement.muted = !videoElement.muted;
muteButton.innerHTML = videoElement.muted ? muteIconHTML : volumeIconHTML;
});
videoElement.addEventListener('volumechange', function () {
muteButton.innerHTML = videoElement.muted ? muteIconHTML : volumeIconHTML;
});
// Fullscreen
fullscreenButton.addEventListener('click', function () {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
videoElement.parentElement.requestFullscreen();
}
});
document.addEventListener('fullscreenchange', function () {
fullscreenButton.innerHTML = document.fullscreenElement ? compressIconHTML : expandIconHTML;
});
// Barra de progreso
videoElement.addEventListener('loadedmetadata', function () {
videoSeekBar.max = videoElement.duration;
videoSeekBar.value = 0;
});
videoElement.addEventListener('timeupdate', function () {
videoSeekBar.value = videoElement.currentTime;
});
videoSeekBar.addEventListener('input', function () {
videoElement.currentTime = videoSeekBar.value;
});
videoSeekBar.addEventListener('change', function () {
videoElement.currentTime = videoSeekBar.value;
});
// Agregar control de volumen si no existe
if (!document.getElementById('videoVolume')) {
const volumeControl = document.createElement('input');
volumeControl.type = 'range';
volumeControl.min = '0';
volumeControl.max = '1';
volumeControl.step = '0.01';
volumeControl.value = videoElement.muted ? 0 : videoElement.volume;
volumeControl.className = 'form-range mx-2';
volumeControl.style.maxWidth = '100px';
volumeControl.title = 'Volumen';
volumeControl.id = 'videoVolume';
// Mover el control de volumen después del botón mute
muteButton.parentNode.insertBefore(volumeControl, muteButton.nextSibling);
// Actualizar el volumen del video al mover el control
volumeControl.addEventListener('input', function () {
videoElement.volume = parseFloat(volumeControl.value);
if (videoElement.volume === 0) {
videoElement.muted = true;
} else {
videoElement.muted = false;
}
});
// Sincronizar el control de volumen si el volumen cambia por otros medios
videoElement.addEventListener('volumechange', function () {
volumeControl.value = videoElement.muted ? 0 : videoElement.volume;
});
// Al hacer mute/unmute, ajustar el rango
muteButton.addEventListener('click', function () {
volumeControl.value = videoElement.muted ? 0 : videoElement.volume;
});
}
// Crear el icono central de play/pause
const centerIcon = document.createElement('div');
centerIcon.id = 'centerPlayPause';
// centerIcon.style.position = 'absolute';
// centerIcon.style.top = '50%';
// centerIcon.style.left = '50%';
// centerIcon.style.transform = 'translate(-50%, -50%)';
// centerIcon.style.zIndex = '20';
// centerIcon.style.background = 'rgba(255,255,255,0.85)';
// centerIcon.style.borderRadius = '50%';
// centerIcon.style.width = '64px';
// centerIcon.style.height = '64px';
// centerIcon.style.display = 'flex';
// centerIcon.style.alignItems = 'center';
// centerIcon.style.justifyContent = 'center';
// centerIcon.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
// centerIcon.style.cursor = 'pointer';
centerIcon.innerHTML = playIconHTML;
// Insertar el icono en el contenedor del video
videoElement.parentNode.style.position = 'relative';
videoElement.parentNode.appendChild(centerIcon);
// Mostrar/ocultar el icono según el estado del video
function updateCenterIcon() {
if (videoElement.paused || videoElement.ended) {
centerIcon.innerHTML = playIconHTML;
centerIcon.style.display = 'flex';
} else {
centerIcon.innerHTML = pauseIconHTML;
centerIcon.style.display = 'none';
}
}
videoElement.addEventListener('play', updateCenterIcon);
videoElement.addEventListener('pause', updateCenterIcon);
videoElement.addEventListener('ended', updateCenterIcon);
// Al hacer clic en el icono central, reproducir/pausar
centerIcon.addEventListener('click', function () {
$('.video-controls').show().addClass('d-flex');
if (videoElement.paused || videoElement.ended) {
videoElement.play();
} else {
videoElement.pause();
}
});
// Inicializar el estado del icono
updateCenterIcon();
// Permitir reproducir/pausar al hacer clic sobre el video
videoElement.addEventListener('click', function (e) {
$('.video-controls').show().addClass('d-flex');
// Evitar que el click en los controles active el video
if (e.target === videoElement) {
if (videoElement.paused || videoElement.ended) {
videoElement.play();
} else {
videoElement.pause();
}
}
});
})();
$(function () {
'use strict';
});
</script>

298
contenido/03.html
View File

@ -1,298 +0,0 @@
<style>
.fake {
background-image: url(img/bg03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hr-style {
opacity: 1;
width: 30%;
}
.bg-custom {
background: #f0f4f2;
}
.bg-custom-transparent {
background: rgba(240, 244, 242, 0.6);
}
.drop-card {
border: 3px dashed var(--bs-primary);
width: 200px;
height: 40px;
}
.card-drag {
cursor: grab;
width: 194px;
height: 34px;
}
.card-drag.ui-draggable-dragging {
cursor: grabbing;
}
.img-retro {
top: -75px;
left: 0;
right: 0;
margin: 0 auto;
max-width: 40%;
}
</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-10 mb-2">
<h2 class="text-center fw-bold text-primary">¿Cuál es el tratamiento?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
</div>
<div class="col-12 px-0">
<div class="card border-0 my-2 rounded-0 bg-custom shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/3.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes de la columna A con la terapia a
la que corresponden en la columna B.</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/3.2.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/3.3.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/3.4.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0">Has concluido la actividad.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('body').addClass('fake');
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = 'Drag_Drop.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var result = {};
workbook.SheetNames.forEach(sheetName => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
callback(result);
};
xhr.send();
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
});
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
};
});
return preguntas;
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function CreateDragAndDrop() {
$('.content-enfermedad').each(function (index) {
if (questions && questions[index]) {
const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
$(dropDiv).insertBefore($(this).find('.card'));
}
});
// Crear todas las respuestas en #content-drags
let allOptions = [];
questions.forEach((question, index) => {
question.opciones.forEach(opcion => {
allOptions.push({ text: opcion.text, index: index });
});
});
allOptions = shuffleArray(allOptions);
allOptions.forEach(option => {
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 rounded-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$('#content-drags').append(dragDiv);
});
}
function initializeDragAndDrop() {
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing",
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
ui.position.top = 0;
},
drag: function (event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop;
ui.position.left = newLeft;
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
});
$('.drop-card').droppable({
accept: '.card-drag',
tolerance: 'pointer',
drop: function (event, ui) {
const dragData = ui.helper.data('drag');
const dropData = $(this).data('drop');
if (dragData == dropData) {
good.play();
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable('disable');
$(this).droppable('disable');
// Verificar si todos están completados
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
Completed();
}
} else {
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
});
}
function Completed() {
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); */
},
});
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
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();
});
</script>

365
contenido/04.html
View File

@ -1,365 +0,0 @@
<style>
.fake {
background-image: url(img/bg04.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hr-style {
opacity: 1;
width: 30%;
}
.bg-custom {
background: #f0f4f2;
}
.bg-custom-transparent {
background: rgba(240, 244, 242, 0.6);
}
/* .bg-custom-transparent img {
height: 230px;
} */
.drop-card {
border: none;
width: 200px;
min-width: 80px;
height: 40px;
}
.card-drag {
cursor: grab;
width: 220px;
height: auto;
display: flex;
justify-items: center;
align-items: center;
background: linear-gradient(90deg, #b68fb2 0%, #925c8d 100%);
border-radius: 0px 10px 10px 0px;
}
.card-drag.ui-draggable-dragging {
cursor: grabbing;
}
.img-retro {
top: -75px;
left: 0;
right: 0;
margin: 0 auto;
max-width: 40%;
}
/*
.form-append>div:first-child {
width: 20%;
min-width: 50px;
max-width: 60px;
display: inline-block;
vertical-align: middle;
}
.form-append>div:nth-child(2) {
width: auto;
display: inline-block;
vertical-align: middle;
} */
</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-10 mb-2">
<h2 class="text-center fw-bold text-primary">Tipos de diálisis</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
</div>
<div class="col-7 px-0">
<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> Toma los nombres en la caja y arrástralos hacia el lugar
que les corresponda en las imágenes.</p>
</div>
</div>
</div>
<div id="drag-drop-activity" class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-3">
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-4">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.1.png" class="img-fluid">
</div>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">
1
</div>
<div class="option"></div>
</div>
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.2.png" class="img-fluid">
</div>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">
2
</div>
<div class="option"></div>
</div>
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.3.png" class="img-fluid">
</div>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">
3
</div>
<div class="option"></div>
</div>
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
<div class="card-header bg-transparent">
<img src="img/4.4.png" class="img-fluid">
</div>
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
<div class="bg-secondary text-white fw-bold py-2 px-2">
4
</div>
<div class="option"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0">Has concluido la actividad.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('body').addClass('fake');
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = 'Drag_Drop2.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var result = {};
workbook.SheetNames.forEach(sheetName => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
callback(result);
};
xhr.send();
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
});
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
};
});
return preguntas;
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function CreateDragAndDrop() {
$('.content-enfermedad').each(function (index) {
if (questions && questions[index]) {
const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
$(this).find('.option').append(dropDiv);
}
});
// Crear todas las respuestas en #content-drags
let allOptions = [];
questions.forEach((question, index) => {
question.opciones.forEach(opcion => {
allOptions.push({ text: opcion.text, index: index });
});
});
allOptions = shuffleArray(allOptions);
allOptions.forEach(option => {
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$('#content-drags').append(dragDiv);
});
}
function initializeDragAndDrop() {
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing",
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
ui.position.top = 0;
},
drag: function (event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop;
ui.position.left = newLeft;
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
});
$('.drop-card').droppable({
accept: '.card-drag',
tolerance: 'pointer',
drop: function (event, ui) {
const dragData = ui.helper.data('drag');
const dropData = $(this).data('drop');
if (dragData == dropData) {
good.play();
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable('disable');
$(this).droppable('disable');
// Verificar si todos están completados
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
Completed();
}
} else {
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
});
}
function Completed() {
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); */
},
});
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
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();
});
</script>

549
contenido/05.html
View File

@ -1,549 +0,0 @@
<style>
.fake {
background-image: url(img/bg05.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hr-style {
opacity: 1;
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;
}
.content-enfermedad img {
height: 200px;
}
.card-drag {
cursor: grab;
width: 50px;
height: 50px;
}
.card-drag img {
width: 100%;
}
.card-drag.ui-draggable-dragging {
cursor: grabbing;
}
.img-retro {
top: -75px;
left: 0;
right: 0;
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">
<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>
</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>
</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>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/3.5.png" class="img-fluid">
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
</div>
<div class="col-12 text-center">
<p class="mb-0">Has concluido la actividad.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
'use strict';
$('body').addClass('fake');
let questions;
let currentQuestionIndex = 0;
let currentQuestion;
let correctQuestions = 0;
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = 'Drag_Drop3.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var result = {};
workbook.SheetNames.forEach(sheetName => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
callback(result);
};
xhr.send();
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const opciones = [];
Object.keys(fila).forEach(key => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
});
}
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
};
});
return preguntas;
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function CreateDragAndDrop() {
$('.content-enfermedad').each(function (index) {
if (questions && questions[index]) {
const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
$(dropDiv).insertAfter($(this).find('.card'));
}
});
// Crear todas las respuestas en #content-drags
let allOptions = [];
questions.forEach((question, index) => {
question.opciones.forEach(opcion => {
allOptions.push({ text: opcion.text, index: index });
});
});
allOptions = shuffleArray(allOptions);
allOptions.forEach(option => {
const dragDiv = `<div class="card card-drag bg-transparent border border-2 border-secondary rounded-0 shadow-none text-white text-center" data-drag="${option.index}">${option.text}</div>`;
$('#content-drags').append(dragDiv);
});
}
function initializeDragAndDrop() {
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing",
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
ui.position.top = 0;
},
drag: function (event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft;
var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop;
ui.position.left = newLeft;
ui.position.top = newTop;
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
});
$('.drop-card').droppable({
accept: '.card-drag',
tolerance: 'pointer',
drop: function (event, ui) {
const dragData = ui.helper.data('drag');
const dropData = $(this).data('drop');
if (dragData == dropData) {
good.play();
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
ui.helper.draggable('disable');
$(this).droppable('disable');
// Verificar si todos están completados
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
Completed();
}
} else {
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
});
}
function Completed() {
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); */
},
});
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
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>

BIN
img/0.1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 312 KiB

0
img/3.4.png → img/02.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 85 KiB

BIN
img/2.1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 635 B

BIN
img/2.2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 156 KiB

BIN
img/3.1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 632 B

BIN
img/3.2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
img/3.3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

BIN
img/3.5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
img/4.1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
img/4.2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
img/4.3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
img/4.4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

BIN
img/5.0.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
img/5.1a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
img/5.1b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
img/5.2a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
img/5.2b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
img/5.3a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 120 KiB

BIN
img/5.3b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 81 KiB

BIN
img/5.4a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
img/5.5a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
img/5.6a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
img/5.7a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
img/5.8a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
img/bg00.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 105 KiB

BIN
img/bg01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 113 KiB

BIN
img/bg03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 149 KiB

BIN
img/bg04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
img/bg05.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

BIN
img/bg5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

BIN
img/left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 985 B

BIN
img/poster.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
img/right.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 966 B

18
img/template/audio.svg
View File

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.07 34.76">
<defs>
<style>
.cls-1 {
fill: #fff3e4;
stroke-width: 0px;
}
</style>
</defs>
<g id="Capa_1-2" data-name="Capa 1">
<g>
<path class="cls-1" d="M30.77,30.85c-.33,0-.64-.13-.87-.36-.48-.48-.48-1.26,0-1.74,6.26-6.26,6.26-16.46,0-22.72-.23-.23-.36-.54-.36-.87s.13-.64.36-.87c.23-.23.54-.36.87-.36s.64.13.87.36c3.5,3.5,5.43,8.16,5.43,13.11s-1.93,9.61-5.43,13.11c-.23.23-.54.36-.87.36Z"/>
<path class="cls-1" d="M27.51,27.59c-.33,0-.64-.13-.87-.36-.48-.48-.48-1.26,0-1.74,2.16-2.16,3.36-5.04,3.36-8.1s-1.19-5.94-3.35-8.1c-.48-.48-.48-1.26,0-1.74.23-.23.54-.36.87-.36s.64.13.87.36c2.63,2.63,4.08,6.13,4.08,9.84s-1.45,7.21-4.08,9.84c-.23.23-.54.36-.87.36Z"/>
<path class="cls-1" d="M21.59,34.76c-.59,0-1.21-.2-1.8-.57l-11.99-7.51h-3.68c-2.27,0-4.12-1.85-4.12-4.12v-10.38c0-2.27,1.85-4.12,4.12-4.12h3.68L19.79.57c.59-.37,1.21-.57,1.8-.57.43,0,.82.1,1.18.3.86.48,1.35,1.45,1.35,2.67v28.84c0,1.22-.49,2.19-1.35,2.67-.36.2-.75.3-1.18.3ZM21.1,32.11c.28.18.44.19.48.19l.06-.02s0,0,0,0c-.05,0,.02-.16.02-.48V2.96c0-.28-.05-.43-.09-.5-.06,0-.22.03-.47.19l-11.72,7.33v14.78l11.72,7.33ZM4.12,10.54c-.91,0-1.65.74-1.65,1.65v10.38c0,.91.74,1.65,1.65,1.65h2.8v-13.68h-2.8Z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
img/w-xx.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
img/w-xx1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
video/demo.mp4
View File

Binary file not shown.