Tag Archives: hackasaurus

“Mucking around with HTML is like baking bread or changing a tire”

Posted on by
2

Meredith Stewart

I love that analogy from Meredith Stewart, a 7th grade history teacher in North Carolina writing about her first Mozilla Hackasaurus hack jam.

Sponsored by the National Writing Project, the recent jam gave educators a chance to use Firefox and Hackasaurus to mess around with websites by changing the underlying HTML that makes them tick.

Meredith’s post about the experience perfectly captures the value of getting our hands dirty through webmaking, and reminded me of Mitchell Baker’s keynote on creation vs. one-way consumption at the Mozilla Festival. Meredith writes:

It’d be easy to say, “That sounds fun, but what’s the point?”

For me, mucking around in the HTML was like making bread from scratch or changing a tire. They’re activities in which I want to engage as an act of understanding and joy, not necessarily of utility or efficiency.

I think for ourselves and our students understanding the means of production are important, so that we can be responsible and thoughtful teachers, students, and humans.

Hack jam organizer Andrea Zellner + fellow hacker

The hack jam’s organizer, Andrea Zellner, also writes beautifully about revealing the hidden structures that make up our digital lives:

As more and more research and attention is paid to the ways our literate lives are mediated by interactions on the internet, less attention is paid to the function of the tools that get us there. How many facebook posters understand the algorithm of the newsfeed? How many people uploading content to Youtube understand the genesis of the embed code? There is an entire hidden structure of the webpages with which we interact that mediates the way we compose and present ourselves on the web.

Enter the hackjam: designed to make visible the hidden structure of the internet for K12 students (but most grownups I know would benefit, too!), these tools provide an entry into inquiry about the ways we are both freed and bounded by the hidden structure of the internet pages we visit.  By developing our hacker selves, we are then empowered to move ourselves more critically through these spaces, rather than being led through them.

 

Hosting a Hackasaurus game jam for kids

Posted on by
6

Mind the gap.

As part of this week’s Hackasaurus game sprint, eight rambunctious kids aged 8 to 11 joined us in the new (and still under construction) Mozilla Toronto office. Our mission:

  • Test early game ideas and prototypes. Like X-Ray Goggle training missions, hack mazes, and hackable comic books.
  • Brainstorm totally new ideas. Have them surprise us with cool stuff we’ve never thought of.
  • Stage a mini dress rehearsal for what we want to do on a larger scale at the Mozilla Festival. Bringing kids, game designers and developers together in London for Hackasaurus design jams and hack sprints this November.

1) Icebreaker: Hacking board games

To get warmed up and into the spirit of the thing, Jess had the kids start by hacking some traditional board games.

Kids hacked and reinvented some traditional board games -- like Snakes and Ladders, Monopoly and chess -- changing the rules and game mechanics to make them more fun.

Ways to hack traditional games. The kids came up with a fifth: adding narrative and back story.

Turning Monopoly into "Hackopoly."

In this version, each game piece has unique powers.

2) Testing Hackasaurus game prototypes

Next we tested some early game prototypes for the X-Ray Goggles. Like Atul’s “Parable of the Hackasaurus,”and an early bare-bones “hack maze” prototype Dan Mosedale and David Humphrey put together.

In both cases, players are given a “broken” page and then use the X-Ray Goggles to fix it using simple HTML.

Tristan uses the X-Ray Goggles to fix broken elements on the page. The page responds in real time, counting down the number of elements left to fix.

 3) Kids designing their own game prototypes

Next we divided the kids into three groups:

  1. A “hackable comic book” group. Working on illustrations and early narrative for an interactive comic-book style experience using the X-Ray Goggles.
  2. A “build your own game using Scratch” group. Thinking about how you might incorporate the X-Ray Goggles into the gameplay.
  3. A “hack maze” group. Working on how to create “Portal”-style games where users create and share their own hack mazes.

This group began paper-prototyping a hackable online comic book experience. Players would use the X-Ray Goggles to change the characters and narrative, with remixing elements in HTML and CSS built right into the story.

This group designed their own game using Scratch. In less than 90 minutes, they were able to create their own "zombies vs. machine gun tower" game. They imagined using the X-Ray Goggles to hack leveled-up super zombies back into normal zombies.

Most games have a "training mission" or two to help you figure out how to play. The X-Ray Goggles need the same. Using the "Parable of the Hackasaurus" as a prototype, Atul hacked together this quick training mission (using artwork from the kids) to help users understand how to remix images. Individual training puzzles like these could be linked together into a larger "X-Ray Goggles obstacle course" or "hacker parcours."

