Hopp-ing Through History

Hopp-ing Through History
Level 1: Ada Lovelace
Level 2: Mary Jackson
Level 3: Roya Mahboob
Grace HOPPer says...

A short journey seeking to educate about female representation in tech through history.

By: Daniela Gallegos Dupuis, Emily Andrews, Faith Tan, Jaylan Hamad, Jessica He, and Vicky Yu

Try it out here! ❤️

Inspiration

Initially inspired by a team member Emily on her daily run, we transformed the simple Chrome T-Rex Game into a fun and cute adventure seeking into women’s irreplaceable impact in tech throughout history.

The Problem: Gender biases are oftentimes implicit:

Did you know who was the first computer scientist that envisioned what computers are capable of?
Did you know who achieved the senior-most title at the engineering department at NASA in 1979?
Did you know who founded and is serving as the CEO of the Afghan Citadel Software Company?

How can we educate others and try to combat implicit gender norms and biases with our beginner skill set yet ambitious spirits?

What it does

The Solution: “Hopp-ing Through History” is a web browser game that raises awareness about women in technology and the struggles they have faced throughout history. We wanted to create an easy yet aesthetically pleasing game that would educate players about the impact of women in technology to reduce gender bias.

How we built it

Since “Hopp-ing Through History” was inspired by the T-Rex Game, we watched tutorials to learn the JavaScript, HTML and CSS syntax and better understand the T-Rex Game code implementation. Since we were all beginners, the public T-Rex Game code formed the skeleton of our implementation and we have modified it to better match our vision. We also used Figma to design the different iconic women and their obstacles and make our vision come to life.

Challenges we ran into

Learning how to code using JavaScript, HTML and CSS in a short period of time.
Finding the perfect export size for our icons for UI aligning.
In other words, learning everything from scratch and making it aesthetically pleasing!

Accomplishments that we're proud of

Our ability to work with new tools and concepts, i.e. firsthand experience with JavaScript/ HTML/ CSS and using Figma for web design.
Participating in a Hackathon for the first time and seeing our vision come to life!
Channeling Girl Power energy to complete our project.

What we learned

How to design a webpage and build a game!
How to make a presentable and wonderfully cute interface

What's next for Hopp-ing Through History

Adding more levels and introducing a wider diversity of women in tech!
Improving gameplay physics

Built With

Submitted to

cmd-f 2021

Created by

I worked on implementing and tweaking gameplay physics. It was challenging tackling a new language (and building a game) in such a short time!

Jessica He
First hackathon and first time working with front-end! I'm super happy to be working with such a great team. Speed learned HTML/CSS, worked on getting the landing page up, and adding music to the game. Got lots of git experience :) Also published our website to faitht1023.github.io

Faith T
Collaborated with an awesome team for my first hackathon!
I worked on designing the icons and backdrop decorations. It was my first time experimenting with Figma and using HTML/CSS, which was a little challenging, but I learned a lot! Also learned how to use Github for collaborative projects.

jaylan hamad
My team and I achieved a lot in a short amount of time. This was the first time that I worked with CSS. I sharpened my Javascript and HTML skills. I learned how to edit text in HTML. I honed my Github skills by live collaboration.

Vicky Yu
I worked on personalizing the game, getting the characters into the game and did some research for character's information. This was my first time experimenting with css, html, and javascript and my first time participating in a hackathon!

Daniela Gallegos Dupuis
Im am so excited to have worked with such an awesome team for my first hackathon! For this hackathon I worked on designing graphics and illustrations, and realizing designs in Javascript, CSS, and HTML. I also learned how to work with animations in Javascript, and I improved my skills in using Github for collaborative projects.

emsandrews