doi: 10.56294/ai202355

 

REVIEW

 

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.

 

Cite as: 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

 

Submitted: 01-05-2022     Revised: 14-09-2022     Accepted: 08-02-2023     Published: 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.

 

 

 

INTRODUCTION

In recent years, the teaching of programming has gained increasing prominence due to the expansion of professions linked to technology and digital transformation. However, learning to program remains a significant challenge for many students, especially at the initial educational levels. This difficulty is largely due to the need to develop competencies such as logical thinking, abstraction and computational reasoning, skills that are not always effectively addressed in traditional pedagogical approaches.(1)

Given this reality, new methodologies have been explored to help make the learning process more accessible and motivating. One of them is gamification, understood as the incorporation of game-like elements in educational contexts, with the aim of increasing student motivation, engagement and active participation. Several studies have shown that gamification can improve both academic performance and attitude towards learning in technical disciplines. On the other hand, artificial intelligence (AI) has begun to occupy a relevant place in the educational field, by enabling adaptive learning experiences, personalized feedback and automated assessment.(1)

Despite the progress in these areas, the solutions available in the market present limitations. Applications such as CodeCombat, Mumuki or CodeMonkey use gamified approaches, but lack AI-based personalization and, in many cases, are not designed for Spanish speakers. More advanced platforms, such as Coddy, apply machine learning, but are oriented exclusively to a child audience and do not provide for extensive language or curriculum adaptations.

In response to these limitations, the present work aims to develop a gamified educational web application that integrates artificial intelligence to facilitate the learning of basic programming concepts and databases. The system is designed specifically for Spanish-speaking users and seeks to offer an interactive and dynamic learning experience adapted to the individual needs of each student. Through the use of modern web technologies (HTML5, CSS3, JavaScript and PHP) and the integration of the ChatGPT API, this proposal aims to combine usability, accessibility and customization, thus contributing to the strengthening of digital competencies in diverse educational contexts.

 

DEVELOPMENT

Theoretical Framework

Problem domain

The teaching of programming has become an area of growing interest in recent years, given the rise of professions related to technology and digital transformation. However, as stated in the document 'Programming and robotics: learning objectives for compulsory education', learning to program is challenging for many students due to the need to develop computational thinking and abstraction skills.(1) Given this, different innovative didactic strategies have been explored.

Gamification, i.e. the application of ludic elements in educational contexts, has shown positive results by increasing students' motivation and engagement. Likewise, as the document 'Digital Education Competencies' points out, artificial intelligence opens new possibilities for adaptive and personalized teaching, integrating both approaches in a web application as a promising alternative.(1)

 

Tics used

For the development of the web application, the PHP programming language was used. This is an interpreted language, originally designed for the creation of dynamic content for websites.(2) The graphical user interface was created using HTML5, CSS3 and Javascript. HTML5 introduces significant improvements in multimedia and connectivity on the web. CSS3 allows the creation of advanced layouts and effects.(3) Javascript is an interpreted, object-oriented language that allows creating interactivity and effects on a web page. All these technologies were implemented using the MaterializeCSS library, a CSS framework that facilitates responsive web development.(4)

Likewise, the ChatGPT API was used because of the facilities it offers to integrate AI services.

The application was hosted on a web server of the company Net Service Argentina with Linux operating system, Apache web server, MySQL database manager and PHP language; technologies widely used in web hosting.(2,5)

 

Existing competencies

In the market there are some applications that teach programming in a gamified way, such as Mumuky(6), CodeMonkey and CodeCombat mentioned above that implement gamification or Mimo(7) and Udacity(8), which have a programming course format. However, they make limited use of AI and are mostly not focused on Spanish speakers. More advanced solutions such as Coddy(9) use machine learning but are relegated to children and are also not available in Spanish(10,11,12) The differential value of this project is to target a mass audience with innovative and Spanish-speaking didactic resources.

 

CONCLUSIONS

The development of an educational web application that combines gamification and artificial intelligence has proven to be a promising strategy to address the challenges associated with the initial learning of programming and databases. From the diagnosis of the problem, it was identified that traditional teaching approaches, focused on the theoretical transmission of knowledge, are insufficient to motivate and engage students in the acquisition of technical-computational skills. In this sense, the present project proposed an innovative and contextualized alternative, aimed at improving the learning experience through the use of modern technological tools.

The implementation of game mechanics within the platform made it possible to create a more attractive, dynamic and participatory educational environment. Elements such as levels, rewards and challenges encouraged perseverance and active involvement of users, in line with the academic evidence that supports the benefits of gamification in education. Likewise, the integration of artificial intelligence, through the ChatGPT API, provided differential value by offering personalized feedback, helping students to identify errors, reinforce concepts and advance at their own pace. This adaptive approach responds to today's demands for a more inclusive and student-centered education.

In addition, the use of widely accepted development technologies - PHP, HTML5, CSS3, JavaScript and frameworks such as MaterializeCSS - ensured the technical feasibility of the system, facilitating its implementation and future scalability. The choice of a reliable and open source hosting environment reinforces the project's sustainability over time.

On the other hand, when analyzing the panorama of available solutions, it was found that there are few platforms that combine gamification with artificial intelligence and that, at the same time, are aimed at Spanish speakers. This positions the project as a differentiating proposal within the digital educational market, with potential impact both in formal institutions and in self-learning processes.

In conclusion, the development of this application represents a significant advance in the search for innovative methodologies for teaching programming. Its user orientation, its inclusive nature and its technological adaptation constitute a solid base for future research, functional improvements and possible applications in other fields of knowledge. This work sets a precedent for further exploration of the convergence between education, gamification and artificial intelligence as an axis of pedagogical transformation.

 

BIBLIOGRAPHIC REFERENCES

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

 

FUNDING

None.

 

CONFLICT OF INTEREST

The authors declare that there is no conflict of interest.

 

AUTHORSHIP CONTRIBUTION

Conceptualization: Martín Alejandro Gerlero.

Formal analysis: Martín Alejandro Gerlero.

Writing - original draft: Martín Alejandro Gerlero.

Writing - proofreading and editing: Martín Alejandro Gerlero.