update modificacion de template adaptativo y modificacion de algunas actividades

2025-09-18 11:58:18 -06:00
parent a57cba5f67
commit 07100d82de
35 changed files with 1004 additions and 400 deletions
@@ -0,0 +1,192 @@
+<style>
+  .fake {
+    background-image: url(img/bg05.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 50%;
+  }
+
+  #sortable-cards .card {
+    width: 23%;
+  }
+</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">
+          </div>
+          <div class="col-9 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> Arrastre los pasos del recambio para
+                  colocarlos en el orden correcto.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <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="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');
+
+    // 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-verde-pasto');
+        } else {
+          $(this).css('background', ''); // reset
+          correct = false;
+        }
+      });
+      return correct;
+    }
+
+    // Crear tarjetas mezcladas al cargar
+    createShuffledCards();
+
+    // Configurar sortable
+    $('#sortable-cards').sortable({
+      axis: 'x',
+      containment: '#activity1',
+      cursor: 'grabbing',
+      tolerance: 'pointer',
+      helper: "clone",
+      cursorAt: { top: 50, left: 50 },
+      update: function (event, ui) {
+        if (checkOrder()) {
+          $('#sortable-cards').sortable('disable');
+          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');
+        if (ui.position) {
+          ui.position.left = 0;
+          ui.position.top = 0;
+        }
+      },
+      drag: function (event, ui) {
+        if (ui.position && ui.originalPosition) {
+          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) {
+        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');
+    });
+  });
+</script>