Rotafilio_Vantive/contenido/15.html

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

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

  .content-grid {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 75% 25%;
    grid-template-rows: auto;
    gap: 0;
    justify-content: center;
  }

  .grid-drops-container {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    justify-content: center;
    align-items: center;
  }

  .text-card {
    position: relative;
    height: 50px;
    width: 80%;
    margin: 0 auto;
  }

  .drop-card {
    position: relative;
    width: 230px;
    height: 230px;
    background-color: #c0d2cd;
    border: 2px dashed #85a89d;
    border-radius: 15px;
    margin: 0 auto;
  }

  .drag-card-container {
    position: relative;
    background-color: #e3ece8;
    border-radius: 15px;
    border: 2px dashed #72256b;
    width: 240px;
    height: 240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .drag-option {
    cursor: move;
  }
</style>
<div class='page-sco py-2 py-md-0 h-100'>
  <div class='container h-100'>
    <div class='row justify-content-center h-100'>
      <div id="drag-drop-activity" class='col-12 h-100' style="overflow: hidden;">
        <div class="content-grid">
          <div class="content-drops w-100 h-100">
            <div class="row justify-content-center align-items-center h-100">
              <div class="col-12">
                <div class="row">
                  <div class="col-10 mb-2 animate__animated animate__bounceInDown">
                    <h2 class="text-center fw-bold text-primary">Técnica Aséptica</h2>
                    <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
                  </div>
                  <div class="col-10 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
                    <div class="card bg-primary border-0 my-2 rounded-15 bg-custom ps-4 pe-3 py-2 text-center">
                      <div class="d-flex justify-content-center align-items-center flex-row gap-2">
                        <img src="img/2.1.png" class="img-fluid mx-3" />
                        <p class="mb-0 text-start text-white"><strong>Instrucciones:</strong> Observa los objetos en las tarjetas y arrástralas hacia la categoría
                          correcta para clasificarlas según su nivel de
                          limpieza: Estéril, Desinfectado, Limpio o Sucio.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="grid-drops-container">
                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
                        <div class="drop-card" data-drop="0"></div>
                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                          <div class="row justify-content-center align-items-center h-100">
                            <div class="col-12 text-center">
                              Estéril
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
                        <div class="drop-card" data-drop="1"></div>
                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                          <div class="row justify-content-center align-items-center h-100">
                            <div class="col-12 text-center">
                              Desinfectado
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
                        <div class="drop-card" data-drop="2"></div>
                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                          <div class="row justify-content-center align-items-center h-100">
                            <div class="col-12 text-center">
                              Limpio
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="position-relative d-flex flex-column justify-content-center gap-2">
                        <div class="drop-card" data-drop="3"></div>
                        <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                          <div class="row justify-content-center align-items-center h-100">
                            <div class="col-12 text-center">
                              Sucio/Contaminado
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-drags w-100 h-100">
            <div class="row justify-content-end align-items-center h-100">
              <div class="col-10 pe-4">
                <div class="row justify-content-center">
                  <div class="col-12">
                    <div class="drag-card-container d-flex justify-content-center align-items-center flex-row"></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/3.5.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">¡Bien hecho!</h3>
        </div>
        <div class="col-12 text-center">
          <p class="mb-0">Has concluido la actividad.</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');
    const changeDrag = ['<div class="drag-option" data-drag="0"><img src="img/15.0.png" class="img-fluid"></div>','<div class="drag-option" data-drag="1"><img src="img/15.1.png" class="img-fluid"></div>','<div class="drag-option" data-drag="2"><img src="img/15.2.png" class="img-fluid"></div>','<div class="drag-option" data-drag="3"><img src="img/15.3.png" class="img-fluid"></div>'];

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

    const shuffled = shuffleArray([...changeDrag]);
    let currentIndex = 0;

    function showNextDrag() {
      if (currentIndex < shuffled.length) {
        const $newDrag = $(shuffled[currentIndex]);
        $('.drag-card-container').append($newDrag);

        $newDrag.draggable({
          revert: 'invalid',
          revertDuration: 300,
          cursor: "grabbing",
          start: function (event, ui) {
            $(this).css('z-index', 1000);
            ui.position.left = 0;
            ui.position.top = 0;
          },
          drag: function (event, ui) {
            var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
            var changeLeft = ui.position.left - ui.originalPosition.left;
            var newLeft = ui.originalPosition.left + changeLeft / scale;
            var changeTop = ui.position.top - ui.originalPosition.top;
            var newTop = ui.originalPosition.top + changeTop / scale;
            ui.position.left = newLeft;
            ui.position.top = newTop;
          },
          stop: function (event, ui) {
            $(this).css('z-index', 1);
          }
        });

        currentIndex++;
      }
    }

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

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

          showNextDrag();

          if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
            checkAllCompleted();
          }
        } else {
          bad.play();
          ui.helper.draggable('option', 'revert', true);
        }
      }
    });

    function checkAllCompleted() {
      setTimeout(() => {
        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,
          backdrop: "rgba(65, 60, 60, .95)",
          width: "35em",
          didClose: () => {
            CourseNav.setSlideVisited();
            $('.drag-option').addClass('disabled');
          }
        });
      }, 250);
    }

    // Show first drag element
    showNextDrag();
  });
</script>