doi: 10.56294/ai202355

 

REVISIÓN

 

Gamified web application with artificial intelligence for teaching programming in Spanish-speaking contexts

 

Aplicación web gamificada con inteligencia artificial para la enseñanza de programación en contextos hispanohablantes

 

Martín Alejandro Gerlero1

 

1Universidad Siglo 21, Licenciatura en Informática. Río Tercero, Córdoba, Argentina.

 

Citar como: Alejandro Gerlero M. Gamified web application with artificial intelligence for teaching programming in Spanish-speaking contexts. EthAIca. 2023; 2:55. https://doi.org/10.56294/ai202355

 

Enviado: 01-05-2022     Revisado: 14-09-2022     Aceptado: 08-02-2023     Publicado: 09-02-2023

 

Editor: PhD. Rubén González Vallejo

 

ABSTRACT

 

Introduction: teaching programming posed a significant challenge for students with no prior training in logical or computational thinking, especially at the early stages. Traditional teaching methods proved insufficient to maintain motivation and engagement. In this context, gamification and artificial intelligence emerged as promising educational strategies by offering more dynamic and personalized experiences. However, the tools available on the market had significant limitations, such as a lack of AI-based personalization and the absence of content adapted to Spanish speakers.

Development: the project developed a gamified web application aimed at teaching basic programming and database concepts. Technologies such as HTML5, CSS3, JavaScript, PHP, and the MaterializeCSS library were used for the design and implementation of the platform. The integration of the ChatGPT API allowed the incorporation of artificial intelligence functionalities to provide personalized feedback to students. The application was hosted in a reliable and widely used server environment. A review of existing solutions showed that few combined gamification and AI, and none were fully oriented towards Spanish-speaking users.

Conclusions: the development of this application proved to be a viable and innovative solution to facilitate programming learning. The combination of gamification and artificial intelligence improved the educational experience, encouraged participation, and adapted content to the individual needs of users. This project offered a unique approach and laid the foundation for future research in digital education.

 

Keywords: Gamification; Artificial Intelligence; Programming; Adaptive Learning; Digital Education.

 

RESUMEN

 

Introducción: la enseñanza de la programación representó un desafío significativo para estudiantes sin formación previa en pensamiento lógico o computacional, especialmente en los niveles iniciales. Los métodos pedagógicos tradicionales resultaron insuficientes para mantener la motivación y el compromiso. En este contexto, la gamificación y la inteligencia artificial surgieron como estrategias educativas prometedoras al ofrecer experiencias más dinámicas y personalizadas. Sin embargo, las herramientas disponibles en el mercado mostraron limitaciones importantes, como la falta de personalización basada en IA y la ausencia de contenidos adaptados a hispanohablantes.

Desarrollo: el proyecto desarrolló una aplicación web gamificada orientada a la enseñanza de conceptos básicos de programación y bases de datos. Se emplearon tecnologías como HTML5, CSS3, JavaScript, PHP y la biblioteca MaterializeCSS para el diseño e implementación de la plataforma. La integración de la API de ChatGPT permitió incorporar funcionalidades de inteligencia artificial con el fin de brindar retroalimentación personalizada al estudiante. La aplicación fue alojada en un entorno de servidor confiable y ampliamente utilizado. En la revisión de soluciones existentes se observó que pocas combinaban gamificación e IA, y ninguna estaba plenamente orientada a usuarios hispanohablantes.

Conclusiones: el desarrollo de esta aplicación demostró ser una solución viable y novedosa para facilitar el aprendizaje de la programación. La combinación de gamificación e inteligencia artificial permitió mejorar la experiencia educativa, fomentar la participación y adaptar los contenidos a las necesidades individuales de los usuarios. Este proyecto ofreció una propuesta diferenciadora y sentó las bases para futuras investigaciones en educación digital.

 

Palabras clave: Gamificación; Inteligencia Artificial; Programación; Aprendizaje Adaptativo; Educación Digital.

 

 

 

INTRODUCCIÓN

En los últimos años, la enseñanza de la programación ha cobrado un protagonismo creciente debido a la expansión de profesiones vinculadas a la tecnología y la transformación digital. No obstante, aprender a programar sigue siendo un desafío significativo para muchos estudiantes, especialmente en los niveles educativos iniciales. Esta dificultad se debe, en gran parte, a la necesidad de desarrollar competencias como el pensamiento lógico, la abstracción y el razonamiento computacional, habilidades que no siempre se abordan de forma efectiva en los enfoques pedagógicos tradicionales.(1)

