How To Create an Online Easter Egg with Google Draw and Sites

With my High School Classes I use Google Sites as a primary Class Website. I made a quick Google Site to demonstrate a Google Sites Easter Egg. Can you find the Egg on my Easter Egg Example Website?

Did I get you? 😉

You probably know what an Easter Egg is but if not this is a term for a hidden element within the game that is “extra”. The game can be finished without finding the Egg. Easter Eggs foster exploration and can help create a more immersive experience. They might contain a piece of game Lore which helps world building, could offer a hidden bonus or power up, or can just add a little humor and wonder. In my class website I like to hide little Easter Eggs within pictures on my website. This is fairly easy to accomplish using a mashup of Google Draw and Google Sites.

Create the Easter Egg in the Google Draw

First start by opening up a New Google Draw
Then upload whatever picture you want to hide the Easter Egg in. This is Lunella Lafayette, AKA Moon Girl, the smartest canonical Marvel hero (at least as of 2016). I also changed the margins to fit the image.
Then add whatever shape you would like over top of the image.
You can see here that I added a Square over the lightbulb above Moon Girl’s head.
Then change the Color of the Shape to “Transparent” by clicking on the Paint bucket then Transparent.
Then change the border color to “Transparent” by clicking on the Pencil and selecting Transparent.
Here is the image with the Transparent Square. As you can see… you see nothing.

Hyperlinking to the Transparent Shape

Technically this step can be done before you make the shape transparent.

Right Click on the Transparent Shape then select Link OR click on the shape and then type Ctrl+K if you are a keyboard user.
Add whatever link you would like. I have linked to other Google Sites with Assignment directions, Youtube videos with hidden messages, or published Google Drawings.
The link here is to Rick Astley…

Then Publish the Google Draw

Click File –> Publish to the Web
Click Publish
It will give you a link but you don’t necessarily need this on a Google Site. You could also post the picture elsewhere. This trick also works in Google Slides. I used this trick to create an interactive Comic Book once.

Add the Published Google Draw to the Google Sites

Access your Google Site. I created a new Site here just to keep things simple.
Then click on the Google Drive Button. You can search through your drive to find the published picture or look through the Recent section if it was the last thing you worked on.
Then publish the site.
This is what the published site looks like… Can’t see the transparent Hyperlink.

Below is a video of me “Finding” the Easter Egg on the published Google Site. Notice that the cursor turns from an arrow to the finger when I hover over the transparency.

Thank you for reading this far.

After I took all of the screencaps and made this little video I went back in and added another little Easter Egg on the Google Site. Did you find it? If you did – enjoy the little taste of my terrible effort at voice acting 🙂

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.