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‘ is the very first activity on Discovering Antarctica. It’s a lighthearted quiz with noisy penguins.
Sizing up Antarctica
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‘ 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
We are told this one is popular in classrooms, especially the dinosaur that pops up at the end.
What (not) to wear
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.