This commit is contained in:
2026-07-01 15:47:43 -06:00
parent 0be4d028e1
commit 2e304d7a99
15 changed files with 314 additions and 278 deletions
+27 -25
View File
@@ -26,8 +26,8 @@
}
.btn-drag {
background: #B68FB2;
background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
background: #b68fb2;
background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
border-radius: 12px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -44,23 +44,26 @@
width: 100%;
}
</style>
<div 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' style="overflow: hidden;">
<div class='col-12'>
<div class='row justify-content-center'>
<div 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" style="overflow: hidden">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-10 mb-2">
<h2 class="text-center fw-bold text-primary">Registros</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
<div class="col-10 px-0 mb-1">
<div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/08.0.png" class="img-fluid mx-3">
<img src="img/08.0.png" class="img-fluid mx-3" />
<p class="mb-0"><strong>Instrucciones:</strong> Toma los tipos de terapia que se presentan y arrástralos hacia el registro que les corresponde.</p>
</div>
</div>
</div>
<div class="col-12 text-center mb-3">
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
</div>
<div class="col-12" id="drag-drop-activity">
<div class="row justify-content-center align-items-center">
<div class="col-4 col-drags">
@@ -78,14 +81,14 @@
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-6 text-center">
<img src="img/17.0.png" class="img-fluid mb-3"><br>
<img src="img/17.0.png" class="img-fluid mb-3" /><br />
<div class="content-drop d-flex flex-row align-items-center gap-0">
<div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">0</h3></div>
<div class="obj-drop" data-drop="0"></div>
</div>
</div>
<div class="col-6 text-center">
<img src="img/17.1.png" class="img-fluid mb-3"><br>
<img src="img/17.1.png" class="img-fluid mb-3" /><br />
<div class="content-drop d-flex flex-row align-items-center gap-0">
<div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">1</h3></div>
<div class="obj-drop" data-drop="1"></div>
@@ -105,8 +108,8 @@
<div class="d-none">
<div id="pop0">
<div class="container-fluid">
<div class=" w-100 text-center">
<img src="img/17.2.png" class="img-fluid">
<div class="w-100 text-center">
<img src="img/17.2.png" class="img-fluid" />
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-2">
@@ -121,7 +124,7 @@
</div>
<script>
$(function () {
"use strict";
'use strict';
$('.wrap-course-content').addClass('fake');
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
@@ -142,7 +145,7 @@
$('.btn-drag').draggable({
revert: 'invalid',
revertDuration: 300,
cursor: "grabbing",
cursor: 'grabbing',
start: function (event, ui) {
$(this).css('z-index', 1000);
ui.position.left = 0;
@@ -159,7 +162,7 @@
},
stop: function (event, ui) {
$(this).css('z-index', 1);
}
},
});
$('.obj-drop').droppable({
@@ -183,28 +186,27 @@
CourseNav.audioController.stopAllSoundsAndPlay(bad);
ui.helper.draggable('option', 'revert', true);
}
}
},
});
function Completed() {
function Completed() {
$('.col-drags').hide();
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.setSlideVisited();