So its that time of year, that magical time, when a little bunny hops around the world dropping off eggs for children in their back yard, or this year being quite inventive, somewhere inside the house (Assuming you remembered to get eggs before lock down).
But being in lock down means that all your workers are working from home, some will be new to technology like Teams and SharePoint and what a better way to get them acquainted than an easter egg hunt through your SharePoint site. But how – how do we add something that people have to look for and is interactive with a bit of fun. So what I have done is given you two examples of how you can engage with your staff for learning either by making them search for something throughout your SharePoint site or in the second scenario creating a clue for them to figure out and spell out a word to show the surprise easter egg.
Option 1) Hiding an easter egg
We start off with choosing a page to hide an easter egg on, now we sometimes do this on Intranets just as a calling card, but you can do it for your staff. It works great on the modern experience of O365 but can be done with the classic experience too.
- 1) Step on is adding some code – for this we use a Modern Script Editor Webpart – if you don’t have this on your site you will need to install it – the code is here and if you need some help on how to use this Khoa Quach has a great blog to follow here. As mentioned you can do this in the classic site using the Script Editor webpart that is part and parcel of SharePoint
- 2) The next step is adding in your code – we start with our Style – we create a style for an element called easteregg – what is important here is the position being Absolute meaning it can float over other items in the site, you can choose to make this an image, make it a div, make it invisible (we normally do this for fun) – but make sure when you mouse over the element the cursor changes to a Pointer (i.e. a hand showing a link). In our example we made this a small red block of 10px by 10px to make it quite visible for the demo. Very NB here is a z-index – this tells you what layer your div should be at – if your div is positioned lower in the page, then other items will be placed on top of it, so make sure you choose a high z-index number, I choose 10000000.
- 3) We now put in the code. Now here you can get as creative as you want, you can show an image or a message or provide a voucher – whatever it is that you want to drive. What is important is we have a DIV named “easteregg” and a function that is called when its clicked. The function does all the work – in our case a simple alert message!
- 4) Publish the page – You select publish and your easter egg should now be hidden in your page
- 5) Test the easter egg – Yes always test first – click on the easter egg and make sure it produces what you expect – in out case the alert below
- 6) We are now ready to market – so create an email about the easter egg hunt and be specific about what people are looking for – whether it’s a red dot, a picture of an egg etc and then let them loose on the site.
Option 2) An easter egg clue hunt
In this scenario it requires a bit more admin. Here you want people to go to a page, get instructions and then go and find the clues to spell out a work. So come up with a term like “teams” – create a list of clues that people need to answer and then use the first letter to create the word… or somehow lead them to the answer.
Now we will implement it – in this case we going to use a great plugin called Egg.js - http://thatmikeflynn.com/egg.js/
- 1) We start again with a Script Editor webpart and include a reference to the JQuery, egg.js library and the code we need that includes a Style and a function called egg- see below.
- 2) The information you put into a div called eggif is where all the magic happens – this appears when you write “teams”
- 3) Test again!
4) We Publish the page and voila we have our easter egg
5) If you type in “teams” – the message / easter egg pops up
So there you have it, a quick and easy way to create a virtual Easter Egg hunt. This is just some of the fun stuff we get up to here at GTconsult.
We also have an eBook out there to specifically help individuals work from home. You can get it here!