update modificacion de template adaptativo y modificacion de algunas actividades

config.json

@@ -23,6 +23,10 @@
         {
           "title": "Navegación",
           "content": "contenido/05.html"
+        },
+        {
+          "title": "Navegación",
+          "content": "contenido/06.html"
         }
       ]
     }

contenido/02.html

@@ -137,7 +137,7 @@
                             <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="col-6">
                                 <div class="main-video bg-primary rounded">
                                     <div
                                         class="video-custom rounded overflow-hidden border-0 border-primary shadow-sm position-relative">
@@ -214,6 +214,7 @@
         videoElement.addEventListener('ended', function () {
             playPauseButton.innerHTML = playIconHTML;
             videoSeekBar.value = 0;
+            CourseNav.setSlideVisited();
         });
 
         // Mute/Unmute

contenido/04.html

@@ -16,7 +16,8 @@
   }
 
   .bg-custom-transparent {
-    background: rgba(240, 244, 242, 0.6);
+    background: rgba(242, 232, 222, .76);
+    background: linear-gradient(to bottom, rgba(242, 232, 222, .6) 0%, rgba(240, 244, 242, .9) 100%);
   }
 
   /* .bg-custom-transparent img {
@@ -53,6 +54,10 @@
     max-width: 40%;
   }
 
+  .content-enfermedad {
+    width: 24%;
+  }
+
   /*
   .form-append>div:first-child {
     width: 20%;
@@ -90,7 +95,7 @@
             <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="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 text-center">
                         <div class="card-header bg-transparent">
@@ -341,7 +346,7 @@
       questions = procesarPreguntas(hojaDatos);
       CreateDragAndDrop();
       initializeDragAndDrop();
-      igualarAlturaBgCustomTransparent();
+      //igualarAlturaBgCustomTransparent();
     });
 
 
@@ -356,8 +361,8 @@
       $('.bg-custom-transparent').css('height', maxHeight + 'px');
     }
 
-    $(window).on('resize', igualarAlturaBgCustomTransparent);
+    /* $(window).on('resize', igualarAlturaBgCustomTransparent);
-    igualarAlturaBgCustomTransparent();
+    igualarAlturaBgCustomTransparent(); */
 
 
 

contenido/05.html

@@ -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;
+    width: 56px;
-    height: 50px;
+    height: 56px;
   }
 
