Mozilla X-Ray Goggles
- digital creation
- using and applying technology
- programming and coding
- part-whole relationships
ProsDiscovery learning at its best: Revealing chunks of complex code on any website and letting kids edit and remix leads to powerful learning.
ConsSome kids might need a little extra help understanding HTML structure, tags, and attributes, and the in-tool app doesn't provide that.
Bottom LineIt's a blast to use and an easy way to get experimentation and prototyping going with plenty of student choice -- kids are really in the driver's seat!
Common Sense Reviewer
Students learning to code will be intrigued as they check out, and tweak, the inner workings of any website. Kids who aren't as interested might not get hooked; some scaffolding and tutorials might be necessary to engage them fully.
This is some fantastic discovery learning. Kids get their hands dirty right away hacking and remixing live websites, with real experimentation, prototyping, and critical thinking. Outside HTML support might be needed for some students.
There's an awesome tutorial on the tool's home page. When using the tool, a help button provides everything you'd need to make it work correctly. For coding help, though, you'll need to look elsewhere or create your own materials.
The best way to use Mozilla X-Ray Goggles is as a cold introduction to code, but it does require some buy-in from students. Start with a quick demo of how the tool works on a projector, and then let kids loose to play with anything and everything they want. A healthy dose of free, unstructured play is what will really make this work. Maybe have your class keep a master list on the whiteboard or a shared document of tags and attributes that can be changed as they discover them, for extra collaborative learning flair.
Some websites can be overwhelming when you're using Goggles, so it might help to prepare a list of curated URLs that students can choose from. Also, you'll almost certainly need a cheat sheet, reference, or tutorial for kids who struggle to get going, as some surely will. Goggles will also work great after a lesson or unit on HTML to get some meaningful live practice. And for advanced coders, you can demonstrate how many browsers have the same functionality as Goggles built right in, albeit with a more hard-core interface.Read More Read Less
Mozilla's X-Ray Goggles allows students to inspect and tweak the code found in any site on the Web, including any of the individual elements that make up a Web page. Once activated, Goggles highlights these elements as kids roll over them with a mouse. As they click one of the highlighted elements, Goggles offers a pop-up window displaying the code, alongside a preview of that element. Kids can edit the code right in the window and immediately see a preview of what their changes look like.
Depending on the skill of the user, Goggles can show code in basic (color-blocked) or advanced (traditional HTML) form. Kids can add the X-Ray Goggles button to their bookmarks toolbar to activate Goggles on any website. If kids create a free account, they can even save and share remixes of websites with the rest of the world. The tool seems to work with most (but not all) websites.Read More Read Less
Hacking, remixing, and experimenting are the best form of what we used to call "hands-on learning," and Mozilla X-Ray Goggles enables it with great ease. There are few better ways to learn something as esoteric and complex as code (including Web mark-up) than by taking something that already exists and tweaking it to figure out what everything does. Goggles' power lies in only showing the code for each piece a kid might be interested in changing, rather than the entire source. This makes it absurdly easy to go from zero to remixed with one click.
To get into more advanced editing, kids will undoubtedly need more support in the form of tutorials, reference docs, or links to HTML help. See Mozilla's Teaching Activities for more support. For kids who aren't into code or jazzed by the chance to deface their favorite sites, this might be a tough sell, perhaps better implemented as a summative assignment at the end of an HTML/CSS lesson.Read More Read Less