What Inspired Us
The COVID-19 global pandemic has resulted in many educational systems, from preschool to college, switching to an online or hybrid format. As students during this pandemic, we have witnessed first-hand the vast detrimental effects online education has had on learning and retaining information as this format of learning results in a lot less attention and interest, both in terms of disengagement when learning, and the tolls on mental health from being isolated at home, and apart from peers. For us college students, the effects of online education have shown much less engagement and knowledge absorption; however for our own younger siblings going through online 3rd and 4th grades, the consequences have been even greater. Our team recognized how crucial engaging young students is as these formative years influence much of their fundamental academic progress. Seeing this hindrance in many children’s crucial years of learning inspired our team to create this project as a way to frame online education in a more fun and engaging way for primary school students. We aimed to create a learning environment that all students could feel comfortable and interested in, that would promote long-term interest in learning through creating and storing measurable goals and achievements, interactive games throughout our site, and providing information on ways to destress and preserve mental health.
What It Does
Noctua Learning is an online resource for children mainly in their primary education that aims to keep students engaged through goals rewarded by a virtual sticker board, educational games, and even activities for taking a break when needed. When loading the website, users are prompted to login in or sign up with an email to ensure security in our platform. Once signed in, the user is navigated to a goal page outlining their completed and in-progress educational goals which is where they can keep track of old goals and create new ones. At the top of every screen there is a navigation bar that allows the user to make their way to the other pages in our site. To create a more engaging and motivational aspect to the goal setting feature, the next page is the user’s personalized sticker board. This page unlocks a new sticker that the user can choose and then drag onto their sticker board once they have completed a goal. We hope that this feature will help students feel more inspired to stay engaged while learning online. In terms of the educational resources, our project also has a page for students to learn different school subjects in a more interesting way through games, challenges, and visual demonstrations. Lastly, one of our final features is a page that encourages students to take a mental break and walks them through meditation activities and other tips for their mental health. We believe that cultivating a learning environment that encourages mental health is very important in keeping students engaged and passionate about learning in the long term. We have also designed our website to have customizable themes for the child to further create a more personal and welcoming learning environment.
How We Built It
We first built our main design and prototyped our interactive functionality using Figma, as well as designing the additional themes that the user chan choose to further increase learning engagement with our target audience of primary school learners. We then built each page of our application using HTML, CSS, and JavaScript, along with the React framework, as well as BootStrap, to create a clean and consistent theme across our site that utilized a bright, comfortable color palette that would appeal to primary school children. We then utilized Express to build API’s that would support the mini-games, checkpoints, and the other incentives we have across our application, such as being able to generate stickers for the sticker board to incentivize goal setting, interactivity in our mini games to encourage deeper engagement within different learning subjects, etc. We also connected Firebase with our log-in page in order for the purposes of user authentication.
What We Learned
Part of our team had never worked with React before, so we learned how to utilize the framework, and how to take advantage of React’s reusable components to build interactive and intuitive elements in our site. We also learned how to connect our front-end interactivity with the API’s we had built in the back-end with Express for our mini-games and other incentives. In addition, we learned how to set up Firebase to effectively store user profile information and user authentication for each profile that was built, so we could keep track of the student’s progress and learning achievements.
Challenges We Faced
We spent a lot of time setting up the environment in preparation for Firebase, as we didn’t have a lot of experience working with Firebase alongside React and Express. We ran into problems such as missing dependencies and node_module errors that were difficult to decipher. Additionally, when interacting with our endpoints, we encountered many security issues with Cors, when trying to work from different ports from React and Express. However, we were able to overcome these issues by researching online, and are also working on combining the React and Express ports to further work towards a more optimal solution.
What’s Next
We recognize the prominence of virtual learning, as well as the reality that many young learners cannot return to learning in-person in the context of COVID-19 and not being eligible for vaccinations. As technology becomes more prevalent in our lives, remote learning can become something that is isolating and disengaging, especially for younger learners. We hope that our application will be able to encourage and inspire students to continue learning, whether remotely or in-person, and turn it into something that’s enjoyable and exciting. A few features that we plan to implement in the future are a connection to Zoom that provides frames and animations for the speaker, a calendar for keeping track of learning goals, and a chat with friends option where students are able to message or play educational games together. Ultimately, we hope to promote meaningful interactions, whether between different students, or between the student themselves and their goals, and to encourage students to strive to learn more, in an engaging manner
Log in or sign up for Devpost to join the conversation.