Saga

Welcome to a new world of awe, adventure, and education. We are a online learning management system that strives to improve the learning and teaching experience through gamification.

Comment

How to explore Saga

You can of course create your own account and invite your friends to join courses that you make (and try out our GMail integration) , however if you would like to experience more of a demo with pre-filled data, try one of these logins:

Student Login:

Instructor Login

Check it out here: https://saga-learn.com

Inspiration

We are bringing discovery and excitement into education with Saga. It's not about making a platform where students can succeed, It's about making a platform that makes students want to succeed. Our goal with Saga is to excite students about their learning and reward them for their hard work through a gamified online learning platform.

What is Gamification? The Miriam-Webster dictionary defines gamification as ‘the process of adding games or gamelike elements to something (such as a task) as to encourage participation’. One of the things that motivates us to continue playing a game, no matter how hard the challenge, is the knowledge that success is attainable, and that there is a reward for that attainable success. Some people will fight a boss in Dark Souls for hours, over and over because they are excited to get past this challenge and into the next area. Some people will do the tedious work of getting every single achievement in a game because they want to see that 100% trophy on their profile. In her book, Reality is Broken, Jane McGonigal discusses a game called Chore Wars that rewards players with experience points and virtual currency for completing chores around the house, and that virtual currency could then be converted into customized real-world rewards such as “allowances”, “coffee runs for roommates”, or “to bid on what music to play in the car”. According to McGonigal, this game worked great in families and households of all different ages. This is a great example of previously tedious and boring tasks becoming motivating and fun. This idea of rewarding students for the tasks they complete is what we believe to be the first step in improving education, and what we are trying to achieve with Saga.

Gamification of education is a commonly discussed idea, but as students who have gone through over 15 years of schooling, we felt as though schools could really do better in this area. We have seen educational games, but we believe that the concepts of games and gameplay should be at the core of education. Unfortunately we can’t immediately convert the entire education system to be as exciting, encouraging, and motivating as a game, but we hope that Saga can help educators take the first step into a new and better way of teaching.

What it does

Saga is an online learning management system that serves as a platform for teaching and learning between students and teachers. Saga creates a new and engaging way for students to interact with their assignments by showing their progress in the course on an ‘adventure map’. Each assignment is a milestone they complete, and instead of grades, students receive stars which act as Saga’s currency. These stars accumulate and can be used to purchase items from our virtual shop, such as avatars. The stars are also added to the growing pile of stars for the entire class of students that can translate to real-world prizes set by the teacher, such as a pizza party, or a movie viewing at the end of the course.

WIth our goal of gamifying and reforming online learning platforms in mind, we felt it was very important to assist our users in their transition into this alternative way of teaching. Because of this, we have implemented several features that may be more familiar to our users who have experience with Canvas or Blackboard. This includes a calendar view of assignments (Quest Board), messaging and announcements (Letters), and traditional text submissions for assignments (Quests).

How we built it

Saga was made by Alex Leska, Ethan Nguyen, Marguerite Brugger, and Trent Yetzer for the Liquid Hacks 2.0 Hackathon.

Front End

  • Languages + Libraries: Typescript, React-Typescript, Ant Design
  • Infrastructure: Netlify (Static Site Host)

Back End

  • Languages + Libraries: Typescript, Node.js, AdonisJS, MySQL
  • Infrastructure: Heroku (PaaS), PlanetScale (Serverless SQL), Google Cloud (GMail API), AWS (S3 File Storage)

We split into a mostly-front-end team and a mostly-back-end team, however both teams collaborated constantly and were in constant communication to make sure that when it came time to combine the two parts of our project, we were on the same page.

Challenges we ran into

All of our forms and inputs used throughout Saga have a lot more underneath the hood than one might expect. Some require auto filling values from the database, some require updating, deleting, and adding information to the database at the same time, some forms are dynamic and add fields as the user chooses, and some have all of the above. Specifically, when editing an Adventure (a course), you can dynamically change, add, and delete units which also requires its own tracking of whether the user created a new unit or updated an existing one.

