This week’s E-Learning Heroes Challenge is Using Number Variables.
Number variables can power dynamic and personalised learning experiences, by tracking and responding to your user’s performance. If you’re a novice e-learning designer you may feel a bit intimidated by number variables. Don’t be! Chances are you have already used the ‘built-in’ number variables in Storyline to display a user’s score or to build a basic slider. Number variables can also be used in sv rolex datejust 116200bkrj mens 36mm watch automatic more subtle ways, to randomise your content, add timed elements, mark progress and to change the appearance or flow of your course on repeated viewings.The difference between <5 and ≤5 when writing variables is about 45 minutes of swearing.
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) October 9, 2020
You are only limited by your imagination – and knowledge of mathematical symbols!
In this article I will share how I used number variables in my Back to the Future inspired demo (below) to include the present time and date and to create a ‘carousel’ of question slides.
You may think you're not ready for that, yet. But your users are going to love it.
In keeping with the theme of this demo, each time you attempt the quiz it will display your time and date in the ‘present time’ section of the instrument panel. This is achieved with three pieces JavaScript.
This code obtains the current time in hours and minutes:
function fixDigit(val){
return val.toString().length === 1 ? "0" + val : val;
}
var player = GetPlayer();
var d = new Date();
var cuttoff = new Date (d);
var hours = d.getHours();
var minutes = d.getMinutes();
player.SetVar("Hour",hours);
player.SetVar("24hrClock",hours);
player.SetVar("Min",minutes);
This code obtains the current month, day and year:
var currentTime = new Date()
var day = currentTime.getDate()
var month = currentTime.getMonth() + 1
var year = currentTime.getFullYear()
var player = GetPlayer();
player.SetVar("Month",month)
player.SetVar("Day",day)
player.SetVar("Year",year)
Following the removal of jQuery from Storyline 360, to ensure the above code works as intended you also need to re-insert jQuery. Check out this quick and easy fix by Andrew Maranta.
I have also reproduced Andrew’s code below:
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");
Those of you who are more familar with JavaScript may see a way to combine these three separate actions into one section of code. If so, drop me a line!
I’m a novice coder, but as Storyline 360 allows several ‘Execute JavaScript’ triggers in the same slide, firing at the same time, the three sections of code effectively behave as one section.
In this simplified version of my opening slide, you can see the time and date being pulled from the user’s computer and then being formatted to match the appearance of the time circuits in the DeLorean. I’ll cover this in more detail in the next section.
I'm not old, I'm retro
Formatting this data to match the appearance of the time circuits in the DeLorean took a bit of four dimensional thinking.
When the month is pulled from the local system time, it comes through as a number. October is 10, November is 11 and so on and so on. Great Scott, this simply wouldn’t do! So I had to figure out how to convert this number into text.
The trick is to use a text variable to contain this data instead of a number variable, and to add a trigger that instantly overwrites the numerical value with its text equivalent.
e.g. When Month changes set Month to value OCT if Month = value 10
I followed a similar logic to convert the Hour variable from the 24 hour format to the 12 hour format shown in the movie.
e.g. When Hour changes set Hour to value 1 if Hour = value 13
I’m a big fan of using custom fonts in Storyline 360 to complement the theme of the course.
In this demo, I used Digital-7 Mono to display the number variables in the style of an LCD clock.
For an authentic ‘retro’ feel, it’s important that you use a monospaced font.
This is a fixed-width font whose letters and characters each occupy the same amount of horizontal space.
Otherwise, the numbers will reposition based on their kerning, which can ruin the effect and be a bit distracting.
Double digits
Finally, I had to make any single-digit numbers appear as ’01’, as they do on an LCD clock.
I achieved this by giving the boxes that house the two-digit variables (Day, Hour and Minute) a state change that triggers when each variable moves above or below 10.
This allowed me to add a zero in front of these variables whenever they fell below 10.
Practical applications
This is clearly a lot of effort, simply to mimic the instrument panel in Back to the Future’s time-travelling DeLorean, rather than to meet any specific learning need.
Nonetheless, tracking and displaying the current time in your e-learning course can be used in a less gimmicky way to support learning.
In this example, if the user completes the course in under 10 minutes, they are asked a ‘bonus question’ to make sure they have been paying attention.
Not so random
The questions in this demo need to appear in the order shown in the Last Time Departed and Destination sections of the instrument panel.
For this reason, the user will always travel from 1963 to 1994, from 1994 to 1836, from 1836 to 2009 and finally from 2009 to 1976 to maintain this continuity.
As such I could not randomise the questions using a conventional question bank. Yet I did not want the user to start in 1963 every time.
The answer, of course, was to use number variables!
This animated diagram shows how I used a ‘question counter’ variable to ensure that all five questions are viewed, regardless where the user enters the sequence. When the user clicks the ‘move on’ button, this variable determines whether they are sent to the next question or to the final slide.
This ‘not so random’ approach preserves the order of the questions, but adds a bit of variety on repeated viewings.
1.21 gigawatts!
This is one of my more complicated demos, with lots of moving parts, and I have used many features and techniques that are outside the scope of this challenge.
So if you would like to pick my brains about any other aspect of this design, please get in touch. I would be happy to discuss it with you in more detail.
You can use the comments section below or you can join the discussion on Twitter.
In the meantime, I’m going to chase Amazon for my hoverboard. It’s been on order since 2015!
As always, if you have any questions about this demo, drop me a line. Blog post currently in the pipeline.
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) October 9, 2020