Teaching Japanese Characters in Storyline

Apr 25, 2013

Rich Calcutt
By Rich Calcutt

Hi All, 

I wanted to share a short project I made yesterday that aims to teach some basic Japanese characters using Storyline. Please note this module is intended for a touchscreen PC, but can us used with a mouse. Here's a link to the course.

My company has a touchscreen monitor for marketing purposes, so I decided to create a course that attempted to teach a physical skill through e-learning. The result is this 1-2 minute module. 

I decided to use a dragging technique that gives the illusion of tracing the characters on screen. This allows the user to practice drawing the character with their fingertips. After they have traced 3 characters, they have the opportunity to draw them free-hand using an embedded flash paint canvas. 

I hope some of you find this interesting. I have used this dragging technique for a number of unique applications on a variety of courses, and I'd be glad to share more examples if there's interest. 

Here is the course. 

If anyone has any ideas how I can get the painting canvas in slide 4 to work in html5 to be iPad supported, I'd love to hear them!

Screenshots:

Kind regards, 

Rich @ Ashorne Hill e-Learning

31 Replies
Bruce Graham
almost 11 years ago04/25/13 at 4:47 am (UTC)

Hi Richard and welcome to the Heroes Community.

I have to say I think that is absolutely beautiful

Great concept, beautifully executed.

I played with something similar a while ago, but that is far more elegant.

Very nice work, and once again a warm welcome to the Heroes.

Hope to see you around lots if that is the quality of work you are producing.

Bruce

Rich Calcutt
almost 11 years ago04/25/13 at 5:46 am (UTC)

Hi Bruce - 

Thanks for the warm welcome, and for the great feedback on the module. You may recognise the mechanic I used here as the same one I used for the 'slider' bars. I'll try to post some more examples of other work soon. 

Any ideas about the drawing canvas working with html5? Would be great to get this content working on an iPad in it's entirety. 

Also, any chance you could tweet this thread? It would be great if some of the broader Articulate community could give their input. If you don't mind!

Many thanks, 

Rich

Bruce Graham
almost 11 years ago04/25/13 at 6:17 am (UTC)

Richard Calcutt said:

Hi Bruce - 

Thanks for the warm welcome, and for the great feedback on the module. You may recognise the mechanic I used here as the same one I used for the 'slider' bars. I'll try to post some more examples of other work soon. 

Any ideas about the drawing canvas working with html5? Would be great to get this content working on an iPad in it's entirety. 

Also, any chance you could tweet this thread? It would be great if some of the broader Articulate community could give their input. If you don't mind!

Many thanks, 

Rich


LOL - yes...I recognised the slider mechanic, however, smoke and mirrors is often the main way to get a result, and you executed it very professionally!

Sorry but no idea about the HTML5 question - perhaps someone else will come up with suggestions following the Tweet.

Bruce

Rich Calcutt
almost 11 years ago04/25/13 at 4:39 pm (UTC)

@Tim Slade

@Karen Loftus

@Natalia Mueller-Spurgin

 - Thanks for the kind comments. It means a lot and it's very encouraging!

@Montse Posner Anderson - I really like that, the mechanic works so well. Very similar to mine. I notice that in your example, I can 'break' it by not following the lines of the L properly, and I'm able to miss out parts of the letter. This is a problem I faced with another mini-module I produced, and I got around the problem with variables. I'll post the example of this tomorrow with the source files if you're interested. I love the 'flat design' look of the module though. I bet your 4 year old loves practicing their letters!

@Noelle T - absolutely correct - invisible box drag all the way! I use this mechanic a lot in my courses. Useful for all sorts of things!. I'll post some examples soon!

Alphonso Hendricks
almost 11 years ago04/29/13 at 2:16 pm (UTC)

Cherry blossoms took me all the way back to Washington DC. Beautiful in full bloom. I found myself so taken in by the stunning photo's that I never once cheated when asked to draw the lines. I drew them as straight as I could. Only after my third attempt did I start tracing outside of the lines - just to see what would happen. Quite frankly, I dont care that tracing an arc between the two end points still gives me a straight line. I loved it.

Thanks for sharing work, that is clean, uncluttered, simple. And educational, all at the same time. 

Rich Calcutt
almost 11 years ago04/29/13 at 2:41 pm (UTC)

alphonso hendricks said:

Cherry blossoms took me all the way back to Washington DC. Beautiful in full bloom. I found myself so taken in by the stunning photo's that I never once cheated when asked to draw the lines. I drew them as straight as I could. Only after my third attempt did I start tracing outside of the lines - just to see what would happen. Quite frankly, I dont care that tracing an arc between the two end points still gives me a straight line. I loved it.

Thanks for sharing work, that is clean, uncluttered, simple. And educational, all at the same time. 


Haha you've found the flaw!! Thanks for the nice comments, Alphonso. 

ps. with a bit more work I can decrease the tolerance of the drag such that the user really does have to trace the line quite precisely. That's for a day when I have more time though!

Steve Flowers
almost 11 years ago05/09/13 at 11:25 am (UTC)

Looks like the tempshare link expired. I'd love to see the first example. 

@montse - Really neat example. Using a state trigger listener you could follow that up with a piece of audio - something like a cheer or something else that kids respond well to. "L - Lion" When State of All Of [Objects] is [X] show layer. Add these slides into a random bank and you've got some "tracecards" for endlessly random fun

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