Microaggression Bingo

Bingo board mobile application exploring social justice and privilege. Developed using HTML5, CSS3, JavaScript, and Facebook Instant Games integration. "Winner Winner Privilege Dinner"

Comment 2

Microaggresion_Bingo 💜

"Winner Winner Privilege Dinner"

Status GitHub Issues GitHub Pull Requests License

Table_of_Contents 💜

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!

The bingo game is monitored by a pink cat named **Chris Schrodinger* who controls who can play this "free" game. He says "Only 2D/3D boxes can play the game!". A shape named Lucifer Yellowprism says "But we don't fit in the box!".*

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 to provoke discussion and understanding

(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

Bingo_Examples 💜

  • I am white.
  • I am a man.
  • My name is one of the following: [James, Chris, Robert, Michael, William, David, Richard, Joseph, Thomas, or J0hn]
  • I have never felt unsafe because of my gender, been catcalled, or raped.
  • I have never been asked "So where are you REALLY from?", or "Why don't you have an accent?".
  • I was not bullied as a child for any of my identities :(

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

  • Gameplay Screenshot

    Picture

    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.*

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:

John

Image. Screenshot of the Facebook's "Continue as {Name} Button". The {Name} used is surprisingly John! Facebook profile image of a white male and a 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
  • Automating Inequality
  • Programmed Inequality
  • Weapons of Math Destruction <3
  • Race After Technology
  • Dark Matters
  • The Age of Surveillance Capitalism
  • Artificial Unintelligence
  • 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
  • Behind the Screen: Content Moderation in the Shadows of Social Media
  • Technically Wrong: Sexist Apps, Biased Algorithms, and Other Threats of Toxic Tech

What's_next_for_Microaggression_Bingo 💜

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

References 💜

Built With

Share this project:
×

Updates