To play, please click here, or feel free to view my code here.
Inspiration
When the prompts were revealed, I quickly thought of the solution of creating a basic carbon calculator website but realized that those often aren't sufficiently engaging to the user, and many already exist. So then, I asked myself, what could I add to a carbon tracker to make it more engaging?
That's when I came up with this idea: to make a gamified carbon calculator.
What it does
Carbon Guesser has three primary stages to the gameplay:
- Asks ten questions that are fairly typical of a carbon calculator. It uses these questions to create a custom quiz for the user in the next step.
- Quizzes the user on how their activities affect their carbon footprint, and how changing some of these activities could be beneficial (financially and for the world). The quiz also gives feedback and more information on the user's impact.
- Once the quiz is complete, the user gets an analysis page with their final score and some information on the big picture of what is causing their emissions.
This website particularly looks into a few categories of calculating a person's carbon footprint: Food, Utilities (Natural Gas and Electric), and Transit.
How I built it
Cabron Guesser was built with ReactJS (along with HTML/CSS/JS) and is hosted on Replit.
Challenges I ran into
- The hardest unexpected challenge that I faced was sourcing reliable data regarding the impact of certain activities on a person's carbon footprint. Often the initial data I found was either unreliable, required more detail than users would be able to provide (e.g., data on the efficiency and size of their water heater), or otherwise was not usable.
- Similarly to the last point, striking a balance between asking users for too much information and lack of reliable statistics was a challenge. I ended up deciding to only ask the user 10 easy questions because that increases the usability of the website while getting enough information to draw some conclusions.
Accomplishments that I'm proud of
- This website is responsive on devices with different display sizes (including mobile devices).
- All of the initial questions for carbon calculations have an "I don't know" option that will automatically select the most likely answer for them.
- This originally was planned to be a two-person project, but then got cut down to one once coding began. Even with this lack of people, the scope of the project was barely changed.
What I learned
This was my first time using ReactJS, so I'm proud of challenging myself and learning how to use that framework in such a short time span. I also learned a ton about what activities have what effect on a person's carbon footprint. For instance, I didn't know that beef has 7.2x the impact of chicken on the environment.
What's next for Carbon Guesser
There are a couple of features that I'd like to see implemented with more time:
- Leaderboards
- "Success"/"Not Quite" Animated popups on correct/incorrect answers
- A couple more questions to gauge carbon footprint (e.g., public transit usage)
- Graphs in the statistical analysis section
