update

Reviewed-on: #3

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 300,
+  "tabWidth": 2,
+  "singleQuote": true
+}

.vscode/course-nav-snippets.code-snippets

@@ -0,0 +1,198 @@
+{
+  "useCourseNav.getStudentName": {
+    "prefix": "cn.getStudentName",
+    "body": [
+      "CourseNav.getStudentName(${1})"
+    ],
+    "description": "CourseNav: getStudentName"
+  },
+  "useCourseNav.getLessonLocation": {
+    "prefix": "cn.getLessonLocation",
+    "body": [
+      "CourseNav.getLessonLocation(${1})"
+    ],
+    "description": "CourseNav: getLessonLocation"
+  },
+  "useCourseNav.setLessonLocation": {
+    "prefix": "cn.setLessonLocation",
+    "body": [
+      "CourseNav.setLessonLocation(${1})"
+    ],
+    "description": "CourseNav: setLessonLocation"
+  },
+  "useCourseNav.getLessonStatus": {
+    "prefix": "cn.getLessonStatus",
+    "body": [
+      "CourseNav.getLessonStatus(${1})"
+    ],
+    "description": "CourseNav: getLessonStatus"
+  },
+  "useCourseNav.setLessonStatus": {
+    "prefix": "cn.setLessonStatus",
+    "body": [
+      "CourseNav.setLessonStatus(${1})"
+    ],
+    "description": "CourseNav: setLessonStatus"
+  },
+  "useCourseNav.getScore": {
+    "prefix": "cn.getScore",
+    "body": [
+      "CourseNav.getScore(${1})"
+    ],
+    "description": "CourseNav: getScore"
+  },
+  "useCourseNav.setScore": {
+    "prefix": "cn.setScore",
+    "body": [
+      "CourseNav.setScore(${1})"
+    ],
+    "description": "CourseNav: setScore"
+  },
+  "useCourseNav.getSuspendData": {
+    "prefix": "cn.getSuspendData",
+    "body": [
+      "CourseNav.getSuspendData(${1})"
+    ],
+    "description": "CourseNav: getSuspendData"
+  },
+  "useCourseNav.setSuspendData": {
+    "prefix": "cn.setSuspendData",
+    "body": [
+      "CourseNav.setSuspendData(${1})"
+    ],
+    "description": "CourseNav: setSuspendData"
+  },
+  "useCourseNav.createSound": {
+    "prefix": "cn.createSound",
+    "body": [
+      "CourseNav.createSound(${1})"
+    ],
+    "description": "CourseNav: createSound"
+  },
+  "useCourseNav.setSlideVisited": {
+    "prefix": "cn.setSlideVisited",
+    "body": [
+      "CourseNav.setSlideVisited(${1})"
+    ],
+    "description": "CourseNav: setSlideVisited"
+  },
+  "useCourseNav.soundClick": {
+    "prefix": "cn.soundClick",
+    "body": [
+      "CourseNav.soundClick(${1})"
+    ],
+    "description": "CourseNav: soundClick"
+  },
+  "useCourseNav.isVisited": {
+    "prefix": "cn.isVisited",
+    "body": [
+      "CourseNav.isVisited(${1})"
+    ],
+    "description": "CourseNav: isVisited"
+  },
+  "useCourseNav.nextSlide": {
+    "prefix": "cn.nextSlide",
+    "body": [
+      "CourseNav.nextSlide(${1})"
+    ],
+    "description": "CourseNav: nextSlide"
+  },
+  "useCourseNav.save": {
+    "prefix": "cn.save",
+    "body": [
+      "CourseNav.save(${1})"
+    ],
+    "description": "CourseNav: save"
+  },
+  "useCourseNav.reload": {
+    "prefix": "cn.reload",
+    "body": [
+      "CourseNav.reload(${1})"
+    ],
+    "description": "CourseNav: reload"
+  },
+  "useCourseNav.gotoSlide": {
+    "prefix": "cn.gotoSlide",
+    "body": [
+      "CourseNav.gotoSlide(${1})"
+    ],
+    "description": "CourseNav: gotoSlide"
+  },
+  "useCourseNav.isCompletedSlideIndex": {
+    "prefix": "cn.isCompletedSlideIndex",
+    "body": [
+      "CourseNav.isCompletedSlideIndex(${1})"
+    ],
+    "description": "CourseNav: isCompletedSlideIndex"
+  },
+  "useCourseNav.getCurrentSlide": {
+    "prefix": "cn.getCurrentSlide",
+    "body": [
+      "CourseNav.getCurrentSlide(${1})"
+    ],
+    "description": "CourseNav: getCurrentSlide"
+  },
+  "useCourseNav.prevSlide": {
+    "prefix": "cn.prevSlide",
+    "body": [
+      "CourseNav.prevSlide(${1})"
+    ],
+    "description": "CourseNav: prevSlide"
+  },
+  "useCourseNav.resetCourse": {
+    "prefix": "cn.resetCourse",
+    "body": [
+      "CourseNav.resetCourse(${1})"
+    ],
+    "description": "CourseNav: resetCourse"
+  },
+  "useCourseNav.adjustMainContentHeight": {
+    "prefix": "cn.adjustMainContentHeight",
+    "body": [
+      "CourseNav.adjustMainContentHeight(${1})"
+    ],
+    "description": "CourseNav: adjustMainContentHeight"
+  },
+  "useCourseNav.markSlidesAsVisited": {
+    "prefix": "cn.markSlidesAsVisited",
+    "body": [
+      "CourseNav.markSlidesAsVisited(${1})"
+    ],
+    "description": "CourseNav: markSlidesAsVisited"
+  },
+  "useCourseNav.updateProgressBar": {
+    "prefix": "cn.updateProgressBar",
+    "body": [
+      "CourseNav.updateProgressBar(${1})"
+    ],
+    "description": "CourseNav: updateProgressBar"
+  },
+  "useCourseNav.completarLeccion": {
+    "prefix": "cn.completarLeccion",
+    "body": [
+      "CourseNav.completarLeccion(${1})"
+    ],
+    "description": "CourseNav: completarLeccion"
+  },
+  "useCourseNav.audioController": {
+    "prefix": "cn.audio",
+    "body": [
+      "CourseNav.audioController"
+    ],
+    "description": "CourseNav: controlador de audio"
+  },
+   "useCourseNav.getScormData": {
+    "prefix": "cn.getScormData",
+    "body": [
+      "CourseNav.getScormData('${1:key}')"
+    ],
+    "description": "CourseNav: Obtiene valor de SCORM/sessionStorage"
+  },
+  "useCourseNav.setScormData": {
+    "prefix": "cn.setScormData",
+    "body": [
+      "CourseNav.setScormData('${1:key}', ${2:value})"
+    ],
+    "description": "CourseNav: Guarda valor en SCORM/sessionStorage"
+  }
+}

.vscode/howler-utils.code-snippets

@@ -0,0 +1,61 @@
+{
+  "🎵 Reproducir sonido con createSound": {
+    "prefix": "howl-play",
+    "body": [
+      "const sonido = createSound('audio/$1.mp3');",
+      "stopAllSoundsAndPlay(sonido);"
+    ],
+    "description": "Crea y reproduce un sonido con utilidades Howler"
+  },
+
+  "🔇 Silenciar todos los sonidos": {
+    "prefix": "howl-mute-on",
+    "body": [
+      "setGlobalMute(true);"
+    ],
+    "description": "Silencia todos los sonidos con Howler"
+  },
+
+  "🔊 Activar todos los sonidos": {
+    "prefix": "howl-mute-off",
+    "body": [
+      "setGlobalMute(false);"
+    ],
+    "description": "Activa todos los sonidos con Howler"
+  },
+
+  "🔁 Detener todos los sonidos": {
+    "prefix": "howl-stop",
+    "body": [
+      "stopAllSounds();"
+    ],
+    "description": "Detiene todos los sonidos activos"
+  },
+
+  "🎚️ Ajustar volumen global": {
+    "prefix": "howl-volume",
+    "body": [
+      "setGlobalVolume($1); // valor entre 0.0 y 1.0"
+    ],
+    "description": "Controlar volumen global con Howler"
+  },
+
+  "🕵️ Verificar si un sonido está reproduciéndose": {
+    "prefix": "howl-is-playing",
+    "body": [
+      "if (isPlaying(sonido)) {",
+      "  console.log('Está reproduciendo');",
+      "} else {",
+      "  console.log('No está sonando');",
+      "}"
+    ],
+    "description": "Verifica si un sonido está activo"
+  },
+   "🎵 crear sonido con createSound": {
+    "prefix": "newsound",
+    "body": [
+      "createSound('audio/$1.mp3');",
+    ],
+    "description": "Crea un sonido con utilidades Howler"
+  },
+}

.vscode/html.code-snippets

@@ -0,0 +1,111 @@
+{
+	// Place your curso workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"Nuevo sco": {
+		"scope": "html",
+		"prefix": "sco",
+		"body": [
+			"<style></style>",
+			"<section class='page-sco py-md-4 py-2'></section>",
+			"<script>",
+			"  $(function () {",
+			"    'use strict';",
+			"  });",
+			"</script>",
+		],
+		"description": "sco"
+	},
+	"Mitad bs5": {
+		"scope": "html",
+		"prefix": "md",
+		"body": [
+			"<div class=\"container-xxl\">",
+			"  <div class=\"row justify-content-center\">",
+			"    <div class=\"col-12 col-md-6\"></div>",
+			"    <div class=\"col-12 col-md-6\"></div>",
+			"  </div>",
+			"</div>"
+		],
+		"description": "mitad"
+	},
+	"Mitad cols": {
+		"scope": "html",
+		"prefix": "mcol",
+		"body": [
+			
+			"  <div class=\"row justify-content-center\">",
+			"    <div class=\"col-12 col-md-6\"></div>",
+			"    <div class=\"col-12 col-md-6\"></div>",
+			"  </div>"
+		],
+		"description": "mitad"
+	},
+	 "bs5 sm (min-width: 576px)": {
+    "prefix": "bs5mq-sm",
+    "body": [
+      "@media (min-width: 576px) {",
+      "  $0",
+      "}"
+    ],
+    "description": "Bootstrap 5 media query sm (≥576px)"
+  },
+  "bs5 md (min-width: 768px)": {
+    "prefix": "bs5mq-md",
+    "body": [
+      "@media (min-width: 768px) {",
+      "  $0",
+      "}"
+    ],
+    "description": "Bootstrap 5 media query md (≥768px)"
+  },
+  "bs5 lg (min-width: 992px)": {
+    "prefix": "bs5mq-lg",
+    "body": [
+      "@media (min-width: 992px) {",
+      "  $0",
+      "}"
+    ],
+    "description": "Bootstrap 5 media query lg (≥992px)"
+  },
+  "bs5 xl (min-width: 1200px)": {
+    "prefix": "bs5mq-xl",
+    "body": [
+      "@media (min-width: 1200px) {",
+      "  $0",
+      "}"
+    ],
+    "description": "Bootstrap 5 media query xl (≥1200px)"
+  },
+  "bs5 xxl (min-width: 1400px)": {
+    "prefix": "bs5mq-xxl",
+    "body": [
+      "@media (min-width: 1400px) {",
+      "  $0",
+      "}"
+    ],
+    "description": "Bootstrap 5 media query xxl (≥1400px)"
+  },
+  "bs5 card simple":{
+	"prefix": "bs5card",
+	"body": [
+	"<div class=\"card custom-card\">",
+    "    <div class=\"card-body\"></div>",
+    "</div>",
+	],
+	"description": "Card simple"
+  }
+}

config.json

@@ -1,16 +1,92 @@
 {
-  "title": "Nombre del curso",
+  "title": "Vantive",
   "modules": [
     {
-      "title": "Introducción",
+      "title": "Contenido",
       "topics": [
         {
           "title": "Portada",
           "content": "contenido/01.html"
         },
         {
-          "title": "Navegación",
+          "title": "¿Qué son los riñones?",
           "content": "contenido/02.html"
+        },
+        {
+          "title": "¿Cuál es el tratamiento?",
+          "content": "contenido/03.html"
+        },
+        {
+          "title": "Tipos de diálisis",
+          "content": "contenido/04.html"
+        },
+        {
+          "title": "¿Cómo funciona la diálisis peritoneal? - Glucosa",
+          "content": "contenido/05.html"
+        },
+        {
+          "title": "¿Cómo funciona la diálisis peritoneal?",
+          "content": "contenido/06.html"
+        },
+        {
+          "title": "Tipos de diálisis peritoneal",
+          "content": "contenido/07.html"
+        },
+        {
+          "title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Continua Ambulatoria (DPCA)?",
+          "content": "contenido/08.html"
+        },
+        {
+          "title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?",
+          "content": "contenido/09.html"
+        },
+        {
+          "title": "¿Qué es un catéter?",
+          "content": "contenido/10.html"
+        },
+        {
+          "title": "¿Qué es un catéter?",
+          "content": "contenido/11.html"
+        },
+        {
+          "title": "Cuidados del sitio de salida y complicaciones",
+          "content": "contenido/12.html"
+        },
+        {
+          "title": "Lavado de manos y uso correcto de cubrebocas",
+          "content": "contenido/13.html"
+        },
+        {
+          "title": "Lavado de manos y uso correcto de cubrebocas",
+          "content": "contenido/14.html"
+        },
+        {
+          "title": "Técnica Aséptica",
+          "content": "contenido/15.html"
+        },
+        {
+          "title": "Control de líquidos",
+          "content": "contenido/16.html"
+        },
+        {
+          "title": "Alimentación y medicación",
+          "content": "contenido/17.html"
+        },
+        {
+          "title": "Registros",
+          "content": "contenido/ruleta.html"
+        },
+        {
+          "title": "Consejos útiles",
+          "content": "contenido/18.html"
+        },
+        {
+          "title": "Despedida",
+          "content": "contenido/19.html"
+        },
+        {
+          "title": "Referencias",
+          "content": "contenido/20.html"
         }
       ]
     }

contenido/01.html

@@ -6,83 +6,52 @@
     background-size: cover;
   }
 
-  .drop-card {
-    border: 3px dashed var(--bs-primary);
-    width: 200px;
-    height: 40px;
+  .w-container {
+    background-image: url(img/w-xx1.png);
+    background-repeat: no-repeat;
+    background-position: left;
+    background-size: 100% auto;
   }
 
-  .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%;
+  .btn-comenzar {
+    border-radius: 20px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 0;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   }
 </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-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="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-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 class="col-11">
+            <div class="row justify-content-center align-items-center">
+              <div class="col-8">
+                <h1 class="text-white fw-bold animate__animated animate__lightSpeedInLeft">
+                  INDUCCIÓN AL PROGRAMA DE
+                  <br />
+                  DIÁLISIS PERITONEAL
+                  <span class="fw-bold text-verde-ceniza">>>></span>
+                </h1>
+                <p class="text-white animate__animated animate__lightSpeedInLeft">Extender vidas <span class="text-verde-ceniza">>>></span> Expandir posibilidades</p>
+                <div class="w-100 position-relative mt-3 animate__animated animate__zoomIn">
+                  <button class="btn bg-white text-verde-oscuro btn-comenzar animate__animated animate__pulse animate__infinite">
+                    <h4 class="my-0 fw-bold">Comenzar</h4>
+                  </button>
                 </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 class="col-4">
+                <img src="img/0.1.png" class="img-fluid" alt="" />
               </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 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>
     </div>
@@ -90,172 +59,13 @@
 </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" 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();
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
     CourseNav.setSlideVisited();
-          /* setTimeout(() => {
-            Swal.close();
-            CourseNav.nextSlide();
-          }, 100); */
-        },
-      });
-    }
 
