harmony

Studying collaboratively to encourage teamwork and effective learning

Comment

Inspiration

We were inspired, if not encouraged, by the loneliness and stress of studying. Many students experience feelings of anxiety or panic during exam season. This is largely contributed by the pressure of wanting to do well, though there are always distractions that are much more tempting than spending the final weeks before finals to study constantly. Especially due to the effects of the Covid-19 pandemic, loneliness is as prevalent as ever before. People need to feel connected and united. Additionally, distractions that affect studying can range from social media to playing games to hanging out with friends. We wanted to resolve some of these distractions while assisting through the frustrating times of exam season by encouraging collaborative work and studying in a group. With this, we present harmony.

Research collected over decades has repeatedly shown that students learn material better when working together in a classroom setting. This same concept can be applied to collective learning even outside of the classroom. Indeed, many case studies have demonstrated that members participating in study groups experience many beneficial qualities from working together. These include understanding the material significantly better, as well as being more creative and communicating effectively. For these reasons, we believe that it is most beneficial for peers to study side by side with their classmates/friends instead of continuing to study alone.

What it does

harmony provides a number of studying or test-preparation options. First and foremost, groups can be made that allow the user to collaborate with peers. Each user has their own list of groups that can be found in a sidebar. The creator of the group can choose the color and name that it appears in the sidebar aforementioned. Within each group, there are four main tools.

There is an unlimited deck of flashcards that users can add information onto for practice. The flashcards can be edited simply by clicking the text and adjusting the information. The changes are updated in real time on other devices by members of the group. A user can go between flashcards by using the right/left arrow keys and flip the card by clicking it.

Additionally, there is a personal notes space so that users can record certain information that they want to better remember. The information in the notes are saved individually for each group, so the relevant information for the subject is organized accordingly.

The chat is another tool provided in the groups. In the shape of a tablet, it allows members to communicate directly and discuss the topics at hand. At the top of the chat box is a button for inviting people to the group. Clicking it copies a link to the clipboard which can be sent to others. When another user accepts the invite, they will be added to the group.

Finally and most notably, we created a system to auto-generate multiple choice tests based on the information in the flashcards. The code creates a test comprising of 10 questions by taking random cards and inquiring about the content on it. It lists the correct answer among three other responses taken from other flashcards. This system was built so that users could truly prepare for exams by studying their material in a likely similar format. Additionally, we wanted to make this method of practicing much more enjoyable, so we made it possible for users to take tests together and compete for a higher score. When multiple users of the same group are online and working through the same material, they can take tests together. Then, there is a leaderboard once all players are finished which shows the scores of the top players. Up to three are shown, though the leaderboard still shows the scores if there are only one or two players. Tests can also be taken solo, though we feel that the gamified system could further improve the quality and experience of studying.

How we built it

When thinking about building this project, we tried to optimize for development speed as much as possible. We ran the backend on Node.JS and, because we were routing and sending pages dynamically, we could speed up development in HTML by taking advantage of HTML templating (specifically with EJS). In the backend, we routed with Express and handled web sockets with Socket.IO. Additionally, we were able to communicate with our MongoDB server using the Mongoose package.

Challenges we ran into

One of the hardest challenges was the interpretation of design into the actual build. The aspect ratio of the elements within the site did not match up with that of the Figma design so we had to alter the layout of the design on the fly to make up for these differences. We spent a lot of time discussing color, bevel, size, and sometimes even completely redesigned sections of the site.

Accomplishments that we’re proud of

We are especially proud of the design on this website. In designing this site, we tried to prioritize friendly and clean aesthetics. We wanted to reach a very broad audience, so we needed it to appear as inviting as possible to as many people as possible. This resulted in a design that used rounded edges, which is not exactly a style that we are used to. This forced us to stray very far out from our comfort zone because we usually design more modern and sleek designs. We are also incredibly proud of the CSS work on the site. There is an abundance of animations and all around polish to this site that we are very satisfied with. We learned about and incorporated many types of animations that we believe ultimately pulled together the finished product of harmony.

What’s next for Harmony

In the future, we hope to implement a number of additions that we anticipate will make harmony even more customizable and more available. At the moment, there is a lack of user interaction with their profile. Therefore, we plan to add a settings page accordingly so that the account is more useful. For example, our additions would include allowing the user to change their username after a certain period of time (e.g. 30 days) or log out. We would also like to add a voice channel (VC) feature for simplified communication between members. Certain additions regarding customizability also include allowing the user to change the group name/color, delete groups, remove members from a group, etc. We believe that these changes will add extra appeal because it offers the user more control over their studying experience. After all, we believe that user experience is of utmost importance at harmony.

Share this project:

Updates