Some folks were having fun on Twitter with impromptu Sherlockian Mad Libs today, and I remembered that this was also an elearning challenge of the week earlier in the year, so I had a go at making one in Storyline: Sherlock Holmes Mad Libs
This week’s elearning challenge is to create an accordion interaction. I’ve never used one of these before, so my first one is a straightforward model featuring the beautiful green vinyl that The Mountain Goats is using for a pressing of their upcoming album, In League With Dragons, for which I am currently in a Heightened State Of Covetousness.
Matthew Guyon’s video on Accordion Interactions was very useful. I hadn’t yet learned about the trick where you can alter the visibility of objects on the base layer, on a per-layer basis.
A bingo game I put together from scratch using Articulate Storyline 360, based on the New Zealand Mental Health Foundation’s Five Ways to Wellbeing Toolkit.
My motivation for doing so was a competition that Bloom Learning Technologies is running for the International Day of Happiness. I’m always up to Use My Powers For Good. If you like this one you can go vote for my entry here.
As a game for an individual to complete, it doesn’t have anyone calling out the squares. The learner can complete four squares in a row, or continue to fill in the entire board as an “extra for experts.” I’m pretty chuffed with how this worked out.
Each square has two states, the second of which grabs the variable text from the input text box. There’s a variable for having completed your first BINGO line, after which it just shows lines across the completed row/column, but doesn’t pop up the congratulations again until you’ve finished the entire board. The confetti animation at the end (spoiler!) was made by Jerson from the Articulate Storyline forums, and helpfully was the absolutely correct colour scheme for my project.
This was my first attempt at a progress bar, and the first time I’d looked seriously at slide masters, so I may have gotten a few bits backwards. I chose a scene from the Gasogene module I built a little while ago to add a progress bar. If you find yourself wondering “What the Dickens is a Gasogene?” I suggest you take a look!
I put the progress bar on the slide master. It’s nothing fancy, just a row of circles on a line. Each one has a new coloured state called Complete.
I also created a completion variable for each of my ten slides. (Here, I could have just had one variable for screens completed)
On the Master Slide I also added code to run when that slide starts, to check each of these completion variables, and light up a circle for the ones that are past, plus the current screen.
At first, I attempted to change the completion variable when I loaded each screen. This came too late for for the check on the master screen, however, as its code must run first.
Thefore I needed to get ahead of this system. For instance, I changed the variable to say that slide six was complete a little bit into slide five. I gave the Master Slide time to do its wee check and change the states on the progress bar, then updated the variable for the next slide. I chose to do it after some little time had past to avoid having to associate it with the particular action that causes the user to move to the next slide.
Lessons Learnt
As it is, the progress bar I’ve made is not robust enough to handle having active next and previous buttons, so I’ve conveniently removed them from this example.
There are several functions that a progress bar can serve; showing which step you’re up to in a long process is one of them, and that’s what this one does, as long as you keep going forward.
A progress meter that showed where you’ve already visited, plus where you currently are, could probably be made simply by adding another “visited” state to the circles.
If I’d realised I was going to delete the forward and back buttons, I could have also simply had one variable for progress and incremented it by one on each screen.
In this case, the code on the master would be something like this:
I’m pretty sure I’m going to be going through this scene again to try some different approaches to progress bars, and I’ll update then!
The crew at the Sherlock Holmes themed escape room in London posted a couple of photos on their instagram. Squinting at a tiny screen didn’t work so well for me, so I had to try and make an interactive version. At first I used regular old hotspots, but then changed to using shapes so that I could highlight the object after it was found. I didn’t realise until now that a shape with no border and no fill could still be responsive to clicks.
I used a giant hotspot underneath all the shapes, so that the cursor switching to a hand was not an extra clue.
Apart from Spot-the-Difference, this setup could easily be used for hazard identification etc.
The sparkly noise when you locate a change is from Freesounds.org https://freesound.org/people/Soughtaftersounds/sounds/145459/
A small interactive version of the grounding exercise where you take special notice of each of your senses.
I’ve been having a small epiphany about how not everything needs to be input or interactive. In this case, I’ve put text input boxes so you can type in what you’re experiencing, only if you want to; I can touch type so it’s all very straight-from-brain-to-fingers. (The brain part is the difficult bit at this end of the keyboard)
But if you’re more of a Martin Freeman Typist, why would you insist on having it typed in? The whole purpose of the exercise is that you can do it anywhere.
The icons on the tabs are from Flaticon, which I am subscribed to because it’s rad as heck.
Another redeveloped chunk from an old Flash project, this activity has the learner matching the thoughts that may occur to members of various audiences, when they gaze upon the branding of the Dairy Company. I chose to hide the labels for each audience on load, although they are available in the hover state if needed.
Back in the day I was instructional designer for a Flash version of this, and the excellent developer was able to make my idea of a draggy-string-thing come to life. I don’t think this is possible in Storyline, but it was a cool way of doing a matching activity. Pour one out for Macromedia Flash. We had some good times.
The eLearning challenge of the week is to use the text-to-speech engine of Articulate Storyline. A perfect time for me to finish this very scientific and serious adaptation of a wholesome internet meme.*
You probably want your headphones on for this one.
*here is the original Proper Goat Anatomy
A couple of screens redeveloped from an old Flash project introducing new brand guidelines.
I used Storyline’s States for the drop down whatsits, enjoying the automatic toggly nature baked into the Selected state, not enjoying how it liked to overlap my sideways triangle icon with my downwards triangle icon for the dropdown. Hence they just change colour and stay put.
The drag n drop has a variable per draggable item so I can check if they’re all correctly dropped before showing the feedback.
Rosie's Experiments in Free-range eLearning 
You must be logged in to post a comment.