As someone who loves chemistry and even considered double majoring in it along with computer science, I know that chemistry theory does not have a fun reputation. The periodic table can be extremely intimidating. In an art project in high school, I tried to address this issue by illustrating a cartoon periodic table. However, I realized that people would just stare at it, think it's cool, and then move on with their lives. In order for people to actually immerse themselves and learn something, they needed to interact with the material!

Thus, in this hackathon, I decided to gamify my cartoon periodic table by adding an interactive element so that the user does more than just stare at or read the periodic table. I added a metaphorical layer - the personification of the elements and their chemical/physical behavior - that reduces the user's immediate exposure to intimidating jargon and advanced chemistry concepts.

The Background Story

You live in Chemtopia, a world where chemistry elements are people just like you and me; they have unique looks, personalities, and pet peeves (note: these traits are based on the unique chemical and physical properties of each element).

There is an orphan crisis in Chemtopia, and you're a chemistry major hired straight out of undergrad by the government to help these orphans find their families.

Chemtopia is divided into several major families: the alkali metals, alkaline earth metals, halogens, noble gases, and transition metals. Although each element is one of a kind, there are still general trends in the personalities and looks of each family. This is all you have at your disposal:

1) A photo of the orphan

2) The name of the orphan

3) A small snippet the orphan wrote about himself or herself.

Based on those three pieces of information, you must correctly determine which family each orphan belongs to. Good luck! The future of these orphans depends on you; you wouldn't want to accidentally send an alkali metal orphan to a halogen family.

What it does

You are provided an illustration of an orphan (which I drew myself). The element then gives a brief description about his/her personality, or some kind of event that happened during his/her lifetime. Based on this, you must select the appropriate family the orphan belongs to. In the end you get a report of how well you did.

How I built it

React.js and CSS

Challenges I ran into

At first I was too ambitious and wanted to incorporate more aspects of chemistry into the game (e.g., learning different kinds of chemical reactions), but after a couple of hours I realized that I needed to seriously narrow down my scope. Thus, I decided to focus specifically on the families of the periodic table, because that also has the most intuitive connection to the personification of the elements.

Accomplishments that I'm proud of

The fact that I could create a web app from start to finish at my very first hackathon! Although I have coded before, I have never coded under such a time-intensive environment.

What I learned

At a certain point, you must sacrifice certain features you wanted to implement to ensure that you finish the core product. Adding too much is not good if it hinders you from actually finishing the implementation of your core idea.

What's next for Chem Fam

1) Incorporate a machine learning element, so that the elements that pop up on the game are based on your weaknesses (e.g., if the app detects that you're worst at recognizing that an orphan is a halogen, it will display more halogens)

2) Include all 118 of the elements in the periodic table

3) Make the process of getting information out of the orphan more interactive; perhaps you can choose three different questions you can ask the orphan, so it's more of a dialogue rather than just a piece of text displayed on the screen (which is the current state). This would make the product seem like more an interactive experience than it is currently.

Built With

Share this project: