Manual_Vantive/contenido/12.html

<style>
  .fake {
    background-image: url(img/bg01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .fake1 {
    background-image: url(img/bg02.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .fake2 {
    background-image: url(img/bg03.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .btn-comenzar {
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
  }

  .wruleta {
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
  }

  .wruleta.spinning {
    pointer-events: none;
  }

  #spin-btn {
    border: none;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }

  #spin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }

  #spin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .avance {
    width: calc(100% / 6);
  }

  .avance img {
    width: 70%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    filter: grayscale(1);
    transition: all 0.5s ease-in-out;
  }

  .avance img.visited {
    filter: grayscale(0);
  }

  .no-overflow {
    overflow: hidden;
  }

  .btn-answer {
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    background-color: #f8f9fa;
    color: #333;
  }

  .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;
  }

  .btn-reintentar {
    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 align-items-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">Autocuidado</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
            </div>
          </div>
          <div class="col-12 mb-3 text-center">
            <h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
          </div>
          <div class="col-5 text-center mb-3 animate__animated animate__flipInX">
            <div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
              <p><b class="text-lila-claro">La alimentación</b> balanceada es muy importante. Como parte de su
                tratamiento <b class="text-lila-claro">se debe personalizar</b> con base en sus necesidades.</p>
              <p>También, es necesario <strong class="text-lila-claro">mantener un estilo de vida activo </strong>para
                el
                buen funcionamiento de músculos,
                huesos y corazón.</p>
              <div class="w-100 position-relative text-center">
                <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>
            </div>
          </div>
          <div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
            <img src="img/12.0.png" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
  <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 mb-5'>
          <div class="col-11 text-center animate__animated animate__bounceInDown">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Autocuidado</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
            </div>
          </div>
          <div class="col-12 mb-3 text-center">
            <h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
          </div>
          <div class="col-12 px-0 mb-3">
            <div class="row">
              <div class="col-8">
                <div class="card bg-verde-claro border-0 bx-shadow py-2 px-3"
                  style="border-radius: 15px;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                  <div class="row justify-content-start">
                    <div class="col-12">
                      <div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
                        <img src="img/book1.png" class="img-fluid">
                        <p class="mb-0"><strong>Instrucciones:</strong> Dé clic en la ruleta y conteste correctamente la
                          pregunta acerca de su alimentación o actividad física para ganar los puntos.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-11">
            <div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
              <div class="col-6">
                <div class="card custom-card bg-secondary border-0 shadow">
                  <div class="card-body">
                    <div class="row justify-content-center">
                      <div class="col-4 text-center">
                        <img src="img/per1.png" alt="" class="img-fluid" />
                      </div>
                      <div class="col-8 text-white text-center">
                        <h4>Puntos acumulados:</h4>
                        <h2 class="puntos">0</h2>
                        <div class="card flat">
                          <img src="img/progress.png" alt="" class="img-fluid" />
                          <div
                            class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100"
                            style="top: 22%">
                            <div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
                            <div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
                            <div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
                            <div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
                            <div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
                            <div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
                            <div class="avance"><img src="img/pr.png" class="img-fluid" alt="" /></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="position-relative w-100">
                  <div class="row">
                    <div class="col-12 text-center">
                      <div class="mt-3">
                        <button id="spin-btn"
                          class="bg-verde-oscuro text-white border border-4 border-white animate__animated animate__pulse animate__infinite">¡GIRAR
                          RULETA!</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-4 text-center" style="margin-top: -30px;">
                <div class="card flat justify-content-center align-items-center d-inline-flex">
                  <div class="indicador position-absolute start-50 translate-middle-x"
                    style="z-index: 9999 !important; top: -1em">
                    <img src="img/indicador.png" alt="" style="transform: rotate(90deg)" />
                  </div>
                  <div class="wruleta z-2" id="ruleta-wheel">
                    <img src="img/ruleta.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </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 class="row justify-content-center">
          <div class="col-12 text-center mb-3">
            <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">Autocuidado</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
            </div>
          </div>
          <div class="col-12 mb-3 text-center">
            <h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
          </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()">
              <h5 class="text-white fw-bold mb-0">Reintentar</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $('.wrap-course-content').addClass('fake');

    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 = 7;

    const ruletaWheel = document.getElementById("ruleta-wheel");
    const spinBtn = document.getElementById("spin-btn");
    const puntosDisplay = document.querySelector(".puntos");
    const avanceImages = document.querySelectorAll(".avance img");

    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
    const good = CourseNav.createSound("audio/feedback-correct.mpeg");

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

    function girarRuleta() {
      if (isSpinning || girosRealizados >= maxGiros) return;

      isSpinning = true;
      spinBtn.disabled = true;
      spinBtn.classList.remove("animate__animated", "animate__pulse", "animate__infinite");
      ruletaWheel.classList.add("spinning");
      document.getElementById("coursenav-main-content").classList.add("no-overflow");

      const vueltas = 3 + Math.random() * 2;
      const anguloFinal = Math.random() * 360;
      const rotacionTotal = rotacionActual + vueltas * 360 + anguloFinal;

      ruletaWheel.style.transform = `rotate(${rotacionTotal}deg)`;
      rotacionActual = rotacionTotal;

      setTimeout(() => {
        const anguloNormalizado = rotacionActual % 360;
        const segmento = Math.floor((anguloNormalizado + 15) / 30) % 12;
        const puntajeObtenido = puntajes[segmento];

        setTimeout(() => {
          mostrarPregunta(puntajeObtenido);
        }, 500);
      }, 4000);
    }

    spinBtn.addEventListener("click", girarRuleta);

    const urlExcelFile = "Actividades_Manual_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 questions = [];

    function mostrarPregunta(puntajeEnJuego) {
      if (questions.length === 0) return;

      const indiceAleatorio = Math.floor(Math.random() * questions.length);
      const preguntaAleatoria = questions[indiceAleatorio];
      questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
      const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);

      let opcionesHTML = '';
      opcionesBarajadas.forEach((opcion, index) => {
        opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntajeEnJuego}">
              <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>`;
      });

      Swal.fire({
        target: document.getElementById('wrap-course-content'),
        html: `
          <div class="text-center mb-3">
            <h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
            <p class="text-muted">Puntos en juego: <strong>${puntajeEnJuego}</strong></p>
          </div>
          <div class="content-answers">
            ${opcionesHTML}
          </div>
        `,
        showConfirmButton: false,
        allowOutsideClick: false,
        customClass: {
          popup: 'swal-wide bg-white border-0 rounded-3 shadow'
        },
        backdrop: "rgba(65, 60, 60, .95)",
        width: "50em",
        didOpen: () => {
          $('.btn-answer').click(function () {
            const isCorrect = $(this).data('correct') === true;
            const puntos = $(this).data('puntos');

            $('.btn-answer').off('click').css('pointer-events', 'none');

            if (isCorrect) {
              $(this).addClass('bg-success text-white');
              totalPuntos += puntos;
              actualizarPuntos(true);
            } else {
              actualizarPuntos(false);
              $(this).addClass('bg-danger text-white');
              //$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
            }

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

            setTimeout(() => {
              Swal.close();
              mostrarFeedback(isCorrect, preguntaAleatoria);
            }, 500);
          });
        }
      });
    }

    function mostrarFeedback(isCorrect, pregunta) {
      const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;

      Swal.fire({
        target: document.getElementById('wrap-course-content'),
        imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
        text: retroalimentacion || '',
        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: "Continuar",
        backdrop: "rgba(65, 60, 60, .95)",
        width: "35em",
        didClose: () => {
          continuarJuego();
        }
      });
    }

    function continuarJuego() {
      girosRealizados++;

      if (girosRealizados >= maxGiros) {
        setTimeout(() => {
          finalizarJuego();
        }, 700);
      } else {
        isSpinning = false;
        spinBtn.disabled = false;
        spinBtn.classList.add("animate__animated", "animate__pulse", "animate__infinite");
        ruletaWheel.classList.remove("spinning");
        document.getElementById("coursenav-main-content").classList.remove("no-overflow");
      }
    }

    function actualizarPuntos(isCorrect) {
      puntosDisplay.textContent = totalPuntos;

      if (isCorrect && avanceImages[girosRealizados]) {
        avanceImages[girosRealizados].classList.add('visited');
      }
    }

    function finalizarJuego() {
      const puntajeMaximo = 7 * 700; // 7 giros × 700 puntos máximos
      const porcentaje = (totalPuntos / puntajeMaximo) * 100;
      const aprobado = porcentaje >= 80;

      $('.wrap-course-content').addClass('fake2').removeClass('fake1');

      CourseNav.setSlideVisited();

      if (aprobado) {
        $('#desarrollo').hide();
        $('#cierre').show();
      } else {
        $('.col-reintentar').show();
        $('#desarrollo').hide();
        $('#cierre').show();
      }
    }



    readExcelFile(urlExcelFile, function (data) {
      const hojaDatos = data["Diapositiva 24"];
      questions = shuffleArray(procesarPreguntas(hojaDatos));
    });
  });
</script>