Rotafilio_Vantive/contenido/ruleta.html

<style>
  .fake {
    background-image: url('img/bg11.jpg');
    background-size: cover;
    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;
  }

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

  /* 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-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 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>
              <div><b>Instrucciones:</b> Da clic en la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación 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-secondary 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">
                    <h4>Puntos acumulados:</h4>
                    <h2 class="puntos">0</h2>
                    <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: 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>
                        <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>
              </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/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';
    $('.wrap-course-content').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;
      spinBtn.classList.remove('animate__animated', 'animate__pulse', 'animate__infinite');
      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

        // 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 mb-3">${opcionesHTML}</div>
        <div class="col-12 text-center">
            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
          </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) {
        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}`,
          icon: 'success',
          target: document.getElementById('wrap-course-content'),
          confirmButtonText: 'Continuar',
        }).then(() => {
          finalizarTurno();
          if (girosRealizados < maxGiros) {
            spinBtn.classList.add('animate__animated', 'animate__pulse', 'animate__infinite');
          }
        });
      } else {
        CourseNav.audioController.stopAllSoundsAndPlay(bad);
        // Solo sonido, el usuario puede seguir intentando
      }
    }

    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();
        setTimeout(() => {
          Completed();
        }, 300);
      } 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>