Health Fact Game

Login page
Card is shown to the player
The player swiped to the wrong side
The player swiped to the correct side
Animation of swiping to the right "REAL"
Animation of swiping to the left "FAKE"
"Game Over" because round of cards is finished
Leaderboard

GITHUB REPOSITORY AND DEMO LINK

Github Repository: xtin2000/health-fact-game GitHub Repository Link: https://github.com/xtin2000/health-fact-game.git Demo Link: https://healthfactgame.netlify.app/

Inspiration

Since the rise of social media, there has been an enormous increase of misinformation about global health issues. In the case of this project, we started thinking about how to eliminate the misinformation of vaccines (e.g. "vaccines cause autism", "vaccines are bad", "vaccines kill people", etc.). Initially we wanted to build a browser extension for YouTube that avoids the endless stream of conspiracy videos in the suggestion tab. Due to youtube's decent algorithm of preventing this downward spiral project instead evolved into a health education true/false game about many topics such as nutrition, diseases, and medicine.

What it does

It is a game in which the player receives a card that has information about a health issue, and the player has to swipe left if that information is "false" or swipe to the right if that information is "real." If the player has swiped to the correct side, then points are added to the scoreboard.

How we built it

With the help of Claude, we developed this project to be a web application. Therefore, we used JavaScript and CSS/HTML. Babble is the "secret ingredient" that makes sure the project can work in any computer. After this, we added the feature of being able to work in the browsers of mobile phones. It could be added as a home screen icon of the mobile phone. Then, we added the element of players being able to log in and compete for the highest position in the leaderboard using Firebase in the backend.

Challenges we ran into

Making sure that each one of the 200 AI-generated cards is correct (is the specific card "real news" or "fake news"?). There were difficulties with the user accounts and the leaderboard because it would not load in the game. Firebase is a not-so-easy tool that needs to be checked and corrected constantly as software developers.

Accomplishments that we're proud of

We have learned about reliable sources of health, and we have learned curious facts about many global health issues. In addition we have learned how to create a login feature using firebase, as well as how to develop a web application from scratch and make it work.

What we learned

We live in an era of information and disinformation, and we must be careful of what we take as truth. It is our responsibility to educate ourselves and educate others about what is correct and real in this world.