Online activities for education


I like solving problems and I like inventing stuff. Building interactive online activities lets me do both at the same time.


What are ‘online activities’?

Here are some examples, from our recent rebuild of the ‘Discovering Antarctica‘ website. We originally built Discovering Antarctica way back in about 2007, in the days before iPhones and tablets even existed. At that time, online activities were all done with Flash. Flash is pretty much obsolete now, so for the rebuild we used the HTML <canvas> element and javascript¬†instead.

As well as switching from Flash to <canvas>, we needed to make the activities responsive, so that they work on different shapes and sizes of devices, and accept touchscreen input as happily as mouse interaction.

The interactives need to work in a wide range of settings, particularly in school classrooms. In some classrooms each pupil has a tablet, in others, the teacher runs the activity on a whiteboard.

Wilderness Challenge

Wilderness Challenge activity intro screen

Wilderness challenge‘ is the very first activity on Discovering Antarctica. It’s a lighthearted quiz with noisy penguins.

Sizing up Antarctica

Sizing up Antarctica activity intro screen

If I had my time again I might do “Sizing up Antarctica” differently. I can see a few UX shortcomings now but I’m pleased with most of it, especially the button that pings lots of little ‘UK’s across the screen.

Antarctic Timeline

Antarctic timeline activity intro screen

Antarctic timeline‘ gave us the opportunity to have a parallax scroll, and to combine the timeline with overlaid pop-up windows featuring text, images and embedded video.

Going back in time

Back in time activity intro screen

We are told this one is popular in classrooms, especially the dinosaur that pops up at the end.

What (not) to wear

What not to wear activity intro screen

Finally, in ‘What (not) to wear‘ you have to dress the scientist in his cold weather gear. I like his Action Man style ‘eagle eyes‘.

Find out more about Discovering Antarctica.

Technical info:

Each canvas animation requires its own set of custom assets, including javascript, json, images, sounds, videos etc. – all put together in an HTML file. We store each animation in a separate folder, containing all of its unique assets. We store shareable assets in a shared library to avoid unnecessary duplication.

The HTML is inserted into WordPress templates via iframes, using the individual activity’s folder name as a ‘hook’.

We use Adobe Animate software to construct these online activities. The work involves planning, storyboarding, design, creating and sourcing assets (photography, illustration, sound, video) and coding. The animations and interactivity are coded in javascript, in particular using CreateJS and the Greensock Animation Platform.

Posted in web