update

contenido/12.html

@@ -0,0 +1,186 @@
+<style>
+  .fake {
+    background-image: url(img/bg12.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .hr-style {
+    opacity: 1;
+    width: 40%;
+  }
+
+  .btn-respuesta {
+    max-width: 500px;
+  }
+</style>
+<div class='page-sco py-2 py-md-0 h-100'>
+  <div class='container h-100'>
+    <div class='row justify-content-center align-items-center h-100'>
+      <div class='col-12'>
+        <div class='row justify-content-center'>
+          <div class="col-10 mb-2">
+            <h2 class="text-center fw-bold text-primary">Cuidados del sitio de salida y complicaciones</h2>
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+          </div>
+          <div class="col-10 px-0 mb-1">
+            <div class="card bg-lila-claro border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
+              <div class="d-flex justify-content-center align-items-center flex-row">
+                <img src="img/12.3.png" class="img-fluid mx-3">
+                <p class="mb-0 text-white text-start">Lee lo que opinan dos doctores sobre los cuidados del sitio de salida y las complicaciones que pueden surgir si no se
+                  hace correctamente. Analiza cuidadosamente sus argumentos y elige quién tiene la razón.</p>
+              </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="d-none">
+  <div id="pop0">
+    <div class="container-fluid">
+      <div class=" w-100 text-center">
+        <img src="img/3.5.png" class="img-fluid">
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-12 text-center mb-2">
+          <h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
+        </div>
+        <div class="col-12 text-center">
+          <p class="mb-0">Has concluido la actividad.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('.wrap-course-content').addClass('fake');
+    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+
+    const imgPerso = ['img/12.0.png','img/12.1.png'];
+    const urlExcelFile = 'versus.xlsx';
+    let versusData;
+    let currentQuestionIndex = 0;
+
+    function readExcelFile(url, callback) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', url, true);
+      xhr.responseType = 'arraybuffer';
+      xhr.onload = function (e) {
+        var arrayBuffer = xhr.response;
+        var data = new Uint8Array(arrayBuffer);
+        var workbook = XLSX.read(data, { type: "array" });
+        var result = {};
+        workbook.SheetNames.forEach(sheetName => {
+          var sheet = workbook.Sheets[sheetName];
+          result[sheetName] = XLSX.utils.sheet_to_json(sheet);
+        });
+        callback(result);
+      };
+      xhr.send();
+    }
+
+    function shuffleArray(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+      return array;
+    }
+
+    function createVersusStructure() {
+      const container = $('#puzzle-versus');
+
+      if (!versusData || currentQuestionIndex >= versusData.length) {
+        console.log('No hay más datos disponibles');
+        return;
+      }
+
+      const data = versusData[currentQuestionIndex];
+      console.log('Pregunta actual:', data);
+
+      const shuffledImages = shuffleArray([...imgPerso]);
+      const responses = [data.opcion, data.opcion_c];
+      const randomOrder = Math.random() < 0.5;
+
+      const leftResponse = randomOrder ? responses[0] : responses[1];
+      const rightResponse = randomOrder ? responses[1] : responses[0];
+      const leftIsCorrect = randomOrder ? true : false; // opcion_c es la correcta
+
+      const structure = `
+        <div class="btn-respuesta" data-correct="${leftIsCorrect}">
+          <div class="d-flex flex-column justify-content-center align-items-center gap-0">
+            <img src="${shuffledImages[0]}" alt="personaje">
+            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta">${leftResponse || ''}</div>
+          </div>
+        </div>
+        <img src="img/12.2.png" class="img-fluid">
+        <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>
+        </div>
+      `;
+
+      container.html(structure);
+
+      $('.btn-respuesta').click(function() {
+        const isCorrect = $(this).data('correct');
+
+        if (isCorrect) {
+          feedbackcorrect.play();
+          currentQuestionIndex++;
+
+          if (currentQuestionIndex >= versusData.length) {
+            checkAllCompleted();
+          } else {
+            setTimeout(() => createVersusStructure(), 1000);
+          }
+        } else {
+          feedbackincorrect.play();
+        }
+      });
+    }
+
+    function checkAllCompleted() {
+      setTimeout(() => {
+        const html = $("#pop0").html();
+        Swal.fire({
+          html: html,
+          target: "body",
+          customClass: {
+            popup: 'pop_html_style border border-3 border-primary rounded-4',
+            confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
+          },
+          confirmButtonText: "Cerrar",
+          showConfirmButton: true,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          backdrop: "rgba(65, 60, 60, .95)",
+          width: "35em",
+          didClose: () => {
+            CourseNav.setSlideVisited();
+            $(".card-container2").addClass('disabled');
+          }
+        });
+      }, 250);
+    }
+
+    // Cargar datos del Excel
+    readExcelFile(urlExcelFile, function(data) {
+      const sheetData = data[Object.keys(data)[0]];
+      versusData = sheetData;
+      console.log('Datos cargados:', versusData);
+      createVersusStructure();
+    });
+  });
+</script>