-    readExcelFile(urlExcelFile, function (data) {
-      const hojaDatos = data["DragAndDrop"];
-      questions = procesarPreguntas(hojaDatos);
-      CreateDragAndDrop();
-      initializeDragAndDrop();
+    $('.btn-comenzar').on('click', function () {
+      CourseNav.nextSlide();
+      $(this).removeClass('animate__animated animate__pulse animate__infinite');
     });
   });
 </script>

contenido/02.html

@@ -1,9 +1,357 @@
-<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>
+<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;
+    }
+
+    .perso {
+      top: 111px;
+      left: 70px;
+    }
+</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="position-absolute perso">
+                      <img src="img/2.2.png" alt="Riñones" class="img-fluid">
+                    </div>
+                    <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-9 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"></div>
+                            <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">
+                                        <video id="customVideo" class="w-100 h-100" preload="metadata"
+                                            poster="img/poster.png" playsinline>
+                                            <source src="video/Rotafolio_Vantive_Completo.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>
 <script>
     $(function () {
         'use strict';
+        $('.wrap-course-content').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;
+            CourseNav.setSlideVisited();
+        });
+
+        // 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();
+                }
+            }
+        });
+    })();
 </script>

contenido/03.html

@@ -0,0 +1,300 @@
+<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: rgba(214, 227, 218, 0.8);
+  }
+
+  .bg-custom-transparent {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .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 id="drag-drop-activity" 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">¿Cuál es el tratamiento<sup class="fw-bold">1,4</sup>?</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 bg-custom border-0 my-2 rounded-0 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 con la terapia a la que corresponden.</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">
+            <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-none 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-none 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-none 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';
+    $('.wrap-course-content').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: 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',
+        },
+        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>

contenido/04.html

@@ -0,0 +1,358 @@
+<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(242, 232, 222, 0.76);
+    background: linear-gradient(to bottom, rgba(242, 232, 222, 0.6) 0%, rgba(240, 244, 242, 0.9) 100%);
+  }
+
+  /* .bg-custom-transparent img {
+    height: 230px;
+  } */
+
+  .drop-card {
+    border: none;
+    width: 100%;
+    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%;
+  }
+
+  .content-enfermedad {
+    width: 24%;
+  }
+
+  /*
+  .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 id="drag-drop-activity" 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">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 y arrástralos hacia el lugar que les corresponda en las imágenes.</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">
+            <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">
+                      <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 w-100"></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 w-100"></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 w-100"></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 w-100"></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';
+    $('.wrap-course-content').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: String(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}"><p class="mb-0">${option.text}</p></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: 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',
+        },
+        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>

contenido/05.html

@@ -0,0 +1,290 @@
+<style>
+  .fake {
+    background-image: url(img/bg05.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 50%;
+  }
+
+  .drop-card {
+    border: 3px dashed var(--bs-primary);
+    width: 80px;
+    height: 80px;
+  }
+
+  /* .content-enfermedad {
+    width: 25%;
+  } */
+
+  .content-enfermedad img {
+    height: 240px;
+  }
+
+  .card-drag {
+    cursor: grab;
+    width: 75px;
+    height: 75px;
+  }
+
+  .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%;
+  }
+</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="col-11">
+            <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">
+            <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 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 mb-3">
+            <div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
+          </div>
+          <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 my-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 my-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 my-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 my-2">
+                    <img src="img/5.4a.png" class="img-fluid" />
+                  </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';
+    $('.wrap-course-content').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,
+        cursor: 'grabbing',
+        start: function (event, ui) {
+          $(this).css('z-index', 1000);
+          ui.position.left = 0;
+          ui.position.top = 0;
+        },
+        drag: function (event, ui) {
+          var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
+          var changeLeft = ui.position.left - ui.originalPosition.left;
+          var newLeft = ui.originalPosition.left + changeLeft / scale;
+          var changeTop = ui.position.top - ui.originalPosition.top;
+          var newTop = ui.originalPosition.top + changeTop / scale;
+          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: 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',
+        },
+        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>

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,216 @@
+<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?<sup class="fw-bold">1,2,4,6</sup></h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+          <div class="col-9 mb-2">
+            <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> Arrastra los pasos del recambio para colocarlos en el orden correcto.</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">
+            <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';
+    $('.wrap-course-content').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;
+    }
+
+    // const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
+
+    // Crear y mezclar las tarjetas
+    function createShuffledCards() {
+      const cards = [1, 2, 3];
+      let shuffledCards;
+      do {
+        shuffledCards = shuffleArray(cards);
+      } while (shuffledCards[0] === 1 && shuffledCards[1] === 2 && shuffledCards[2] === 3);
+      const container = $('#sortable-cards');
+
+      // Limpiar contenedor
+      container.empty();
+
+      // Crear tarjetas mezcladas
+      shuffledCards.forEach((number, index) => {
+        const cardHtml = `
+                        <div class="card border-0 card-sort bg-transparent text-white fw-bold text-center shadow-none"
+                             data-order="${number}"
+                             style="cursor:grab;">
+
+                          <div class="card-body bg-verde-claro px-0 py-0">
+                            <img src="img/5.${number}b.png" class="img-fluid">
+                            </div>
+                        </div>
+                    `;
+        container.append(cardHtml);
+      });
+
+      // Actualizar números después de crear las tarjetas
+      // updateCardNumbers();
+    }
+
+    // Actualizar números mostrados según posición actual
+    // function updateCardNumbers() {
+    //   $('#sortable-cards .card-sort').each(function (index) {
+    //     $(this).find('.nums img').attr('src', imgNums[index]);
+    //   });
+    // }
+
+    // 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).find('.card-body').removeClass('bg-verde-claro').addClass('bg-verde-pasto');
+          $(this).addClass('locked').css('cursor', 'default');
+        } else {
+          $(this).find('.card-body').removeClass('bg-verde-pasto').addClass('bg-verde-claro');
+          $(this).removeClass('locked').css('cursor', 'grab');
+          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 },
+      cancel: '.locked',
+      update: function (event, ui) {
+        // updateCardNumbers();
+        if (checkOrder()) {
+          $('#sortable-cards').sortable('disable');
+          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',
+            },
+            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) {
+        if (ui.item.hasClass('locked')) {
+          return false;
+        }
+        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>

contenido/07.html

@@ -0,0 +1,396 @@
+<style>
+  .fake {
+    background-image: url(img/bg04.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 40%;
+  }
+
+  .bg-custom {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .btn-answer {
+    background-color: #808080;
+    border-radius: 20px;
+    cursor: pointer;
+  }
+
+  .btn-answer:hover {
+    background-color: #925c8d;
+  }
+
+  .btn-answer.selected {
+    background-color: #925c8d;
+  }
+
+  .completed {
+    filter: grayscale(1);
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+
+  .object-btn {
+    cursor: pointer;
+  }
+
+  .content-medidor {
+    background-color: #fff;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
+    border-radius: 40px;
+  }
+
+  .termometro {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: auto;
+    gap: 0;
+    background: #e7e7e7;
+    background: linear-gradient(to left, #e7e7e7 0%, #c3c3c3 100%);
+    border-radius: 40px;
+  }
+
+  .med_style {
+    border-radius: 0;
+    border: 1px solid #000;
+    border-right: 3px solid #c3c3c3;
+    width: 80px;
+    height: 30px;
+  }
+
+  .med_style:nth-child(6) {
+    border-top-right-radius: 40px;
+    border-bottom-right-radius: 40px;
+    border-left: 0;
+    border-right: 1px solid #000;
+    background: #76c300;
+    background: linear-gradient(to top, #76c300 0%, #386100 100%);
+  }
+
+  .med_style:first-child {
+    border-top-left-radius: 40px;
+    border-bottom-left-radius: 40px;
+    background: #df0000;
+    background: linear-gradient(to top, #df0000 0%, #4f0700 100%);
+  }
+
+  .med_style:nth-child(2),
+  .med_style:nth-child(3),
+  .med_style:nth-child(4),
+  .med_style:nth-child(5) {
+    border-left: 0;
+  }
+
+  .med_style:nth-child(3) {
+    background: #ffce00;
+    background: linear-gradient(to top, #ffce00 0%, #fe6a00 100%);
+  }
+
+  .med_style:nth-child(2) {
+    background: #ff8400;
+    background: linear-gradient(to top, #ff8400 0%, #c93000 100%);
+  }
+
+  .med_style:nth-child(4) {
+    background: #a4f800;
+    background: linear-gradient(to top, #a4f800 0%, #ffe600 100%);
+  }
+
+  .med_style:nth-child(5) {
+    background: #aaff00;
+    background: linear-gradient(to top, #aaff00 0%, #4e8600 100%);
+  }
+
+  .indicador-med {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    border-radius: 100%;
+    bottom: -60px;
+    left: 10px;
+    transition: left 0.5s ease;
+  }
+</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 peritoneal</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+          <div class="col-12 px-0 mb-3">
+            <div class="card bg-white border-0 my-2 rounded-0 bg-custom 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> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas.
+                  <!-- para llenar el medidor de salud del paciente. -->
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="actividad-objects" class="col-12">
+            <div class="row justify-content-center align-items-center">
+              <div class="col-12 text-center mb-5">
+                <div class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
+                  <img src="img/07.7.png" class="img-fluid" />
+                  <div class="termometro p-1">
+                    <div id="#med0" class="med_style"></div>
+                    <div id="#med1" class="med_style"></div>
+                    <div id="#med2" class="med_style"></div>
+                    <div id="#med3" class="med_style"></div>
+                    <div id="#med4" class="med_style"></div>
+                    <div id="#med5" class="med_style"></div>
+                    <div id="indicador" class="indicador-med d-flex flex-row justify-content-center align-items-center">
+                      <img src="img/07.5.png" class="img-fluid" />
+                    </div>
+                  </div>
+                  <img src="img/07.6.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="col-12">
+                <div class="d-flex flex-row justify-content-center align-items-center gap-3">
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
+                    <img src="img/07.4.png" class="img-fluid" />
+                  </div>
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
+                    <img src="img/07.3.png" class="img-fluid" />
+                  </div>
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
+                    <img src="img/07.2.png" class="img-fluid" />
+                  </div>
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
+                    <img src="img/07.1.png" class="img-fluid" style="max-width: 223px" />
+                  </div>
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
+                    <img src="img/07.0.png" class="img-fluid" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="d-none">
+  <div id="pops-questions">
+    <div class="container-fluid">
+      <div class="row justify-content-center align-items-center">
+        <div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
+        <div class="col-12 mb-3">
+          <div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
+        </div>
+        <div class="col-12 text-center">
+          <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <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';
+    $('.wrap-course-content').addClass('fake');
+
+    let questions;
+    let currentQuestionIndex = 0;
+    let currentQuestion;
+    let correctQuestions = 0;
+    let currentObjectBtn;
+    let isCorrectAnswer = false;
+    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
+
+    const urlExcelFile = 'Actividades_Rotafolio_Vantive.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: String(fila[key]).trim(),
+              correct: key === 'opcion_c',
+            });
+          }
+        });
+        return {
+          pregunta: String(fila.pregunta).trim(),
+          opciones: opciones,
+          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
+          retroalimentacion_incorrecta: fila.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;
+    }
+
+    // Cargar preguntas al inicio
+    readExcelFile(urlExcelFile, function (data) {
+      const hojaDatos = data['Diapositiva 7'];
+      questions = procesarPreguntas(hojaDatos);
+    });
+
+    $('.object-btn').click(function (e) {
+      e.preventDefault();
+      if ($(this).hasClass('disabled')) return;
+      CourseNav.soundClick();
+      currentObjectBtn = $(this);
+      if (questions && questions.length > 0) {
+        showRandomQuestion();
+      }
+    });
+
+    function showRandomQuestion() {
+      // Seleccionar pregunta en orden secuencial
+      currentQuestion = questions[currentQuestionIndex];
+      currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
+
+      const html = $('#pops-questions').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',
+        },
+        confirmButtonText: 'Cerrar',
+        showConfirmButton: false,
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        focusConfirm: false,
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '45em',
+        didOpen: () => {
+          displayQuestion();
+        },
+        didClose: () => {
+          CourseNav.audioController.stopAudio();
+          if (currentObjectBtn) {
+            currentObjectBtn.addClass('completed disabled');
+            checkAllCompleted();
+          }
+        },
+      });
+    }
+
+    function displayQuestion() {
+      const contentSwal = $(Swal.getHtmlContainer());
+      const txtPregunta = contentSwal.find('#txt-question');
+      const txtAnswers = contentSwal.find('#txt-answers');
+
+      txtPregunta.html(currentQuestion.pregunta);
+
+      // Aleatorizar respuestas
+      const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
+
+      let answersHtml = '';
+      shuffledOpciones.forEach((opcion, index) => {
+        answersHtml += `<div class="btn-answer text-white p-2 px-3" data-correct="${opcion.correct}">${opcion.text}</div>`;
+      });
+
+      txtAnswers.html(answersHtml);
+
+      // Event listener para respuestas
+      contentSwal.find('.btn-answer').click(function () {
+        isCorrectAnswer = $(this).data('correct');
+        $(this).addClass('selected');
+        if (isCorrectAnswer) {
+          good.play();
+          correctQuestions++;
+          moveIndicator();
+          Swal.close();
+        } else {
+          bad.play();
+        }
+      });
+    }
+
+    function moveIndicator() {
+      const positions = ['left: 90px', 'left: 170px', 'left: 250px', 'left: 330px', 'left: 410px'];
+      if (correctQuestions <= 5) {
+        $('#indicador').attr('style', positions[correctQuestions - 1]);
+      }
+    }
+
+    function checkAllCompleted() {
+      const totalButtons = $('.object-btn').length;
+      const completedButtons = $('.object-btn.completed').length;
+
+      if (totalButtons === completedButtons) {
+        setTimeout(() => {
+          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',
+            },
+            confirmButtonText: 'Cerrar',
+            showConfirmButton: true,
+            allowOutsideClick: false,
+            allowEscapeKey: false,
+            backdrop: 'rgba(65, 60, 60, .95)',
+            width: '35em',
+            didClose: () => {
+              CourseNav.setSlideVisited();
+            },
+          });
+        }, 250);
+      }
+    }
+  });
+</script>

