EduScaItion

A glimpse into one of our learning module's game

Inspiration

One of the key ways I was finally able to nail down my understanding of CSS Flexbox was with Flexbox Froggy, a simple yet super intuitive and fun game that teaches you the most important concepts in Flexbox. We wanted to make a similar project, expanding upon the concept into other Computer Science disciplines such as programming and machine learning. This, combined with Codesprouts work, led us to our final project: EduScaItion.

What it does

As of right now, the page counts with only one game, inspired in Pokemon, and which teaches the basics of programming (e.g. variables, data types) while playing a match against another monster, Chizui.

How we built it

We first decided to inspire ourselves from other platforms, such as Scratch and Codepip, looking for possible patterns and themes in our design. We finally decided on a colorful yet minimalistic tone. We then started working on different parts of Monstercode, our demonstrational game, dividing taks between the introductory page with the map and chatbot, and the actual game. The project was built only with HTML, CSS, and JavaScript.

Challenges we ran into

We wanted to integrate an AI-chatbot that between lessons that would teach students/learners concepts more in depth (a unique proposition compared to other similar learning platforms). It was our first time working this out, and therefore we had various difficulties in making it work. In addition, since this is our first, full web project, we run into various mishaps born out of our lack of knowledge and practice.

Accomplishments that we're proud of

Despite these challenges and that we may have not had time to integrate all the aspects we would've wanted, we are proud of the overall design and creativeness that went into the platform. We wanted to make the process fun as well, which is part of the reason for the inspiration in other games.

What we learned

We learned a lot of web development basics, which despite our experience with more advanced frameworks like Next.JS, still needed to be fleshed out. We learned how to make transitions and animations, how to better position and layout different UI elements, and how make these as responsive as possible. In the process we also learned ways on how to integrate AI-chatbots into web projects