https://www.immedicohospitalario.es/assets/js/nuevo/encuestas.js

1const divEncuesta = document.querySelector('.encuestas');
2
3if (divEncuesta) {
4    let encuestas = divEncuesta.querySelectorAll('.encuesta');
5
6    encuestas.forEach(async function (encuesta) {
7        let preguntas = encuesta.querySelectorAll('.pregunta');
8        let totalPreguntas = preguntas.length;
9        let preguntaActualIndex = 0;
10
11        if (encuesta.classList.contains('encuesta-completa')) {
12            // Crear un contenedor div.row y añadir las preguntas dentro de div.col-12
13            let rowContainer = document.createElement('div');
14            rowContainer.classList.add('row', 'g-3'); // Añadir clase row y g-3
15            preguntas.forEach(pregunta => {
16                let colContainer = document.createElement('div');
17                colContainer.classList.add('col-12'); // Añadir clase col-12
18
19                pregunta.style.display = 'block'; // Asegurarse de que todas las preguntas estén visibles
20                colContainer.appendChild(pregunta); // Colocar la pregunta dentro de col-12
21                rowContainer.appendChild(colContainer); // Colocar col-12 dentro de row
22            });
23
24            // Añadir el botón de finalizar dentro de un col-12
25            let colFinalizar = document.createElement('div');
26            colFinalizar.classList.add('col-12');
27
28            let divBotonesContainer = document.createElement('div');
29            divBotonesContainer.classList.add('d-flex', 'justify-content-start', 'py-3');
30
31            let botonFinalizar = document.createElement('button');
32            botonFinalizar.type = 'submit';
33            botonFinalizar.classList.add('btn', 'btn-lg', 'btn-im', 'finalizar');
34            botonFinalizar.textContent = 'Enviar respuestas';
35
36            divBotonesContainer.appendChild(botonFinalizar);
37            colFinalizar.appendChild(divBotonesContainer);
38            rowContainer.appendChild(colFinalizar); // Añadir al rowContainer
39
40            encuesta.insertBefore(rowContainer, encuesta.firstChild); // Insertar el rowContainer al inicio del form
41        } else {
42            await inicializarPreguntas(preguntas, totalPreguntas);
43            agregarBotones(encuesta);
44
45            preguntas.forEach((pregunta, index) => {
46                let inputs = pregunta.querySelectorAll('input[type="radio"]');
47                inputs.forEach(input => {
48                    input.addEventListener('change', function () {
49                        actualizarVisibilidadBotones(encuesta, preguntaActualIndex, totalPreguntas, preguntas);
50                    });
51                });
52            });
53
54            let botonSiguiente = encuesta.querySelector('.siguiente');
55            botonSiguiente.addEventListener('click', function () {
56                if (preguntaActualIndex < totalPreguntas - 1) {
57                    if (validarRespuesta(preguntas[preguntaActualIndex])) {
58                        preguntas[preguntaActualIndex].style.display = 'none';
59                        preguntaActualIndex++;
60                        preguntas[preguntaActualIndex].style.display = 'block';
61                        actualizarVisibilidadBotones(encuesta, preguntaActualIndex, totalPreguntas, preguntas);
62                    }
63                }
64            });
65
66            let botonAnterior = encuesta.querySelector('.anterior');
67            botonAnterior.addEventListener('click', function () {
68                if (preguntaActualIndex > 0) {
69                    preguntas[preguntaActualIndex].style.display = 'none';
70                    preguntaActualIndex--;
71                    preguntas[preguntaActualIndex].style.display = 'block';
72                    actualizarVisibilidadBotones(encuesta, preguntaActualIndex, totalPreguntas, preguntas);
73                }
74            });
75        }
76
77        // encuesta.addEventListener('submit', async function (event) {
78        //     event.preventDefault();
79
80        //     if (!await validarTodasRespuestas(preguntas)) {
81        //         alert('Por favor, responda todas las preguntas antes de finalizar.');
82        //     } else {
83        //         encuesta.style.display = 'none';
84        //     }
85        // });
86    });

87
88    async function inicializarPreguntas(preguntas, totalPreguntas) {
89        await preguntas.forEach(async (pregunta, index) => {
90            let titulo = pregunta.querySelector('.titulo');
91
92            let contador = document.createElement('div');
93            contador.classList.add('contador', 'badge', 'bg-im', 'align-self-center', 'me-2');
94            contador.textContent = `${index + 1}/${totalPreguntas}`;
95
96            titulo.insertBefore(contador, titulo.firstChild);
97
98            if (index === 0) {
99                pregunta.style.display = 'block';
100            } else {
101                pregunta.style.display = 'none';
102            }
103        });
104    }
105
106    function actualizarVisibilidadBotones(encuesta, preguntaActualIndex, totalPreguntas, preguntas) {
107        let botonAnterior = encuesta.querySelector('.anterior');
108        let botonSiguiente = encuesta.querySelector('.siguiente');
109        let botonFinalizar = encuesta.querySelector('.finalizar');
110        let divBotonesContainer = encuesta.querySelector('.botones-container');
111
112        botonAnterior.style.display = preguntaActualIndex === 0 ? 'none' : 'inline-block';
113        botonSiguiente.style.display = preguntaActualIndex === totalPreguntas - 1 ? 'none' : 'inline-block';
114        botonFinalizar.style.display = preguntaActualIndex === totalPreguntas - 1 ? 'inline-block' : 'none';
115        
116        if (preguntaActualIndex === 0) {
117            divBotonesContainer.classList.add('justify-content-end');
118            divBotonesContainer.classList.remove('justify-content-between');
119        } else {
120            divBotonesContainer.classList.remove('justify-content-end');
121            divBotonesContainer.classList.add('justify-content-between');
122        }
123
124        if (preguntaActualIndex < totalPreguntas) {
125            botonSiguiente.disabled = !validarRespuesta(preguntas[preguntaActualIndex]);
126            botonFinalizar.disabled = !validarTodasRespuestas(preguntas);
127        }
128    }
129
130    function validarRespuesta(pregunta) {
131        let inputs = pregunta.querySelectorAll('input[type="radio"]');
132        return Array.from(inputs).some(input => input.checked);
133    }
134
135    async function validarTodasRespuestas(preguntas) {
136        return Array.from(preguntas).every(async pregunta => await validarRespuesta(pregunta));
137    }
138
139    function agregarBotones(encuesta) {
140        let divBotonesContainer = document.createElement('div');
141        divBotonesContainer.classList.add('d-flex', 'justify-content-end', 'py-3', 'botones-container');
142
143        let botonAnterior = document.createElement('button');
144        botonAnterior.type = 'button';
145        botonAnterior.classList.add('btn', 'btn-lg', 'btn-outline-im', 'anterior');
146        botonAnterior.style.display = 'none';
147        botonAnterior.textContent = '← Anterior';
148
149        let botonSiguiente = document.createElement('button');
150        botonSiguiente.type = 'button';
151        botonSiguiente.classList.add('btn', 'btn-lg', 'btn-im', 'siguiente');
152        botonSiguiente.disabled = true;
153        botonSiguiente.textContent = 'Siguiente →';
154
155        let botonFinalizar = document.createElement('button');
156        botonFinalizar.type = 'submit';
157        botonFinalizar.classList.add('btn', 'btn-lg', 'btn-im', 'finalizar');
158        botonFinalizar.style.display = 'none';
159        botonFinalizar.textContent = 'Enviar respuestas';
160
161        divBotonesContainer.appendChild(botonAnterior);
162        divBotonesContainer.appendChild(botonSiguiente);
163        divBotonesContainer.appendChild(botonFinalizar);
164
165        encuesta.appendChild(divBotonesContainer);
166    }
167}