Despite some graphics knowledge, albeit extremely limited, modifying the Vanta.js ‘birds’ code to make the interactive books on our landing page turned out to be quite the challenge: our graphics knowledge is quite limited, we weren’t very familiar with Three.js, and the code used some deprecated libraries. Luckily after several hours and some basic knowledge of triangles, we were able to make a mesmerizing backdrop for the website, and every second of struggle turned out to be worth it.

We knew from the beginning that the placement of Quest buttons on the Map page would be tricky, as the maps have curved paths. At first we decided that the curved paths on the map would follow a sine wave as to be translatable to a well-known equation, however, button placement still proved to be a challenge. Since we were limiting the amount of Quests per Map (otherwise the maps will get overcrowded) we decided to hard-code locations for buttons based on how many Quests are on that map.

Connecting our app to GMail was also a challenge. To start, OAuth is a very complicated authorization standard that none of us had used before, but google requires. Once we got past that hurdle, however, the javascript documentation for the GMail api was inconsistent and we found many docs that said different things. Now that we know how to use it, however, it will be quite a useful tool to use in future projects.

Accomplishments that we're proud of

  • The mesmerizing interactive flying books that decorate our landing page, sign in page, and sign up pages.
  • Our app has functional GMail integration and will send messages to invite users to use our platform with codes and unique links to join courses.
  • The ‘Adventures’ page presents the adventures (courses) through css-animated books that open when hovered.
  • Throughout the site, we have original artwork for our avatars and quest maps made by our team.
  • We have incorporated complex dynamic forms that have functional field and database validation, autofill, and complex logic for when to update, delete, or add information to our database.
  • We used React-Quill to allow our users to format their text inputs with a customized rich text editor.
  • We have over 50 API endpoints to Create / Read / Update / Delete to/from our database.

What we learned

  • AdonisJS was a first for our team
  • GMail OAuth, none of us have ever used OAuth.
  • Typescript, some of us either had never used Typescript before or were not very comfortable with it.
  • MySQL, our backend is more experienced with NoSQL databases.
  • Three.js, a graphics library we were very unfamiliar with.
  • Broadened our knowledge of React Hooks and Data Fetching

What's next for Saga

Saga is still in beta, so many features are still on the way! Let’s take a look at some.

New avatars are coming to the shop! Clothes for your avatars are also coming soon! Get ready to dress up your cute characters with fashionable items like a top hat, some casual sneakers, or Team Liquid jacket! All of the new avatars and clothing items will be purchasable with stars from the shop.

You all are familiar with Saga’s built-in ability to send and receive virtual letters. Soon we'll be sharing with you a new way to communicate with fellow adventurers: discussions! Discussions will increase collaboration and guidance by allowing adventurers to discuss quest-related topics.

To go along with Discussions, we will be adding stickers to the shop that can be added to Discussions and Letters!

Here are a few more:

  • Instructors can view the status of Adventurers’ invites, to see whether they have created an account and joined Saga.
  • Support upload of multiple file types.
  • Instructors can create multiple tiers of prizes with separate star goals.
  • Instructors can upload custom maps.

Last, but definitely not least, your character will soon follow you through your adventure by marking your progress on your adventure map!

Glossary

For those of you who are new to Saga, you may not know your way around. Here is an alphabetized list of some of our saga-themed words in relation to words you may be more familiar with when it comes to learning management systems.

  • Adventure - Class / Course
  • Adventurer - Student
  • Chapter - Class Unit
  • Character - Profile
  • Expiration Date - Due Date
  • Letter - Message
  • Mailbox - Message Inbox
  • Quest - Assignment
  • Quest Board - Calendar
  • Stars - Grades (or our equivalent, at least)

Built With

Share this project:

Updates