Problema de visualización con cuestionario HTML, CSS y JavaScript en Wordpress

Estoy intentando hacer un cuestionario para insertar en una web de wordpress que tiene el tema Divi activo. Divi es un constructor de temas, si alguien no lo conociese, que me permite construir una web mediante módulos, y uno de esos módulos me deja meter código html y css, y el javascript lo puedo meter en un apartado de la configuración del tema. No creo que el problema sea Divi realmente, pero es para dar contexto.

Yo no sé programar, y quería meter en la web la posibilidad de hacer unos cuestionarios, pero no he encontrado ningún plugin de wordpress que me permitiese hacer lo que quería, por lo que he estado intentando hacerlo directamente con código con la ayuda de Chat GPT.

En general ahora mismo el código funciona aparentemente, pero hay algún tipo de problema que a veces ocurre cuando he intentado hacer algunas modificaciones, que voy a intentar explicar.

En la página de edición, para modificar el html y css, en el módulo se ve una especie de previsualización, de lo que sería la primera página del cuestionario, la portada. Y se ve así:

https://i.postimg.cc/mrsPNqb5/Sin-t-tulo-1.jpg

Como se ve, hay dos botones abajo, uno de iniciar, que está bien puesto, y otro de siguiente, que en teoría no debería aparecer ahí, sino en las siguiente páginas.

Sin embargo, si vas a la dirección de la web, sin el modo editar para ver cómo ha quedado, el cuestionario se ve bien, sin el botón de siguiente, sólo con el de iniciar. Adjunto imágenes de cómo se ve el resto de test fuera del modo editar.

https://i.postimg.cc/gJMrp23C/Sin-t-tulo-2.jpg

En la siguiente imagen se ve la siguiente página al darle a iniciar, y empiezan las páginas con las preguntas, que hay 5 páginas, con 2 preguntas en cada página, por lo que hay 10 preguntas en total.

https://i.postimg.cc/yNykfPxY/Sin-t-tulo-3.jpg

Así hay que contestar las 10 preguntas, hasta llegar a la página final, en la que se da el resultado de la puntuación. Ya que cada respuesta se asocia a un número, y el total de las respuestas que hayas elegido se asocia a un tipo de resultado, Por ejemplo si has sacado 25 puntos, eso hace aparecer un resultado, si has sacado 38, entonces sale otro resultado, etc. Y esta es la pantalla final:

https://i.postimg.cc/rmyz7rRG/Sin-t-tulo-4.jpg

La cuestión es por qué se ve en el modo edición con ese botón de siguiente que no debería verse, y fuera del modo edición se ve normal. El problema es que quiero hacer más cambios en el código, sobre todo el javascript para poder tener en la web diferentes cuestionarios con diferente contenido, y me ha pasado varias veces que al ir pidiendo cambios al Chat GPT hay un momento en el que, supongo que hace algún cambio mal, y fuera del modo edición se ve la portada con los dos botones, y no se puede avanzar, y cuando le pido cambios sobre eso, introduzco los cambios en el código, y no cambia nada, y tengo que volver a la versión anterior del código. No sé si tiene sentido, pero me da la sensación de que de alguna manera esa página que veo en el modo edición, es una página que "existe" en el código, pero que después no se ve fuera del modo edición, y por eso al pedirle cambios e introducirlos, yo no los veo en la previsualización. No sé si me estoy explicando bien.

En resumen, lo que quiero saber es si algo del código que esté mal puede explicar eso, y qué habría que hacer para cambiarlo adecuadamente, para tratar de reducir los problemas a la hora de hacer más cambios.

Mando todos los códigos aquí, porque me da error al intentar ponerlos directamente aquí:

https://gist.github.com/deividpeppers/7516afff9b4a91344ae4a48bcc3eaf8c 

Añade tu respuesta

Haz clic para o