ELH Challenge #179: Learning a Language

When I was an English teacher (11-16 year olds!) my main “competitor” was definitely the Latin teacher who had the classroom above mine, who taught using Cambridge University Press’s famous Latin books. There was something about the continuing ongoing story of a Pompeiian family that really grabbed my students and led to all kinds of in-jokes. Apparently the books are something of an institution, having been used since the 70s. There’s even a Doctor Who episode which seeks to remedy the inevitable fates of the characters when it’s time for “volcano day”!

When I remembered that the books are available online in PDF form now (You can find the first one here!)  I knew that I had to use them in this week’s challenge.

The demo below uses hotspots and triggers to play audio when characters are dragged into a particular area of the screen.

There weren’t any suitable backgrounds in the book so I broke out my graphics tablet and tried to draw something in a similar style and add some watercolour paper overlays to match the tone of the original 70s illustrations.

The audio is just Google’s voice for Latin text-to-speech, and I really couldn’t comment on its accuracy (pretty sure it’s normally Kai-killy-us not Kai-chilly-us.)

Click the image below to play!

latin

#ELH Challenge 177 + Tooltip Template

Another week, another excellent Elearning Challenge, this time on tooltips, hyperlinks and explorable explanations.

The term “tooltip” originally comes from the early days of applications like Microsoft Word and Paint, where users were greeted by toolbars full of unfamiliar icons. Although the FUN way to work out what everything did was to try every button out, the quickest way was to hover your cursor over the item. A small hover box would appear giving you information about that item without you having to try it out.

(I’m using past tense, but of course tooltips are still everwhere! )

Tooltips in Photoshop, 2017

Tooltips in Photoshop, 2017

For this week’s challenge I decided to take a passage from an encyclopedia and add in tooltips to provide nuggets of additional information.  With websites like Wikipedia I’ll often find myself getting lost as I branch down different pages. One moment I’m reading about the Royal Albert Hall, a few hyperlinks later and I’m reading about the island of Grenada (…it’s true!) With tooltips, it’s easy to get small nuggets of information which add to understanding without taking you too far away from the original topic.

Here’s my example which is all about the mysterious Mechanical Turk, a bizarre and fascinating episode in the history of computer programming:

mechanical turk.jpg

Get the Template

If you’re interested in taking a peek at the Storyline 2 file and adapting it for your own purposes, I’ve created a template which you can download here.

The future of tooltips?

The big problem with tooltips, of course, is that you classically need to be able to hover a cursor to use them – something you can’t really do if you are using a touch screen. It’ll be interesting to see what happens to tooltips and hovering interactions in general in the future. Are they on their way out?

If you’ve enjoyed this or found it useful, do let me know in the comments and find me on Twitter and LinkedIn! 

 

English Gothic – Interactive Timeline

This slideshow requires JavaScript.

Check it out here!

This example piece was created for an E-Learning Challenge over at E-Learning Heroes.

Learners can scroll through a timeline, exploring buildings on a scrolling backdrop.

Hopefully vaguely factually accurate, although if you’re genuinely interested in getting a much more authoritative quick overview of gothic architecture I suggest getting hold of Rice’s Church Primer!

 

 

 

Photoshop Software Simulation

This slideshow requires JavaScript.

Try it out here!

Here is a short screencast/software demonstration created in Storyline 2, which lets the user learn the steps to creating a black and white image in photoshop before being given the chance to try it out for themselves.

(I’m starting to feel like making an image black and white in photoshop is a little bit like brewing a cup of tea – everyone has their own personal technique, and will vehemently defend their tried and tested method as the One True Way. I beg mercy from any disgruntled graphic designers – this is for demonstration purposes only!)

My Take-Aways from this Project

One niggling little thing: I forgot to tell Storyline NOT to insert a clicking sound effect for the mouse while I was making my screencast. It’s very repetative and I don’t feel it gives any benefit to the user. Well, unless they’re a fan of ASMR.

The biggest question this project has raised for me is whether the Tell Me/Show Me/Try Me model can be used in a more clever way than this. This example has open navigation, allowing the user to skip to any section at any time. That’s great, but in a closed navigation situation, I can imagine some users getting frustrated at being fed the same information three times.

In the Try Me stage, I created a hint system which gives more information each time it is consulted. I’m envisioning an expansion on that idea. What if the user began by trying, with an adapting system increasing showing/telling elements if they became stuck or unsure how to continue?