contenido/08.html

@@ -0,0 +1,318 @@
+<style>
+  .fake {
+    background-image: url(img/bg04.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 85%;
+  }
+
+  .custom-grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: auto;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    max-width: 1280px; /* Esto limita el ancho total */
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .card-container {
+    width: 100%;
+    aspect-ratio: 1;
+    cursor: pointer;
+  }
+
+  .card-container.disabled {
+    filter: grayscale(1);
+    pointer-events: none;
+  }
+
+</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">¿Qué necesito para poder realizar la Diálisis Peritoneal Continua Ambulatoria (DPCA)?</h2>
+            <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">
+                <p class="mb-0"><strong>Instrucciones:</strong> Da clic en las tarjetas para encontrar los pares y descubrir los elementos necesarios para llevar a cabo la DPCA.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 text-center mb-2">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
+          <div class="col-12">
+            <di class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
+              <div class="row-questions custom-grid" id="row-questions">
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.1.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.2.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.3.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.4.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.5.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.6.png" class="img-fluid">
+                  </div>
+                </div>
+              </div>
+              <div class="row-answer custom-grid" id="row-answer">
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.1c.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.2c.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.3c.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.4c.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.5c.png" class="img-fluid">
+                  </div>
+                </div>
+                <div class="card-container">
+                  <div class="front">
+                    <img src="img/08.front.png" class="img-fluid">
+                  </div>
+                  <div class="back">
+                    <img src="img/08.6c.png" class="img-fluid">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="d-none">
+  <div id="retro-pop">
+    <div class="container-fluid">
+      <div class=" w-100 text-center">
+        <img src="img/08.7.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">¡Recuerda!</h3>
+        </div>
+        <div class="col-12 text-center">
+          <p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia<sup class="fw-bold">2,7,8</sup>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('.wrap-course-content').addClass('fake');
+    const flip_sound = CourseNav.createSound('audio/flip.mp3');
+    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+
+    // Función para asignar pares a cada tarjeta
+    function assignPairs(fatherId) {
+      const optionsContainer = document.getElementById(fatherId);
+      const optionsArray = Array.from(optionsContainer.children);
+      optionsArray.forEach((option, index) => {
+        option.setAttribute('data-par', index);
+      });
+    }
+
+    // Función para mezclar las tarjetas dentro del contenedor especificado
+    function randomizeOptions(fatherId) {
+      const optionsContainer = document.getElementById(fatherId);
+      const optionsArray = Array.from(optionsContainer.children);
+      const shuffledOptions = optionsArray.sort(() => Math.random() - 0.5);
+      shuffledOptions.forEach(option => optionsContainer.appendChild(option));
+    }
+
+    // Inicializar el plugin flip y configurar la lógica del memorama con la restricción de fila
+    function initializeFlip() {
+      let flippedCards = [];
+      let lastFlippedRow = ""; // Para rastrear la última fila girada
+
+      $(".card-container").flip({
+        trigger: 'manual' // Control manual del volteo
+      });
+
+      $(".card-container").on("click", function () {
+        const $card = $(this);
+        const currentRow = $card.closest(".row-answer").length > 0 ? "row-answer" : "row-questions";
+
+        // Limitar el giro a una carta por fila y evitar tres giros
+        if (flippedCards.length < 2 && (flippedCards.length === 0 || currentRow !== lastFlippedRow)) {
+          $card.flip(true);
+          flippedCards.push($card);
+          lastFlippedRow = currentRow;
+          flip_sound.play();
+          // Si hay dos cartas volteadas, verificar coincidencia
+          if (flippedCards.length === 2) {
+            const [firstCard, secondCard] = flippedCards;
+
+            if (firstCard.data("par") === secondCard.data("par")) {
+              // Las tarjetas coinciden, dejarlas volteadas y marcar como emparejadas
+              firstCard.addClass("disabled");
+              secondCard.addClass("disabled");
+              // Agregar el efecto de resplandor
+              gsap.to(firstCard, {
+                duration: 1,
+                boxShadow: "0px 0px 20px 10px #fff",
+                onComplete: function () {
+                  // Quitar el efecto de resplandor después de 2 segundos
+                  gsap.to(firstCard, {
+                    duration: 1,
+                    delay: 1,
+                    boxShadow: "0px 0px 0px 0px #fff"
+                  });
+                }
+              });
+              // Agregar el efecto de resplandor
+              gsap.to(secondCard, {
+                duration: 1,
+                boxShadow: "0px 0px 20px 10px #fff",
+                onComplete: function () {
+                  // Quitar el efecto de resplandor después de 2 segundos
+                  gsap.to(secondCard, {
+                    duration: 1,
+                    delay: 1,
+                    boxShadow: "0px 0px 0px 0px #fff"
+                  });
+                }
+              });
+              CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
+              flippedCards = [];
+              checkGameCompletion();
+            } else {
+              CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
+              // Las tarjetas no coinciden, voltearlas de nuevo después de un breve retraso
+              setTimeout(() => {
+                firstCard.flip(false);
+                secondCard.flip(false);
+                flippedCards = [];
+                lastFlippedRow = ""; // Reiniciar el rastreo de fila
+              }, 850);
+            }
+          }
+        }
+      });
+    }
+
+    // Verificar si todas las tarjetas han sido emparejadas
+    function checkGameCompletion() {
+      const totalPairs = $(".card-container").length / 2;
+      const matchedPairs = $(".card-container.disabled").length / 2;
+
+      if (matchedPairs === totalPairs) {
+        setTimeout(showFeedbackPopup, 250);
+      }
+    }
+
+    function showFeedbackPopup() {
+      const html = $("#retro-pop").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'
+        },
+        confirmButtonText: "Cerrar",
+        showConfirmButton: true,
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        backdrop: "rgba(65, 60, 60, .95)",
+        width: "35em",
+        didClose: () => {
+          CourseNav.setSlideVisited();
+        }
+      });
+    }
+
+    assignPairs('row-answer');
+    assignPairs('row-questions');
+    randomizeOptions('row-answer');
+    randomizeOptions('row-questions');
+    initializeFlip();
+  });
+</script>

contenido/09.html

@@ -0,0 +1,253 @@
+<style>
+  .fake {
+    background-image: url(img/bg06.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 80%;
+  }
+
+  .bg-custom {
+    background: #f0f4f2;
+  }
+
+  .tablero {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    max-width: 1280px; /* Esto limita el ancho total */
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .card-container2 {
+    width: 100%;
+    aspect-ratio: 1;
+    cursor: pointer;
+  }
+</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">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-10 mb-2">
+            <h2 class="text-center fw-bold text-primary">¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+          <div class="col-9 mb-1">
+            <div class="card border-0 my-2 rounded-15 bg-custom shadow p-3 py-2 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> Da clic en los elementos para descubrir cuáles son necesarios para realizar la DPA.</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">
+            <div class="tablero">
+              <div class="card-container2" data-correct="0">
+                <div class="front">
+                  <img src="img/09.0.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.12.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="1">
+                <div class="front">
+                  <img src="img/09.1.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.13.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="0">
+                <div class="front">
+                  <img src="img/09.2.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.12.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="0">
+                <div class="front">
+                  <img src="img/09.3.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.12.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="1">
+                <div class="front">
+                  <img src="img/09.4.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.13.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="0">
+                <div class="front">
+                  <img src="img/09.5.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.12.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="0">
+                <div class="front">
+                  <img src="img/09.6.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.12.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="0">
+                <div class="front">
+                  <img src="img/09.7.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.12.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="0">
+                <div class="front">
+                  <img src="img/09.8.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.12.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="1">
+                <div class="front">
+                  <img src="img/09.9.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.13.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="1">
+                <div class="front">
+                  <img src="img/09.10.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.13.png" class="img-fluid" />
+                </div>
+              </div>
+              <div class="card-container2" data-correct="1">
+                <div class="front">
+                  <img src="img/09.11.png" class="img-fluid" />
+                </div>
+                <div class="back">
+                  <img src="img/09.13.png" class="img-fluid" />
+                </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/09.14.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">¡Recuerda!</h3>
+        </div>
+        <div class="col-12 text-center">
+          <p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+    const flip_sound = CourseNav.createSound('audio/flip.mp3');
+    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+
+    $('.card-container2').flip({
+      trigger: 'manual', // Control manual del volteo
+    });
+
+    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;
+    }
+
+    // Shuffle cards
+    const tablero = document.querySelector('.tablero');
+    const cards = Array.from(tablero.querySelectorAll('.card-container2'));
+    const shuffledCards = shuffleArray(cards);
+    shuffledCards.forEach((card) => tablero.appendChild(card));
+
+    $('.card-container2').click(function (e) {
+      e.preventDefault();
+      const $card = $(this);
+      if ($card.hasClass('disabled')) return;
+      flip_sound.play();
+      $card.flip(true);
+      if ($card.data('correct') == '0') {
+        CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
+        $card.addClass('disabled');
+      } else {
+        CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
+        setTimeout(() => {
+          $card.flip(false);
+        }, 700);
+      }
+
+      // Check if all correct cards are completed
+      const correctCards = $('.card-container2[data-correct="0"]');
+      const completedCorrectCards = $('.card-container2[data-correct="0"].disabled');
+      if (correctCards.length === completedCorrectCards.length) {
+        checkAllCompleted();
+      }
+    });
+
+    function checkAllCompleted() {
+      setTimeout(() => {
+        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',
+          },
+          confirmButtonText: 'Cerrar',
+          showConfirmButton: true,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          backdrop: 'rgba(65, 60, 60, .95)',
+          width: '35em',
+          didClose: () => {
+            CourseNav.setSlideVisited();
+            $('.card-container2').addClass('disabled');
+          },
+        });
+      }, 250);
+    }
+  });
+</script>

contenido/10.html

@@ -0,0 +1,45 @@
+<style>
+  .fake {
+    background-image: url(img/bg07.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .card-style {
+    border-radius: 20px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 60%;
+  }
+</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">
+      <div class="col-12 ps-0">
+        <div class="row justify-content-center align-items-center">
+          <div class="col-5 animate__animated animate__lightSpeedInLeft">
+            <div class="card card-style bg-verde-oscuro ps-5 pr-3 py-3 border-0 text-center">
+              <h2 class="text-white fw-bold">¿Qué es un catéter<sup>1,4,8,9</sup>?</h2>
+              <hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0" />
+            </div>
+          </div>
+          <div class="col-7 text-center animate__animated animate__zoomIn">
+            <img src="img/10.0.png" class="img-fluid" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+    CourseNav.setSlideVisited();
+  });
+</script>

contenido/11.html

