Teaching Japanese Characters in Storyline
Apr 25, 2013
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.
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
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
Welcome to E-Learning Heroes, Richard!
I adore cherry blossoms :) Very nice job, that is one pretty course!
Thanks so much for sharing!
Christine
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
I'm tweeting as we speak, as well, Rich :)
Hi Christine, Many thanks for the comments! I hope to contribute to the forums more in the near future.
Best, Rich
That's fab! Thanks Christine!
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
Now there's a challenge...got to prove I'm not a one-trick pony...
LOVE THIS.!
My mind is blown away!
This is really excellent, Richard!
Love this idea Richard and thank you for sharing it. Just trying to figure out how you did it-- are you dragging an invisible shape that makes the line appear once it is dropped on an invisible shape at the end? I must try this out!
Your project is beautiful, Rich!
I've been creating similar activities for my 4-yr old to help her practice her letters.
Here's one of the demos: The letter L
Richard-
That is AWESOME! So elegant.
and WELCOME to you!!! Selfishly I'm looking forward to seeing more from you in here. I seriously love your design aesthetic
@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!
Awesome idea, Richard! What a clever application of the dragging technique!
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!
Richard
Fantastic demo, sorry cant help with HTML5 part.
Montse,
Care to share .story? Can't get my head around how you have achieved this.
Regards
Jilo
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
@Steve I've uploaded it to my website - the direct link is here: http://richardcalcutt.co.uk/kanji/story.html
Enjoy - I'll test you tomorrow!
The link in the original post as well as Richard's website (in the post above) is not working. Richard, is there a working link that you can share? I would really like to see how this is executed. Also, if you are able to share the project files, that's fantastic.
I would like to know how to create this myself. Can anyone explain how this is done?
Thanks all for the great ideas and inspiration. Here is an example of an Arabic writing practice I'm working on. https://goo.gl/eQk0pX
Can you upload it again
Thank you Rubin . Can you upload the source file ,please ?
This discussion is closed. You can start a new discussion or contact Articulate Support.