+  /* .content-enfermedad {
+    width: 25%;
+  } */
+
   .content-enfermedad img {
-    height: 200px;
+    height: 250px;
   }
 
   .card-drag {
@@ -58,94 +46,48 @@
     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">
+          <div class="col-12 mb-3">
-            <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
+                <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>
-                                  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="col-12 mb-3">
-                            <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="col-12">
             <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">
+                  <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 mt-2">
+                  <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 mt-2">
+                  <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 mt-2">
+                  <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>
@@ -156,40 +98,6 @@
       </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">
@@ -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>

contenido/05.html.back

@@ -0,0 +1,549 @@
+<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>

contenido/06.html

@@ -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>

css/style.css

@@ -262,6 +262,13 @@ body > main {
   z-index: 1;
 }
 
+.wrap-course-content footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
 #coursenav-offcanvas {
   border-top-right-radius: 30px !important;
   border-bottom-right-radius: 30px !important;

css/theme.scss

@@ -10,6 +10,7 @@ $custom-colors: (
   'verde-ceniza': #84a79c,
   'verde-oscuro': #105742,
   'verde-pino': #4c8071,
+  'verde-pasto': #84a816,
   'verde-claro': #d6e3da,
   'lila-claro': #905c8b,
   'morado-claro': #915c8c,

css/themee.css

@@ -70,6 +70,7 @@
   --bs-verde-ceniza: #84a79c;
   --bs-verde-oscuro: #105742;
   --bs-verde-pino: #4c8071;
+  --bs-verde-pasto: #84a816;
   --bs-verde-claro: #d6e3da;
   --bs-lila-claro: #905c8b;
   --bs-morado-claro: #915c8c;
@@ -97,6 +98,7 @@
   --bs-verde-ceniza-rgb: 132, 167, 156;
   --bs-verde-oscuro-rgb: 16, 87, 66;
   --bs-verde-pino-rgb: 76, 128, 113;
+  --bs-verde-pasto-rgb: 132, 168, 22;
   --bs-verde-claro-rgb: 214, 227, 218;
   --bs-lila-claro-rgb: 144, 92, 139;
   --bs-morado-claro-rgb: 145, 92, 140;
@@ -3284,6 +3286,23 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #4c8071;
 }
 
+.btn-verde-pasto {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #84a816;
+  --bs-btn-border-color: #84a816;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #96b539;
+  --bs-btn-hover-border-color: #90b12d;
+  --bs-btn-focus-shadow-rgb: 112, 143, 19;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #9db945;
+  --bs-btn-active-border-color: #90b12d;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #84a816;
+  --bs-btn-disabled-border-color: #84a816;
+}
+
 .btn-verde-claro {
   --bs-btn-color: #000;
   --bs-btn-bg: #d6e3da;
@@ -3743,6 +3762,23 @@ textarea.form-control-lg {
   --bs-gradient: none;
 }
 
+.btn-outline-verde-pasto {
+  --bs-btn-color: #84a816;
+  --bs-btn-border-color: #84a816;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #84a816;
+  --bs-btn-hover-border-color: #84a816;
+  --bs-btn-focus-shadow-rgb: 132, 168, 22;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #84a816;
+  --bs-btn-active-border-color: #84a816;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #84a816;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #84a816;
+  --bs-gradient: none;
+}
+
 .btn-outline-verde-claro {
   --bs-btn-color: #d6e3da;
   --bs-btn-border-color: #d6e3da;
@@ -5558,6 +5594,15 @@ textarea.form-control-lg {
   color: #253e36;
 }
 
+.alert-verde-pasto {
+  --bs-alert-color: #4f650d;
+  --bs-alert-bg: #e6eed0;
+  --bs-alert-border-color: #dae5b9;
+}
+.alert-verde-pasto .alert-link {
+  color: #3f510a;
+}
+
 .alert-verde-claro {
   --bs-alert-color: #565b57;
   --bs-alert-bg: #f7f9f8;
@@ -6208,6 +6253,20 @@ textarea.form-control-lg {
   border-color: #2e4d44;
 }
 
+.list-group-item-verde-pasto {
+  color: #4f650d;
+  background-color: #e6eed0;
+}
+.list-group-item-verde-pasto.list-group-item-action:hover, .list-group-item-verde-pasto.list-group-item-action:focus {
+  color: #4f650d;
+  background-color: #cfd6bb;
+}
+.list-group-item-verde-pasto.list-group-item-action.active {
+  color: #ffffff;
+  background-color: #4f650d;
+  border-color: #4f650d;
+}
+
 .list-group-item-verde-claro {
   color: #565b57;
   background-color: #f7f9f8;
@@ -7902,6 +7961,11 @@ textarea.form-control-lg {
   background-color: RGBA(76, 128, 113, var(--bs-bg-opacity, 1)) !important;
 }
 
+.text-bg-verde-pasto {
+  color: #000 !important;
+  background-color: RGBA(132, 168, 22, var(--bs-bg-opacity, 1)) !important;
+}
+
 .text-bg-verde-claro {
   color: #000 !important;
   background-color: RGBA(214, 227, 218, var(--bs-bg-opacity, 1)) !important;
@@ -8083,6 +8147,13 @@ textarea.form-control-lg {
   color: #3d665a !important;
 }
 
+.link-verde-pasto {
+  color: #84a816 !important;
+}
+.link-verde-pasto:hover, .link-verde-pasto:focus {
+  color: #9db945 !important;
+}
+
 .link-verde-claro {
   color: #d6e3da !important;
 }
@@ -8647,6 +8718,11 @@ textarea.form-control-lg {
   border-color: rgba(var(--bs-verde-pino-rgb), var(--bs-border-opacity)) !important;
 }
 
+.border-verde-pasto {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-verde-pasto-rgb), var(--bs-border-opacity)) !important;
+}
+
 .border-verde-claro {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-verde-claro-rgb), var(--bs-border-opacity)) !important;
@@ -9599,6 +9675,11 @@ textarea.form-control-lg {
   color: rgba(var(--bs-verde-pino-rgb), var(--bs-text-opacity)) !important;
 }
 
+.text-verde-pasto {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-verde-pasto-rgb), var(--bs-text-opacity)) !important;
+}
+
 .text-verde-claro {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-verde-claro-rgb), var(--bs-text-opacity)) !important;