What did we learn?

  • Testing and co-designing with kids is *always* a good idea. I was worried that we weren’t ready for real kid feedback. Jess helped me see that was wrong — and I’m totally sold. Testing with users — especially kids — is always going to yield interesting results.
  • It’s important to really listen and ask twice. Some of the kids would give one response in a group, but then give different answers when asked individually afterward. Like anyone, they don’t want to hurt your feelings. They won’t necessarily tell you “I think your prototype is lame” right to your face. So it’s crucial to ask and re-ask in different contexts.
  • Most kids instinctively get and speak game language. They think like game designers. To an even greater extent than anticipated. With complex concepts for character, narrative and game mechanics.
  • Some of our stuff is skewing too young. Two 12-year-olds privately described one of our prototypes as “baby-ish” and “cheesy.” Given that we’re targeting a 10 to 15-year-old age group, this is feedback we need to take seriously, and incorporate into our re-branding efforts in Q4 / Q1. Over-earnestness or babyish-ness is the kiss of death.

Portal gives you tests and progressive levels that require you to learn new skills as you go. An X-Ray Goggles "obstacle course" or set of training missions can do the same.

What ideas should we incorporate going forward?

  • Prioritize the X-Ray Goggle training missions. We’ve added this to the Hackasaurus roadmap for beta in September. The current X-Ray Goggles page makes it easy to install the Goggles — but doesn’t help you figure out how to use them in a scaffolded, self-guided way. We need to add that next.

The basic skills you need to start messing around with the X-Ray Goggles

  • The hackable comic book concept shows promise. Kids immediately got it, and it gave them a chance to get their hands dirty with illustrations and paper prototypes quickly.
  • So do the Tilt 3D and “Portal for the web” concepts. Kids liked the video demo of Tilt 3D, and liked the idea of busting hacks as a way to “unlock” pages and do cool stuff to them.

