Loading an image at run time in Storyline
Back in 2013, I wrote an article entitled "Gamification in e-Learning design". Alongside the article I created some demonstrations to illustrate some of the points being made. One of these demos was a card game quiz.
It was a fairly familiar TV quiz show format. The learner was presented with 10 cards on the screen. When they turned over the first card, a timer started and they had just 60 seconds to identify all 10 images: The demo didn't use any JavaScript and was partly done to show off the use of triggers, layers and states in Storyline which was a fairly new product at that time (the demo was written in Storyline 1).
We've used this approach in various client projects over the years and it always goes down well adding a bit of fun to quizzes. I always meant to re-visit the original game and see if I could improve it using a bit of Javascript coding, but somehow never got round to it.
A few weeks ago I had a bit of spare time and picked the project up again (after all, 10 years was long enough for it to lay dormant!). What I wanted to do was two things:
(a) make the card selection random - In the original game the cards always appeared in the same position.
(b) load the card images (and their descriptions) from a set of image files at run time - if I could do this, then I could make the game 'generic' and change the images outside of Storyline. So if, for example, I wanted a new quiz every week, all I would have to do is change the image files and a table of descriptions and the quiz would be done.
Turns out this is not trivial. If you have ten images loaded, you have to be able to select them at random with no 'repeats'. Actually, this wasn't too bad to code in JavaScript. BUT the big problem was how do I change the card image??
We had been using the GreenSock GSAP JavaScript library for advanced image animation and there is the facility in this to change the source ('src' attribute) of an image. Surely, this was the way to go. Sadly, I couldn't get it to work. I could rotate the cards, shake them, shrink them, but I couldn't change the 'src'. I could be wrong - and if so, if someone cracks this problem, please let me know - but, eventually, I concluded that images are somehow 'sandboxed' in Storyline. This is probably reasonable. After all, it would be pretty dangerous to allow coders like me to just load an image file at run time into the Storyline app!
I needed a new approach. I could change an image using GSAP - just not inside Storyline. But if I created a simple web page and loaded it as a web object, then I could get where I wanted to go. And this works fine as the following demo shows (click the link):
The card is loaded in a responsive HTML5 page and JavaScript loads a complete deck of playing card images into one array and their descriptions into another at run time. The cards are selected at random and put in a 'discard' array when used. When the deck is exhausted the deck is reset and the process starts again (as though the deck has been shuffled).
The clever bit is sending the card description to Storyline so it knows what card you have drawn - but that's a story for another article, I guess!
I'm off to re-build my original quiz...