>**How would you teach something about the web using a game?**
This was the [design brief](https://wiki.mozilla.org/Events/London_Learning_Jam/Design_Brief) we gave a talented group of educators, designers, and developers last week at the [Mozilla London Learning Jam](https://wiki.mozilla.org/Events/London_Learning_Jam).
Our thesis is:
* **Use game-like mechanics** to encourage learning and making
* **Hack on real code,** not rely on training-wheels
* **Meet learners at their interests** with tools that help them express themselves
## Thimble ##
We built a framework to **make it easy to create new games.** It’s a two-pane editor called [Thimble](http://thimbletest.org/en-US/).
One side has code and short comments to explain what to do. The other side has the rendered website, which updates after every change you make to the code, so you can see how the snippets connect.
We used the Thimble framework to **hack on new games and playtest them with adults and kids.**
## New Games ##
During the first two days of the learning jam, we broke into groups to design the learning games. Some groups came with a brief in mind, others found their way using paper prototyping and talking through what they’d like to make.
I was thoroughly impressed by the creativity and thoughtfulness of [the new games](https://wiki.mozilla.org/Events/London_Learning_Jam/Projects):
* [The Animal Builder](http://thimbletest.org/en-US/projects/nesta/zoo) by the London Zoo. Mix and match animal body parts to create hybrid animals. Learn HTML & CSS.
* [Wickedpedia](http://thimbletest.org/en-US/projects/nesta/wickedpedia) by Steve Bunce (Open University) and Oliver Quinlan (Plymouth University). Edit celebrity Wikipedia pages. Learn hyperlinking, generating content.
* [Supporter 2 Reporter](http://thimbletest.org/en-US/projects/nesta/s2r/edit) by Radio Waves. Create your own blog to report on sports such as Olympics. Learn blogging, layout, curation, branding.
* [Get off my Lawn](http://thimbletest.org/en-US/projects/nesta/zombies/edit) by The Guardian and Goldsmiths. Clear the zombies away from your garden lawn. Learn CSS positioning.
* [Bunnies](http://thimbletest.org/en-US/projects/nesta/bunnies/edit) by Ben O’Steen. Save the bunny from danger by putting it in a safer environment – or worse! Learn HTML Basics, images, CSS positioning.
* [Cube](http://thimbletest.org/en-US/projects/nesta/cube/edit) by Laurian Gridinoc. Create a 3D Cube. Learn CSS and trigonometry.
* [Readability](http://thimbletest.org/en-US/projects/nesta/readability/edit) by Doug Belshaw. Make the text on your webpage legible. Learn HTML and typography.
## What makes a good learning game? ##
We playtested the new games twice: once with a group of educators, policy-makers, funders and activists and the next day at [CoderDojo London](http://zen.coderdojo.com/dojo/74) with about 15 kids.
Check out [what the kids made!](https://mozlearning.etherpad.mozilla.org/llj?)
The feedback from both rounds was incredibly helpful. My biggest take-aways were:
* The **comments in the code can be instrumental** in making an effective learning experience. The Zombie game did a fantastic job both setting up the code to apply your learning and to prompt you using simple comments.
* **Give a clear mission.** Some of the games had brilliant premises, but did not communicate upfront what their purpose was. When you start a game, you should know immediately what the goal is and what you’re expected to do.
* **Prompt creativity, but plan some backups.** In games like Make Your Own Meme, participants said they felt pressure to be creative and didn’t know what to write. If we had more defaults or recommended images pre-loaded and commented-out, you could easily toggle in new content without much hassle.
* **Show what others have made.** A key feature rolling out next for Thimble is a gallery. I think this will go a long way in encouraging users and showing what’s possible with the tool.
* **Work in pairs.** Another tested thesis of ours is the power of working together. I found during the playtesting that teams hacking on the same games benefited greatly. They began to teach each other things and be inspired by one another.
## What next? ##
We’re rolling in this feedback into the next release of Thimble. In future versions, it’ll also be easier to create new games and to share hacks.
The learning & making kicks into high gear this summer, starting June 23 with the [Summer Code Party](https://webmaker.org/en-US/events/about/summer_campaign/). We invite you to **get together with family & friends and teach other the web using these games & whatever you like.** You can also think about a hack jam to build even more games.
And there will certainly be a component of these tools & games at this year’s [Mozilla Festival](https://donate.mozilla.org/page/signup/2012festival-updates). We’re bringing some of the best people and projects to London to showcase what they’ve done over the summer — so dive in, and also give us feedback about what we can improve, what you’d like to see, etc.
## Thanks! ##
We had a lot of fun, and this event won’t been possible without a number of great people.
Firstly, a huge thanks to NESTA in particular **Amy Solder and Mark Griffiths** for supporting the event and paving the way with key organizing.
A shoutout to all the hack jam and playtesting participants. Congrats to **Alaistar Davies, Mark Riches, Laurian Gridinoc, William Duyck, Allan Callaghan, Doug Belshaw, Ian Usher, Oliver Quinlan, Ben O’Steen, and Steve Bunce** for making cool new games.
Thanks to CoderDojo London, especially **Andy Kent**, for letting us play together.
Thanks to **Jess Klein, Chloe Varelidi, Erin Knight, Laura Hilliger and Andrew Hayward** for their hard work on the learning missions, Thimble, and leadership at the jam.
Lovebomb to **Allen Gunn** for facilitating, to **John Bevan** for inviting such great people, to **Ravensbourne** for hosting us, **Paul Clarke** for the photos, and to **Mark Surman** for the vision of how we can all learn and make on the web together.
*Images by: [Paul Clarke](https://secure.flickr.com/photos/paul_clarke/) and [Oliver Quinlan](https://secure.flickr.com/photos/oliverquinlan/)*
>**How would you teach something about the web using a game?**
This was the [design brief](https://wiki.mozilla.org/Events/London_Learning_Jam/Design_Brief) we gave a talented group of educators, designers, and developers last week at the [Mozilla London Learning Jam](https://wiki.mozilla.org/Events/London_Learning_Jam).
Our thesis is:
* **Use game-like mechanics** to encourage learning and making
* **Hack on real code,** not rely on training-wheels
* **Meet learners at their interests** with tools that help them express themselves
## Thimble ##
We built a framework to **make it easy to create new games.** It’s a two-pane editor called [Thimble](http://thimbletest.org/en-US/).
One side has code and short comments to explain what to do. The other side has the rendered website, which updates after every change you make to the code, so you can see how the snippets connect.
We used the Thimble framework to **hack on new games and playtest them with adults and kids.**
## New Games ##
During the first two days of the learning jam, we broke into groups to design the learning games. Some groups came with a brief in mind, others found their way using paper prototyping and talking through what they’d like to make.
I was thoroughly impressed by the creativity and thoughtfulness of [the new games](https://wiki.mozilla.org/Events/London_Learning_Jam/Projects):
* [The Animal Builder](http://thimbletest.org/en-US/projects/nesta/zoo) by the London Zoo. Mix and match animal body parts to create hybrid animals. Learn HTML & CSS.
* [Wickedpedia](http://thimbletest.org/en-US/projects/nesta/wickedpedia) by Steve Bunce (Open University) and Oliver Quinlan (Plymouth University). Edit celebrity Wikipedia pages. Learn hyperlinking, generating content.
* [Supporter 2 Reporter](http://thimbletest.org/en-US/projects/nesta/s2r/edit) by Radio Waves. Create your own blog to report on sports such as Olympics. Learn blogging, layout, curation, branding.
* [Get off my Lawn](http://thimbletest.org/en-US/projects/nesta/zombies/edit) by The Guardian and Goldsmiths. Clear the zombies away from your garden lawn. Learn CSS positioning.
* [Bunnies](http://thimbletest.org/en-US/projects/nesta/bunnies/edit) by Ben O’Steen. Save the bunny from danger by putting it in a safer environment – or worse! Learn HTML Basics, images, CSS positioning.
* [Cube](http://thimbletest.org/en-US/projects/nesta/cube/edit) by Laurian Gridinoc. Create a 3D Cube. Learn CSS and trigonometry.
* [Readability](http://thimbletest.org/en-US/projects/nesta/readability/edit) by Doug Belshaw. Make the text on your webpage legible. Learn HTML and typography.
## What makes a good learning game? ##
We playtested the new games twice: once with a group of educators, policy-makers, funders and activists and the next day at [CoderDojo London](http://zen.coderdojo.com/dojo/74) with about 15 kids.
Check out [what the kids made!](https://mozlearning.etherpad.mozilla.org/llj?)
The feedback from both rounds was incredibly helpful. My biggest take-aways were:
* The **comments in the code can be instrumental** in making an effective learning experience. The Zombie game did a fantastic job both setting up the code to apply your learning and to prompt you using simple comments.
* **Give a clear mission.** Some of the games had brilliant premises, but did not communicate upfront what their purpose was. When you start a game, you should know immediately what the goal is and what you’re expected to do.
* **Prompt creativity, but plan some backups.** In games like Make Your Own Meme, participants said they felt pressure to be creative and didn’t know what to write. If we had more defaults or recommended images pre-loaded and commented-out, you could easily toggle in new content without much hassle.
* **Show what others have made.** A key feature rolling out next for Thimble is a gallery. I think this will go a long way in encouraging users and showing what’s possible with the tool.
* **Work in pairs.** Another tested thesis of ours is the power of working together. I found during the playtesting that teams hacking on the same games benefited greatly. They began to teach each other things and be inspired by one another.
## What next? ##
We’re rolling in this feedback into the next release of Thimble. In future versions, it’ll also be easier to create new games and to share hacks.
The learning & making kicks into high gear this summer, starting June 23 with the [Summer Code Party](https://webmaker.org/en-US/events/about/summer_campaign/). We invite you to **get together with family & friends and teach other the web using these games & whatever you like.** You can also think about a hack jam to build even more games.
And there will certainly be a component of these tools & games at this year’s [Mozilla Festival](https://donate.mozilla.org/page/signup/2012festival-updates). We’re bringing some of the best people and projects to London to showcase what they’ve done over the summer — so dive in, and also give us feedback about what we can improve, what you’d like to see, etc.
## Thanks! ##
We had a lot of fun, and this event won’t been possible without a number of great people.
Firstly, a huge thanks to NESTA in particular **Amy Solder and Mark Griffiths** for supporting the event and paving the way with key organizing.
A shoutout to all the hack jam and playtesting participants. Congrats to **Alaistar Davies, Mark Riches, Laurian Gridinoc, William Duyck, Allan Callaghan, Doug Belshaw, Ian Usher, Oliver Quinlan, Ben O’Steen, and Steve Bunce** for making cool new games.
Thanks to CoderDojo London, especially **Andy Kent**, for letting us play together.
Thanks to **Jess Klein, Chloe Varelidi, Erin Knight, Laura Hilliger and Andrew Hayward** for their hard work on the learning missions, Thimble, and leadership at the jam.
Lovebomb to **Allen Gunn** for facilitating, to **John Bevan** for inviting such great people, to **Ravensbourne** for hosting us, **Paul Clarke** for the photos, and to **Mark Surman** for the vision of how we can all learn and make on the web together.
*Images by: [Paul Clarke](https://secure.flickr.com/photos/paul_clarke/) and [Oliver Quinlan](https://secure.flickr.com/photos/oliverquinlan/)*
Comments (2)
Pingback: Webmaking with Mozilla #mozparty | Oliver Quinlan
Pingback: Results for week beginning 2012-05-28 « Iron Blogger Berlin