Rotafilio_Vantive/contenido/11_fixed.html

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

  .hr-style {
    opacity: 1;
    width: 40%;
  }

  .bg-custom {
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  }

  .content-cards {
    width: 100%;
  }

  .content-cards .persoSwiper {
    width: 326px;
    height: 326px;
  }
</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 animate__animated animate__bounceInDown">
            <h2 class="text-center fw-bold text-primary">Características del sitio de salida</h2>
            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
          </div>
          <div class="col-12 px-0 mb-1 animate__animated animate__lightSpeedInLeft">
            <div class="card bg-white border-0 my-2 rounded-0 bg-custom px-3 py-2 text-center">
              <div class="d-flex justify-content-center align-items-center flex-row gap-2">
                <img src="img/3.1.png" class="img-fluid mx-3">
                <div class="parrafos text-start">
                  <p class="mb-2"><strong>Instrucciones:</strong> Observa las imágenes del sitio de salida que se presentan en las
                    tarjetas.</p>
                  <p class="mb-0">Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si
                    crees que no está sano,
                    desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="row justify-content-center">
              <div class="col-12 mb-2">
                <div class="d-flex justify-content-center align-items-center gap-2 flex-row indicadores-avance"></div>
              </div>
              <div class="col-12">
                <div class="position-relative content-cards text-center">
                  <div class="swiper persoSwiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="img/11.0.png" class="img-fluid">
                      </div>
                      <div class="swiper-slide">
                        <img src="img/11.1.png" class="img-fluid">
                      </div>
                      <div class="swiper-slide">
                        <img src="img/11.2.png" class="img-fluid">
                      </div>
                      <div class="swiper-slide">
                        <img src="img/11.3.png" class="img-fluid">
                      </div>
                      <div class="swiper-slide">
                        <img src="img/11.4.png" class="img-fluid">
                      </div>
                      <div class="swiper-slide">
                        <img src="img/11.5.png" class="img-fluid">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </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 respuestasCorrectas = ['true','true','false','false','false'];

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

    // Shuffle slides and answers
    const slides = Array.from(document.querySelectorAll('.swiper-slide'));
    const slidesData = slides.map((slide, index) => ({
      element: slide,
      answer: respuestasCorrectas[index]
    }));

    const shuffledData = shuffleArray(slidesData);
    const wrapper = document.querySelector('.swiper-wrapper');
    wrapper.innerHTML = '';

    const shuffledAnswers = [];
    shuffledData.forEach((item, index) => {
      wrapper.appendChild(item.element);
      shuffledAnswers[index] = item.answer;
    });

    let startX = 0;
    let currentIndex = 0;

    const swiper = new Swiper('.persoSwiper', {
      effect: 'cards',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      initialSlide: 0,
      allowTouchMove: false,
      cardsEffect: {
        slideShadows: false,
        perSlideOffset: 10,
        perSlideRotate: 2,
      },
      on: {
        slideChange: function () {
        }
      }
    });

    const swiperEl = document.querySelector('.persoSwiper');

    swiperEl.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX;
    });

    swiperEl.addEventListener('touchend', (e) => {
      const endX = e.changedTouches[0].clientX;
      const diff = startX - endX;
      const threshold = 50;

      if (Math.abs(diff) > threshold) {
        const userAnswer = diff > 0 ? 'false' : 'true';
        const correctAnswer = shuffledAnswers[currentIndex];

        if (userAnswer === correctAnswer) {
          CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
          currentIndex++;
          if (currentIndex < shuffledAnswers.length) {
            swiper.slideNext();
          }
        } else {
          CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
        }
      }
    });
  });
</script>