lucylow / microaggression_bingo

Facebook's 2019 Developer Circle Challenge. HTML5 bingo board.

Microaggresion_Bingo 💜

"Winner Winner Privilege Dinner" / "We All Belong" 🇨🇦

Image. User triggers the win state by matching five boxes in a row. The popup "Winner Winner Privilege Dinner" appears and win.mp3 audio is played.

---

Table_of_Contents 💜

• Game Intro
• Social Justice Motivation
• Bingo Categories
• Technical How it works
• Technical Facebook Developer Product Integration
• Challenges I Ran Into
• Technical User Privacy Considerations
• Books to Read for White Males Named J0hn
• What's next for Microaggression Bingo
• References

---

Game_Intro 💜

A HTML5 bingo board mobile application exploring social justice and privilege for Facebook's 2019 Developer Circle Challenge. Participate in a fun, safe, and inclusive bingo game that welcomes players of diverse backgrounds! Watch the video submission here: https://www.youtube.com/watch?v=WhfnhcWPI3U&feature=youtu.be HTML5 games are games that users can play on the web, across devices. JavaScript can be used to create immersive gaming experiences that are accessible to anyone and can be integrated to platforms like Facebook Instant Games or Wechat.

Let's play the privilege game? Click here!

---

Social_Justice_Motivation 💜

Patriarchy

• "A cultural construct in which old, rich, white, straight, cisgender, able-bodied, christian men are valued more than minority groups."
• "Special rights, advantages, or immunity granted or available only to a particular person or group."

Microaggression

• "Daily verbal, behavioural, or environmental indignities, whether intentional or unintentional, that communicate hostile, derogatory, or negative prejudicial slights and insults toward any group."

Explain Privilege To Those Who Do Not See It

• Teacher tells students they are having a race and the winner recieves a prize. However, some students get a head start on this race:

  

  (Video. ”Every statement I’ve made has nothing to do with anything any of you have done. We all know these people up here have a better opportunity to win this $100 bill.”)

---

Bingo_Categories_[Config in bingo.options] 💜

• Basic bingo board

  • Pink background jpeg

• Configurations

  • Gender
  • Race
  • Age
  • Class
  • LGBT
  • Religion
  • Disabilities

• Intersectionality

  • Dangers of One Sided Story
  • Echo Chambers

---

Technical_How_it_works 💜

• HTML5 + CSS3

  • Game transitions and animations
  • Audio mp3s for bingo sounds
  • Female voice intro "Let's play the privilege game?"

• Javascript + jQuery

  • Game reads customized .json square microagression data from data.js file
  • Content randomizes reload for new game each time
  • Win state checks data attributes for winning bingo conditions
  • End game at "Winner Winner Privilege Dinner" popup

---

Technical_Facebook_Developer_Product_Integration 💜

• HTML5 Games

  • Multi-platform devices for accessible gaming experience
  • Integrates into new platforms like FB instant Games, or Wechat
  • Disadvantages: Graphical fidelity + Performance not as good as native + Battery life may suffer

• Facebook Instant Games

  • Web Instant Games bundle configuration in fbapp-config.json
  • Easily publishes game to app store for users around the world

• Facebook Login

  • Two-tap account creation using Facebook-Profile
  • Asynchronously loads login in game, does not block loading other elements
  • Integrates with Facebook Analytics - requires {your-app-id} and {api-version}
  • Refer to documentation page from Facebook for Developers below:

  

  Image. Screenshot of the Facebook's "Continue as {Name} Button". The {Name} and image of Facebook profile is suprisingly WHILE MALE NAMED JOHN AND CHILD. One can deduce he has "loving husband, father" on his Twitter bio. THIS IS BAD BECAUSE IT FURTHER REINFORCES THE PATRIARCHY. Refer to social justice motivation definition above.

---

Technical_User_Privacy_Considerations 💜

• HTML5 Local Storage Data

  • Bingo cache stores data on user's local device
  • Data.js information is removed when user clears cache
  • Storage.setItem( 'game_state', JSON.stringify(gameState));

• User.js File

  • User.js file added for user privacy
  • Template for configuring privacy and security
  • Reduce tracking from web analytics, tracking, finger-printing, or shoulder surfers
  • Harden browser settings against data disclosure or code execution vulnerabilities

---

Challenges_I_Ran_Into 💜

• Game was super boring with a "fixed"/"hard-coded" bingo board
  • Decided to make game configurable with json data so that user can choose tile names and it also randomizes with each refresh.
• Uploading the raw code to Facebook's HTML5 Instant Game platform was quite a process. Had to read through documentation to integrate facebook login, fbapp-config.json, analytics, and the continue as {Name} button.
• Accounting for user privacy
  • In a bingo board game when the bingo cache stores data on user's local device
  • Decided that data.js information be removed when user clears cache

---

Books_to_Read_for_White_Males_Named_J0hn 💜

