Activities for education

 

I like solving problems, and I enjoy thinking creatively. Building interactive online activities lets me do both at the same time.

 
 

What are ‘online activities’?

At wave, sometimes we call them ‘online activities’, sometimes we call them ‘interactives’. I’m not sure if there actually is an official term. 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 just a lighthearted quiz really, but with noisy penguins.

Sizing up Antarctica

 
Sizing up Antarctica activity intro screen
 

If I had my time again, I would do “Sizing up Antarctica” slightly differently. With hindsight, I can see a few UX shortcomings – but I am pleased with several of the features, 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 nice parallax scroll, and to combine the timeline element with overlaid pop-up windows featuring text, images and embedded video.

Going back in time

 
Back in time activity intro screen
 

I wasn’t a massive fan of this one myself, but I hear it 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