update

2026-02-11 13:38:15 -06:00
parent 3eb2f49012
commit fd779d0724
8 changed files with 1012 additions and 717 deletions
@@ -43,7 +43,7 @@
  .btn-answer {
    cursor: pointer;
    border-radius: 10px;
-    box-shadow: 0 0 2px rgba(0,0,0,.5);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }

  .letter {
@@ -73,34 +73,50 @@
    cursor: pointer;
  }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center">
          <div class="col-12 text-center animate__animated animate__bounceInDown">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
            </div>
          </div>
          <div class="col-12">
            <div class="row justify-content-center align-items-center">
              <div class="col-4 text-center animate__animated animate__zoomIn">
-                <img src="img/03.0.png" class="img-fluid">
+                <img src="img/03.0.png" class="img-fluid" />
              </div>
              <div class="col-6">
                <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
-                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
-                    <p class="mb-0">Cada año, <strong class="text-lila-claro">miles de personas desarrollan enfermedad crónica de los riñones. </strong>Como líder internacional
-                      en el desarrollo de soluciones terapéuticas, Vantive ha desarrollado esta guía para que usted y su familia tengan
-                      <strong class="text-lila-claro">orientación y acompañamiento </strong>durante este proceso de aprendizaje y adaptación.</p>
+                  <div
+                    class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
+                  >
+                    <p class="mb-0">
+                      Cada año,
+                      <strong class="text-lila-claro"
+                        >miles de personas desarrollan enfermedad crónica de los riñones. </strong
+                      >Por eso, hemos desarrollado esta guía para que
+                      <strong class="text-lila-claro">usted y su familia</strong> tengan orientación
+                      y acompañamiento durante este proceso de aprendizaje y adaptación.
+                    </p>
                  </div>
-                  <div class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
-                    <p class="mb-0 text-verde-oscuro fw-bold">Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica de los riñones.</p>
+                  <div
+                    class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
+                  >
+                    <p class="mb-0 text-verde-oscuro fw-bold">
+                      Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica
+                      de los riñones.
+                    </p>
                  </div>
-                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
-                    <div class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                  <div
+                    class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
+                  >
+                    <div
+                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                    >
                      <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                    </div>
                  </div>
@@ -113,15 +129,15 @@
    </div>
  </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <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 id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center">
          <div class="col-11 text-center">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
            </div>
          </div>
          <div class="col-12 px-0 mb-3">
@@ -129,8 +145,11 @@
              <div class="row justify-content-center">
                <div class="col-10">
                  <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book0.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente para ayudar al paciente a llegar a la unidad de diálisis.</p>
+                    <img src="img/book0.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente
+                      para ayudar al paciente a llegar a la unidad de diálisis.
+                    </p>
                  </div>
                </div>
              </div>
@@ -156,25 +175,31 @@
    </div>
  </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
          </div>
          <div class="col-12 mb-3 text-center">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
            </div>
          </div>
          <div class="col-12 text-center mb-3">
            <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
          </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
-            <div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" onclick="CourseNav.reload()">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
+            <div
+              class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+              onclick="CourseNav.reload()"
+            >
              <h5 class="text-white fw-bold mb-0">Reintentar</h5>
            </div>
          </div>
@@ -186,47 +211,51 @@
 <script>
  $(function () {
    "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
    let questions;
    let currentQuestionIndex = 0;
    let currentQuestion;
    let correctQuestions = 0;
    let maxQuestions = 5;
    let currentFichaIndex = 0;
-    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
-    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
+    const good = CourseNav.createSound("audio/feedback-correct.mpeg");

    function loadSVG() {
-      $.get('img/laberinto.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');
-        svg.find('[id^="ficha"]').hide().addClass('ficha-move');
-        svg.find('#ficha0').show();
-      }, 'xml');
+      $.get(
+        "img/laberinto.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");
+          svg.find('[id^="ficha"]').hide().addClass("ficha-move");
+          svg.find("#ficha0").show();
+        },
+        "xml"
+      );
    }

-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
      e.preventDefault();
      CourseNav.soundClick();
-      $('.wrap-course-content').addClass('fake1').removeClass('fake');
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
+      $("#inicio").hide();
+      $("#desarrollo").show();
    });

