Template for spot the mistakes, differences etc

Sep 10, 2012

Hello fellow storyliners,

We are currently working on quite a big mining project, and that forced us to think about ways of working smarter. One of these way is to make internal templates we can re-use for different clients/projects (or even within a project).

We have one specific case in which we want to use a kind of 'spot the mistakes' scenario. In this scenario, a couple of items will pop-up (little more subtle than the piggies I have inserted now), embedded in the timeline. The goal is for the user to recognize and click the correct 'mistakes', or in our case: hazards.Things that are correct don't need clicking, and the user will be penalized for that (that's currently not included, but very easy to make).

I have added also counters, and a feedback layer. I haven't worked in design and kept the exercise itself basic.

I would very much like feedback about this template: do you guys think I can improve certain things, can we maybe use this for different purposes by adding elements?

The template is free to use for others, I've added an 'how-to' text slide. Please let me know if there's anything I need to elaborate on.



8 Replies
David Anderson

Hey Marc, that's really cool.

I like the idea of using moving, fading targets. I was helping someone the other day who was trying to create something similar using two photos or illustrations.

The images were placed side-by-side and learners were asked to recognize differences. Using your example, I did a quick mockup:



I really like your use of progress meters to track correct and incorrect attempts.

Great example!

Marc Vlietstra

Hi David,

That's really neat! I'm going to use that in future modules.

One thing that I added in other projects (ill post some in  the next weeks) is to add an extra hotspot (invisible) between the background picture and the objects. This will disable the mouse going back to 'normal' (i.e. pointer instead of hand), this way the user really has to guess where things are located (otherwise the hand will give it away)

in my example above I have triggered that invisible hotspot to the 'false' response counter.


Marc Vlietstra

Well, the area behind the clickable objects also serve as an input for the 'false' counters, so every time you click on that zone, an extra red button will be colored

So to summarize: it serves two functions: one to make the hand not look like a normal mouse pointer when the user moves from a correct item to the 'rest' of the scene, and two: to catch false click

This discussion is closed. You can start a new discussion or contact Articulate Support.