SaaS CMS has officially launched! Learn more now.

Mark Everard
Nov 30, 2009
(0 votes)

The Distraction Gadget

My gadgets are like buses you wait ages then two turn up at once...........

Here is my second (does quantity count over quality?) contribution to the EPiServer Gadget contest 2009.


The Distraction Gadget

Everybody loves a distraction and what better way to distract yourself than by playing a game. A sentiment Cristian no doubt agrees with. So here you have a single player javascript game. Click and drag your user’s head around the CMS world and stay clear of the evil EPi-Enemies!

I can't claim the idea for the game, its something I found ages ago when I was first getting interested in web development (I remember it being one of the first truly dynamic html pages I'd ever seen - it was a real jaw dropper at the time). That time was some time ago now and the web has moved on, but this game and I have had a close relationship ever since. I've not only wasted much of my own time playing it, but I also began tweaking it and adding more features. It seemed only right that I should repackage it and share it with you.

This has been quite a rewrite, firstly to utilise the magic of jQuery, and then to try my hardest to ensure that you can run multiple instances of this gadget without issue on the Site Center dashboard. I'm not sure why you'd want to, but feel free to give it a try!

I've also implemented a leaderboard (using the DDS) so you can compare scores with other users. Getting distracted for 30 seconds is a very very good effort!


Lessons learnt: In retrospect the Site Center is not really the best place to be doing a lot of heavy client side scripting work, as there is already a lot of stuff already going on under the covers. This is why I've quickly bolted on a way of running the game from a separate window, all of that DOM traversing is expensive!

Extending this idea: Some simple LINQ queries could return an aggregated list of the total amount of time that each user has been distracted for. (I decided it might be best not to implement this as the outcome could get some poor distracted web-editor into trouble!)

Installing the gadget

I've put together an installer file, which can be used with EPiServer Deployment Centre

The source code lives here

Nov 30, 2009


Sep 21, 2010 10:32 AM

Hehehe! Now I know how to spend a few hours on the dashboard ;)

Please login to comment.
Latest blogs
Getting Started with Optimizely SaaS using Next.js Starter App - Extend a component - Part 3

This is the final part of our Optimizely SaaS CMS proof-of-concept (POC) blog series. In this post, we'll dive into extending a component within th...

Raghavendra Murthy | Jul 23, 2024 | Syndicated blog

Optimizely Graph – Faceting with Geta Categories

Overview As Optimizely Graph (and Content Cloud SaaS) makes its global debut, it is known that there are going to be some bugs and quirks. One of t...

Eric Markson | Jul 22, 2024 | Syndicated blog

Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024

Getting Started with Optimizely SaaS using Next.js Starter App - Configure local development - Part 2

This is part 2 of a proof-of-concept (POC) blog. In this post, I will guide you through the steps to configure your SaaS instance with your local...

Raghavendra Murthy | Jul 19, 2024 | Syndicated blog