@@ -0,0 +1,461 @@
+<style>
+  .fake {
+    background-image: url(img/bg11.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 40%;
+  }
+
+  .content-cards {
+    width: 100%;
+  }
+
+  .dislike-indicator {
+    top: 50%;
+    left: 20px;
+    transform: translateY(-50%);
+    z-index: 10;
+    opacity: 0;
+  }
+
+  .like-indicator {
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+    z-index: 10;
+    opacity: 0;
+  }
+
+  .indicator-circle {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+  }
+
+  .gradient-bg {
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  .gradient-left {
+    left: 0;
+    top: 10%;
+    width: 50%;
+    height: 80%;
+    background: #925c8d;
+    background: linear-gradient(270deg, rgba(146, 92, 141, 1) 0%, rgba(146, 92, 141, 0) 100%);
+  }
+
+  .gradient-right {
+    right: 0;
+    top: 10%;
+    width: 50%;
+    height: 80%;
+    background: #6c9d7a;
+    background: linear-gradient(90deg, rgba(108, 157, 122, 1) 0%, rgba(108, 157, 122, 0) 100%);
+  }
+
+  .bg-image {
+    z-index: 2;
+    opacity: 0.7;
+  }
+
+  .bg-image-left {
+    left: 20px;
+    bottom: 60px;
+  }
+
+  .bg-image-right {
+    right: 20px;
+    bottom: 60px;
+  }
+
+  .bg-image img {
+    width: 220px;
+    height: auto;
+  }
+
+  .card-stack {
+    position: relative;
+    width: 326px;
+    height: 326px;
+    margin: 0 auto;
+    z-index: 5;
+  }
+
+  .tinder-card {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+    transition: transform 0.3s ease;
+    user-select: none;
+  }
+
+  .tinder-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+</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">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-10 mb-2 animate__animated animate__bounceInDown">
+            <h2 class="text-center fw-bold text-primary">Características del sitio de salida</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+          <div class="col-12 px-0 mb-1 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
+            <div class="card bg-white border-0 my-2 rounded-0 bg-custom px-3 py-2 text-center">
+              <div class="d-flex justify-content-center align-items-center flex-row gap-2">
+                <img src="img/3.1.png" class="img-fluid mx-3" />
+                <div class="parrafos text-start">
+                  <p class="mb-2"><strong>Instrucciones:</strong> Observa las imágenes del sitio de salida que se presentan en las tarjetas.</p>
+                  <p class="mb-0">Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano, desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.</p>
+                </div>
+              </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">
+            <div class="row justify-content-center">
+              <div class="col-12 mb-2">
+                <div class="d-flex justify-content-center align-items-center gap-2 flex-row indicadores-avance"></div>
+              </div>
+              <div class="col-12">
+                <div class="position-relative content-cards text-center">
+                  <!-- Like/Dislike indicators -->
+                  <div class="position-absolute dislike-indicator" id="dislike-indicator">
+                    <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center indicator-circle">✕</div>
+                    <div class="text-danger fw-bold mt-2">NO SANO</div>
+                  </div>
+                  <div class="position-absolute like-indicator" id="like-indicator">
+                    <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center indicator-circle">✓</div>
+                    <div class="text-success fw-bold mt-2">SANO</div>
+                  </div>
+
+                  <!-- Degradados de fondo -->
+                  <div class="position-absolute w-100 h-100 gradient-bg">
+                    <div class="position-absolute gradient-left"></div>
+                    <div class="position-absolute gradient-right"></div>
+                  </div>
+
+                  <!-- Imágenes de fondo -->
+                  <div class="position-absolute bg-image bg-image-left">
+                    <img src="img/11.nosano.png" alt="No Sano" />
+                  </div>
+                  <div class="position-absolute bg-image bg-image-right">
+                    <img src="img/11.sano.png" alt="Sano" />
+                  </div>
+
+                  <div id="card-stack" class="card-stack">
+                    <div data-index="0" class="tinder-card">
+                      <img src="img/11.0.png" alt="Imagen 1" />
+                    </div>
+                    <div data-index="1" class="tinder-card">
+                      <img src="img/11.1.png" alt="Imagen 2" />
+                    </div>
+                    <div data-index="2" class="tinder-card">
+                      <img src="img/11.2.png" alt="Imagen 3" />
+                    </div>
+                    <div data-index="3" class="tinder-card">
+                      <img src="img/11.3.png" alt="Imagen 4" />
+                    </div>
+                    <div data-index="4" class="tinder-card">
+                      <img src="img/11.4.png" alt="Imagen 5" />
+                    </div>
+                    <div data-index="5" class="tinder-card">
+                      <img src="img/11.5.png" alt="Imagen 6" />
+                    </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">Ten en cuenta que…</h3>
+        </div>
+        <div class="col-12 text-center">
+          <p class="mb-0">En caso de alguna complicación, se debe acudir a la unidad de diálisis.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+
+    const respuestasCorrectas = ['true', 'true', 'false', 'false', 'false'];
+
+    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;
+    }
+
+    // Shuffle cards and answers
+    const cards = Array.from(document.querySelectorAll('.tinder-card'));
+    const cardsData = cards.map((card, index) => ({
+      element: card,
+      answer: respuestasCorrectas[index],
+    }));
+
+    const shuffledData = shuffleArray(cardsData);
+    const stack = document.getElementById('card-stack');
+    stack.innerHTML = '';
+
+    const shuffledAnswers = [];
+    shuffledData.forEach((item, index) => {
+      item.element.style.zIndex = shuffledData.length - index;
+      stack.appendChild(item.element);
+      shuffledAnswers[index] = item.answer;
+    });
+
+    let currentCardIndex = 0;
+    let userAnswers = [];
+    let isProcessing = false;
+    let isDragging = false;
+    let startX = 0;
+    let startY = 0;
+    let currentX = 0;
+    let currentY = 0;
+
+    function initTinderCards() {
+      const currentCard = shuffledData[currentCardIndex]?.element;
+      if (!currentCard) return;
+
+      currentCard.addEventListener('mousedown', handleStart, { passive: false });
+      currentCard.addEventListener('touchstart', handleStart, { passive: false });
+    }
+
+    function handleStart(e) {
+      if (isProcessing) return;
+      e.preventDefault();
+      isDragging = true;
+      const touch = e.type === 'touchstart' ? e.touches[0] : e;
+      startX = touch.clientX;
+      startY = touch.clientY;
+
+      const card = e.target.closest('.tinder-card');
+      card.style.transition = 'none';
+      card.style.cursor = 'grabbing';
+
+      document.addEventListener('mousemove', handleMove, { passive: false });
+      document.addEventListener('touchmove', handleMove, { passive: false });
+      document.addEventListener('mouseup', handleEnd);
+      document.addEventListener('touchend', handleEnd);
+    }
+
+    function handleMove(e) {
+      if (!isDragging || isProcessing) return;
+      e.preventDefault();
+
+      const touch = e.type === 'touchmove' ? e.touches[0] : e;
+      currentX = touch.clientX - startX;
+      currentY = touch.clientY - startY;
+
+      const card = shuffledData[currentCardIndex]?.element;
+      if (!card) return;
+
+      const rotation = currentX * 0.1;
+      card.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotation}deg)`;
+
+      const likeIndicator = document.getElementById('like-indicator');
+      const dislikeIndicator = document.getElementById('dislike-indicator');
+
+      if (currentX > 50) {
+        likeIndicator.style.opacity = Math.min(1, (currentX - 50) / 100);
+        dislikeIndicator.style.opacity = 0;
+      } else if (currentX < -50) {
+        dislikeIndicator.style.opacity = Math.min(1, (Math.abs(currentX) - 50) / 100);
+        likeIndicator.style.opacity = 0;
+      } else {
+        likeIndicator.style.opacity = 0;
+        dislikeIndicator.style.opacity = 0;
+      }
+    }
+
+    function handleEnd(e) {
+      if (!isDragging || isProcessing) return;
+      isDragging = false;
+
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('touchmove', handleMove);
+      document.removeEventListener('mouseup', handleEnd);
+      document.removeEventListener('touchend', handleEnd);
+
+      const card = shuffledData[currentCardIndex]?.element;
+      if (!card) return;
+
+      card.style.transition = 'transform 0.3s ease';
+      card.style.cursor = 'grab';
+
+      const likeIndicator = document.getElementById('like-indicator');
+      const dislikeIndicator = document.getElementById('dislike-indicator');
+
+      likeIndicator.style.opacity = 0;
+      dislikeIndicator.style.opacity = 0;
+
+      if (Math.abs(currentX) > 100) {
+        isProcessing = true;
+        const isLike = currentX > 0;
+        const correctAnswer = shuffledAnswers[currentCardIndex] === 'true';
+        const isCorrect = (isLike && correctAnswer) || (!isLike && !correctAnswer);
+
+        animateCardOut(card, isLike, isCorrect);
+        processSwipe(isLike, isCorrect);
+      } else {
+        card.style.transform = '';
+      }
+
+      currentX = 0;
+      currentY = 0;
+    }
+
+    function animateCardOut(card, isLike, isCorrect) {
+      if (isCorrect) {
+        const direction = isLike ? 1 : -1;
+        card.style.transform = `translateX(${direction * 400}px) rotate(${direction * 30}deg)`;
+        card.style.opacity = '0';
+
+        setTimeout(() => {
+          card.style.display = 'none';
+          nextCard();
+        }, 300);
+      } else {
+        // Animación de rebote para respuesta incorrecta
+        card.style.transform = 'scale(0.95)';
+        setTimeout(() => {
+          card.style.transform = '';
+          isProcessing = false;
+        }, 200);
+      }
+    }
+
+    function nextCard() {
+      currentCardIndex++;
+      updateProgress();
+      if (currentCardIndex < shuffledData.length) {
+        initTinderCards();
+        isProcessing = false;
+      }
+    }
+
+    initTinderCards();
+
+    function processSwipe(isLike, isCorrect) {
+      if (isCorrect) {
+        feedbackcorrect.play();
+
+        userAnswers.push({
+          cardIndex: currentCardIndex,
+          userAnswer: isLike,
+          isCorrect: true,
+        });
+
+        if (currentCardIndex + 1 >= shuffledAnswers.length) {
+          setTimeout(() => {
+            updateProgress();
+            showResults();
+          }, 500);
+        }
+      } else {
+        feedbackincorrect.play();
+        // No avanzar, permitir reintentar
+      }
+    }
+
+    function updateProgress() {
+      const indicators = document.querySelector('.indicadores-avance');
+      indicators.innerHTML = '';
+
+      for (let i = 0; i < shuffledAnswers.length; i++) {
+        const indicator = document.createElement('div');
+        indicator.style.cssText = 'width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;';
+
+        if (i < userAnswers.length) {
+          const img = document.createElement('img');
+          img.style.cssText = 'width: 100%; height: 100%;';
+          img.src = 'img/11.check.png';
+          indicator.appendChild(img);
+        } else if (i === currentCardIndex) {
+          indicator.style.cssText += 'background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;';
+          indicator.innerHTML = (i + 1).toString();
+        } else {
+          indicator.style.cssText += 'background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;';
+          indicator.innerHTML = (i + 1).toString();
+        }
+
+        indicators.appendChild(indicator);
+      }
+    }
+
+    function showResults() {
+      // Ocultar instrucciones
+      document.getElementById('col-instrucciones').style.display = 'none';
+
+      const resultHTML = `
+        <div class="text-center">
+          <h3>¡Actividad completada!</h3>
+          <p>¡Todas las respuestas fueron correctas!</p>
+        </div>
+      `;
+      checkAllCompleted();
+      document.querySelector('.content-cards').innerHTML = resultHTML;
+      CourseNav.setSlideVisited(true);
+    }
+
+    function checkAllCompleted() {
+      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',
+        },
+        confirmButtonText: 'Cerrar',
+        showConfirmButton: true,
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
+        didClose: () => {
+          CourseNav.setSlideVisited();
+        },
+      });
+    }
+
+    // Initialize progress indicators
+    updateProgress();
+  });
+</script>

contenido/12.html

@@ -0,0 +1,272 @@
+<style>
+  .fake {
+    background-image: url(img/bg12.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 80%;
+  }
+
+  .btn-respuesta {
+    max-width: 550px;
+    cursor: pointer;
+  }
+
+  .indicator-circle {
+    width: 40px;
+    height: 40px;
+    margin: 0px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</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">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-10 mb-2">
+            <h2 class="text-center fw-bold text-primary">Cuidados del sitio de salida y complicaciones</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+          <div class="col-10 px-0 mb-1 col-instrucciones">
+            <div class="card bg-lila-claro border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
+              <div class="d-flex justify-content-center align-items-center flex-row">
+                <img src="img/12.3.png" class="img-fluid mx-3" />
+                <p class="mb-0 text-white text-start">Lee lo que opinan dos doctores sobre los cuidados del sitio de salida y las complicaciones que pueden surgir si no se hacen correctamente. Analiza cuidadosamente sus argumentos y elige quién tiene la razón.</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 col-actividad">
+            <div class="row justify-content-center">
+              <div class="col-12 mb-2">
+                <div class="d-flex justify-content-center align-items-center gap-2 flex-row indicadores-avance"></div>
+              </div>
+              <div class="col-12">
+                <div id="puzzle-versus" class="d-flex flex-row justify-content-center gap-2"></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';
+    $('.wrap-course-content').addClass('fake');
+    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+
+    const imgPerso = ['img/12.0.png', 'img/12.1.png'];
+    const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
+    let versusData;
+    let currentQuestionIndex = 0;
+
+    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 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 procesarPreguntas(data) {
+      return data.map((fila) => ({
+        pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
+        opcion: fila.opcion ? String(fila.opcion).trim() : '',
+        opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : '',
+      }));
+    }
+
+    function createIndicators(total) {
+      const container = $('.indicadores-avance');
+      container.empty();
+      for (let i = 0; i < total; i++) {
+        const circle = $('<div class="indicator-circle"></div>');
+        circle.css({
+          'background-color': i === 0 ? '#2196F3' : '#E0E0E0',
+        });
+        circle.attr('data-index', i);
+        container.append(circle);
+      }
+    }
+
+    function updateIndicators() {
+      $('.indicator-circle').each(function (index) {
+        const $this = $(this);
+        if (index < currentQuestionIndex) {
+          $this.empty();
+          const img = $('<img>').attr({
+            src: 'img/11.check.png',
+            style: 'width: 100%; height: 100%;',
+          });
+          $this.append(img);
+        } else if (index === currentQuestionIndex) {
+          $this.css('background-color', '#2196F3').empty();
+        } else {
+          $this.css('background-color', '#E0E0E0').empty();
+        }
+      });
+    }
+
+    function createVersusStructure() {
+      const container = $('#puzzle-versus');
+
+      if (!versusData || currentQuestionIndex >= versusData.length) {
+        console.log('No hay más datos disponibles');
+        return;
+      }
+
+      const data = versusData[currentQuestionIndex];
+      console.log('Pregunta actual:', data);
+
+      const shuffledImages = shuffleArray([...imgPerso]);
+      const responses = [data.opcion, data.opcion_c];
+      const randomOrder = Math.random() < 0.5;
+
+      const leftResponse = randomOrder ? responses[0] : responses[1];
+      const rightResponse = randomOrder ? responses[1] : responses[0];
+      const leftIsCorrect = randomOrder ? false : true; // opcion_c es la correcta
+
+      const structure = `
+        <div class="btn-respuesta" data-correct="${leftIsCorrect}">
+          <div class="d-flex flex-column justify-content-center align-items-center gap-0">
+            <img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
+            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${leftResponse || ''}</p></div>
+          </div>
+        </div>
+        <img src="img/12.2.png" class="img-fluid mx-2">
+        <div class="btn-respuesta" data-correct="${!leftIsCorrect}">
+          <div class="d-flex flex-column justify-content-center align-items-center gap-0">
+            <img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
+            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${rightResponse || ''}</p></div>
+          </div>
+        </div>
+      `;
+
+      container.html(structure);
+      container.addClass('animate__animated animate__zoomIn');
+
+      setTimeout(() => {
+        container.removeClass('animate__animated animate__zoomIn');
+      }, 1000);
+
+      $('.btn-respuesta').click(function () {
+        const isCorrect = $(this).data('correct');
+
+        if (isCorrect) {
+          feedbackcorrect.play();
+          currentQuestionIndex++;
+          updateIndicators();
+
+          container.addClass('animate__animated animate__zoomOut');
+
+          if (currentQuestionIndex >= versusData.length) {
+            setTimeout(() => showResults(), 700);
+          } else {
+            setTimeout(() => {
+              container.removeClass('animate__animated animate__zoomOut');
+              createVersusStructure();
+            }, 500);
+          }
+        } else {
+          feedbackincorrect.play();
+        }
+      });
+    }
+
+    function showResults() {
+      $('.col-actividad').hide();
+      $('.col-instrucciones').html('');
+      const resultHTML = `
+        <div class="text-center animate__animated animate__zoomIn">
+          <h3 class="text-primary fw-bold">¡Actividad completada!</h3>
+          <p class="text-secondary">¡Todas las respuestas fueron correctas!</p>
+        </div>
+      `;
+      $('.col-instrucciones').html(resultHTML);
+      setTimeout(() => checkAllCompleted(), 300);
+    }
+
+    function checkAllCompleted() {
+      setTimeout(() => {
+        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',
+          },
+          confirmButtonText: 'Cerrar',
+          showConfirmButton: true,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          backdrop: 'rgba(65, 60, 60, .95)',
+          width: '35em',
+          didClose: () => {
+            CourseNav.setSlideVisited();
+            $('.card-container2').addClass('disabled');
+          },
+        });
+      }, 250);
+    }
+
+    // Cargar datos del Excel
+    readExcelFile(urlExcelFile, function (data) {
+      const hojaDatos = data['Diapositiva 14'];
+      versusData = procesarPreguntas(hojaDatos);
+      console.log('Datos cargados:', versusData);
+      createIndicators(versusData.length);
+      createVersusStructure();
+    });
+  });
+</script>

contenido/13.html

@@ -0,0 +1,61 @@
+<style>
+  .fake {
+    background-image: url(img/bg07.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+  }
+
+  .card-style {
+    background-color: rgba(182, 143, 178, 0.31);
+  }
+</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">
+      <div class="col-12 px-0">
+        <div class="row justify-content-center">
+          <div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-center fw-bold text-primary">
+                Lavado de manos de acuerdo con la técnica de la <br />
+                OMS y uso correcto de cubrebocas<sup class="fw-bold">12</sup>
+              </h2>
+              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+            </div>
+          </div>
+          <div class="col-12 px-0">
+            <div class="card card-style border-0 rounded-0 shadow-none py-3 px-4">
+              <div class="row justify-content-center">
+                <div class="col-10">
+                  <div class="row justify-content-center align-items-center">
+                    <div class="col-4 text-center animate__animated animate__flipInX">
+                      <img src="img/13.0.png" class="img-fluid" />
+                    </div>
+                    <div class="col-4 text-center animate__animated animate__zoomIn animate__delay-1s">
+                      <img src="img/13.1.png" class="img-fluid" />
+                    </div>
+                    <div class="col-4 text-center animate__animated animate__rotateInDownRight animate__delay-2s">
+                      <img src="img/13.2.png" class="img-fluid" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+    CourseNav.setSlideVisited();
+  });
+</script>

contenido/14.html

@@ -0,0 +1,219 @@
+<style>
+  .fake {
+    background-image: url(img/bg07.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+  }
+
+  .custom-grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 15px;
+    justify-content: center;
+    align-items: center;
+    max-width: 1320px; /* Esto limita el ancho total */
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .img-sotable {
+    cursor: move;
+  }
+
+  .img-sotable.disabled {
+    pointer-events: none;
+    background-color: #84a816;
+  }
+
+  .sortable-placeholder {
+    background-color: rgba(132, 168, 22, 0.3);
+    border: 2px dashed #84a816;
+    visibility: visible !important;
+  }
+</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">
+      <div class="col-12">
+        <div class="row justify-content-center" id="activity1">
+          <div class="col-10 mb-2 text-center">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-center fw-bold text-primary">
+                Técnica correcta para higiene de manos <br />
+                de acuerdo con la técnica de la OMS<sup class="fw-bold">12</sup>
+              </h2>
+              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+            </div>
+          </div>
+          <div class="col-10 px-0 mb-1 col-instrucciones">
+            <div class="card bg-lila-rosa border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
+              <div class="d-flex justify-content-center align-items-center flex-row">
+                <img src="img/14.12.png" class="img-fluid mx-3" />
+                <p class="mb-0 text-start">Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 text-center mb-2">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
+          <div class="col-12 col-actividad" style="overflow: hidden">
+            <div class="custom-grid">
+              <div class="img-sotable" data-order="0">
+                <img src="img/14.0.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="1">
+                <img src="img/14.1.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="2">
+                <img src="img/14.2.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="3">
+                <img src="img/14.3.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="4">
+                <img src="img/14.4.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="5">
+                <img src="img/14.5.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="6">
+                <img src="img/14.6.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="7">
+                <img src="img/14.7.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="8">
+                <img src="img/14.8.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="9">
+                <img src="img/14.9.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="10">
+                <img src="img/14.10.png" class="img-fluid" />
+              </div>
+              <div class="img-sotable" data-order="11">
+                <img src="img/14.11.png" class="img-fluid" />
+              </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/14.13.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>Una vez secas, <strong class="text-verde-ceniza">tus manos son seguras.</strong></p>
+          <p class="mb-0">
+            El procedimiento tiene una duración total de
+            <strong class="text-verde-ceniza">40-60 segundos.</strong>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+
+    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
+
+    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;
+    }
+
+    // Shuffle elements
+    const $sortables = $('.img-sotable');
+    const shuffled = shuffleArray($sortables.toArray());
+    $('.custom-grid').empty().append(shuffled);
+
+    // Initialize sortable
+    $('.custom-grid').sortable({
+      items: '.img-sotable',
+      containment: '.wrap-course-content',
+      cursor: 'grabbing',
+      tolerance: 'pointer',
+      forceHelperSize: true,
+      forcePlaceholderSize: true,
+      placeholder: 'sortable-placeholder',
+      distance: 5,
+      sort: function (event, ui) {
+        var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
+        var mouseX = event.pageX;
+        var mouseY = event.pageY;
+        ui.helper.css({
+          left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 2,
+          top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
+        });
+      },
+      update: function () {
+        checkOrder();
+      },
+    });
+
+    function checkOrder() {
+      const $items = $('.custom-grid .img-sotable');
+      let isCorrect = true;
+
+      $items.each(function (index) {
+        if (parseInt($(this).data('order')) !== index) {
+          isCorrect = false;
+          return false;
+        }
+      });
+
+      if (isCorrect) {
+        good.play();
+        $('.custom-grid').sortable('disable');
+        checkAllCompleted();
+      }
+    }
+
+    function checkAllCompleted() {
+      setTimeout(() => {
+        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',
+          },
+          confirmButtonText: 'Cerrar',
+          showConfirmButton: true,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          backdrop: 'rgba(65, 60, 60, .95)',
+          width: '35em',
+          didClose: () => {
+            CourseNav.setSlideVisited();
+            $('.img-sotable').addClass('disabled');
+          },
+        });
+      }, 250);
+    }
+  });
+</script>

contenido/15.html

@@ -0,0 +1,277 @@
+<style>
+  .fake {
+    background-image: url(img/bg13.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 30%;
+  }
+
+  .content-grid {
+    position: relative;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    grid-template-columns: 75% 25%;
+    grid-template-rows: auto;
+    gap: 0;
+    justify-content: center;
+  }
+
+  .grid-drops-container {
+    position: relative;
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .text-card {
+    position: relative;
+    height: 50px;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .drop-card {
+    position: relative;
+    width: 230px;
+    height: 230px;
+    background-color: #c0d2cd;
+    border: 2px dashed #85a89d;
+    border-radius: 15px;
+    margin: 0 auto;
+  }
+
+  .drag-card-container {
+    position: relative;
+    background-color: #e3ece8;
+    border-radius: 15px;
+    border: 2px dashed #72256b;
+    width: 240px;
+    height: 240px;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .drag-option {
+    cursor: move;
+  }
+</style>
+<div class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center h-100">
+      <div id="drag-drop-activity" class="col-12 h-100" style="overflow: hidden">
+        <div class="content-grid">
+          <div class="content-drops w-100 h-100">
+            <div class="row justify-content-center align-items-center h-100">
+              <div class="col-12">
+                <div class="row">
+                  <div class="col-10 mb-2 animate__animated animate__bounceInDown">
+                    <h2 class="text-center fw-bold text-primary">Técnica Aséptica</h2>
+                    <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+                  </div>
+                  <div class="col-10 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
+                    <div class="card bg-primary border-0 my-2 rounded-15 bg-custom ps-4 pe-3 py-2 text-center">
+                      <div class="d-flex justify-content-center align-items-center flex-row gap-2">
+                        <img src="img/2.1.png" class="img-fluid mx-3" />
+                        <p class="mb-0 text-start text-white"><strong>Instrucciones:</strong> Observa los objetos en las tarjetas y arrástralas hacia la categoría correcta para clasificarlas según su nivel de limpieza: Estéril, Desinfectado, Limpio o Sucio.</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">
+                    <div class="grid-drops-container">
+                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
+                        <div class="drop-card" data-drop="0"></div>
+                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
+                          <div class="row justify-content-center align-items-center h-100">
+                            <div class="col-12 text-center">Estéril</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
+                        <div class="drop-card" data-drop="1"></div>
+                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
+                          <div class="row justify-content-center align-items-center h-100">
+                            <div class="col-12 text-center">Desinfectado</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
+                        <div class="drop-card" data-drop="2"></div>
+                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
+                          <div class="row justify-content-center align-items-center h-100">
+                            <div class="col-12 text-center">Limpio</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
+                        <div class="drop-card" data-drop="3"></div>
+                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
+                          <div class="row justify-content-center align-items-center h-100">
+                            <div class="col-12 text-center">Sucio/Contaminado</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="content-drags w-100 h-100">
+            <div class="row justify-content-end align-items-center h-100">
+              <div class="col-10 pe-4">
+                <div class="row justify-content-center">
+                  <div class="col-12">
+                    <div class="drag-card-container d-flex justify-content-center align-items-center flex-row"></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';
+    $('.wrap-course-content').addClass('fake');
+    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const changeDrag = [
+      '<div class="drag-option" data-drag="0"><img src="img/15.0.png" class="img-fluid"></div>',
+      '<div class="drag-option" data-drag="1"><img src="img/15.1.png" class="img-fluid"></div>',
+      '<div class="drag-option" data-drag="2"><img src="img/15.2.png" class="img-fluid"></div>',
+      '<div class="drag-option" data-drag="3"><img src="img/15.3.png" class="img-fluid"></div>',
+    ];
+
+    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;
+    }
+
+    const shuffled = shuffleArray([...changeDrag]);
+    let currentIndex = 0;
+
+    function showNextDrag() {
+      if (currentIndex < shuffled.length) {
+        const $newDrag = $(shuffled[currentIndex]);
+        $('.drag-card-container').append($newDrag);
+
+        $newDrag.draggable({
+          revert: 'invalid',
+          revertDuration: 300,
+          cursor: 'grabbing',
+          start: function (event, ui) {
+            $(this).css('z-index', 1000);
+            ui.position.left = 0;
+            ui.position.top = 0;
+          },
+          drag: function (event, ui) {
+            var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
+            var changeLeft = ui.position.left - ui.originalPosition.left;
+            var newLeft = ui.originalPosition.left + changeLeft / scale;
+            var changeTop = ui.position.top - ui.originalPosition.top;
+            var newTop = ui.originalPosition.top + changeTop / scale;
+            ui.position.left = newLeft;
+            ui.position.top = newTop;
+          },
+          stop: function (event, ui) {
+            $(this).css('z-index', 1);
+          },
+        });
+
+        currentIndex++;
+      }
+    }
+
+    $('.drop-card').droppable({
+      accept: '.drag-option',
+      tolerance: 'intersect',
+      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');
+
+          showNextDrag();
+
+          if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
+            checkAllCompleted();
+          }
+        } else {
+          bad.play();
+          ui.helper.draggable('option', 'revert', true);
+        }
+      },
+    });
+
+    function checkAllCompleted() {
+      setTimeout(() => {
+        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',
+          },
+          confirmButtonText: 'Cerrar',
+          showConfirmButton: true,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          backdrop: 'rgba(65, 60, 60, .95)',
+          width: '35em',
+          didClose: () => {
+            CourseNav.setSlideVisited();
+            $('.drag-option').addClass('disabled');
+          },
+        });
+      }, 250);
+    }
+
+    // Show first drag element
+    showNextDrag();
+  });
+</script>

contenido/16.html

@@ -0,0 +1,279 @@
+<style>
+  .fake {
+    background-image: url(img/bg03.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 25%;
+  }
+
+  .bg-inst {
+    background-color: #e3ece8;
+  }
+
+  .btn-answer {
+    cursor: pointer;
+    border-radius: 10px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  }
+
+  .letter {
+    background-color: #6c9d7a;
+    border-radius: 10px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .btn-answer.selected {
+    background-color: #d9c5d7;
+  }
+
+  .btn-answer.selected .letter {
+    background-color: #925c8d;
+  }
+
+  .btn-answer:hover {
+    background-color: #d9c5d7;
+  }
+
+  .btn-answer:hover .letter {
+    background-color: #925c8d;
+  }
+
+  #svg-container {
+    width: 100%;
+    height: auto;
+  }
+
+  #svg-container svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .piece-puzzle {
+    transition: all 0.5s ease;
+  }
+</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">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-10 mb-2 animate__animated animate__bounceInDown">
+            <h2 class="text-center fw-bold text-primary">Control de líquidos</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+          <div class="col-12 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
+            <div class="card bg-inst border-0 my-2 rounded-0 bg-custom ps-4 pe-3 py-2 text-center">
+              <div class="d-flex justify-content-center align-items-center flex-row gap-2">
+                <img src="img/3.1.png" class="img-fluid mx-3" />
+                <p class="mb-0 text-start"><strong>Instrucciones:</strong> Lee cada una de las preguntas acerca del control de líquidos y contesta correctamente. Por cada acierto obtendrás una pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <div class="row justify-content-center align-items-center">
+              <div class="col-4 text-center">
+                <div id="svg-container"></div>
+              </div>
+              <div class="col-7 col-actividad">
+                <div id="card-content-quiz-rompecabezas" class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn" style="box-shadow: 0 0 12px rgba(0, 0, 0, 0.5)">
+                  <div class="row justify-content-center">
+                    <div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
+                    <div class="col-12 content-answers mb-3"></div>
+                    <div class="col-12 text-center">
+                      <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+                    </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';
+    $('.wrap-course-content').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');
+
+    function loadSVG() {
+      $.get(
+        'img/puzzle.svg',
+        function (data) {
+          var svg = $(data).find('svg');
+          $('#svg-container').html(svg);
+          // Remove width and height attributes to make SVG responsive
+          svg.removeAttr('width').removeAttr('height');
+
+          // Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
+          svg.find('[id^="pz"]').hide().addClass('piece-puzzle');
+        },
+        'xml',
+      );
+    }
+
+    const urlExcelFile = 'Actividades_Rotafolio_Vantive.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: String(fila[key]).trim(),
+              correct: key === 'opcion_c',
+            });
+          }
+        });
+        return {
+          pregunta: String(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 displayQuestion() {
+      if (currentQuestionIndex < questions.length) {
+        currentQuestion = questions[currentQuestionIndex];
+        $('.txt-question').html(currentQuestion.pregunta);
+
+        $('.content-answers').empty();
+
+        // Shuffle answers for current question
+        const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
+
+        shuffledAnswers.forEach((opcion, index) => {
+          const answerHtml = `
+            <div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
+              <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
+              <div class="txt-answer ps-3">${opcion.text}</div>
+            </div>
+          `;
+          $('.content-answers').append(answerHtml);
+        });
+      }
+    }
+
+    function initializeAnswers() {
+      $('#card-content-quiz-rompecabezas').on('click', '.btn-answer', function () {
+        const isCorrect = $(this).data('correct');
+
+        if (isCorrect) {
+          CourseNav.audioController.stopAllSoundsAndPlay(good);
+          correctQuestions++;
+
+          $(`#pz${correctQuestions - 1}`).show();
+
+          currentQuestionIndex++;
+
+          if (currentQuestionIndex < questions.length) {
+            $('.card-content-quiz').removeClass('animate__zoomIn').addClass('animate__zoomOut');
+            setTimeout(() => {
+              $('.card-content-quiz').removeClass('animate__zoomOut').addClass('animate__zoomIn');
+              displayQuestion();
+            }, 500);
+          } else {
+            $('.col-actividad').hide();
+            setTimeout(() => {
+              checkAllCompleted();
+            }, 300);
+          }
+        } else {
+          CourseNav.audioController.stopAllSoundsAndPlay(bad);
+        }
+
+        $('.btn-answer').off('click');
+      });
+    }
+
+    function checkAllCompleted() {
+      setTimeout(() => {
+        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',
+          },
+          confirmButtonText: 'Cerrar',
+          showConfirmButton: true,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          backdrop: 'rgba(65, 60, 60, .95)',
+          width: '35em',
+          didClose: () => {
+            CourseNav.setSlideVisited();
+          },
+        });
+      }, 250);
+    }
+
+    readExcelFile(urlExcelFile, function (data) {
+      const hojaDatos = data['Diapositiva 17'];
+      questions = shuffleArray(procesarPreguntas(hojaDatos));
+      loadSVG();
+      displayQuestion();
+      initializeAnswers();
+    });
+  });
+</script>