@@ -9775,6 +9856,11 @@ textarea.form-control-lg {
   background-color: rgba(var(--bs-verde-pino-rgb), var(--bs-bg-opacity)) !important;
 }
 
+.bg-verde-pasto {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-verde-pasto-rgb), var(--bs-bg-opacity)) !important;
+}
+
 .bg-verde-claro {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-verde-claro-rgb), var(--bs-bg-opacity)) !important;

index.html

@@ -21,15 +21,15 @@
   <body>
     <div class="wrap-course-adaptive overflow-hidden">
       <div class="wrap-course-content" id="wrap-course-content">
-        <header class="d-none">
+        <header>
-          <nav class="navbar navbar-light bg-white sticky-top shadow-sm" id="coursenav-navbar">
+          <nav class="navbar navbar-light bg-white sticky-top shadow-sm py-0" id="coursenav-navbar">
             <div class="container-fluid d-flex align-items-center px-3">
               <!-- Logo -->
-              <a class="navbar-brand p-0 disabled" href="#">
+              <a class="navbar-brand p-0 disabled ms-auto" href="#">
-                <img src="img/template/logo.png" alt="Logo" />
+                <img src="img/template/logo.svg" width="133" alt="Logo" />
               </a>
-              <div class="flex-grow-1"></div>
+              <div class="flex-grow-1 d-none"></div>
-              <div class="d-flex align-items-center">
+              <div class="d-flex align-items-center d-none">
                 <!-- Audio Control -->
                 <button id="coursenav-audio-control" class="btn controls-btn me-2" aria-label="Toggle audio">
                   <div class="position-relative">
@@ -104,7 +104,7 @@
           <div class="d-inline-flex justify-content-center flex-row bg-transparent text-white" id="wrap-course-controls">
             <!-- Offcanvas Toggle -->
             <button
-              class="btn controls-btn text-white bg-secondary align-self-center me-2"
+              class="btn controls-btn text-white bg-primary align-self-center me-2"
               type="button"
               data-bs-toggle="offcanvas"
               data-bs-target="#coursenav-offcanvas"

js/config.js

@@ -5,7 +5,7 @@
  * @property {boolean} DEBUG - Habilita/deshabilita el modo de depuración.
  */
 window.COURSE_CONFIG = {
-  COURSE_CONFIG_URL: "config.json",
+  COURSE_CONFIG_URL: 'config.json',
   DEBUG: false,
 };
 
