BinItBetter

Start Page
Which bin should a banana peel go in?
Not that one.
Correct!
Which bin should a toothpaste tube go in?

Inspiration

BinItBetter was inspired by our shared struggles of figuring out what bins to put our trash in. Even at the start of the hackathon, after we got dinner, we were asking ourselves which bin the utensils, napkins, and plates should go in. With this inspiration, we wanted to create a project that would educate people about how items should be properly sorted. We decided to build a game that it is actively engaging with users while also providing a learning space.

What it does

The start page introduces the title of our game with a description of how to play and a start button. After clicking the start button, it will take you to a new page that has an image of an item and 3 bins, compost, recycle, and landfill. The user will have to click which appropriate bin the item should be discarded in. Upon clicking a bin, a message will pop up beneath telling the user if their guess is correct or not. If the guess is correct, a corresponding message box will pop up on the side of the item describing a fun fact about the item, including a link to additional information.

How we built it

We drew inspiration from a member’s past project experiences with HTML and decided that that was the direction we wanted to take our game in. First, we researched different items that belong in each bin and gathered their fun facts. For the UI, we then gathered images of those items from the internet that fit our 32-bit pixel style and used Javascript to manage the relations between the images and their corresponding bins and info. With this info, we connected the interface to show the correct messages. We also used CSS for the animations of the objects. We included a Soundcloud API to play background music to add some ambience to our game.

Challenges we ran into

The first main challenge was understanding HTML. Three out of four teammates never had any prior experiences with this language, so throughout the hackathon, we were all trying to grasp how HTML works and how we could implement our ideas into actual code. It was a lot of trial and error and group learning and teaching. We also had a lot of ambitious ideas that we wanted to accomplish. But after getting insight from mentors, we restructured our goals so that they could be accomplished realistically given our limited time frame.

Accomplishments that we're proud of

We are all really happy about the design of the game. As people walked by our table, they complimented us on our UI, which motivated us to keep going. We are all also really proud of having an actual finished product. It was definitely intimidating starting out with no clear direction, but as we continued to experiment, we kept learning new things and finalized our plan.

What we learned

First of all, we all came out of this with newfound experience with several languages and experiences with how to develop the front-end. We also learned how to efficiently work within a team to delegate tasks and communicate with each other about our progress.

We also learned to be more inclusive of our design. One of the features we wanted to implement was dragging the items into the bins instead of just clicking, but after getting insight from a mentor about how drag and drop can be difficult for people with disabilities, we decided to stick with clicking. It was important for us to learn to keep an open mind about the wide demographic of public games.

What's next for BinItBetter

We want to implement a way to randomize the order in which the items appear. We also want to expand the number of different items and information. We also wanted to provide more user-specific information at the end that could tell things such as the closest recyclable centers which would elevate the education experiences within the game with the use of API and other information databases.