Rotafilio_Vantive/contenido/17.html

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

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

  .content-drop {
    position: relative;
    background-color: #85a89d;
    border-radius: 12px;
    height: 63px;
  }

  .num {
    background-color: #115742;
    border-radius: 12px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn-drag {
    background: #B68FB2;
    background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
    border-radius: 12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 280px;
    cursor: grab;
  }

  .btn-drag:active {
    cursor: grabbing;
  }

  .obj-drop {
    height: 100%;
    width: 100%;
  }
</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">
            <h2 class="text-center fw-bold text-primary">Registros</h2>
            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
          </div>
          <div class="col-10 px-0 mb-1">
            <div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
              <div class="d-flex justify-content-center align-items-center flex-row">
                <img src="img/08.0.png" class="img-fluid mx-3">
                <p class="mb-0"><strong>Instrucciones:</strong> Toma los tipos de terapia que se presentan y arrástralos hacia el registro que les corresponde.</p>
              </div>
            </div>
          </div>
          <div class="col-12" id="drag-drop-activity">
            <div class="row justify-content-center align-items-center">
              <div class="col-4 col-drags">
                <div class="d-flex justify-content-center align-items-center flex-column gap-3 content-drags">
                  <div class="btn-drag px-3 py-2 text-start" data-drag="0">
                    <p class="mb-0 text-white">Diálisis Peritoneal Continua Ambulatoria <strong>(DPCA)</strong></p>
                  </div>
                  <div class="btn-drag px-3 py-2 text-start" data-drag="1">
                    <p class="mb-0 text-white">Diálisis Peritoneal Automatizada <strong>(DPA)</strong></p>
                  </div>
                </div>
              </div>
              <div class="col-7">
                <div class="row justify-content-center">
                  <div class="col-12">
                    <div class="row justify-content-center align-items-center">
                      <div class="col-6 text-center">
                        <img src="img/17.0.png" class="img-fluid mb-3"><br>
                        <div class="content-drop d-flex flex-row align-items-center gap-0">
                          <div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">0</h3></div>
                          <div class="obj-drop" data-drop="0"></div>
                        </div>
                      </div>
                      <div class="col-6 text-center">
                        <img src="img/17.1.png" class="img-fluid mb-3"><br>
                        <div class="content-drop d-flex flex-row align-items-center gap-0">
                          <div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">1</h3></div>
                          <div class="obj-drop" data-drop="1"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </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/17.2.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">¡No lo olvides!</h3>
        </div>
        <div class="col-12 text-center">
          <p class="mb-0">Siempre que acudas a la unidad de diálisis, debes llevarlos.</p>
        </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');

    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 btn-drag elements
    const $dragElements = $('.btn-drag');
    const shuffled = shuffleArray($dragElements.toArray());
    $('.content-drags').empty().append(shuffled);

    $('.btn-drag').draggable({
      revert: 'invalid',
      revertDuration: 300,
      containment: "#drag-drop-activity",
      cursor: "grabbing",
      start: function (event, ui) {
        $(this).css('z-index', 1000);
        ui.position.left = 0;
        ui.position.top = 0;
      },
      drag: function (event, ui) {
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var newLeft = ui.originalPosition.left + changeLeft;
        var changeTop = ui.position.top - ui.originalPosition.top;
        var newTop = ui.originalPosition.top + changeTop;
        ui.position.left = newLeft;
        ui.position.top = newTop;
      },
      stop: function (event, ui) {
        $(this).css('z-index', 1);
      }
    });

    $('.obj-drop').droppable({
      accept: '.btn-drag',
      tolerance: 'pointer',
      drop: function (event, ui) {
        const dragData = ui.helper.data('drag');
        const dropData = $(this).data('drop');

        if (dragData == dropData) {
          CourseNav.audioController.stopAllSoundsAndPlay(good);
          ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
          ui.helper.draggable('disable');
          $(this).droppable('disable');

          // Verificar si todos están completados
          if ($('.obj-drop:not(.ui-droppable-disabled)').length === 0) {
            Completed();
          }
        } else {
          CourseNav.audioController.stopAllSoundsAndPlay(bad);
          ui.helper.draggable('option', 'revert', true);
        }
      }
    });

     function Completed() {
      $('.col-drags').hide();
      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();
          $('.obj-drop').addClass('disabled');
        },
      });
    }
  });
</script>