-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const urlExcelFile = "Actividades_Manual_Vantive.xlsx";

    function readExcelFile(url, callback) {
      var xhr = new XMLHttpRequest();
-      xhr.open('GET', url, true);
-      xhr.responseType = 'arraybuffer';
+      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 => {
+        workbook.SheetNames.forEach((sheetName) => {
          var sheet = workbook.Sheets[sheetName];
          result[sheetName] = XLSX.utils.sheet_to_json(sheet);
        });
@@ -236,13 +265,13 @@
    }

    function procesarPreguntas(data) {
-      const preguntas = data.map(fila => {
+      const preguntas = data.map((fila) => {
        const opciones = [];
-        Object.keys(fila).forEach(key => {
-          if (key.startsWith('opcion')) {
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion")) {
            opciones.push({
              text: fila[key].trim(),
-              correct: key === 'opcion_c'
+              correct: key === "opcion_c",
            });
          }
        });
@@ -250,7 +279,7 @@
          pregunta: fila.pregunta.trim(),
          opciones: opciones,
          retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
        };
      });
      return preguntas;
@@ -266,9 +295,9 @@

    function displayQuestion() {
      currentQuestion = questions[currentQuestionIndex];
-      $('.txt-question').text(currentQuestion.pregunta);
+      $(".txt-question").text(currentQuestion.pregunta);

-      $('.content-answers').empty();
+      $(".content-answers").empty();

      // Shuffle answers for current question
      const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
@@ -280,60 +309,63 @@
            <div class="txt-answer ps-3">${opcion.text}</div>
          </div>
        `;
-        $('.content-answers').append(answerHtml);
+        $(".content-answers").append(answerHtml);
      });

      initializeAnswers();
    }

    function initializeAnswers() {
-      $('.btn-answer').off('click').on('click', function() {
-        const isCorrect = $(this).data('correct');
+      $(".btn-answer")
+        .off("click")
+        .on("click", function () {
+          const isCorrect = $(this).data("correct");

-        CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
+          CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);

-        Swal.fire({
-          target: document.getElementById('wrap-course-content'),
-          imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
-          showConfirmButton: true,
-          customClass: {
-            popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-            confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
-          },
-          confirmButtonText: "Cerrar",
-          backdrop: "rgba(65, 60, 60, .95)",
-          width: "35em",
-          didClose: () => {
-            if (isCorrect) {
-              correctQuestions++;
-              currentFichaIndex++;
-              $('#svg-container').find('[id^="ficha"]').hide();
-              $('#svg-container').find(`#ficha${currentFichaIndex}`).show();
-            }
-            currentQuestionIndex++;
+          Swal.fire({
+            target: document.getElementById("wrap-course-content"),
+            imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
+            showConfirmButton: true,
+            customClass: {
+              popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+              confirmButton:
+                "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
+            },
+            confirmButtonText: "Cerrar",
+            backdrop: "rgba(65, 60, 60, .95)",
+            width: "35em",
+            didClose: () => {
+              if (isCorrect) {
+                correctQuestions++;
+                currentFichaIndex++;
+                $("#svg-container").find('[id^="ficha"]').hide();
+                $("#svg-container").find(`#ficha${currentFichaIndex}`).show();
+              }
+              currentQuestionIndex++;

-            if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) {
-              displayQuestion();
-            } else {
-              setTimeout(() => {
-                isCompleted();
-              }, 500);
-            }
-          }
+              if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) {
+                displayQuestion();
+              } else {
+                setTimeout(() => {
+                  isCompleted();
+                }, 500);
+              }
+            },
+          });
        });
-      });
    }

    function isCompleted() {
      const percentage = (correctQuestions / maxQuestions) * 100;
-      $('.wrap-course-content').addClass('fake2').removeClass('fake1');
-      $('#desarrollo').hide();
-      $('#cierre').show();
+      $(".wrap-course-content").addClass("fake2").removeClass("fake1");
+      $("#desarrollo").hide();
+      $("#cierre").show();

      CourseNav.setSlideVisited();

      if (percentage < 80) {
-        $('.col-reintentar').show();
+        $(".col-reintentar").show();
      }
    }