Manual_Vantive/contenido/04.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 {
    overflow: hidden;
    width: 1320px;
    height: 500px;
    margin: 0 auto;
  }

  .img-sotable {
    cursor: move;
  }

  .img-sotable.disabled {
    pointer-events: none;
    background-color: #84a816;
  }
</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">Inicio en la terapia de diálisis peritoneal</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
            </div>
          </div>
          <div class="col-12">
            <div class="row justify-content-center align-items-center">
              <div class="col-3 text-center animate__animated animate__zoomIn">
                <img src="img/04.0.png" class="img-fluid" />
              </div>
              <div class="col-6">
                <div class="card bg-verde-claro border-0 rounded-3 p-0 bx-shadow">
                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
                    <p class="mb-0 text-verde-oscuro">
                      La diálisis peritoneal es un tratamiento que ayuda a eliminar productos de desecho y exceso de
                      líquidos del organismo mediante el uso del peritoneo, una membrana que recubre los órganos
                      abdominales y actúa como filtro natural durante el intercambio del líquido de diálisis.<sup
                        class="fw-bold"
                        >2</sup
                      >
                    </p>
                    <!-- <p>Su tratamiento de diálisis peritoneal (DP) equilibra líquidos y elimina compuestos de desecho al <strong class="text-primary">filtrar la sangre
                        utilizando una membrana interna llamada peritoneo</strong>.</p>
                    <p class="mb-0">El peritoneo, envuelve a la mayoría de los órganos abdominales y forma un espacio interno llamado: <strong class="text-primary">cavidad
                        peritoneal.</strong></p> -->
                  </div>
                  <!-- <div
                    class="position-relative w-100 bg-verde-claro-2 text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
                    <p class="mb-0 text-verde-oscuro">El peritoneo, envuelve a la mayoría de sus órganos abdominales y forma un espacio interno llamado <strong>recambio</strong>.
                      <p class="mb-0 text-verde-oscuro">
                        La diálisis peritoneal es un tratamiento que ayuda a eliminar productos de desecho y exceso de líquidos del organismo mediante el uso del peritoneo, una membrana que recubre los órganos abdominales y actúa como filtro natural durante el intercambio del líquido de diálisis.<sup class="fw-bold">2</sup>
                      </p>
                    </p>
                  </div> -->
                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-1s">
                    <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>
    </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" id="col-sortable">
        <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">Inicio en la terapia de diálisis peritoneal</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-white border-0 rounded-3 bx-shadow py-2 px-3">
              <div class="row justify-content-center">
                <div class="col-12">
                  <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 recambio para colocarlos en el orden
                      correcto.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 mb-2 text-center">
            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
          </div>
          <div class="col-12 col-actividad">
            <div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
              <div class="img-sotable" data-order="0">
                <img src="img/04.1.webp" class="img-fluid" />
              </div>
              <div class="img-sotable" data-order="1">
                <img src="img/04.2.webp" class="img-fluid" />
              </div>
              <div class="img-sotable" data-order="2">
                <img src="img/04.3.webp" class="img-fluid" />
              </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">Inicio en la terapia de diálisis peritoneal</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 bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
    const good = CourseNav.createSound("audio/feedback-correct.mpeg");

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

    function shuffleArray(array) {
      let shuffled;
      do {
        shuffled = [...array];
        for (let i = shuffled.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }
      } while (isInCorrectOrder(shuffled));
      return shuffled;
    }

    function isInCorrectOrder(array) {
      return array.every((item, index) => parseInt($(item).data("order")) === index);
    }

    // Shuffle elements
    const $sortables = $(".img-sotable");
    const shuffled = shuffleArray($sortables.toArray());
    $(".custom-grid").empty().append(shuffled);

    // Initialize sortable
    $(".custom-grid").sortable({
      items: ".img-sotable",
      cursor: "grabbing",
      containment: "#coursenav-main-content",
      tolerance: "pointer",
      helper: "original",
      scroll: false,
      start: function (event, ui) {
        ui.item.css("z-index", 1000);
      },
      drag: function (event, ui) {
        ui.position.left = ui.position.left;
        ui.position.top = ui.position.top;
      },
      stop: function (event, ui) {
        $("body").css("overflow", "auto");
      },
      update: function () {
        checkOrder();
      },
    });

    function checkOrder() {
      const $items = $(".custom-grid .img-sotable");
      let isCorrect = true;

      $items.each(function (index) {
        if (parseInt($(this).data("order")) !== index) {
          isCorrect = false;
          return false;
        }
      });

      if (isCorrect) {
        CourseNav.audioController.stopAllSoundsAndPlay(good);
        $(".img-sotable").addClass("disabled");
        setTimeout(() => {
          isCompleted();
        }, 700);
      }
    }

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