contenido/17.html

@@ -0,0 +1,218 @@
+<style>
+  .fake {
+    background-image: url(img/bg01.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 15%;
+  }
+
+  .content-drop {
+    position: relative;
+    background-color: #85a89d;
+    border-radius: 12px;
+    height: 63px;
+  }
+
+  .num {
+    background-color: #115742;
+    border-radius: 12px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .btn-drag {
+    background: #b68fb2;
+    background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
+    border-radius: 12px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    width: 280px;
+    cursor: grab;
+  }
+
+  .btn-drag:active {
+    cursor: grabbing;
+  }
+
+  .obj-drop {
+    height: 100%;
+    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="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" />
+          </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" />
+                <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">
+                <div class="d-flex justify-content-center align-items-center flex-column gap-3 content-drags">
+                  <div class="btn-drag px-3 py-2 text-start" data-drag="0">
+                    <p class="mb-0 text-white">Diálisis Peritoneal Continua Ambulatoria <strong>(DPCA)</strong></p>
+                  </div>
+                  <div class="btn-drag px-3 py-2 text-start" data-drag="1">
+                    <p class="mb-0 text-white">Diálisis Peritoneal Automatizada <strong>(DPA)</strong></p>
+                  </div>
+                </div>
+              </div>
+              <div class="col-7">
+                <div class="row justify-content-center">
+                  <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 />
+                        <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 />
+                        <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>
+                        </div>
+                      </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/17.2.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">¡No lo olvides!</h3>
+        </div>
+        <div class="col-12 text-center">
+          <p class="mb-0">Siempre que acudas a la unidad de diálisis, debes llevarlos.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
+
+    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;
+    }
+
+    // Shuffle btn-drag elements
+    const $dragElements = $('.btn-drag');
+    const shuffled = shuffleArray($dragElements.toArray());
+    $('.content-drags').empty().append(shuffled);
+
+    $('.btn-drag').draggable({
+      revert: 'invalid',
+      revertDuration: 300,
+      cursor: 'grabbing',
+      start: function (event, ui) {
+        $(this).css('z-index', 1000);
+        ui.position.left = 0;
+        ui.position.top = 0;
+      },
+      drag: function (event, ui) {
+        var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
+        var changeLeft = ui.position.left - ui.originalPosition.left;
+        var newLeft = ui.originalPosition.left + changeLeft / scale;
+        var changeTop = ui.position.top - ui.originalPosition.top;
+        var newTop = ui.originalPosition.top + changeTop / scale;
+        ui.position.left = newLeft;
+        ui.position.top = newTop;
+      },
+      stop: function (event, ui) {
+        $(this).css('z-index', 1);
+      },
+    });
+
+    $('.obj-drop').droppable({
+      accept: '.btn-drag',
+      tolerance: 'pointer',
+      drop: function (event, ui) {
+        const dragData = ui.helper.data('drag');
+        const dropData = $(this).data('drop');
+
+        if (dragData == dropData) {
+          CourseNav.audioController.stopAllSoundsAndPlay(good);
+          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 ($('.obj-drop:not(.ui-droppable-disabled)').length === 0) {
+            Completed();
+          }
+        } else {
+          CourseNav.audioController.stopAllSoundsAndPlay(bad);
+          ui.helper.draggable('option', 'revert', true);
+        }
+      },
+    });
+
+    function Completed() {
+      $('.col-drags').hide();
+      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',
+        },
+        confirmButtonText: 'Cerrar',
+        showConfirmButton: true,
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        focusConfirm: false,
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
+        didOpen: () => {},
+        didClose: () => {
+          CourseNav.audioController.stopAudio();
+          CourseNav.setSlideVisited();
+          $('.obj-drop').addClass('disabled');
+        },
+      });
+    }
+  });
+</script>

