Period poverty is the inadequate access to menstrual hygiene tools and education. This issue affects people all over the globe, including the US. Period poverty has been shown to directly affect a girl’s potential to succeed. If a girl misses school every time she has her period, she is set 145 days behind her male counterparts. Most girls in the developing world choose to drop out of school altogether rather than face the embarrassment and shame of being unprepared for their cycles. The stigma that still continues to surround a completely natural bodily process prevents the issue of period poverty to be solved. Not everyone can donate or volunteer with organizations, but everyone can educate themselves and help spread awareness. In this game, there are 14 drops for 14 questions about menstruation and period poverty. The user must answer questions correctly to earn money for purchasing period products. The user must collect 4 products before the time (7 minutes) is over. The collection points are not revealed until the user clicks on the drop. If there is time left and the user has yet to collect 4 products, the cycle will begin again - but the collection points will be different. The user should make sure to read the answers so that they can remember the answers for possible future cycles.

What it does

The goal is for the user to become more educated about menstruation and period poverty. The timed nature of the game reflects the time that girls lose at school due to their inability to access period products or proper menstruation knowledge. At the end of the game, the website displays ways in which the user can contribute to solving period poverty.

How I built it & Challenges I ran into

I built the game with React.js and CSS. Challenges I ran into were making the circle with the "blood drops" aligned on the circle. I realized that I could use JS to rotate and place the drops based on the number of drops there were. I also had trouble with the timer because I needed to pass information to-and-from the Timer component to display the time and know when to stop. I realize that I could simply use a setTimeout in the parent component to figure out when to stop the timer.

What I learned

By creating this game in a short span of time, I honed my React skills. I learned how to make a proper timer component and implement that with other components. I was also able to learn new CSS skills from making the UI. Outside of new technical knowledge, I also learned more about period poverty while doing research for this game.

What's next for Break the Cycle

With more time, I would add more to the user interface and make the game a bit more complex. I could flash the timer when there are only a couple of seconds left to notify the user or make a loading-bar-esque timer bar. I could change the money earned for different questions based on complexity or give out "coupons." I could also add images of products at the collection points.

Built With

Share this project: