completo

2025-09-24 22:51:53 -06:00 · 2025-09-24 22:51:53 -06:00 · 172b8450e4
commit 172b8450e4
parent b4f834f46e
53 changed files with 1758 additions and 63 deletions
--- a/config.json
+++ b/config.json
@ -1,64 +1,88 @@
 {
-  "title": "Nombre del curso",
+  "title": "Vantive",
  "modules": [
    {
-      "title": "Introducción",
+      "title": "Contenido",
      "topics": [
        {
          "title": "Portada",
-          "content": "contenido/ruleta.html"
+          "content": "contenido/01.html"
        },
        {
-          "title": "Portada",
+          "title": "¿Qué son los riñones?",
          "content": "contenido/02.html"
        },
        {
-          "title": "Navegación",
+          "title": "¿Cuál es el tratamiento?",
          "content": "contenido/03.html"
        },
        {
-          "title": "Navegación",
+          "title": "Tipos de diálisis",
          "content": "contenido/04.html"
        },
        {
-          "title": "Navegación",
+          "title": "¿Cómo funciona la diálisis peritoneal? - Glucosa",
          "content": "contenido/05.html"
        },
        {
-          "title": "Navegación",
+          "title": "¿Cómo funciona la diálisis peritoneal?",
          "content": "contenido/06.html"
        },
        {
-          "title": "Navegación",
+          "title": "Tipos de diálisis peritoneal",
          "content": "contenido/07.html"
        },
        {
-          "title": "Navegación",
+          "title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Continua Ambulatoria (DPCA)?",
          "content": "contenido/08.html"
        },
        {
-          "title": "Navegación",
+          "title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?",
          "content": "contenido/09.html"
        },
        {
-          "title": "Navegación",
+          "title": "¿Qué es un catéter?",
          "content": "contenido/10.html"
        },
        {
-          "title": "Navegación",
+          "title": "¿Qué es un catéter?",
          "content": "contenido/11.html"
        },
        {
-          "title": "Navegación",
+          "title": "Cuidados del sitio de salida y complicaciones",
          "content": "contenido/12.html"
        },
        {
-          "title": "Navegación",
+          "title": "Lavado de manos y uso correcto de cubrebocas",
          "content": "contenido/13.html"
        },
        {
-          "title": "Navegación",
+          "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"
        }
      ]
    }
--- a/contenido/03.html
+++ b/contenido/03.html
@ -248,7 +248,7 @@
      const html = $("#pop0").html();
      Swal.fire({
        html: html,
-        target: "body",
+        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'
--- a/contenido/04.html
+++ b/contenido/04.html
@ -314,7 +314,7 @@
      const html = $("#pop0").html();
      Swal.fire({
        html: html,
-        target: "body",
+        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'
--- a/contenido/05.html
+++ b/contenido/05.html
@ -252,7 +252,7 @@
      const html = $("#pop0").html();
      Swal.fire({
        html: html,
-        target: "body",
+        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'
--- a/contenido/06.html
+++ b/contenido/06.html
@ -132,7 +132,7 @@
          const html = $("#pop0").html();
          Swal.fire({
            html: html,
-            target: "body",
+            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'
--- a/contenido/07.html
+++ b/contenido/07.html
@ -296,7 +296,7 @@
      const html = $("#pops-questions").html();
      Swal.fire({
        html: html,
-        target: "body",
+        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'
@ -369,7 +369,7 @@
          const html = $("#pop0").html();
          Swal.fire({
            html: html,
-            target: "body",
+            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'
--- a/contenido/08.html
+++ b/contenido/08.html
@ -289,7 +289,7 @@
      const html = $("#retro-pop").html();
      Swal.fire({
        html: html,
-        target: "body",
+        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'
--- a/contenido/09.html
+++ b/contenido/09.html
@ -228,7 +228,7 @@
        const html = $("#pop0").html();
        Swal.fire({
          html: html,
-          target: "body",
+          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'
--- a/contenido/11.html
+++ b/contenido/11.html
@ -405,7 +405,7 @@
        if (i < userAnswers.length) {
          const img = document.createElement("img");
          img.style.cssText = "width: 100%; height: 100%;";
-          img.src = "img/11.good.png";
+          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;";
--- a/contenido/12.html
+++ b/contenido/12.html
@ -12,7 +12,20 @@
  }

  .btn-respuesta {
-    max-width: 500px;
+    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'>
@ -24,7 +37,7 @@
            <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">
+          <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">
@ -33,8 +46,15 @@
              </div>
            </div>
          </div>
-          <div class="col-12">
-            <div id="puzzle-versus" class="d-flex flex-row justify-content-center align-items-center gap-2"></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>
@ -96,6 +116,37 @@
      return array;
    }

+    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');

@ -119,19 +170,24 @@
        <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">
-            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta">${leftResponse || ''}</div>
+            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white">${leftResponse || ''}</div>
          </div>
        </div>
-        <img src="img/12.2.png" class="img-fluid">
+        <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">
-            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta">${rightResponse || ''}</div>
+            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white">${rightResponse || ''}</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');
@ -139,11 +195,17 @@
        if (isCorrect) {
          feedbackcorrect.play();
          currentQuestionIndex++;
+          updateIndicators();
+
+          container.addClass('animate__animated animate__zoomOut');

          if (currentQuestionIndex >= versusData.length) {
-            checkAllCompleted();
+            setTimeout(() => showResults(), 700);
          } else {
-            setTimeout(() => createVersusStructure(), 1000);
+            setTimeout(() => {
+              container.removeClass('animate__animated animate__zoomOut');
+              createVersusStructure();
+            }, 500);
          }
        } else {
          feedbackincorrect.play();
@ -151,12 +213,25 @@
      });
    }

+    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: "body",
+          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'
@ -180,6 +255,7 @@
      const sheetData = data[Object.keys(data)[0]];
      versusData = sheetData;
      console.log('Datos cargados:', versusData);
+      createIndicators(versusData.length);
      createVersusStructure();
    });
  });
--- a/contenido/13.html
+++ b/contenido/13.html
@ -0,0 +1,57 @@
+<style>
+  .fake {
+    background-image: url(img/bg07.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 50%;
+  }
+
+  .card-style {
+    background-color: rgba(182, 143, 178, .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">
+            <h2 class="text-center fw-bold text-primary">Lavado de manos y uso correcto de cubrebocas</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 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>
--- a/contenido/14.html
+++ b/contenido/14.html
@ -0,0 +1,191 @@
+<style>
+  .fake {
+    background-image: url(img/bg07.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 50%;
+  }
+
+  .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;
+    opacity: 0.7;
+  }
+</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">
+            <h2 class="text-center fw-bold text-primary">Técnica correcta para higiene de manos</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-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 col-actividad">
+            <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',
+      cursor: 'grabbing',
+      tolerance: 'pointer',
+      helper: "clone",
+      cursorAt: { top: 50, left: 50 },
+      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>
--- a/contenido/15.html
+++ b/contenido/15.html
@ -0,0 +1,280 @@
+<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'>
+        <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">
+                    <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,
+          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);
+          }
+        });
+
+        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>
--- a/contenido/16.html
+++ b/contenido/16.html
@ -0,0 +1,278 @@
+<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,.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,.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"></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: 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 displayQuestion() {
+      if (currentQuestionIndex < questions.length) {
+        currentQuestion = questions[currentQuestionIndex];
+        $('.txt-question').text(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++;
+
+          // Show puzzle piece only for first 3 questions
+          if (correctQuestions <= 3) {
+            $(`#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 {
+            // Show remaining pieces and hide col-actividad
+            $('#pz3,#pz4').show();
+            $('.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>
--- a/contenido/17.html
+++ b/contenido/17.html
@ -0,0 +1,216 @@
+<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'>
+      <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 en la caja y arrástralos hacia el registro que les corresponde.</p>
+              </div>
+            </div>
+          </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,
+      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);
+      }
+    });
+
+    $('.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>
--- a/contenido/18.html
+++ b/contenido/18.html
@ -0,0 +1,347 @@
+<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,.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;
+  }
+
+  .btn-answer {
+    cursor: pointer;
+    border-radius: 10px;
+    box-shadow: 0 0 2px rgba(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;
+  }
+</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 align-items-center gap-4">
+                  <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>
+                  </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">
+          <div id="txt-answers" class="d-flex flex-column justify-content-center align-items-center gap-3 text-start"></div>
+        </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>
--- a/contenido/19.html
+++ b/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"><strong>Inducción al paciente </strong><strong>en Diálisis Peritoneal.</strong></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>
--- a/contenido/ruleta.html
+++ b/contenido/ruleta.html
@ -5,6 +5,11 @@
    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;
@ -15,13 +20,12 @@
  }

  #spin-btn {
-    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    border: none;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
-    border-radius: 50px;
+    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
@ -129,14 +133,14 @@
    <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-6 mb-2">
+          <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">
+            <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>
@ -149,7 +153,7 @@
        </div>
        <div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
          <div class="col-6">
-            <div class="card custom-card bg-verde-pino border-0 shadow">
+            <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">
@ -160,7 +164,7 @@
                    <p class="puntos">0</p>
                    <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: 15%">
+                      <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>
@ -170,10 +174,14 @@
                      </div>
                    </div>
                  </div>
-                  <div class="col-12 text-center">
-                    <div class="mt-3">
-                      <button id="spin-btn">¡GIRAR RULETA!</button>
-                    </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">¡GIRAR RULETA!</button>
                  </div>
                </div>
              </div>
@ -251,12 +259,6 @@
        const puntajeObtenido = puntajes[segmento];
        // Remover puntos automáticos - solo se ganan si responde correctamente

-        // Marcar imagen como visitada
-        if (girosRealizados < maxGiros) {
-          avanceImages[girosRealizados].classList.add("visited");
-          girosRealizados++;
-        }
-
        // Mostrar pregunta
        setTimeout(() => {
          mostrarPregunta(puntajeObtenido);
@ -376,9 +378,16 @@

    function manejarRespuesta(esCorrecta, puntajeEnJuego, pregunta) {
      if (esCorrecta) {
-        good.play();
+        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}`,
@ -387,14 +396,11 @@
          confirmButtonText: "Continuar",
        }).then(() => finalizarTurno());
      } else {
-        bad.play();
-        Swal.fire({
-          title: "Incorrecto",
-          text: `No ganaste puntos. ${pregunta.retroalimentacion_incorrecta}`,
-          icon: "error",
-          target: document.getElementById('wrap-course-content'),
-          confirmButtonText: "Continuar",
-        }).then(() => finalizarTurno());
+        CourseNav.audioController.stopAllSoundsAndPlay(bad);
+        // Solo sonido, sin popup - no cuenta como intento
+        setTimeout(() => {
+          finalizarTurno();
+        }, 1000);
      }
    }

@ -406,7 +412,9 @@
        spinBtn.disabled = true;
        spinBtn.textContent = "¡Juego Completado!";
        CourseNav.setSlideVisited();
-        Completed();
+        setTimeout(() => {
+          Completed();
+        }, 300);
      } else {
        spinBtn.disabled = false;
        spinBtn.textContent = `¡GIRAR RULETA! (${maxGiros - girosRealizados} restantes)`;
--- a/img/13.0.png
+++ b/img/13.0.png
--- a/img/13.1.png
+++ b/img/13.1.png
--- a/img/13.2.png
+++ b/img/13.2.png
--- a/img/14.0.png
+++ b/img/14.0.png
--- a/img/14.1.png
+++ b/img/14.1.png
--- a/img/14.10.png
+++ b/img/14.10.png
--- a/img/14.11.png
+++ b/img/14.11.png
--- a/img/14.12.png
+++ b/img/14.12.png
--- a/img/14.13.png
+++ b/img/14.13.png
--- a/img/14.2.png
+++ b/img/14.2.png
--- a/img/14.3.png
+++ b/img/14.3.png
--- a/img/14.4.png
+++ b/img/14.4.png
--- a/img/14.5.png
+++ b/img/14.5.png
--- a/img/14.6.png
+++ b/img/14.6.png
--- a/img/14.7.png
+++ b/img/14.7.png
--- a/img/14.8.png
+++ b/img/14.8.png
--- a/img/14.9.png
+++ b/img/14.9.png
--- a/img/15.0.png
+++ b/img/15.0.png
--- a/img/15.1.png
+++ b/img/15.1.png
--- a/img/15.2.png
+++ b/img/15.2.png
--- a/img/15.3.png
+++ b/img/15.3.png
--- a/img/17.0.png
+++ b/img/17.0.png
--- a/img/17.1.png
+++ b/img/17.1.png
--- a/img/17.2.png
+++ b/img/17.2.png
--- a/img/18.0.png
+++ b/img/18.0.png
--- a/img/18.1.png
+++ b/img/18.1.png
--- a/img/18.2.png
+++ b/img/18.2.png
--- a/img/18.3.png
+++ b/img/18.3.png
--- a/img/18.4.png
+++ b/img/18.4.png
--- a/img/18.5.png
+++ b/img/18.5.png
--- a/img/19.0.webp
+++ b/img/19.0.webp
--- a/img/19.1.png
+++ b/img/19.1.png
--- a/img/bg13.jpg
+++ b/img/bg13.jpg
--- a/img/puzzle.svg
+++ b/img/puzzle.svg
--- a/imsmanifest.xml
+++ b/imsmanifest.xml
@ -4,9 +4,9 @@
 <manifest xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2" xmlns:imsmd="http://www.imsglobal.org/xsd/imsmd_rootv1p2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2" identifier="MANIFEST-0F067BEFB100E40ED7BAA97302DA82BE" xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
  <organizations default="ORG-1EDF6F092DED4DD64BD8AC6F6508C5C1">
    <organization identifier="ORG-1EDF6F092DED4DD64BD8AC6F6508C5C1" structure="hierarchical">
-      <title>CLIENTE CURSO</title>
+      <title>Vantive</title>
      <item identifier="ITEM-61061EB73379DCAEB5B7392CF860C1E3" isvisible="true" identifierref="RES-BF38A3FCDFBEADE235817159629C457B">
-        <title>CURSO</title>
+        <title>Rotafolio</title>
      </item>
      <metadata>
        <schema>ADL SCORM</schema>