While reading the requirements for this project, I got inspired by a sentence saying “the page should both surprise us and lead us to think about the web we know”. It reminded me of how I felt while playing the mobile game “That Level Again”. The game has many variations of a single level but each has a different puzzle. Most solutions lead the player to think outside the box by using multiple functionalities available on a mobile device (e.g. airplane mode) or elements in the user interface. While being surprising, it made me ponder about all the possible interfaces available between me and the game and it got me to think about elements that are technically part of games but not usually used to “play” like menu items or level title.

In the context of web intervention, I wanted to make the user aware and engaged with elements surrounding conventional web browsing or web pages. Among other things, I intended to play with things like real time, window size, inputs and outputs devices, platform, code and retrievable information from the client. I decided to explore these elements using a game in order to make the interaction more inviting and to attract people with a mindset of “keep trying”. However, even though it is called a game, it is not easy nor user friendly. Since it requires some poking around and option changing, the project is addressed to people having good to advance knowledge with web browsing and browser interface. Because it makes the player think outside the box and the context is the web, the game is called “Think Outside the iFrame”. Ah, and the cat theme is simply because I love cats.

It is an experimental game so some level are not really meant to be completed plus I haven't tested it on many browser, but if you want to try it, it's here. I suggest you use a big monitor or zoom out, the layout is still in progress :P .

Elements Used in Puzzles

  • Page's title
  • User's browser preferences
  • User's location and time zone
  • Internet connection
  • Visited websites
  • Window's size
  • Page's code (CSS)
  • Which browser is used

Technologies and Languages Used

  • Javascript
  • JQuery
  • Hashing (sha512.js)
  • Photoshop
  • Git