Ante esta realidad, se han explorado nuevas metodologías que contribuyan a hacer más accesible y motivador el proceso de aprendizaje. Una de ellas es la gamificación, entendida como la incorporación de elementos propios del juego en contextos educativos, con el objetivo de aumentar la motivación, el compromiso y la participación activa del estudiante. Diversas investigaciones han demostrado que la gamificación puede mejorar tanto el rendimiento académico como la actitud frente al aprendizaje en disciplinas técnicas. Por otro lado, la inteligencia artificial (IA) ha comenzado a ocupar un lugar relevante en el ámbito educativo, al posibilitar experiencias de aprendizaje adaptativo, retroalimentación personalizada y evaluación automatizada.(1)

A pesar del avance en estas áreas, las soluciones disponibles en el mercado presentan limitaciones. Aplicaciones como CodeCombat, Mumuki o CodeMonkey utilizan enfoques lúdicos, pero carecen de personalización basada en IA y, en muchos casos, no están diseñadas para hablantes de español. Plataformas más avanzadas, como Coddy, aplican machine learning, pero están orientadas exclusivamente a un público infantil y no contemplan adaptaciones idiomáticas o curriculares amplias.

En respuesta a estas limitaciones, el presente trabajo tiene como objetivo el desarrollo de una aplicación web educativa gamificada que integre inteligencia artificial para facilitar el aprendizaje de conceptos básicos de programación y bases de datos. El sistema está diseñado específicamente para usuarios hispanohablantes y busca ofrecer una experiencia de aprendizaje interactiva, dinámica y adaptada a las necesidades individuales de cada estudiante. A través del uso de tecnologías web modernas (HTML5, CSS3, JavaScript y PHP) y la integración de la API de ChatGPT, esta propuesta aspira a combinar usabilidad, accesibilidad y personalización, contribuyendo así al fortalecimiento de competencias digitales en contextos educativos diversos.

 

DESARROLLO

Marco Teórico Referencial

Dominio del problema

La enseñanza de la programación se ha convertido en un área de interés creciente en los últimos años, dado el auge de profesiones relacionadas con la tecnología y la transformación digital. Sin embargo, según se plantea en el documento ‘Programación y robótica: objetivos de aprendizaje para la educación obligatoria’, aprender a programar resulta un desafío para muchos estudiantes debido a la necesidad de desarrollar habilidades de pensamiento computacional y abstracción.(1) Ante esto, se han explorado distintas estrategias didácticas innovadoras.

La gamificación, es decir la aplicación de elementos lúdicos en contextos educativos, ha demostrado resultados positivos al incrementar la motivación y compromiso de los estudiantes. Asimismo, como señala el documento ‘Competencias de educación digital’, la inteligencia artificial abre nuevas posibilidades para la enseñanza adaptativa y personalizada, integrando ambos enfoques en una aplicación web como una alternativa prometedora.(1)

 

Tics utilizados

Para el desarrollo de la aplicación web se utilizó el lenguaje de programación PHP. Éste es un lenguaje interpretado, diseñado originalmente para la creación de contenido dinámico para sitios web.(2) Se realizó la interfaz gráfica de usuario utilizando HTML5, CSS3 y Javascript. HTML5 introduce importantes mejoras en cuanto a multimedia y conectividad en la web. CSS3 permite crear diseños y efectos avanzados.(3) Javascript es un lenguaje interpretado, orientado a objetos, que permite crear interactividad y efectos en una página web. Todas estas tecnologías se implementaron mediante la biblioteca MaterializeCSS, un framework de CSS que facilita el desarrollo web responsive.(4)

Asimismo, se empleó la API de ChatGPT por las facilidades que ofrece para integrar servicios de IA. La aplicación se alojó en un servidor web de la empresa Net Service Argentina con sistema operativo Linux, servidor web Apache, gestor de base de datos MySQL y lenguaje PHP; tecnologías ampliamente utilizadas en hosting web.(2,5)

 

Competencias existentes

En el mercado existen algunas aplicaciones que enseñan programación de forma gamificada, como Mumuky,(6) CodeMonkey y CodeCombat mencionadas anteriormente que implementan gamificación o Mimo(7) y Udacity(8), que poseen un formato de curso de programación. Sin embargo, hacen un uso limitado de IA y en su mayoría no están enfocadas en hispanohablantes. Soluciones más avanzadas como Coddy(9) utilizan machine learning pero están relegadas a niños y tampoco se encuentra en español.(10,11,12) El valor diferencial de este proyecto es apuntar a un público masivo con recursos didácticos innovadores e hispanohablantes.

 

CONCLUSIONES

