Manual_Vantive/contenido/17.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;
    }


    /* Estilos para drag and drop */
    .options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 15px;
        /* padding: 20px; */
    }

    .draggable-option {
        cursor: grab;
        background-image: url('img/17.2.png');
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 15px;
        border: 3px solid #dee2e6;
        transition: all 0.3s ease;
        user-select: none;
        height: 180px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 15px;
        color: #333;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
        border: none;
        position: relative;
    }

    .draggable-option:hover {
        border-color: #6c9d7a;
        transform: translateY(-5px) scale(1.05);
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
        /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
    }

    .draggable-option.dragging {
        opacity: 0.7;
        transform: rotate(8deg) scale(0.95);
        cursor: grabbing;
    }

    .option-text {
        position: absolute;
        top: 44%;
        left: 0%;
        width: 90%;
        background: transparent;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-drag {
        min-height: 150px;
        border: 3px dashed #ccc !important;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .container-drag.drag-over {
        border-color: #6c9d7a !important;
        background-color: rgba(108, 157, 122, 0.1);
    }

    .container-drag.has-answer {
        border-color: #925c8d !important;
        background-color: rgba(146, 92, 141, 0.1);
    }

    .draggable-option.used {
        opacity: 0.3;
        pointer-events: none;
        text-decoration: line-through;
    }

    .draggable-option.hidden {
        display: none;
    }

    .dropped-option {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #925c8d;
        color: white;
        padding: 10px 15px;
        border-radius: 8px;
        font-weight: bold;
        z-index: 10;
    }

    .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 align-items-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">Procedimientos</h2>
                            <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
                        </div>
                    </div>
                    <div class="col-12 mb-3 text-center">
                        <h4 class="fw-bold text-verde-pino">DPCA</h4>
                    </div>
                    <div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
                        <div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
                            <p class="my-0">Para que una terapia de diálisis tenga los resultados esperados, se deben
                                conocer los
                                pasos necesarios para llevarla a cabo.</p>

                            <p>En esta actividad podrá demostrar cuánto conoce acerca de los <b
                                    class="text-morado-claro">procedimientos de
                                    conexión
                                    y desconexión de la DPCA.</b></p>
                            <div class="w-100 position-relative text-center">
                                <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 mb-1 animate__animated animate__zoomIn">
                        <img src="img/17.0.png" class="img-fluid">
                    </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">Procedimientos</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">DPCA</h4>
                    </div>
                    <div class="col-12 px-0 mb-3">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <div class="card bg-verde-claro border-0 rounded-0 py-2 px-3">
                                    <div class="row justify-content-start">
                                        <div class="col-12">
                                            <div
                                                class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
                                                <img src="img/book3.png" class="img-fluid">
                                                <p class="mb-0"><strong>Instrucciones:</strong> Lea con atención cada descripción y arrastre hacia ella el sobre con el nombre del paso al que corresponde.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-11">
                        <div
                            class="row justify-content-center align-items-center animate__animated animate__slideInRight no-overflow">
                            <div class="col-4">
                                <div class="card border-0 bg-verde-pino rounded">
                                    <div class="card-body">
                                        <div class="row justify-content-center">
                                            <div class="col-7">
                                                <div
                                                    class="card bg-transparent border border-2 border-white custom-card p-5 container-drag">
                                                    <img src="img/17.1.png" class="img-fluid">
                                                </div>
                                            </div>
                                            <div class="col-10 text-white mt-3">
                                                <div class="question">Lorem ipsum dolor, sit amet consectetur
                                                    adipisicing elit. Minima aliquam placeat neque, officia est laborum
                                                    molestias voluptatibus pariatur, quaerat dolorum, et omnis mollitia.
                                                    Dolorum facere minima at quas? Quo, praesentium?</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="options"></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">Procedimientos</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">DPCA</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');

        setTimeout(() => {
            $('.intro').removeClass('animate__flipInX');
        }, 600);

        var preguntasActual = 0,
            preguntasMax = 6,
            preguntasCorrectas = 0;
        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();
            inicializarTodasLasOpciones();
            mostrarPregunta();
        });

        const urlExcelFile = "Actividades_Manual_Vantive.xlsx";

        function readExcelFile(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.responseType = "arraybuffer";
            xhr.onload = function (e) {
                var arrayBuffer = xhr.response;
                var data = new Uint8Array(arrayBuffer);
                var workbook = XLSX.read(data, { type: "array" });
                var result = {};
                workbook.SheetNames.forEach((sheetName) => {
                    var sheet = workbook.Sheets[sheetName];
                    result[sheetName] = XLSX.utils.sheet_to_json(sheet);
                });
                callback(result);
            };
            xhr.send();
        }

        function procesarPreguntas(data) {
            const preguntas = data.map((fila) => {
                const opciones = [];
                Object.keys(fila).forEach((key) => {
                    if (key.startsWith("opcion")) {
                        opciones.push({
                            text: fila[key].trim(),
                            correct: key === "opcion_c",
                        });
                    }
                });
                return {
                    pregunta: fila.pregunta.trim(),
                    opciones: opciones,
                    retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
                    retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
                };
            });
            return preguntas;
        }

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

        let questions = [];
        let currentQuestion = null;
        let currentQuestionIndex = 0;
        let todasLasOpciones = [];

        function inicializarTodasLasOpciones() {
            todasLasOpciones = [];

            // Recopilar todas las opciones de todas las preguntas
            questions.forEach((pregunta, preguntaIndex) => {
                pregunta.opciones.forEach((opcion, opcionIndex) => {
                    todasLasOpciones.push({
                        text: opcion.text,
                        correct: opcion.correct,
                        preguntaIndex: preguntaIndex,
                        id: `pregunta-${preguntaIndex}-opcion-${opcionIndex}`
                    });
                });
            });

            // Barajar todas las opciones
            todasLasOpciones = shuffleArray(todasLasOpciones);

            // Mostrar todas las opciones
            mostrarTodasLasOpciones();
        }

        function mostrarTodasLasOpciones() {
            const $options = $('.options');
            $options.empty();

            todasLasOpciones.forEach((opcion, index) => {
                const $option = $(`
                    <div class="draggable-option" draggable="true"
                         data-correct="${opcion.correct}"
                         data-pregunta-index="${opcion.preguntaIndex}"
                         data-option-id="${opcion.id}">
                        <div class="option-text">${opcion.text}</div>
                    </div>
                `);
                $options.append($option);
            });

            setupDragAndDrop();
        }

        function mostrarPregunta() {
            if (questions.length === 0 || currentQuestionIndex >= questions.length) {
                finalizarJuego();
                return;
            }

            currentQuestion = questions[currentQuestionIndex];

            // Mostrar la pregunta en el elemento .question
            $('.question').text(currentQuestion.pregunta);

            // Limpiar el área de drop
            $('.container-drag').removeClass('has-answer').find('.dropped-option').remove();

            // Rehabilitar todas las opciones para la nueva pregunta
            $('.draggable-option').attr('draggable', true).css({
                'opacity': '1',
                'pointer-events': 'auto'
            });
        }

        function setupDragAndDrop() {
            const $draggables = $('.draggable-option');
            const $dropZone = $('.container-drag');

            // Eventos para elementos draggable
            $draggables.on('dragstart', function (e) {
                $(this).addClass('dragging');
                e.originalEvent.dataTransfer.setData('text/plain', '');
                e.originalEvent.dataTransfer.effectAllowed = 'move';
            });

            $draggables.on('dragend', function (e) {
                $(this).removeClass('dragging');
            });

            // Eventos para zona de drop
            $dropZone.on('dragover', function (e) {
                e.preventDefault();
                e.originalEvent.dataTransfer.dropEffect = 'move';
                $(this).addClass('drag-over');
            });

            $dropZone.on('dragleave', function (e) {
                $(this).removeClass('drag-over');
            });

            $dropZone.on('drop', function (e) {
                e.preventDefault();
                $(this).removeClass('drag-over');

                const $draggedElement = $('.dragging');
                if ($draggedElement.length > 0) {
                    manejarDrop($draggedElement);
                }
            });
        }

        function manejarDrop($draggedElement) {
            const isCorrect = $draggedElement.data('correct') === true;
            const preguntaIndexOpcion = $draggedElement.data('pregunta-index');
            const optionText = $draggedElement.find('.option-text').text() || $draggedElement.text();

            // Verificar si la opción corresponde a la pregunta actual
            const esOpcionDeLaPreguntaActual = preguntaIndexOpcion === currentQuestionIndex;
            const isCorrectForCurrentQuestion = isCorrect && esOpcionDeLaPreguntaActual;

            // Crear elemento dropped
            const $droppedOption = $(`<div class="dropped-option">${optionText}</div>`);
            $('.container-drag').addClass('has-answer').find('.dropped-option').remove();
            $('.container-drag').append($droppedOption);

            // NO eliminar la opción, mantenerla disponible
            // Restaurar el estado normal de todas las opciones
            $('.draggable-option').attr('draggable', true).css({
                'opacity': '1',
                'pointer-events': 'auto'
            });

            // Reproducir sonido
            CourseNav.audioController.stopAllSoundsAndPlay(isCorrectForCurrentQuestion ? good : bad);

            // Actualizar contadores
            if (isCorrectForCurrentQuestion) {
                preguntasCorrectas++;
            }

            // Mostrar feedback después de un delay
            setTimeout(() => {
                mostrarFeedback(isCorrectForCurrentQuestion, currentQuestion);
            }, 250);
        }

        function mostrarFeedback(isCorrect, pregunta) {
            const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;

            Swal.fire({
                target: document.getElementById('wrap-course-content'),
                imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
                text: retroalimentacion || '',
                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: "Continuar",
                backdrop: "rgba(65, 60, 60, .95)",
                width: "35em",
                didClose: () => {
                    continuarJuego();
                }
            });
        }

        function continuarJuego() {
            currentQuestionIndex++;

            if (currentQuestionIndex >= questions.length) {
                setTimeout(() => {
                    finalizarJuego();
                }, 500);
            } else {
                preguntasActual++;
                mostrarPregunta();
            }
        }

        function visualFeedBack(isCorrect) {
            // Cambiar la imagen de la alarma correspondiente
            const $alarms = $('.alarms .alarm-img');
            if ($alarms.length > preguntasActual) {
                $alarms.eq(preguntasActual).attr('src', isCorrect ? 'img/alarm_c.png' : 'img/alarm_i.png');
            }
        }

        function finalizarJuego() {
            const porcentaje = (preguntasCorrectas / questions.length) * 100;
            const aprobado = porcentaje >= 60;

             $('.wrap-course-content').addClass('fake1').removeClass('fake');

            CourseNav.setSlideVisited();

            if (aprobado) {
                $('#desarrollo').hide();
                $('#cierre').show();
            } else {
                $('.col-reintentar').show();
                $('#desarrollo').hide();
                $('#cierre').show();
            }
        }

        readExcelFile(urlExcelFile, function (data) {
            const hojaDatos = data["Diapositiva 37"];
            questions = procesarPreguntas(hojaDatos);
            preguntasMax = questions.length;
        });
    });
</script>