For my location-based game, I chose to do an airport bingo game.
The user will open the website and see a traditional looking bingo game board. On the 24 squares (not counting the free space) the user will see different situations or people that they may encounter at the airport or in the airplane. As the user sees these, they can simply tap the square to check it off. There is no “signifier” when a user gets a bingo, allowing them to check off as many as they see, not just simply stopping when they’ve found 4 or 5 of the squares.
I found a website that allows the user to create bingo squares and every time the website is refreshed, the game board is reconfigured with the tiles you put in. I then loaded this website onto an html document. I wanted to make sure that this game could be played anywhere, but also couldn’t be completely filled in at one airport, so I put specific squares in that are only available at certain airports or contradicting squares like only two terminals or more than four terminals – you can’t have both of those.
In order to put more emphasis on the location of the user (what airport they are at), I decided to put a form at the bottom of the website where the user can fill in their name, airport, and an interesting/unique/cool thing they saw at that airport. Once they press submit, the website will load a new page that lists all the users and their answers. This way users can see similarities and differences between airports (that may be in a similar area).
I had a bit of trouble with the layout of the website. I continued to use EvoThings and its platforms. When I would view the website on my phone, the bingo table (which is in an iframe) would continuously shrink. I also couldn’t zoom in. The form was also all the way on the left instead of centered. With Matt, I put a red border around everything to see the edges of all my sections on the page. We finally were able to configure the CSS to make everything look nice.
I tried to add another page that would display all users’ answers, but I ran into more issues. I had to work with PHP and got confused pretty fast. What the website does now is navigates to the list page, but for some reason comments out my php get functions so they don’t show up. I would love to get this working eventually!
This is before centering the form (and before the second page):
This is how it is now: