Development of a Pedagogical Agent Utilizing ChatGPT as a Response Mechanism and Scaffolding Method for CSS Learning

Cascading Style Sheets (CSS) are fundamental to modern web development, yet many learners encounter significant challenges with its intricate syntax and extensive styling capabilities. Approximately 85.7<sup xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:xlink="http://www.w3.org/1999/xlink">%</sup> of students report difficulties in mastering CSS concepts, which are often compounded by motivational issues that hinder the learning process. To tackle these challenges, this paper introduces a web-based educational application designed to enhance CSS learning through the integration of an innovative pedagogical agent that employs advanced scaffolding methods. The application utilizes a dual-phase scaffolding approach, including procedural scaffolding, which offers structured guidance through pre-designed dialogues, and strategic scaffolding, which employs ChatGPT to deliver personalized, adaptive feedback tailored to individual learning needs. The implementation of these scaffolding techniques has led to significant improvements in both user engagement and learning outcomes. Thematic analysis revealed that 80% of participants found the learning style provided by the pedagogical agent aligned with their personal preferences, compared to only 40% with conventional methods. Additionally, 90% of participants experienced increased motivation using the application with the pedagogical agent, versus 40% with the conventional approach. These findings highlight the effectiveness of the pedagogical agent in fostering a personalized and engaging learning experience, enhancing both motivation and learning. This research lays the chance for future advancements in interactive and adaptive learning systems, demonstrating the potential of combining pedagogical agents with sophisticated language models like ChatGPT to address educational and motivational challenges.