Manual_Vantive/contenido/09.html

<style>
  .fake {
    background-image: url(img/bg02.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;
  }

  .drag-list,
  .content-drags {
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
  }

  .drag-sortable {
    background: #f3e9df;
    border-radius: 1.25rem;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem;
    font-weight: 500;
    border: none;
    position: relative;
    transition:
      box-shadow 0.16s,
      transform 0.12s;
    cursor: grab;
    user-select: none;
  }

  .drag-sortable:active,
  .drag-sortable.ui-sortable-helper {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    transform: scale(1.018);
    cursor: grabbing;
  }

  .drag-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d9c5d7;
    color: #72256b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    border: 2.5px solid #72256b;
    box-shadow: 0 2px 8px rgba(225, 0, 107, 0.1);
    flex-shrink: 0;
    margin-right: 0.7rem;
    transition:
      background 0.18s,
      color 0.16s;
  }

  /* Success: número en verde con fondo y borde */
  .drag-number-correct {
    background: #e8fdf4 !important;
    color: #30c48d !important;
    border-color: #30c48d !important;
    box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important;
    animation: correcto-bounce 0.7s;
  }

  @keyframes correcto-bounce {
    0% {
      transform: scale(1);
    }

    30% {
      transform: scale(1.18);
    }

    55% {
      transform: scale(0.96);
    }

    80% {
      transform: scale(1.05);
    }

    100% {
      transform: scale(1);
    }
  }

  .drag-icon {
    color: #72256b;
    font-size: 1.35rem;
    margin-right: 0.9rem;
    cursor: grab;
    flex-shrink: 0;
    font-weight: 600;
  }

  .drag-placeholder {
    background: #fff6fc !important;
    border: 2px dashed #e1006b !important;
    min-height: 60px;
  }

  .fa-hand-pointer:before {
    color: #fff;
  }

  .fa-duotone.fa-swap-opacity:before,
  .fa-duotone:after,
  .fa-swap-opacity .fa-duotone:before,
  .fa-swap-opacity .fad:before,
  .fad.fa-swap-opacity:before,
  .fad:after {
    opacity: 1;
  }

  /* Animación de la mano */
  .drag-hand-animate {
    color: #72256b;
    font-size: 2.1rem;
    margin-right: 1rem;
    animation: hand-down-up 1.2s infinite cubic-bezier(0.62, -0.01, 0.43, 1.01);
    display: inline-flex;
    align-items: center;
  }

  @keyframes hand-down-up {
    0% {
      transform: translateY(-7px) scale(1.03);
    }

    18% {
      transform: translateY(5px) scale(1.02);
    }

    35% {
      transform: translateY(-4px) scale(1.04);
    }

    50% {
      transform: translateY(4px) scale(1);
    }

    68% {
      transform: translateY(-5px) scale(1.01);
    }

    85% {
      transform: translateY(6px) scale(0.99);
    }

    100% {
      transform: translateY(-7px) scale(1.03);
    }
  }

  .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">
          <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-3 opacity-100" />
            </div>
          </div>
          <div class="col-12 mb-3 text-center">
            <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
          </div>
          <div class="col-12">
            <div class="row justify-content-center align-items-center">
              <div class="col-6">
                <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
                  <div
                    class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center"
                  >
                    <p class="mb-0">
                      El jabón que utilice para el lavado de manos de preferencia debe ser
                      <b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea
                      exclusivo para cuando usted realice los recambios en casa.
                    </p>

                    <p>
                      <b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para
                      secar sus manos.
                    </p>

                    <p>
                      Sus manos, después de un correcto lavado, se encontrarán
                      <b class="text-lila-claro">limpias, pero nunca estériles.</b>
                    </p>
                  </div>
                  <div
                    class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
                  >
                    <p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
                  </div>
                  <div
                    class="position-relative w-100 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 class="col-4 text-center animate__animated animate__zoomIn">
                <img src="img/09.0.png" class="img-fluid" />
              </div>
            </div>
          </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">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-11 mb-3 text-center">
            <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
          </div>
          <div class="col-12 px-0 mb-3">
            <div class="card bg-verde-claro border-0 rounded-0 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/book0.png" class="img-fluid" />
                    <p class="mb-0">
                      <strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
                      colocarlos en el orden correcto.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-11">
            <div class="row justify-content-center align-items-center">
              <div class="col-12 anim1">
                <div
                  class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
                >
                  <div class="drag-sortable" data-order="0">
                    <span class="drag-number"></span>
                    <span class="drag-icon">&#8597;</span>
                    Mójese las manos y aplique suficiente jabón para cubrir toda su superficie.
                    Frótelas entre sí.
                  </div>
                  <div class="drag-sortable" data-order="1">
                    <span class="drag-number"></span>
                    <!-- MANO CON ANIMACIÓN -->
                    <span class="drag-hand-animate"
                      ><i class="fa-duotone fa-solid fa-hand-pointer"></i
                    ></span>
                    <span class="drag-icon">&#8597;</span>
                    Frótese la palma de la mano derecha contra el dorso de la mano izquierda
                    entrelazando los dedos.
                  </div>
                  <div class="drag-sortable" data-order="2">
                    <span class="drag-number"></span>
                    <span class="drag-icon">&#8597;</span>
                    Frótese las palmas de las manos entre sí con los dedos entrelazados.
                  </div>
                  <div class="drag-sortable" data-order="3">
                    <span class="drag-number"></span>
                    <span class="drag-icon">&#8597;</span>
                    Frótese el dorso de los dedos de una mano con la palma de la mano opuesta.
                  </div>
                  <div class="drag-sortable" data-order="4">
                    <span class="drag-number"></span>
                    <span class="drag-icon">&#8597;</span>
                    Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un
                    movimiento de rotación y viceversa.
                  </div>
                  <div class="drag-sortable" data-order="5">
                    <span class="drag-number"></span>
                    <span class="drag-icon">&#8597;</span>
                    Frótese la punta de los dedos de la mano derecha contra la palma de la mano
                    izquierda.
                  </div>
                  <div class="drag-sortable" data-order="6">
                    <span class="drag-number"></span>
                    <span class="drag-icon">&#8597;</span>
                    Enjuáguese las manos y séquelas con una toalla de un solo uso.
                  </div>
                  <div class="drag-sortable" data-order="7">
                    <span class="drag-number"></span>
                    <span class="drag-icon">&#8597;</span>
                    Utilice la toalla para cerrar el grifo.
                  </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 mb-3 text-center">
            <h4 class="fw-bold text-verde-pino">Lavado de manos</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 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();
      mezclarElementos();
    });

    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 mezclarElementos() {
      const $container = $(".content-drags");
      const $elements = $container.children(".drag-sortable").detach();
      const elementosMezclados = shuffleArray($elements.toArray());
      $container.append(elementosMezclados);
      actualizarNumerosDrag();
      //resaltarDragCorrectos(); // <- Puedes activar la funcionalidad aquí
    }

    function actualizarNumerosDrag() {
      $(".content-drags .drag-sortable").each(function (i) {
        $(this)
          .find(".drag-number")
          .text(i + 1);
      });
    }

    // ----------- FUNCIÓN OPCIONAL: INDICAR CORRECTOS -----------
    function resaltarDragCorrectos() {
      $(".content-drags .drag-sortable").each(function (index) {
        const correcto = parseInt($(this).data("order")) === index;
        $(this).find(".drag-number").toggleClass("drag-number-correct", correcto);
      });
    }
    // ----------------------------------------------------------

    // Oculta la mano cuando se haga cualquier drag
    let handRemoved = false;
    $(".content-drags").sortable({
      update: function () {
        actualizarNumerosDrag();
        // Activa aquí para resaltar correctos tras cada movimiento:
        resaltarDragCorrectos(); // <<<<<< Activa/desactiva aquí
        verificarOrden();
      },
      cursor: "grabbing",
      placeholder: "drag-placeholder",
      opacity: 0.82,
      tolerance: "pointer",
      scroll: false,
      helper: "clone",
      sort: function (event, ui) {
        var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
        var offset = ui.helper.offset();
        var mouseX = event.pageX;
        var mouseY = event.pageY;
        ui.helper.css({
          left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 4,
          top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
        });
      },
      start: function (event, ui) {
        ui.helper.css("transform", "scale(0.95)");
        if (!handRemoved) {
          $(".drag-hand-animate").remove();
          handRemoved = true;
        }
      },
      stop: function (event, ui) {
        ui.item.css("transform", "scale(1)");
      },
    });

    actualizarNumerosDrag();

    function verificarOrden() {
      const $elementos = $(".content-drags .drag-sortable");
      let todosCorrectos = true;

      $elementos.each(function (index) {
        const ordenActual = parseInt($(this).data("order"));
        if (ordenActual !== index) {
          todosCorrectos = false;
          return false;
        }
      });

      if (todosCorrectos) {
        $(".content-drags").sortable("disable");
        mostrarPopup(true);
      }
    }

    function mostrarPopup(isCorrect) {
      CourseNav.audioController.stopAllSoundsAndPlay(
        isCorrect ? feedbackcorrect : feedbackincorrect
      );
      Swal.fire({
        target: document.getElementById("wrap-course-content"),
        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
        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: "Cerrar",
        backdrop: "rgba(65, 60, 60, .95)",
        width: "35em",
        didClose: () => {
          if (isCorrect) {
            finalizarActividad();
          }
        },
      });
    }

    function finalizarActividad() {
      $(".wrap-course-content").addClass("fake1").removeClass("fake");
      $("#desarrollo").hide();
      $("#cierre").show();
      CourseNav.setSlideVisited();
    }
  });
</script>