diff --git a/.vscode/course-nav-snippets.code-snippets b/.vscode/course-nav-snippets.code-snippets
new file mode 100644
index 0000000..b4883ae
--- /dev/null
+++ b/.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"
+  }
+}
\ No newline at end of file
diff --git a/.vscode/howler-utils.code-snippets b/.vscode/howler-utils.code-snippets
new file mode 100644
index 0000000..3d4eb4d
--- /dev/null
+++ b/.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"
+  },
+}
diff --git a/.vscode/html.code-snippets b/.vscode/html.code-snippets
new file mode 100644
index 0000000..c2b2d52
--- /dev/null
+++ b/.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"
+  }
+}
\ No newline at end of file
diff --git a/Actividades_Rotafolio_Vantive.xlsx b/Actividades_Rotafolio_Vantive.xlsx
new file mode 100644
index 0000000..e2b2964
Binary files /dev/null and b/Actividades_Rotafolio_Vantive.xlsx differ
diff --git a/config.json b/config.json
index be2481d..67005dc 100644
--- a/config.json
+++ b/config.json
@@ -6,7 +6,7 @@
       "topics": [
         {
           "title": "Portada",
-          "content": "contenido/01.html"
+          "content": "contenido/ruleta.html"
         },
         {
           "title": "Portada",
diff --git a/contenido/ruleta.html b/contenido/ruleta.html
new file mode 100644
index 0000000..c3bd053
--- /dev/null
+++ b/contenido/ruleta.html
@@ -0,0 +1,454 @@
+<style>
+  .fake {
+    background-image: url("img/bg11.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  .wruleta {
+    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
+    cursor: pointer;
+  }
+
+  .wruleta.spinning {
+    pointer-events: none;
+  }
+
+  #spin-btn {
+    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+    border: none;
+    color: white;
+    padding: 15px 30px;
+    font-size: 18px;
+    font-weight: bold;
+    border-radius: 50px;
+    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-6 mb-2">
+            <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="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 del paciente 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-verde-pino 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">
+                    <p class="display-6">Puntos acumulados:</p>
+                    <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="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 class="col-12 text-center">
+                    <div class="mt-3">
+                      <button id="spin-btn">¡GIRAR RULETA!</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-4 text-center">
+            <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";
+    $("body").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;
+      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
+
+        // Marcar imagen como visitada
+        if (girosRealizados < maxGiros) {
+          avanceImages[girosRealizados].classList.add("visited");
+          girosRealizados++;
+        }
+
+        // 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">${opcionesHTML}</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) {
+        good.play();
+        totalPuntos += puntajeEnJuego;
+        puntosDisplay.textContent = totalPuntos;
+        Swal.fire({
+          title: "¡Correcto!",
+          text: `Has ganado ${puntajeEnJuego} puntos. ${pregunta.retroalimentacion_correcta}`,
+          icon: "success",
+          target: document.getElementById('wrap-course-content'),
+          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());
+      }
+    }
+
+    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();
+        Completed();
+      } 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>
diff --git a/img/ruleta/indicador.png b/img/ruleta/indicador.png
new file mode 100644
index 0000000..b4bfa4a
Binary files /dev/null and b/img/ruleta/indicador.png differ
diff --git a/img/ruleta/per1.png b/img/ruleta/per1.png
new file mode 100644
index 0000000..ddcb3fb
Binary files /dev/null and b/img/ruleta/per1.png differ
diff --git a/img/ruleta/pr.png b/img/ruleta/pr.png
new file mode 100644
index 0000000..b4d237e
Binary files /dev/null and b/img/ruleta/pr.png differ
diff --git a/img/ruleta/progress.png b/img/ruleta/progress.png
new file mode 100644
index 0000000..87e3af9
Binary files /dev/null and b/img/ruleta/progress.png differ
diff --git a/img/ruleta/ruleta.png b/img/ruleta/ruleta.png
new file mode 100644
index 0000000..44f9d20
Binary files /dev/null and b/img/ruleta/ruleta.png differ