Manual_Vantive/contenido/07.html

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

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

  .custom-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-width: 1280px; /* Esto limita el ancho total */
    margin: 0 auto;
    width: 100%;
  }

  .card-container {
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    perspective: 1000px!important;
  }

  .card-container.disabled {
    filter: grayscale(1);
    pointer-events: none;
  }
</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 class="col-12 text-center animate__animated animate__bounceInDown">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
            </div>
          </div>
          <div class="col-12 text-center mb-1 animate__animated animate__zoomIn">
            <img src="img/07.0.png" class="img-fluid">
          </div>
          <div class="col-12 text-center mb-3 animate__animated animate__flipInX">
            <p>La línea de transferencia y el catéter deben <strong class="text-lila-claro">mantenerse alejados de gérmenes</strong> que ponen en riesgo su
              salud y vida.</p>
            <p class="mb-0">Por eso, se utiliza una <strong class="text-lila-claro">técnica aséptica para la manipulación de su acceso peritoneal</strong>, ya sea para realizar un recambio, explorar su orificio de salida o en procedimientos realizados por el personal de salud.</p>
          </div>
          <div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
            <div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold">
              Observemos los pasos que debe tomar en cuenta.
            </div>
          </div>
          <div class="col-12 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>
        </div>
      </div>
    </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-11'>
        <div class='row justify-content-center'>
          <div class="col-10 text-center">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
            </div>
          </div>
          <div class="col-10 mb-3">
            <div class="card bg-verde-claro border-0 rounded-4 bx-shadow py-2 px-3">
              <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/book3.png" class="img-fluid">
                    <p class="mb-0"><strong>Instrucciones:</strong> Dé clic en las tarjetas para encontrar los pares y descubrir los pasos que se deben tener en cuenta para realizar una terapia segura en casa.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
              <div class="row-questions custom-grid" id="row-questions">
                <!--Carta 1 Up-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.2.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 2 Up-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.3.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 3 Up-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.4.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 4 Up-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.5.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 5 Up-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.6.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 6 Up-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.7.png" class="img-fluid">
                  </div>
                </div>
              </div>
              <div class="row-answer custom-grid" id="row-answer">
                <!--Carta 1 Down-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.2c.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 2 Down-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.3c.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 3 Down-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.4c.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 4 Down-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.5c.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 5 Down-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.6c.png" class="img-fluid">
                  </div>
                </div>
                <!--Carta 6 Down-->
                <div class="card-container">
                  <div class="front">
                    <img src="img/07.1.png" class="img-fluid">
                  </div>
                  <div class="back">
                    <img src="img/07.7c.png" class="img-fluid">
                  </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">Terapia segura en casa</h2>
              <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>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $('.wrap-course-content').addClass('fake');
    const flip_sound = CourseNav.createSound('audio/flip.mp3');
    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');

    $('.btn-comenzar').click(function (e) {
      e.preventDefault();
      CourseNav.soundClick();
      $('#inicio').hide();
      $('#desarrollo').show();
    });

    // Función para asignar pares a cada tarjeta
    function assignPairs(fatherId) {
      const optionsContainer = document.getElementById(fatherId);
      const optionsArray = Array.from(optionsContainer.children);
      optionsArray.forEach((option, index) => {
        option.setAttribute('data-par', index);
      });
    }

    // Función para mezclar las tarjetas dentro del contenedor especificado
    function randomizeOptions(fatherId) {
      const optionsContainer = document.getElementById(fatherId);
      const optionsArray = Array.from(optionsContainer.children);
      const shuffledOptions = optionsArray.sort(() => Math.random() - 0.5);
      shuffledOptions.forEach(option => optionsContainer.appendChild(option));
    }

    // Inicializar el plugin flip y configurar la lógica del memorama con la restricción de fila
    function initializeFlip() {
      let flippedCards = [];
      let lastFlippedRow = ""; // Para rastrear la última fila girada

      $(".card-container").flip({
        trigger: 'manual' // Control manual del volteo
      });

      $(".card-container").on("click", function () {
        const $card = $(this);
        const currentRow = $card.closest(".row-answer").length > 0 ? "row-answer" : "row-questions";

        // Limitar el giro a una carta por fila y evitar tres giros
        if (flippedCards.length < 2 && (flippedCards.length === 0 || currentRow !== lastFlippedRow)) {
          $card.flip(true);
          flippedCards.push($card);
          lastFlippedRow = currentRow;
          flip_sound.play();
          // Si hay dos cartas volteadas, verificar coincidencia
          if (flippedCards.length === 2) {
            const [firstCard, secondCard] = flippedCards;

            if (firstCard.data("par") === secondCard.data("par")) {
              // Las tarjetas coinciden, dejarlas volteadas y marcar como emparejadas
              firstCard.addClass("disabled");
              secondCard.addClass("disabled");
              // Agregar el efecto de resplandor
              gsap.to(firstCard, {
                duration: 1,
                boxShadow: "0px 0px 20px 10px #fff",
                onComplete: function () {
                  // Quitar el efecto de resplandor después de 2 segundos
                  gsap.to(firstCard, {
                    duration: 1,
                    delay: 1,
                    boxShadow: "0px 0px 0px 0px #fff"
                  });
                }
              });
              // Agregar el efecto de resplandor
              gsap.to(secondCard, {
                duration: 1,
                boxShadow: "0px 0px 20px 10px #fff",
                onComplete: function () {
                  // Quitar el efecto de resplandor después de 2 segundos
                  gsap.to(secondCard, {
                    duration: 1,
                    delay: 1,
                    boxShadow: "0px 0px 0px 0px #fff"
                  });
                }
              });
              CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
              flippedCards = [];
              checkGameCompletion();
            } else {
              CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
              // Las tarjetas no coinciden, voltearlas de nuevo después de un breve retraso
              setTimeout(() => {
                firstCard.flip(false);
                secondCard.flip(false);
                flippedCards = [];
                lastFlippedRow = ""; // Reiniciar el rastreo de fila
              }, 1200);
            }
          }
        }
      });
    }

    // Verificar si todas las tarjetas han sido emparejadas
    function checkGameCompletion() {
      const totalPairs = $(".card-container").length / 2;
      const matchedPairs = $(".card-container.disabled").length / 2;

      if (matchedPairs === totalPairs) {
        setTimeout(isCompleted, 500);
      }
    }

     function isCompleted() {
      $('.wrap-course-content').addClass('fake2').removeClass('fake1');
      $('#desarrollo').hide();
      $('#cierre').show();
      CourseNav.setSlideVisited();
    }

    assignPairs('row-answer');
    assignPairs('row-questions');
    randomizeOptions('row-answer');
    randomizeOptions('row-questions');
    initializeFlip();
  });
</script>