contenido/18.html

@@ -0,0 +1,365 @@
+<style>
+  .fake {
+    background-image: url(img/bg03.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 23%;
+  }
+
+  .bg-inst {
+    background-color: #e3ece8;
+  }
+
+  .med_style {
+    position: relative;
+    width: 35px;
+    height: 35px;
+    background: #4d4d4d;
+    border: 4px solid #808080;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+  }
+
+  .med_style.visited {
+    background: #8eba1f;
+    background: linear-gradient(to right, #8eba1f 0%, #105742 100%);
+    border: 4px solid #ffffff;
+  }
+
+  .pop_html_style.padd_perso .swal2-html-container {
+    padding: 0;
+  }
+
+  .object-btn {
+    cursor: pointer;
+    position: relative;
+    width: 19%;
+  }
+
+  .btn-answer {
+    cursor: pointer;
+    border-radius: 10px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    width: 95%;
+  }
+
+  .letter {
+    background-color: #6c9d7a;
+    border-radius: 10px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .btn-answer.selected {
+    background-color: #d9c5d7;
+  }
+
+  .btn-answer.selected .letter {
+    background-color: #925c8d;
+  }
+
+  .btn-answer:hover {
+    background-color: #d9c5d7;
+  }
+
+  .btn-answer:hover .letter {
+    background-color: #925c8d;
+  }
+
+  .object-btn.completed::before {
+    content: url(img/18.5.png);
+    position: absolute;
+    top: 65px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
+
+  .phone-numbers {
+    pointer-events: none !important;
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+  }
+</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">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-10 mb-2 animate__animated animate__bounceInDown">
+            <h2 class="text-center fw-bold text-primary">Consejos útiles</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+          <div class="col-8 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
+            <div class="card bg-inst border-0 my-2 rounded-3 bg-custom ps-4 pe-3 py-2 text-center">
+              <div class="d-flex justify-content-center align-items-center flex-row gap-2">
+                <img src="img/3.1.png" class="img-fluid mx-3" />
+                <p class="mb-0 text-start"><strong>Instrucciones:</strong> Da clic en cada una de las salas y contesta la pregunta correspondiente al tema para ganar los puntos.</p>
+              </div>
+            </div>
+          </div>
+          <div id="actividad-objects" class="col-12">
+            <div class="row justify-content-center align-items-center">
+              <div class="col-12 text-center mb-3">
+                <div class="content-medidor bg-white rounded-5 p-3 d-inline-flex flex-row justify-content-center align-items-center gap-3">
+                  <h4 class="mb-0 fw-bold text-verde-pino">Puntos:</h4>
+                  <div class="grids-med d-flex flex-row justify-content-center align-items-center gap-3">
+                    <div id="#med0" class="med_style"></div>
+                    <div id="#med1" class="med_style"></div>
+                    <div id="#med2" class="med_style"></div>
+                    <div id="#med3" class="med_style"></div>
+                    <div id="#med4" class="med_style"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-11">
+                <div class="d-flex flex-row justify-content-center gap-2">
+                  <div class="object-btn text-center d-inline-block" data-obj="0">
+                    <img src="img/18.0.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
+                    <h4 class="fw-bold text-center text-primary">Sala: Estilo de vida</h4>
+                  </div>
+                  <div class="object-btn text-center d-inline-block" data-obj="1">
+                    <img src="img/18.1.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
+                    <h4 class="fw-bold text-center text-primary">Sala: Desecho de residuos</h4>
+                  </div>
+                  <div class="object-btn text-center d-inline-block" data-obj="2">
+                    <img src="img/18.2.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
+                    <h4 class="fw-bold text-center text-primary">Sala: Entrega domiciliaria</h4>
+                  </div>
+                  <div class="object-btn text-center d-inline-block" data-obj="3">
+                    <img src="img/18.3.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
+                    <h4 class="fw-bold text-center text-primary">Sala: Soporte técnico</h4>
+                    <h4 class="mb-0 text-primary fw-bold phone-numbers">
+                      777 329 6162 <br />
+                      777 160 7199
+                    </h4>
+                  </div>
+                  <div class="object-btn text-center d-inline-block" data-obj="4">
+                    <img src="img/18.4.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
+                    <h4 class="fw-bold text-center text-primary">Sala: Reportes</h4>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="d-none">
+  <div id="pops-questions">
+    <div class="container-fluid px-0" style="overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px">
+      <div class="row justify-content-center align-items-center">
+        <div class="col-12 text-center mb-3 img-pregunta bg-secondary"></div>
+        <div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3 px-4"></div>
+        <div class="col-12 px-4 mb-3">
+          <div id="txt-answers" class="d-flex flex-column justify-content-center align-items-center gap-3 text-start"></div>
+        </div>
+        <div class="col-12 text-center">
+          <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <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';
+    $('.wrap-course-content').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 imganesPop = ['<img src="img/18.0.png" class="img-fluid">', '<img src="img/18.1.png" class="img-fluid">', '<img src="img/18.2.png" class="img-fluid">', '<img src="img/18.3.png" class="img-fluid">', '<img src="img/18.4.png" class="img-fluid">'];
+
+    const urlExcelFile = 'Actividades_Rotafolio_Vantive.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 ? fila.retroalimentacion_correcta.trim() : '',
+          retroalimentacion_incorrecta: fila.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;
+    }
+
+    let currentObjectBtn;
+    let isCorrectAnswer = false;
+
+    readExcelFile(urlExcelFile, function (data) {
+      const hojaDatos = data['Diapositiva 20'];
+      questions = procesarPreguntas(hojaDatos);
+
+      // Enable click handlers after questions are loaded
+      $('.object-btn').click(function (e) {
+        e.preventDefault();
+        if ($(this).hasClass('disabled')) return;
+        CourseNav.soundClick();
+        currentObjectBtn = $(this);
+        showRandomQuestion();
+      });
+    });
+
+    function showRandomQuestion() {
+      // Seleccionar pregunta por índice del botón
+      const objIndex = currentObjectBtn.data('obj');
+      currentQuestion = questions[objIndex];
+
+      const html = $('#pops-questions').html();
+      Swal.fire({
+        html: html,
+        target: document.getElementById('wrap-course-content'),
+        customClass: {
+          popup: 'pop_html_style padd_perso 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: false,
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        focusConfirm: false,
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '50em',
+        didOpen: () => {
+          displayQuestion();
+        },
+        didClose: () => {
+          //CourseNav.audioController.stopAudio();
+          checkAllCompleted();
+        },
+      });
+    }
+
+    function displayQuestion() {
+      const objIndex = currentObjectBtn.data('obj');
+      const container = Swal.getHtmlContainer();
+
+      $(container).find('.img-pregunta').html(imganesPop[objIndex]);
+      $(container).find('#txt-question').html(`<p class="fw-bold">${currentQuestion.pregunta}</p>`);
+
+      const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
+      let answersHTML = '';
+
+      shuffledAnswers.forEach((opcion, index) => {
+        answersHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
+              <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
+              <div class="txt-answer ps-3">${opcion.text}</div>
+            </div>`;
+      });
+
+      $(container).find('#txt-answers').html(answersHTML);
+
+      $(container)
+        .find('.btn-answer')
+        .click(function () {
+          const isCorrect = $(this).data('correct');
+          handleAnswer(isCorrect);
+        });
+    }
+
+    function handleAnswer(isCorrect) {
+      if (isCorrect) {
+        CourseNav.audioController.stopAllSoundsAndPlay(good);
+        correctQuestions++;
+
+        // Marcar medidor como visitado
+        $(`.med_style:eq(${correctQuestions - 1})`).addClass('visited');
+
+        // Marcar botón como disabled
+        currentObjectBtn.addClass('disabled completed');
+        currentObjectBtn.find('img').removeClass('animate__pulse animate__infinite');
+
+        Swal.close();
+      } else {
+        CourseNav.audioController.stopAllSoundsAndPlay(bad);
+      }
+    }
+
+    function checkAllCompleted() {
+      if (correctQuestions >= 5) {
+        setTimeout(() => {
+          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',
+            },
+            confirmButtonText: 'Cerrar',
+            showConfirmButton: true,
+            allowOutsideClick: false,
+            allowEscapeKey: false,
+            backdrop: 'rgba(65, 60, 60, .95)',
+            width: '35em',
+            didClose: () => {
+              CourseNav.setSlideVisited();
+            },
+          });
+        }, 250);
+      }
+    }
+  });
+</script>

contenido/19.html

@@ -0,0 +1,58 @@
+<style>
+  .text-info {
+    position: absolute;
+    width: 65%;
+    height: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 70%;
+  }
+</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'>
+      <div class='col-12 px-0'>
+        <div class='row'>
+          <div class="col-11 px-0">
+            <div class="d-inline-block position-relative">
+              <img src="img/19.0.webp" class="img-fluid">
+              <div class="text-info">
+                <div class="row justify-content-center align-items-center h-100">
+                  <div class="col-9">
+                    <div class="row justify-content-center">
+                      <div class="col-12 mb-3 animate__animated animate__bounceInDown">
+                        <div class="d-flex flex-row align-items-center gap-3">
+                          <h1 class="text-white fw-bold">¡Felicidades!</h1>
+                          <img src="img/19.1.png" class="img-fluid">
+                        </div>
+                        <hr class="border border-3 border-secondary hr-style my-0">
+                      </div>
+                      <div class="col-12 mb-3 animate__animated animate__lightSpeedInLeft animate__delay-1s">
+                        <h2 class="text-verde-claro">Has terminado las actividades de la</h2>
+                        <h2 class="text-white fw-bold">Inducción al programa de Diálisis Peritoneal.</h2>
+                      </div>
+                      <div class="col-12 animate__animated animate__zoomIn animate__delay-2s">
+                        <p class="text-white mb-0">¡Tu esfuerzo marca la diferencia!</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('body').addClass('fake');
+    CourseNav.setSlideVisited();
+  });
+</script>

contenido/20.html

@@ -0,0 +1,62 @@
+<style>
+  .fake {
+    background-image: url(img/bg05.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
+
+  ol > li {
+    margin-bottom: 0.6rem;
+  }
+</style>
+<div class="page-sco h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11">
+        <div class="row justify-content-center align-content-center">
+          <div class="col-12">
+            <h1 class="fw-bold text-primary text-center">Referencias</h1>
+            <ol class="mb-0">
+              <li>International Society for Peritoneal Dialysis (ISPD). Peritoneal dialysis-related definitions and description of technique. Perit Dial Int. 2020;40(3):244–253.</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
+              <li>National Kidney Foundation. Hemodialysis. Am J Kidney Dis. 2015;66(5):884–930.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for the evaluation and management of chronic kidney disease. Kidney Int. 2024;105(Suppl 4):S1–S150.</li>
+              <li>Blake PG, Jain AK. Icodextrin as an osmotic agent in peritoneal dialysis. Kidney Int. 2002;62(Suppl 81):S38–S44.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). Krediet RT. The peritoneal membrane in peritoneal dialysis: physiology and pathophysiology. Nat Rev Nephrol. 2014;10(7):366–374.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Catheter-related infection recommendations: 2023 update. Perit Dial Int. 2023;43(1):1–21.</li>
+              <li>Crabtree JH. Selected best demonstrated practices in peritoneal dialysis access. Kidney Int Suppl. 2006;(103):S27–S37</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Peritonitis recommendations: 2022 update. Perit Dial Int. 2022;42(2):110–153.</li>
+              <li>World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
+              <li>National Kidney Foundation. KDOQI Clinical Practice Guideline for Nutrition in CKD. Am J Kidney Dis. 2020;76(3 Suppl 1):S1–S107.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for anemia in chronic kidney disease. Kidney Int Suppl. 2021;11(4):1–115.</li>
+              <li>idney Disease: Improving Global Outcomes (KDIGO). CKD–Mineral and Bone Disorder guideline. Kidney Int Suppl. 2017;7(1):1–59.</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+
+    $('.wrap-course-content').addClass('fake');
+
+    gsap.from('ol > li', {
+      y: 40,
+      opacity: 0,
+      duration: 0.5,
+      stagger: 0.08,
+      ease: 'power2.out',
+    });
+
+    CourseNav.setSlideVisited();
+    CourseNav.setLessonStatus('completed');
+    CourseNav.save();
+  });
+</script>

contenido/ruleta.html

@@ -0,0 +1,464 @@
+<style>
+  .fake {
+    background-image: url('img/bg11.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 52%;
+  }
+
+  .wruleta {
+    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
+    cursor: pointer;
+  }
+
+  .wruleta.spinning {
+    pointer-events: none;
+  }
+
+  #spin-btn {
+    border: none;
+    color: white;
+    padding: 15px 30px;
+    font-size: 18px;
+    font-weight: bold;
+    border-radius: 12px;
+    cursor: pointer;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+  }
+
+  #spin-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  #spin-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+  }
+  .avance {
+    width: calc(100% / 6);
+  }
+  .avance img {
+    width: 70%;
+    aspect-ratio: 16 / 9;
+    object-fit: contain;
+    filter: grayscale(1);
+    transition: all 0.5s ease-in-out;
+  }
+  .avance img.visited {
+    filter: grayscale(0);
+  }
+  .no-overflow {
+    overflow: hidden;
+  }
+
+  /* Estilos para SweetAlert de preguntas */
+  .swal2-popup {
+    border-radius: 20px !important;
+    border: 4px solid #28a745 !important;
+  }
+
+  .swal2-title {
+    color: #2c5530 !important;
+    font-weight: bold !important;
+    font-size: 1.3rem !important;
+  }
+
+  .opcion-btn {
+    background: #f8f9fa !important;
+    color: #333 !important;
+    border: 1px solid #dee2e6 !important;
+    border-radius: 8px !important;
+    padding: 12px 20px !important;
+    margin-bottom: 10px !important;
+    font-weight: 500 !important;
+    position: relative !important;
+    transition: all 0.3s ease !important;
+  }
+
+  .opcion-btn:hover,
+  .opcion-btn:focus,
+  .opcion-btn.selected {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  .opcion-btn::before {
+    content: attr(data-letter) !important;
+    position: absolute !important;
+    left: 0px !important;
+    top: 0% !important;
+    background: #28a745 !important;
+    color: white !important;
+    width: 28px !important;
+    height: 100% !important;
+    border-radius: 6px 0px 0px 6px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-weight: bold !important;
+    font-size: 14px !important;
+    transition: background-color 0.3s ease !important;
+  }
+
+  .opcion-btn:hover::before,
+  .opcion-btn.selected::before {
+    background: #8e44ad !important;
+  }
+
+  .opcion-btn span {
+    margin-left: 35px !important;
+    text-align: left !important;
+    display: block !important;
+  }
+
+  .pop_html_style {
+    width: 100%;
+  }
+  @media (min-width: 768px) {
+    .pop_html_style {
+      width: 700px;
+    }
+  }
+</style>
+<div class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100 m-0 g-0 p-0">
+    <div class="row justify-content-center align-items-center h-100 m-0 g-0 p-0">
+      <div class="col-12 m-0 g-0 p-0">
+        <div class="row justify-content-center m-0 g-0 p-0 animate__animated animate__fadeInDown">
+          <div class="col-7 mb-3">
+            <h2 class="text-center fw-bold text-primary">Alimentación y medicación</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
+          </div>
+        </div>
+        <div class="row animate__animated animate__slideInLeft">
+          <div class="col-7">
+            <div class="d-flex flex-row align-items-center bg-morado-claro py-3 text-white rounded-15" style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0">
+              <div class="mx-3">
+                <img src="img/2.1.png" alt="" class="img-fluid" />
+              </div>
+              <div><b>Instrucciones:</b> Da clic en la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación en diálisis peritoneal para ganar los puntos.</div>
+            </div>
+          </div>
+        </div>
+        <div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
+          <div class="col-6">
+            <div class="card custom-card bg-secondary border-0 shadow">
+              <div class="card-body">
+                <div class="row justify-content-center">
+                  <div class="col-4 text-center">
+                    <img src="img/ruleta/per1.png" alt="" class="img-fluid" />
+                  </div>
+                  <div class="col-8 text-white text-center">
+                    <h4>Puntos acumulados:</h4>
+                    <h2 class="puntos">0</h2>
+                    <div class="card flat">
+                      <img src="img/ruleta/progress.png" alt="" class="img-fluid" />
+                      <div class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100" style="top: 22%">
+                        <div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
+                        <div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
+                        <div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
+                        <div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
+                        <div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
+                        <div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="position-relative w-100">
+              <div class="row">
+                <div class="col-12 text-center">
+                  <div class="mt-3">
+                    <button id="spin-btn" class="bg-verde-oscuro text-white border border-4 border-white animate__animated animate__pulse animate__infinite">¡GIRAR RULETA!</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-4 text-center" style="margin-top: -30px">
+            <div class="card flat justify-content-center align-items-center d-inline-flex">
+              <div class="indicador position-absolute start-50 translate-middle-x" style="z-index: 9999 !important; top: -1em">
+                <img src="img/ruleta/indicador.png" alt="" style="transform: rotate(90deg)" />
+              </div>
+              <div class="wruleta z-2" id="ruleta-wheel">
+                <img src="img/ruleta/ruleta.png" alt="" />
+              </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';
+    $('.wrap-course-content').addClass('fake');
+    // Puntajes de la ruleta en orden horario (empezando desde arriba)
+    const puntajes = [100, 200, 300, 400, 500, 600, 700, 600, 500, 400, 300, 200];
+    let isSpinning = false;
+    let totalPuntos = 0;
+    let rotacionActual = 0;
+    let girosRealizados = 0;
+    const maxGiros = 6;
+
+    const ruletaWheel = document.getElementById('ruleta-wheel');
+    const spinBtn = document.getElementById('spin-btn');
+    const puntosDisplay = document.querySelector('.puntos');
+    const avanceImages = document.querySelectorAll('.avance img');
+
+    function girarRuleta() {
+      if (isSpinning || girosRealizados >= maxGiros) return;
+
+      isSpinning = true;
+      spinBtn.disabled = true;
+      spinBtn.classList.remove('animate__animated', 'animate__pulse', 'animate__infinite');
+      ruletaWheel.classList.add('spinning');
+      document.getElementById('coursenav-main-content').classList.add('no-overflow');
+      // Mínimo 3 vueltas + ángulo aleatorio (siempre hacia la derecha)
+      const vueltas = 3 + Math.random() * 2; // 3-5 vueltas
+      const anguloFinal = Math.random() * 360;
+      const rotacionTotal = rotacionActual + vueltas * 360 + anguloFinal;
+
+      // Aplicar rotación
+      ruletaWheel.style.transform = `rotate(${rotacionTotal}deg)`;
+      rotacionActual = rotacionTotal;
+
+      // Calcular puntaje después de la animación
+      setTimeout(() => {
+        const anguloNormalizado = rotacionActual % 360;
+        const segmento = Math.floor((anguloNormalizado + 15) / 30) % 12;
+        const puntajeObtenido = puntajes[segmento];
+        // Remover puntos automáticos - solo se ganan si responde correctamente
+
+        // Mostrar pregunta
+        setTimeout(() => {
+          mostrarPregunta(puntajeObtenido);
+        }, 500);
+      }, 4000);
+    }
+
+    spinBtn.addEventListener('click', girarRuleta);
+
+    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
+
+    const urlExcelFile = 'Actividades_Rotafolio_Vantive.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 ? fila.retroalimentacion_correcta.trim() : '',
+          retroalimentacion_incorrecta: fila.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;
+    }
+
+    // Variables para preguntas
+    let questions = [];
+    let preguntasUsadas = [];
+
+    function mostrarPregunta(puntajeEnJuego) {
+      if (questions.length === 0) {
+        console.error('No hay preguntas cargadas');
+        return;
+      }
+
+      // Seleccionar pregunta aleatoria no usada
+      const preguntasDisponibles = questions.filter((_, index) => !preguntasUsadas.includes(index));
+      if (preguntasDisponibles.length === 0) {
+        preguntasUsadas = []; // Reiniciar si se agotaron
+      }
+
+      const preguntaIndex = Math.floor(Math.random() * preguntasDisponibles.length);
+      const pregunta = preguntasDisponibles[preguntaIndex];
+      const originalIndex = questions.indexOf(pregunta);
+      preguntasUsadas.push(originalIndex);
+
+      // Crear HTML para opciones
+      let opcionesHTML = '';
+      pregunta.opciones.forEach((opcion, index) => {
+        const letra = String.fromCharCode(97 + index); // 97 = 'a'
+        opcionesHTML += `<button class="opcion-btn d-block w-100" data-correct="${opcion.correct}" data-letter="${letra}"><span>${opcion.text}</span></button>`;
+      });
+
+      Swal.fire({
+        title: pregunta.pregunta,
+        html: `<div class="text-start mb-3">${opcionesHTML}</div>
+        <div class="col-12 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
+        `,
+        showConfirmButton: false,
+        allowOutsideClick: false,
+        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',
+        },
+        didOpen: () => {
+          document.querySelectorAll('.opcion-btn').forEach((btn) => {
+            btn.addEventListener('mouseenter', () => {
+              btn.classList.add('selected');
+            });
+            btn.addEventListener('mouseleave', () => {
+              btn.classList.remove('selected');
+            });
+            btn.addEventListener('click', (e) => {
+              const target = e.target.closest('.opcion-btn');
+              const esCorrecta = target.dataset.correct === 'true';
+              manejarRespuesta(esCorrecta, puntajeEnJuego, pregunta);
+            });
+          });
+        },
+      });
+    }
+
+    function manejarRespuesta(esCorrecta, puntajeEnJuego, pregunta) {
+      if (esCorrecta) {
+        CourseNav.audioController.stopAllSoundsAndPlay(good);
+        totalPuntos += puntajeEnJuego;
+        puntosDisplay.textContent = totalPuntos;
+
+        // Marcar imagen como visitada solo cuando responde correctamente
+        if (girosRealizados < maxGiros) {
+          avanceImages[girosRealizados].classList.add('visited');
+          girosRealizados++;
+        }
+
+        Swal.fire({
+          title: '¡Correcto!',
+          text: `Has ganado ${puntajeEnJuego} puntos. ${pregunta.retroalimentacion_correcta}`,
+          icon: 'success',
+          target: document.getElementById('wrap-course-content'),
+          confirmButtonText: 'Continuar',
+        }).then(() => {
+          finalizarTurno();
+          if (girosRealizados < maxGiros) {
+            spinBtn.classList.add('animate__animated', 'animate__pulse', 'animate__infinite');
+          }
+        });
+      } else {
+        CourseNav.audioController.stopAllSoundsAndPlay(bad);
+        // Solo sonido, el usuario puede seguir intentando
+      }
+    }
+
+    function finalizarTurno() {
+      isSpinning = false;
+      document.getElementById('coursenav-main-content').classList.remove('no-overflow');
+
+      if (girosRealizados >= maxGiros) {
+        spinBtn.disabled = true;
+        spinBtn.textContent = '¡Juego Completado!';
+        CourseNav.setSlideVisited();
+        setTimeout(() => {
+          Completed();
+        }, 300);
+      } else {
+        spinBtn.disabled = false;
+        spinBtn.textContent = `¡GIRAR RULETA! (${maxGiros - girosRealizados} restantes)`;
+      }
+
+      ruletaWheel.classList.remove('spinning');
+    }
+
+    function Completed() {
+      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',
+        },
+        confirmButtonText: 'Cerrar',
+        showConfirmButton: true,
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        focusConfirm: false,
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
+        didOpen: () => {},
+        didClose: () => {
+          CourseNav.audioController.stopAudio();
+          CourseNav.setSlideVisited();
+        },
+      });
+    }
+    // Cargar preguntas de "Diapositiva 19"
+    readExcelFile(urlExcelFile, function (data) {
+      const sheetData = data['Diapositiva 19'];
+      if (sheetData) {
+        questions = procesarPreguntas(sheetData);
+        console.log('Preguntas cargadas de Diapositiva 19:', questions);
+      } else {
+        console.error('No se encontró la hoja "Diapositiva 19"');
+        console.log('Hojas disponibles:', Object.keys(data));
+      }
+    });
+  });
+</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;
@@ -373,7 +380,7 @@ body > main {
 }
 
 #coursenav-main-content {
-  height: 100%;
+  height: calc(100% - 85px);
   overflow-x: hidden;
 }
 

css/style.scss

@@ -8,6 +8,7 @@ $outline-color: #ffa300 !default;
 html {
   box-sizing: border-box;
   height: 100%;
+  overflow: hidden;
 }
 *,
 *::before,
@@ -25,6 +26,7 @@ body {
   font-family: 'Arial', sans-serif;
   line-height: 1.3;
   font-size: 18px;
+  overflow: hidden;
 
   > header,
   > footer {
@@ -428,7 +430,7 @@ $transition-time: 0.3s !default;
 }
 
 #coursenav-main-content {
-  height: 100%;
+  height: calc(100% - 85px);
   overflow-x: hidden;
 }
 .stepper {
@@ -495,3 +497,7 @@ h6 {
 .pop_html_style .swal2-html-container {
   padding: 0.5em;
 }
+
+/* .wrap-course-content {
+  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
+} */

css/stylee.css

@@ -1,6 +1,7 @@
 html {
   box-sizing: border-box;
   height: 100%;
+  overflow: hidden;
 }
 
 *,
@@ -18,6 +19,7 @@ body {
   font-family: "Arial", sans-serif;
   line-height: 1.3;
   font-size: 18px;
+  overflow: hidden;
 }
 body > header,
 body > footer {
@@ -411,7 +413,7 @@ body > main {
 }
 
 #coursenav-main-content {
-  height: 100%;
+  height: calc(100% - 85px);
   overflow-x: hidden;
 }
 
@@ -482,3 +484,7 @@ h6 {
 .pop_html_style .swal2-html-container {
   padding: 0.5em;
 }
+
+/* .wrap-course-content {
+  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
+} */

css/theme.scss

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

css/themee.css

@@ -70,7 +70,10 @@
   --bs-verde-ceniza: #84a79c;
   --bs-verde-oscuro: #105742;
   --bs-verde-pino: #4c8071;
+  --bs-verde-pasto: #84a816;
   --bs-verde-claro: #d6e3da;
+  --bs-verde-gris: #cadcd4;
+  --bs-verde2: #d3e0d7;
   --bs-lila-claro: #905c8b;
   --bs-morado-claro: #915c8c;
   --bs-gris: #959595;
@@ -97,7 +100,10 @@
   --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-verde-gris-rgb: 202, 220, 212;
+  --bs-verde2-rgb: 211, 224, 215;
   --bs-lila-claro-rgb: 144, 92, 139;
   --bs-morado-claro-rgb: 145, 92, 140;
   --bs-gris-rgb: 149, 149, 149;
@@ -3284,6 +3290,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;
@@ -3301,6 +3324,40 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #d6e3da;
 }
 
+.btn-verde-gris {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #cadcd4;
+  --bs-btn-border-color: #cadcd4;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #d2e1da;
+  --bs-btn-hover-border-color: #cfe0d8;
+  --bs-btn-focus-shadow-rgb: 172, 187, 180;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #d5e3dd;
+  --bs-btn-active-border-color: #cfe0d8;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #cadcd4;
+  --bs-btn-disabled-border-color: #cadcd4;
+}
+
+.btn-verde2 {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #d3e0d7;
+  --bs-btn-border-color: #d3e0d7;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #dae5dd;
+  --bs-btn-hover-border-color: #d7e3db;
+  --bs-btn-focus-shadow-rgb: 179, 190, 183;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #dce6df;
+  --bs-btn-active-border-color: #d7e3db;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #d3e0d7;
+  --bs-btn-disabled-border-color: #d3e0d7;
+}
+
 .btn-lila-claro {
   --bs-btn-color: #fff;
   --bs-btn-bg: #905c8b;
@@ -3743,6 +3800,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;
@@ -3760,6 +3834,40 @@ textarea.form-control-lg {
   --bs-gradient: none;
 }
 
+.btn-outline-verde-gris {
+  --bs-btn-color: #cadcd4;
+  --bs-btn-border-color: #cadcd4;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #cadcd4;
+  --bs-btn-hover-border-color: #cadcd4;
+  --bs-btn-focus-shadow-rgb: 202, 220, 212;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #cadcd4;
+  --bs-btn-active-border-color: #cadcd4;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #cadcd4;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #cadcd4;
+  --bs-gradient: none;
+}
+
+.btn-outline-verde2 {
+  --bs-btn-color: #d3e0d7;
+  --bs-btn-border-color: #d3e0d7;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #d3e0d7;
+  --bs-btn-hover-border-color: #d3e0d7;
+  --bs-btn-focus-shadow-rgb: 211, 224, 215;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #d3e0d7;
+  --bs-btn-active-border-color: #d3e0d7;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #d3e0d7;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #d3e0d7;
+  --bs-gradient: none;
+}
+
 .btn-outline-lila-claro {
   --bs-btn-color: #905c8b;
   --bs-btn-border-color: #905c8b;
@@ -5558,6 +5666,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;
@@ -5567,6 +5684,24 @@ textarea.form-control-lg {
   color: #454946;
 }
 
+.alert-verde-gris {
+  --bs-alert-color: #515855;
+  --bs-alert-bg: #f4f8f6;
+  --bs-alert-border-color: #eff5f2;
+}
+.alert-verde-gris .alert-link {
+  color: #414644;
+}
+
+.alert-verde2 {
+  --bs-alert-color: #545a56;
+  --bs-alert-bg: #f6f9f7;
+  --bs-alert-border-color: #f2f6f3;
+}
+.alert-verde2 .alert-link {
+  color: #434845;
+}
+
 .alert-lila-claro {
   --bs-alert-color: #563753;
   --bs-alert-bg: #e9dee8;
@@ -6208,6 +6343,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;
@@ -6222,6 +6371,34 @@ textarea.form-control-lg {
   border-color: #565b57;
 }
 
+.list-group-item-verde-gris {
+  color: #515855;
+  background-color: #f4f8f6;
+}
+.list-group-item-verde-gris.list-group-item-action:hover, .list-group-item-verde-gris.list-group-item-action:focus {
+  color: #515855;
+  background-color: #dcdfdd;
+}
+.list-group-item-verde-gris.list-group-item-action.active {
+  color: #ffffff;
+  background-color: #515855;
+  border-color: #515855;
+}
+
+.list-group-item-verde2 {
+  color: #545a56;
+  background-color: #f6f9f7;
+}
+.list-group-item-verde2.list-group-item-action:hover, .list-group-item-verde2.list-group-item-action:focus {
+  color: #545a56;
+  background-color: #dde0de;
+}
+.list-group-item-verde2.list-group-item-action.active {
+  color: #ffffff;
+  background-color: #545a56;
+  border-color: #545a56;
+}
+
 .list-group-item-lila-claro {
   color: #563753;
   background-color: #e9dee8;
@@ -7902,11 +8079,26 @@ 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;
 }
 
+.text-bg-verde-gris {
+  color: #000 !important;
+  background-color: RGBA(202, 220, 212, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-verde2 {
+  color: #000 !important;
+  background-color: RGBA(211, 224, 215, var(--bs-bg-opacity, 1)) !important;
+}
+
 .text-bg-lila-claro {
   color: #fff !important;
   background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
@@ -8083,6 +8275,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;
 }
@@ -8090,6 +8289,20 @@ textarea.form-control-lg {
   color: #dee9e1 !important;
 }
 
+.link-verde-gris {
+  color: #cadcd4 !important;
+}
+.link-verde-gris:hover, .link-verde-gris:focus {
+  color: #d5e3dd !important;
+}
+
+.link-verde2 {
+  color: #d3e0d7 !important;
+}
+.link-verde2:hover, .link-verde2:focus {
+  color: #dce6df !important;
+}
+
 .link-lila-claro {
   color: #905c8b !important;
 }
@@ -8647,11 +8860,26 @@ 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;
 }
 
+.border-verde-gris {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-verde-gris-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-verde2 {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-verde2-rgb), var(--bs-border-opacity)) !important;
+}
+
 .border-lila-claro {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
@@ -9599,11 +9827,26 @@ 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;
 }
 
+.text-verde-gris {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-verde-gris-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-verde2 {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-verde2-rgb), var(--bs-text-opacity)) !important;
+}
+
 .text-lila-claro {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
@@ -9775,11 +10018,26 @@ 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;
 }
 
+.bg-verde-gris {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-verde-gris-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-verde2 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-verde2-rgb), var(--bs-bg-opacity)) !important;
+}
+
 .bg-lila-claro {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;