• Algorithms of Oppression: How Search Engines Reinforce Racism
• Automating Inequality: How High-Tech Tools Profile, Police, and Punish the Poor
• Programmed Inequality: How Britain Discarded Women Technologists and Lost Its Edge in Computing
• Weapons of Math Destruction: How Big Data Increases Inequality and Threatens Democracy <3
• Dark Matters
• Race After Technology: Abolitionist Tools for the New Jim Code
• The Age of Surveillance Capitalism: The Fight for a Human Future at the New Frontier of Power
• Artificial Unintelligence: How Computers Misunderstand the World
• Through Google-Colored Glass
• Invisble Women: Data Bias in a World Designed for Men <3
• You Look Like a Thing and I Love You
• The Intersectional Internet: Race, Sex, Class, and Culture Online
• Brotopia: Breaking Up the Boys' Club of Silicon Valley
• Behind the Screen: Content Moderation in the Shadows of Social Media
• Technically Wrong: Sexist Apps, Biased Algorithms, and Other Threats of Toxic Tech
• Recoding Gender: Women's Changing Participation in Computing
• Cyber Racism
• Digital Diaspora, Anna Everett
• Ghost Work: How to Stop Silicon Valley from Building a New Global Underclass,
• Surveillance as Social Sorting: Privacy, Risk and Automated Discrimination
• When Biometrics Fail: Gender, Race, and the Technology of Identity
• Black Software: The Internet & Racial Justice, from the AfroNet to Black Lives Matter
• Race after the Internet
• Heartificial Intelligence: Embracing Our Humanity to Maximize Our Machines
• Do Babies Matter? Gender and Family in the Ivory Tower

---

What's_next_for_Microaggression_Bingo 💜

• More FB product integration since it's already on the platform. Ship it via Instant Games

---

References 💜

• "How Privileged Are you?". Buzzfeed Quiz. https://www.buzzfeed.com/regajha/how-privileged-are-you
• Top 10 Male Names. https://duckduckgo.com/?q=top+10+male+names&atb=v1-1&ia=web and https://duckduckgo.com/?q=how+to+overthrow+the+patriarchy&t=h_&ia=about
• Harvard Implicit Bias Test. https://implicit.harvard.edu/implicit/selectatest.html
• Developers Circles 2019 Competition. Devpost. https://developercircles2019.devpost.com/?ref_content=featured&ref_feature=challenge&ref_medium=discover
• User.JS File for User Privacy Github. https://github.com/pyllyukko/user.js/tree/relaxed
• Facebook Instant Games Developer documentation. https://developers.facebook.com/docs/games/instant-games/getting-started/launch-checklist
• Facebook Login Integration. Developer documentation. https://developers.facebook.com/docs/facebook-login/we
• Responding to Microaggressions. https://advancingjustice-la.org/sites/default/files/ELAMICRO%20A_Guide_to_Responding_to_Microaggressions.pdf

microaggression_bingo's Issues

FB

integrate Facebook API e.g. Messenger, Graph API and other open source tools.

requirements.txt file

Add healthbar hp or privelege bar pp

5/5 full health points
4/5 full health points with free space

JS file : Add a timer for game

18+ version - add violence

1. add health bar

2. for each microaggression

• add a slash + blood + gore

3. end game

• boom headshoot - crosshair on the screen and lady screaming (or a creepy laughing mp3)

add results - tiny.url A/B background testing

Call "updateAsync " to Leverage Game Updates

Call updateAsync to inform Facebook of any relevant update that occurred in the game.
Game Updates examples

• new friends invited to play
• existing players challenged
• friend's high score
• player's best high score can be used to generate messages that appear in Messenger conversations (also called Custom Updates)
• updating content across Facebook. (Documentation: Custom Updates)

Make /images file

too many pics getting confusing

Add Data Deletion Request Callback

Facebook app settings provides a way for people to request your app to delete the data it has from Facebook about them.

https://developers.facebook.com/docs/apps/delete-data

responding to microaggressions

gender bias - lean in

1. Raise your concerns directly: Explain your reaction and why their behavior offended you.

2. Use a snappy comeback: Use humor or sarcasm to defuse the situation and make your point in a playful way. Practice one-liners with the women you know.

3. Ask follow-up questions: This can help identify unconscious bias. For example, “Why do you think I’m the best person to take notes?”

4. Relieve stress in the moment: Remind yourself to relax, breathe rhythmically to a specific count, and try not to obsess over what happened.

5. Find allies: Look for men who listen to you, speak respectfully to everyone, include you in the conversation, and seem willing to help.

6. Escalate the situation: Comfort levels differ, but some situations clearly cross a line. Reach out to your supervisor or manager and let them know what’s up.

7. Seek out a mentor or sponsor: They can give you advice and coach you through difficult situations. There’s no shame in asking for help!

8. Connect with other women: Reach out to other women to get support and talk through common challenges.

Add video link to win-state popup

add "Explain privilege to those who don't see it"

https://www.youtube-nocookie.com/embed/4K5fbQ1-zps

to "winner winner privilege dinner" popup