El desarrollo de una aplicación web educativa que combine gamificación e inteligencia artificial ha demostrado ser una estrategia prometedora para abordar los desafíos asociados al aprendizaje inicial de programación y bases de datos. A partir del diagnóstico del problema, se identificó que los enfoques tradicionales de enseñanza, centrados en la transmisión teórica de conocimientos, resultan insuficientes para motivar y comprometer a los estudiantes en la adquisición de competencias técnico-computacionales. En este sentido, el presente proyecto propuso una alternativa innovadora y contextualizada, orientada a mejorar la experiencia de aprendizaje mediante el uso de herramientas tecnológicas modernas.

La implementación de mecánicas de juego dentro de la plataforma permitió crear un entorno educativo más atractivo, dinámico y participativo. Elementos como niveles, recompensas y desafíos fomentaron la constancia y el involucramiento activo de los usuarios, alineándose con las evidencias académicas que respaldan los beneficios de la gamificación en el ámbito educativo. Asimismo, la integración de inteligencia artificial, a través de la API de ChatGPT, aportó un valor diferencial al ofrecer retroalimentación personalizada, ayudando a los estudiantes a identificar errores, reforzar conceptos y avanzar a su propio ritmo. Este enfoque adaptativo responde a las demandas actuales de una educación más inclusiva y centrada en el estudiante.

Además, el uso de tecnologías de desarrollo ampliamente aceptadas —PHP, HTML5, CSS3, JavaScript y frameworks como MaterializeCSS— aseguró la viabilidad técnica del sistema, facilitando su implementación y futura escalabilidad. La elección de un entorno de hosting confiable y de código abierto refuerza la sostenibilidad del proyecto en el tiempo.

Por otra parte, al analizar el panorama de soluciones disponibles, se constató que existen pocas plataformas que combinen gamificación con inteligencia artificial y que, a la vez, estén dirigidas a hispanohablantes. Esto posiciona al proyecto como una propuesta diferenciadora dentro del mercado educativo digital, con potencial de impacto tanto en instituciones formales como en procesos de autoaprendizaje.

En conclusión, el desarrollo de esta aplicación representa un avance significativo en la búsqueda de metodologías innovadoras para la enseñanza de programación. Su orientación al usuario, su carácter inclusivo y su adaptación tecnológica constituyen una base sólida para futuras investigaciones, mejoras funcionales y posibles aplicaciones en otros campos del conocimiento. Este trabajo sienta un precedente para seguir explorando la convergencia entre educación, gamificación e inteligencia artificial como eje de transformación pedagógica.

 

REFERENCIAS BIBLIOGRÁFICAS

1. Ministerio de Educación. Competencias de educación digital [Internet]. 2017. Disponible en: https://www.argentina.gob.ar/sites/default/files/competencias_de_educacion_digital_1.pdf 

 

2. The PHP Group. ¿Qué es PHP? [Internet]. Disponible en: https://www.php.net/manual/en/intro-whatis.php 

 

3. Mozilla. JavaScript [Internet]. 2022. Disponible en: https://developer.mozilla.org/es/docs/Web/JavaScript 

 

4. Materialize. Materialize [Internet]. Disponible en: https://materializecss.com  

 

5. Linux Foundation. Linux Foundation [Internet]. Disponible en: https://www.linux.org/

 

6. Mumuki. Mumuki [Internet]. Disponible en: https://mumuki.io/home/ 

 

7. MIMO. MIMO [Internet]. Disponible en: https://mimo.org/

 

8. Udacity. Udacity [Internet]. Disponible en: https://www.udacity.com/

 

9. Coddy Learning. Coddy Learning [Internet]. Disponible en: https://coddy.tech/

 

10. Consejo Profesional de Ciencias Informáticas de la Provincia de Buenos Aires. Honorarios recomendados [Internet]. 2022.. Disponible en: https://www.cpcipc.org.ar/honorarios-recomendados 

 

11. Net Services Argentina. Web hosting [Internet]. Disponible en: https://netservicesargentina.com/web-hosting  

 

12. OpenAI. Introduction to the OpenAI API [Internet]. 2023.. Disponible en: https://platform.openai.com/docs/introduction

 

FINANCIACIÓN

Ninguna.

 

CONFLICTO DE INTERESES

Los autores declaran que no existe conflicto de intereses.

 

CONTRIBUCIÓN DE AUTORÍA

Conceptualización: Martín Alejandro Gerlero.

Investigación: Martín Alejandro Gerlero.

Redacción – borrador original: Martín Alejandro Gerlero.

Redacción – revisión y edición: Martín Alejandro Gerlero.