[youtube=http://www.youtube.com/watch?v=dW2eAbr5FBw&feature=youtu.be]

  • Unlocking super-gadgets. One of the best ideas was that busting a hack on a page would unlock a super-gadget — like a flamethrower — that you can then use to “set fire to the web page” you’re on. Or unlocking a Katamari ball you can roll around, or jackhammer you could use to bust up the page. This gives regular incentives to progress through various hack puzzles and pages — unlocking cool new web superpowers as you go.
  • Consider avatars and characters. This was the other idea we’d never really considered — web characters or avatars that run around the page, jump through portals, etc.

More detail on training missions, comic books and hack mazes coming soon

Hack this Game: Portal for the Web

Posted on by
2


“Portal” and “Portal 2” are mind-bending and addictive. There’s something magical about firing your first “portal gun,” hacking through the fabric of everyday space to unlock whole new dimensions and possibilities.

What if we could do the same thing to the web? Making it easy for players to “fire a portal gun” at everyday web pages, using the Hackasaurus X-Ray Goggles to uncover easter eggs, solve puzzles and run through “hack mazes.” Using cool new tools like WebGL and Tilt in the background to bring cinematic transitions and game-like effects to familiar web pages. Like “Where in the World is Carmen San Diego” meets the hacking the Matrix.

Hackasaurus game challenge: Build a “hack maze” for the X-Ray Goggles

That’s the Minimum Viable Prototype idea I’d like to submit as part of the “Hack this Game” design challenge and hack sprint. Why is it a good fit for the Hackasaurus project and road map right now? Because it seems:

  • Doable. All we need for a prototype is one or two hack mazes, consisting of three or four web pages a piece. Plus some cool early examples of what the HTML5 transitions and effects could look like.
  • Familiar. Players, game designers and developers are already familiar with the Portal game, making it easier to explain and wrap our minds around.
  • Participatory. In the medium-term, we can make it easy for players to create and share their own hack mazes. This gives Hackasaurs an easy pathway beyond messing around: building mazes and worlds out of your hacks, and sharing them with friends.
  • Builds off what we’ve already got. Hackasaurs are already using the X-Ray Goggles to create and share their “hacks” — remixed versions of everyday web pages. This adds a game layer over top of them, and a more compelling reason to storify and share your remixes with others.
  • Fun (?). That’s the #1 requirement! I don’t think we’ll know whether it’s genuinely fun until we build a prototype. If we succeed, we’ll weave basic HTML right into the game-play, as the means by which players solve puzzles and advance. All sugar, no medicine.

X-Ray Goggles: coolest invention since the Portal Gun?

In the same way that the portal gun alters your sense of reality, so do the X-Ray Goggles — revealing the web as something malleable, tinkerable, made by all of us. With glowing bits of Matrix-like code just under the surface that we can mess and play around with. Safely experimenting, remixing and breaking things to see how they tick.

This turns the open web itself one giant game. We can build on the basic game mechanics of hack mazes to lay the foundation for David Humphrey’s larger vision: turning the open web into one giant gamespace or Alternate Reality Game (ARG).

Running through hack mazes

What would the basic game mechanics consist of? Players would use the X-Ray Goggles to solve puzzles and advance through a hack maze. These mazes can be created by us to start, but ultimately be created by players / educators / game designers / interactive storytellers / anyone.

Spot and unlock hacks to advance. In the same way that Portal presents you with a locked room and a portal gun to try and get out of it, Hackasaurus would give you a familiar-looking web page — but with a difference. One of the elements is different. Something’s been altered or remixed somehow. Maybe the photo on that New York Times page has been changed to a picture of somebody’s Cocker Spaniel. Or maybe the Google logo has been transformed into a sock monkey.

Can you spot the hack — and use the X-Ray Goggles to change it back? Or remix it yourself? Once you do, the page itself can start spinning and twisting and come to life in crazy ways (using WebGL, Tilt and other HTML5 magic behind the screen). A portal opens up around your hack, and it feels like you’re stepping through the guts and DOM of the web page itself. Like seeing the glowing green code behind the Matrix, sucking you through the web to the next page in the maze.

How would players create hack mazes?

What would the basic steps in the user experience for creating a hack maze look like?

  1. Bust a hack with the X-Ray Goggles. Go to any web page and use the X-Ray Goggles to remix something. Change the photo on a friend’s web site. Alter some text on a Wikipedia page, etc.
  2. Repeat. On to the next page. The user making the maze goes to a new page and repeats the process. By repeating this process three or four or however many times, you’ve created a “Hack Maze” — a series of hacks strung together across multiple pages. (Ideally with some kind of X-Ray Goggles “Maze-Maker” functionality tracking the process and making it easy in the background.)
  3. Publish and share your maze with others. Congratulations! You just made a hack maze! Now why not share it with friends? Maybe it’s a “flags of the world” maze or a LOLcats maze or a politically subversive re-imagining of the Tea Party maze. Hackasaurus mazes would be limited only by the maze-maker’s imagination.

Play as participation, participation as play

The best mazes can become popular games and puzzles for Hackasaurus. Hack Mazes could have themes, learning outcomes, or just be hilarious. An educator could, for example, create a Hack Maze on geography, where flags or labels on a map are re-arranged and students have to use the X-Ray Goggles to put them back. Or you could create a Hack Maze for School of Webcraft that teaches the basics of HTML, CSS or Javascript along the way. The beauty is in letting players decide and make up and share their own experiences. Play as participation, participation as play.

Wow factor = bringing familiar pages to life in strange new ways

  • The wow factor will come from using HTML5 effects and transitions to blow players’ minds. Bringing everyday web pages to life in crazy ways no one’s seen before. Pages can change color, spin, and twist apart in three dimensions as you successfully open a portal. Or pages could break into a million pieces like jagged glass, or literally “explode” if you use the X-Ray Goggles wrong. (Check out Tilt or the effects section at Three.js for inspiration.)
  • Make failure fun. Like Jane McGonigal‘s example from “Super Monkey Ball 2,” a which makes throwing a gutter ball hilarious and by extension, makes failing fun. Let’s follow the same principle to make HTML less intimidating and make breaking stuff fun.
  • Make HTML and the web’s building blocks more tangible. Less like code, more like Lego. The transitions and effects — by exploding or stretching the DOM of the page in 3D, for example — can make the web seem more tangible, craft-like and malleable.
  • Play with a Matrix-like sense of uncanny and mind-bending.  Imagine you’re sitting in your living room knowing that *one* element is suddenly different. Maybe there’s a red ruby slipper suddenly hidden in the top drawer of your desk. Or the picture of your family has been mysteriously swapped with a Selleck waterfall sandwich. That’s the sensibility we can bring to players’ own everyday online reality. Imparting a sense of wonder, magic, and Matrix-like mind-bending.

Build this game: Want to get involved?

Hackasaurus will be running an ongoing “Hack This Game” design and developer challenge. To create and share games and puzzles for the X-ray Goggles, making web-making and tinkering fun for kids aged 11 – 16 (and ideally adults as well).

We’re looking to get game designers, web developers and HTML5 enthusiasts together to swap ideas and code. The only restriction: game concepts have to involve the X-Ray Goggles in some way. Here’s how to get involved:

  • Our first Hackasaurus game sprint is happening Aug 8 – 12. With more sprints to follow. See this post for details.
  • If you’re interested in participating at any point, please get in touch through the Hackasaurus mailing list, or join a weekly Hackasaurus community call.
  • Share your prototype ideas and goals for the sprint as comments on this post, or on the Game Sprint etherpad. Linking to your own blog posts, tools, napkin sketches, etc.
  • The Hackasaurus web site and project page have plenty of project links and tools.
  • We’ll turn up the volume and engage kids, game designers and developers at the Mozilla Festival in London this November.