This week’s E-Learning Heroes Challenge is Using Variables to Compare Learner’s Answers.
Text entry interactions have always fascinated me, as they require the learner to think more carefully about their responses, in a way that straightforward multiple choice questions do not.
Yet, by their very nature, text entry interactions are open to interpretation. They can also be fussy about capital letters and fail to recognise international differences in spelling.
So the key to any succesful text entry interaction is know your audience and anticipate their possible responses.
Most rapid authoring tools such as Storyline 360 include the options to ignore case and specify more than one acceptable answer, which are a great help when building a text entry interaction for international audiences.
I thought it would be cool to use these features to explore some of the differences between British English and American English. I present this demo with my sincere apologies to the rest of the English speaking world!
Fitted as standard?
Zardoz The Philologist recognises whether the learner uses British English or American English and responds with some tongue-in-cheek ‘feedback’. He will also offer a further clue in the event of an incorrect answer. It’s by no means ground-breaking, but the development of this demo took some interesting turns.
My early experiments with Storyline’s built-in Text Entry Freeform Question Slide hit a bit of a dead end. Even though I could specify two acceptable answers, I could not give different feedback to British and American learners based on which spelling they used.
I considered adding more feedback layers, triggered to appear on top of the ‘correct’ layer, but this was almost as much work as building a custom slide from scratch. Nonetheless, I will revisit this method in future, particularly if I want to track the learner’s responses in a standard SCORM format.
As with all things in Storyline, there’s always more than one way of achieving your design. But for the purposes of this demo, I felt the freedom of a blank slide was more important than capturing performance data. This was, after all, just a bit of fun!
Layers upon layers
- The base slide contains all of the text and graphic elements
- The ‘British’ layer changes the state of the text and graphic elements to reflect when the UK spelling of a word is entered
- The ‘American’ layer changes the state of the text and graphic elements to reflect when the US spelling of a word is entered
- The ‘Error’ layer displays when neither the UK nor US spelling of a word is entered
- The ‘Move On’ layer appears once the learner acknowledges the ‘British’ or ‘American’ feedback, and resets the graphic elements on the base slide
Order, order!
You really need to pay attention to the order of your triggers to ensure that an interaction like this one performs correctly.
I have been working with Storyline for many years and this still caught me out. I wasted more time than I care to admit establishing why my first draft wasn’t behaving as intended, simply because of the trigger order.
If you’re asking Storyline to take an action based on one or more conditions, this trigger needs to be placed before any triggers based on only one condition.
Reduce, Reuse and Recyle
Similarly, Zardoz’s arms raise or lower and the ‘question’ box changes depending on the learner’s responses:
Note the feedback provided in the event of an incorrect answer. Combined with the JavaScript below, this ensures the learner is supported when they do not answer correctly first time.
Restricted content
As text entry interactions can be open to interpretation, a good way to guide the learner is to restrict the text entry field based on the length of the correct word.
To achieve this I used JavaScript to limit the number of characters in the text entry field. In the example below, the limit is 6 characters to accomodate the British spelling of ‘colour’.
$("input").attr('maxlength','6');
$("input").css("text-transform", "lowercase");This code is triggered at the start of the timeline on each ‘question slide’, and can vary from slide to slide.
However, since jQuery has the potential to be exploited, Articulate removed it from Storyline 360 in January 2020 and from Storyline 3 in June 2020.
For the above JavaScript to work as intended, you need to reference jQuery in your published output, which involves a slightly messy hack. Then I discovered this amazing bit of code by Andrew Maranta that does this for you when your course first runs:
function dynamicallyLoadScript(url) {
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
}
dynamicallyLoadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js");
dynamicallyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js");, Pop this code in an ‘Execute JavaScript’ trigger on your opening slide and JQuery is magically restored!
Conclusion
This was a fun experiment that made me think about the wider implications of text entry interactions, the importance of knowing your audience, anticipating their possible responses and providing enough support when your learners don’t get it right first time.
If you have any questions at all about my demo, please comment below or drop me a line. But watch your spelling!
Last year I shared my Top Ten Tips for Boosting Creativity with @ifyouaskbetty. This demo is an example of both ‘Make Something New’ (No. 6) and ‘Reduce, Reuse, Recycle’ (No. 8). You can listen to the full podcast here.
