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

update

Browse Source
This commit is contained in:
david.martinez
2026-07-01 02:25:52 -06:00
parent 8dd25c3b23
commit 0be4d028e1
34 changed files with 443 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/05.html
+37 -38
View File
@@ -13,8 +13,8 @@
.drop-card {
border: 3px dashed var(--bs-primary);
width: 56px;
height: 56px;
width: 80px;
height: 80px;
}
/* .content-enfermedad {
@@ -27,8 +27,8 @@
.card-drag {
cursor: grab;
width: 50px;
height: 50px;
width: 75px;
height: 75px;
}
.card-drag img {
@@ -47,20 +47,20 @@
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' style="overflow: hidden;">
<div class='col-12'>
<div id="drag-drop-activity" class='row justify-content-center'>
<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" style="overflow: hidden">
<div class="col-12">
<div id="drag-drop-activity" class="row justify-content-center">
<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-lila-claro">></span> Glucosa</h3>
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?<sup class="fw-bold">1,2,4,5</sup></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-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">
<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>
@@ -73,22 +73,22 @@
<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">
<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">
<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">
<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">
<img src="img/5.4a.png" class="img-fluid" />
</div>
</div>
</div>
@@ -102,8 +102,8 @@
<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 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">
@@ -136,9 +136,9 @@
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var workbook = XLSX.read(data, { type: 'array' });
var result = {};
workbook.SheetNames.forEach(sheetName => {
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
@@ -148,13 +148,13 @@
}
function procesarPreguntas(data) {
const preguntas = data.map(fila => {
const preguntas = data.map((fila) => {
const opciones = [];
Object.keys(fila).forEach(key => {
Object.keys(fila).forEach((key) => {
if (key.startsWith('opcion')) {
opciones.push({
text: fila[key].trim(),
correct: key === 'opcion_c'
correct: key === 'opcion_c',
});
}
});
@@ -162,7 +162,7 @@
pregunta: fila.pregunta.trim(),
opciones: opciones,
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
};
});
return preguntas;
@@ -187,13 +187,13 @@
// Crear todas las respuestas en #content-drags
let allOptions = [];
questions.forEach((question, index) => {
question.opciones.forEach(opcion => {
question.opciones.forEach((opcion) => {
allOptions.push({ text: opcion.text, index: index });
});
});
allOptions = shuffleArray(allOptions);
allOptions.forEach(option => {
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);
});
@@ -203,7 +203,7 @@
$('.card-drag').draggable({
revert: 'invalid',
revertDuration: 300,
cursor: "grabbing",
cursor: 'grabbing',
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
@@ -220,7 +220,7 @@
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
},
});
$('.drop-card').droppable({
@@ -244,28 +244,27 @@
bad.play();
ui.helper.draggable('option', 'revert', true);
}
}
},
});
}
function Completed() {
const html = $("#pop0").html();
const html = $('#pop0').html();
Swal.fire({
html: html,
target: document.getElementById('wrap-course-content'),
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'
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
},
confirmButtonText: "Cerrar",
confirmButtonText: 'Cerrar',
showConfirmButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didOpen: () => {
},
backdrop: 'rgba(65, 60, 60, .95)',
width: '35em',
didOpen: () => {},
didClose: () => {
CourseNav.audioController.stopAudio();
//CourseNav.soundClick();
@@ -279,7 +278,7 @@
}
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["DragAndDrop"];
const hojaDatos = data['DragAndDrop'];
questions = procesarPreguntas(hojaDatos);
CreateDragAndDrop();
initializeDragAndDrop();