Last week, Atul Varma, David Humphrey and I took some time to think about crafting specific missions or quests that were directly mapped to initial interactions or skills that can be acquired when using the Hackasaurus X Ray Goggles. These training missions are being thought of as a way to introduce a new user to the "Hackasaurus" experience (no relation to the Jimi Hendrix Experience). Here is a little summary of our prototyping session.
The first thing that we did, was list the basic kinds of interactions that we know teens either have or that we would like them to have with the goggles:
Some of these interactions are really for advanced users. For example, ascending or descending to parent/child elements is something that really gets users to start to explore the Document Object Model (DOM), however isn't learned on the first day or hour with the tool. We also thought about more "hackable" interactions, or ways that teens could start to explore code- without actually knowing any code (ie- hacking javascript code without know how to program). As a result we came up with 4 concepts for training missions using the X-Ray Goggles.
Prototype 1:
Skill: Learn how to read and edit links
The idea for this sketch is that you can edit a link. So here, you have three animal links that connect to wikipedia entries, except the link for cat goes to an ugly dog- so the user will have to change that link using the goggles
Prototype 2:
Skill: Learn how to delete an element
The idea here is that the ball is moving around the frame (which has kind of a Super Mario Brothers set) and the goal is to get the ball into the basket which cant be done until you delete the div of the bar that is blocking the basket, using the goggles of course.
Prototype 3:
Skill: Learn how to edit javascript
This sketch shows this idea about kind of creating a "pinball" effect by increasing a value in javascript. The idea is that even if you don't know everything about javascript, you can hack it to make it work for you. When you increase the value to the correct amount, the ball will fly to the "pow" or portal button that takes you to the next training mission.
Prototype4:
Skill: Learn how to use CSS
This sketch shows that a user can use css to create an avatar . The idea would be that using the goggles with the CSS functionality (and even html editing) you can either reposition the objects to cover the avatar body and/or add your own elements to personalize it.
In the future at some point, we will prototype these using the repository on GitHub that Atul made for Hacker Parcours and game like creations.