@@ -19,8 +19,8 @@ window.COURSE_CONFIG = {
  * renderPagination(2, courseData.contentArray);
  */
 function renderPagination(currentIndex, contentArray) {
-  const pageNumber = document.getElementById("coursenav-page-number");
+  const pageNumber = document.getElementById('coursenav-page-number');
-  const totalPages = document.getElementById("coursenav-total-pages");
+  const totalPages = document.getElementById('coursenav-total-pages');
 
   if (!Array.isArray(contentArray)) return;
   // Gestionar visibilidad de menús primero
@@ -36,7 +36,7 @@ function renderPagination(currentIndex, contentArray) {
   const moduleSlideIndex = moduleSlides.findIndex((slide) => slide.content === currentSlide.content);
 
   if (pageNumber) pageNumber.textContent = moduleSlideIndex + 1;
-  if (totalPages) totalPages.textContent = " / " + moduleSlides.length;
+  if (totalPages) totalPages.textContent = ' / ' + moduleSlides.length;
   //Navegación personalizada
   updateNavButtons(moduleSlideIndex, moduleSlides);
 }
@@ -54,8 +54,8 @@ function renderPagination(currentIndex, contentArray) {
  * @param {Array<Object>} moduleSlides - Un array de los objetos de diapositiva que pertenecen al módulo actual.
  */
 function updateNavButtons(moduleSlideIndex, moduleSlides) {
-  const nextBtn = document.getElementById("coursenav-next-btn");
+  const nextBtn = document.getElementById('coursenav-next-btn');
-  const prevBtn = document.getElementById("coursenav-prev-btn");
+  const prevBtn = document.getElementById('coursenav-prev-btn');
 
   if (!nextBtn || !prevBtn) return;
 
@@ -63,8 +63,8 @@ function updateNavButtons(moduleSlideIndex, moduleSlides) {
   const isFirstSlide = moduleSlideIndex === 0;
   const isDebugMode = CourseNav.isDebug();
 
-  nextBtn.classList.toggle("disabled", isLastSlide && !isDebugMode);
+  nextBtn.classList.toggle('disabled', isLastSlide && !isDebugMode);
-  prevBtn.classList.toggle("disabled", isFirstSlide && !isDebugMode);
+  prevBtn.classList.toggle('disabled', isFirstSlide && !isDebugMode);
 }
 /**
  * Gestiona la visibilidad de los menús del curso en la barra de navegación.
@@ -80,16 +80,16 @@ function updateNavButtons(moduleSlideIndex, moduleSlides) {
  * @param {Array<Object>} contentArray - El array completo de objetos de slide del curso.
  */
 function manageMenuVisibility(currentIndex, contentArray) {
-  const courseMenus = document.querySelectorAll("#coursenav-main-menu > ul.course-menu");
+  const courseMenus = document.querySelectorAll('#coursenav-main-menu > ul.course-menu');
   if (!courseMenus.length) return;
 
   // El primer menú siempre está visible.
-  courseMenus[0].style.display = "block";
+  courseMenus[0].style.display = 'block';
 
   // Si no hay contenido, ocultar los demás menús.
   if (!Array.isArray(contentArray) || !contentArray.length) {
     for (let i = 1; i < courseMenus.length; i++) {
-      courseMenus[i].style.display = "none";
+      courseMenus[i].style.display = 'none';
     }
     return;
   }
@@ -98,7 +98,7 @@ function manageMenuVisibility(currentIndex, contentArray) {
   // Si el slide actual no existe o no tiene un título de módulo, ocultar los demás.
   if (!currentSlide?.moduleTitle) {
     for (let i = 1; i < courseMenus.length; i++) {
-      courseMenus[i].style.display = "none";
+      courseMenus[i].style.display = 'none';
     }
     return;
   }
@@ -106,12 +106,12 @@ function manageMenuVisibility(currentIndex, contentArray) {
   const currentModuleTitle = currentSlide.moduleTitle;
 
   for (let i = 1; i < courseMenus.length; i++) {
-    const menuItems = Array.from(courseMenus[i].querySelectorAll(".coursenav-link"));
+    const menuItems = Array.from(courseMenus[i].querySelectorAll('.coursenav-link'));
     const shouldShow = menuItems.some((item) => {
       const itemIndex = parseInt(item.dataset.coursenavindex);
       return itemIndex >= 0 && contentArray[itemIndex]?.moduleTitle === currentModuleTitle;
     });
-    courseMenus[i].style.display = shouldShow ? "block" : "none";
+    courseMenus[i].style.display = shouldShow ? 'block' : 'none';
   }
 }
 
@@ -128,7 +128,7 @@ function manageMenuVisibility(currentIndex, contentArray) {
  * scrollToElementTop('#main-content', { behavior: 'smooth', block: 'start' });
  */
 function scrollToElementTop(selector, options = {}) {
-  const defaults = { behavior: "smooth", block: "start", inline: "nearest" };
+  const defaults = { behavior: 'smooth', block: 'start', inline: 'nearest' };
   const opts = Object.assign(defaults, options);
   const el = document.querySelector(selector);
   if (el) el.scrollIntoView(opts);
@@ -149,7 +149,7 @@ function scrollToElementTop(selector, options = {}) {
  * animateOnScroll('.animar', 'animate__fadeIn', { threshold: 0.2 });
  */
 function animateOnScroll(selector, animationClass, options = {}) {
-  const { threshold = 0.1, animateOnce = true, prefix = "animate__animated" } = options;
+  const { threshold = 0.1, animateOnce = true, prefix = 'animate__animated' } = options;
 
   const cb = (entries, observer) => {
     entries.forEach((entry) => {
@@ -172,36 +172,48 @@ function animateOnScroll(selector, animationClass, options = {}) {
  * @function scaleWrapCourseContent
  */
 function scaleWrapCourseContent() {
-  const content = document.querySelector(".wrap-course-content");
+  const content = document.querySelector('.wrap-course-content');
+  const mainContent = document.querySelector('#coursenav-main-content');
   if (!content) return;
 
-  const vw = window.innerWidth;
+  const header = document.querySelector('header');
-  const vh = window.innerHeight;
+  const footer = document.querySelector('footer');
-  const minWidth = 768;
+  const headerHeight = header ? header.offsetHeight : 0;
+  const footerHeight = footer ? footer.offsetHeight : 0;
   
-  if (vw < minWidth) {
+  const ww = window.innerWidth;
-    // Escalar en móviles
+  const wh = window.innerHeight - headerHeight;
-    const scale = vw / minWidth;
+
+  if (ww < 1366) {
+    const scale = Math.min(ww / 1366, wh / 768);
     content.style.transform = `scale(${scale})`;
-    content.style.transformOrigin = "top left";
+    content.style.transformOrigin = 'top left';
-    content.style.width = minWidth + "px";
+    content.style.width = '1366px';
-    content.style.height = (vh / scale) + "px";
+    content.style.height = '768px';
-    content.style.position = "fixed";
+    content.style.position = 'absolute';
-    content.style.left = "0";
+    content.style.left = (ww - 1366 * scale) / 2 + 'px';
-    content.style.top = "0";
+    content.style.top = headerHeight + (wh - 768 * scale) / 2 + 'px';
-    content.style.overflow = "hidden";
+    content.style.overflow = 'hidden';
-  } else {
+    
-    // Pantalla completa en desktop
+    if (mainContent) {
-    content.style.transform = "";
+      const availableHeight = 768 - 80;
-    content.style.transformOrigin = "";
+      mainContent.style.height = availableHeight + 'px';
-    content.style.width = "100vw";
-    content.style.height = "100vh";
-    content.style.position = "fixed";
-    content.style.left = "0";
-    content.style.top = "0";
-    content.style.overflow = "auto";
     }
-  content.style.zIndex = "1";
+  } else {
+    content.style.transform = '';
+    content.style.transformOrigin = '';
+    content.style.width = '100%';
+    content.style.height = '100vh';
+    content.style.position = 'relative';
+    content.style.left = '';
+    content.style.top = '';
+    content.style.overflow = 'hidden';
+    
+    if (mainContent) {
+      mainContent.style.height = `calc(100vh - ${headerHeight + footerHeight}px)`;
+    }
+  }
+  content.style.zIndex = '1';
 }
 
 /**
@@ -218,14 +230,14 @@ function scaleWrapCourseContent() {
  */
 function renderStepper(stepperEl, progressPercent, mobileEl, stepsCount = 5) {
   // Validación y obtención de elementos
-  if (typeof stepperEl === "string") stepperEl = document.querySelector(stepperEl);
+  if (typeof stepperEl === 'string') stepperEl = document.querySelector(stepperEl);
-  if (typeof mobileEl === "string") mobileEl = document.querySelector(mobileEl);
+  if (typeof mobileEl === 'string') mobileEl = document.querySelector(mobileEl);
   if (!(stepperEl instanceof HTMLElement) || !(mobileEl instanceof HTMLElement)) {
-    throw new Error("renderStepper: elementos inválidos.");
+    throw new Error('renderStepper: elementos inválidos.');
   }
 
   // Limpiar contenido previo
-  stepperEl.querySelectorAll(".step").forEach((el) => el.remove());
+  stepperEl.querySelectorAll('.step').forEach((el) => el.remove());
 
   // Calcular posiciones de los pasos
   const stepPercents = Array.from({ length: stepsCount }, (_, i) => (i / (stepsCount - 1)) * 100);
@@ -238,22 +250,22 @@ function renderStepper(stepperEl, progressPercent, mobileEl, stepsCount = 5) {
 
   // Crear elementos de los pasos
   stepPercents.forEach((pct, i) => {
-    const step = document.createElement("div");
+    const step = document.createElement('div');
-    step.classList.add("step");
+    step.classList.add('step');
-    if (i < currentIndex) step.classList.add("completed");
+    if (i < currentIndex) step.classList.add('completed');
     if (i === currentIndex) {
-      step.classList.add("completed");
+      step.classList.add('completed');
-      step.setAttribute("data-label", Math.round(pct) + "%");
+      step.setAttribute('data-label', Math.round(pct) + '%');
     }
     stepperEl.appendChild(step);
   });
 
   // Actualizar estilos y posición
-  stepperEl.style.setProperty("--pct", progressPercent + "%");
+  stepperEl.style.setProperty('--pct', progressPercent + '%');
 
   const halfMobile = mobileEl.offsetWidth;
   mobileEl.style.left = `calc(${progressPercent}% - ${halfMobile}px)`;
-  mobileEl.setAttribute("data-label", progressPercent + "%");
+  mobileEl.setAttribute('data-label', progressPercent + '%');
 }
 
 /**
@@ -269,10 +281,12 @@ function renderStepper(stepperEl, progressPercent, mobileEl, stepsCount = 5) {
  */
 function gotoFirstMenuToolSlide() {
   const contentArray = CourseNav.getCourseContentArray();
-  const targetTitle = "Menús de la herramienta";
+  const targetTitle = 'Menús de la herramienta';
   const currentSlide = CourseNav.getCurrentSlide();
   // Filtrar todos los slides del mismo módulo
-  const targetIndex = contentArray.findIndex((slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle);
+  const targetIndex = contentArray.findIndex(
+    (slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle
+  );
 
   if (targetIndex !== -1) {
     CourseNav.gotoSlide(targetIndex);
@@ -285,7 +299,11 @@ function gotoFirstMenuToolSlide() {
  * Configura los event listeners cuando el DOM está completamente cargado.
  * @event DOMContentLoaded
  */
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener('DOMContentLoaded', () => {
+  // Ajustar contenido al cargar y redimensionar
+  setTimeout(scaleWrapCourseContent, 100);
+  window.addEventListener('resize', () => setTimeout(scaleWrapCourseContent, 100));
+  
   /**
    * Evento antes de cambiar de slide.
    * @event beforeSlideChange
@@ -293,8 +311,8 @@ document.addEventListener("DOMContentLoaded", () => {
    * @property {number} detail.currentIndex - Índice del slide actual.
    * @property {Array} detail.contentArray - Array completo de contenido.
    */
-  document.body.addEventListener("beforeSlideChange", (e) => {
+  document.body.addEventListener('beforeSlideChange', (e) => {
-    console.log("Antes de cambiar de slide:", e.detail);
+    console.log('Antes de cambiar de slide:', e.detail);
   });
 
   /**
@@ -304,34 +322,36 @@ document.addEventListener("DOMContentLoaded", () => {
    * @property {number} detail.slideIndex - Índice del nuevo slide.
    * @property {Array} detail.contentArray - Array completo de contenido.
    */
-  document.body.addEventListener("slideChange", (e) => {
+  document.body.addEventListener('slideChange', (e) => {
-    if (e.detail && typeof e.detail.slideIndex === "number" && Array.isArray(e.detail.contentArray)) {
+    if (e.detail && typeof e.detail.slideIndex === 'number' && Array.isArray(e.detail.contentArray)) {
       renderPagination(e.detail.slideIndex, e.detail.contentArray);
       console.log(e.detail.contentArray[e.detail.slideIndex].content);
       const contentArray = e.detail.contentArray;
-      const targetTitle = "Menús de la herramienta";
+      const targetTitle = 'Menús de la herramienta';
       const currentSlide = CourseNav.getCurrentSlide();
       // Filtrar todos los slides del mismo módulo
-      const targetIndex = contentArray.findIndex((slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle);
+      const targetIndex = contentArray.findIndex(
-      const btn = document.getElementById("coursenav-other-btn");
+        (slide) => slide.title === targetTitle && slide.moduleTitle === currentSlide.moduleTitle
+      );
+      const btn = document.getElementById('coursenav-other-btn');
       if (!btn) return;
       if (targetIndex !== -1) {
-        btn.classList.remove("disabled");
+        btn.classList.remove('disabled');
       } else {
-        btn.classList.add("disabled");
+        btn.classList.add('disabled');
       }
     }
 
-    const titleSlide = document.getElementById("coursenav-course-title");
+    const titleSlide = document.getElementById('coursenav-course-title');
     if (titleSlide) {
       const slide = e.detail.contentArray[e.detail.slideIndex];
-      const moduleTitle = slide.moduleTitle ? slide.moduleTitle + " | " : "";
+      const moduleTitle = slide.moduleTitle ? slide.moduleTitle + ' | ' : '';
-      const title = slide.title || "Sin título";
+      const title = slide.title || 'Sin título';
       titleSlide.textContent = moduleTitle + title;
     }
 
-    const stepper = document.getElementById("stepper");
+    const stepper = document.getElementById('stepper');
-    const movil = document.getElementById("step-movil");
+    const movil = document.getElementById('step-movil');
     const progreso = CourseNav.getProgressPercent(true);
     renderStepper(stepper, progreso, movil);
   });
@@ -341,25 +361,25 @@ document.addEventListener("DOMContentLoaded", () => {
    * @event slideCompleted
    * @property {Object} detail - Detalles del evento.
    */
-  document.body.addEventListener("slideCompleted", (e) => {
+  document.body.addEventListener('slideCompleted', (e) => {
-    console.log("Slide completado:", e.detail);
+    console.log('Slide completado:', e.detail);
-    const stepper = document.getElementById("stepper");
+    const stepper = document.getElementById('stepper');
-    const movil = document.getElementById("step-movil");
+    const movil = document.getElementById('step-movil');
     const progreso = CourseNav.getProgressPercent(true);
     renderStepper(stepper, progreso, movil);
     renderPagination(e.detail.slideIndex, CourseNav.getCourseContentArray());
   });
 
   // Event listener para botón personalizado
-  const customButtonEvent = document.getElementById("coursenav-other-btn");
+  const customButtonEvent = document.getElementById('coursenav-other-btn');
   if (customButtonEvent) {
-    customButtonEvent.addEventListener("click", () => {
+    customButtonEvent.addEventListener('click', () => {
-      console.log("Botón personalizado clickeado");
+      console.log('Botón personalizado clickeado');
       gotoFirstMenuToolSlide();
     });
   }
 });
 
 // Escalar contenido al cargar y redimensionar
-window.addEventListener("DOMContentLoaded", () => scaleWrapCourseContent());
+window.addEventListener('DOMContentLoaded', () => scaleWrapCourseContent());
-window.addEventListener("resize", () => scaleWrapCourseContent());
+window.addEventListener('resize', () => scaleWrapCourseContent());