Crammed Together

Inspiration

By the time university rolls around, the shift from a laid back high school schedule to a rigorous university program is evident, and if you are involved in many math-based courses, preparing for assessments can get stressful and very, very boring. This inspired us to create a website that allows friends/study groups to join together in a time-cramming competition to solve problems of their choice as quickly and efficiently as possible, and to be able to sabotage their peers to keep their time at a minimum and to increase theirs as much as possible.

What it does

Users are capable of joining a host on a local server than can be hosted on a local network. The host can share the lobby's code to whomever may join the event, and then the host can choose any number of questions from a variety of question types including integrals, derivatives, and boolean algebra. There are also game settings available where the host can tweak whatever they want to make the game more suited for their liking, such as the maximum time given to solve a problem. Once the game begins, every player will be given the same problems in the same exact order, and the ultimate goal is to take the least amount of time out of everyone else to solve every single problem. This not only encourages speedy problem solving and apt critical thinking, but it allows players to sharpen their math skills over time within any area that they choose, and they can take what they learn from rigorous practice to apply to real world problems. To make things more interesting, there is a chance that for every couple questions, players can sabotage one another in order to make them take more time to solve their problems.

How we built it

Through the use of Python and socket.io, we created an elaborate backend system that handles local server handling as well as live updates from clients to the server, in order to keep every update live for every player. Once the foundation was prepared, the frontend was created using HTML, CSS, Typescript and Svelt. It is worth noting that Svelt was utilized to simplify the frontend workflow by cutting down on the amount of files required, keeping the CSS in one local file, and combining with Typescript to produce an organized and efficient program that satisfies users. The MathJax library was utilized to make the mathematical formulae appear formal within the questions.

Challenges we ran into

This project was very ambitious and we did intend to implement much more things, but we decided to narrow our scope down simply to mathematics because we are all first year students and it would be most relevant to us and our studying needs. Setting up a local server proved much more difficult to be done due to the challenge of creating a template that can be applied to any general math question as well as passing live data from the clients to the server, and then updating the server accordingly. We did also have some difficulty designing the user experience. We ultimately decided to put a lot of time towards refining the sabotage and quick time features, as we felt that it would keep players on their toes and pressure them to perform well against their peers. Our biggest problem by far was implementing MathJax and certain socket.io logic into our project. They have plenty of potential in what they can do, but the documentation is either limited or not very good, and people who have previously had issues with them have reported them a long time ago, meaning that the majority of their solutions were outdated.

Accomplishments that we're proud of

We are certainly very proud of our implementation of a fully functional server because it is our first time doing this. We like to try new APIs every time we tackle a hackathon, and Svelt alongside socket.io proved to be very big helpers in simplifying our work and creating a functional product. We are also proud of how the user experience turned out to be. We put a lot of time into making something fun that also fit into the event's categories, and we truly think that we've accomplished our goal. It was a tough road, but we are happy with how our work ended up and how user-friendly it became.

What we learned

The biggest takeaway from this project was learning how to send data between clients via a host server. We were able to create a backend system that essentially allowed us to pass in as many pieces of information as we needed to be held in the server, which simplified sending them to the clients. We did also refine our skills with HTML, CSS, and TypeScript and have been able to create organized and neat layouts much more efficiently this time around.

What's next for Crammed Together

We did mention that this was initially ambitious, and to continue work on this project, we would first begin by implementing a PDF uploader to the site that would allow users to upload notes and receive a brief summary of the subject before beginning the game. We feel that this would refresh the user's mind before entering a studying state, and would permit them to work more effectively. Then, we would allow users to upload their own questions and subjects locally, to give them more accessibility and freedom with the website. Finally, we would implement a general template for many well-studied subjects including biology, chemistry, physics, computer science, and so on, in order to give users a reference template that can be used as inspiration in their future participation on the site.

Built With

• css
• html
• mathjax
• python
• socket.io
• svelt
• typescript