XRay Goggles

Hack the Web:

with the X-Ray Goggles

Steps

  1. step01_install

    If you haven’t already, install the Goggles here. Tell participants that they will be hacking a website. Go to a website and turn on the Goggles. You can do this by clicking on the bookmarklet.

  2. step02_hover over objects

    Using the Goggles, slowly hover the cursor over objects so that participants can see that the tool is inspecting the code and showing the object tags for each object. Point out the tags, attributes and elements. Find the object tags that you want to change or replace (e.g. the p tag or img tag).

  3. step03_remix

    Hit “R” on your keyboard. Show participants that the code is revealed. Ask participants for help hacking the code.

  4. step04 show your remix

    After you have made the changes, hit the OK button and show everyone the hack. Now, show everyone how to do this step by step. Then let learners play with the Goggles for a few minutes.

Materials

Discussion

At the end of the session, have participants present their new webpages, explain their work process and what they learned.