eLearning Heroes challenge #202 called for some drag and drop interactions to demonstrate. I’ve decided to build an example that shows some advanced techniques. I ended up adding lots of advanced moves in this example. I’ll explain some of it here. We’ll take a good hands-on look at this at the ATD TechKNowledge conference.
And for context, it is all about online dating. Welcome to Drag’N’Love:
You can decide if you want to play with it first or go through the explanation below.
The inputbox above, where you type in your name is not an out of the box Storyline input field. I wanted the button below disabled when the field is empty, and enabled when the field is not empty. Storyline only recognizes the text entry when it loses focus. For me, I needed to monitor the content WHILE the user is typing.
AlterGuyName||Enter your “guy name” here
All I have to do is set up two triggers to disable and enable the button below depending on whether the AlterGuyName is empty or not.
On the surface, the dating Profile Builder seems like an ordinary exercise: some variables and drag and drop texts.
But the storyline insider view shows some funky things here:
The thing is, storyline has an interesting feature (one that I’d love to change). When a text field has a variable in it, and you change the variable’s value, the text field shrinks the text on the screen. I have no idea why but it doesn’t matter how you set the text field (do not shrink), the text becomes tiny.
Next, the drag and drop:
The first thing you’ll notice about this seemingly ordinary drag and drop is that it actually shows you what to do. Namely, it drops one of the items into the neon box. As you see LittleDude4Ever is dropped into the box. This is not an animation to move. While an animation would move it as well, it wouldn’t be a drag and drop. In other words, it would simulate the move but not the drag and drop.
… and you go back to the previous screen. Bugg is there. So far, so good.
And therefore, when you go and re-enter the same profile name builder, you would expect Bugg to be dropped still in the neon.
And here comes why this is so crucial: you see six tabs. Normally, it would mean you build six different drag and drop screens. One for each tab. However, this interaction was done on ONE screen, using variables only. That means you can have as many tabs or drag and drop interactions as you want, you would still use ONE screen to handle it.
One single page handles all drag and drop interactions. That means debugging is much easier, if you need to change the screen, you do it once. Not multiple times for each drag and drop.
Now, if you’re an advanced user you would probably be thinking:
… that’s fine but since these are variables, you need to set them for each tab. With seven variables and six tabs, that’s at least 42 lines in storyline.
And you would be right. If you use the out of the box features, you would have to add 42 triggers. Let’s see how you do this with six only:
ATITLE:=SCREEN NAME||a1:=LittleDude4Ever||a2:=aFun2BWith||s2:=100||a3:=Else||a4:=Bugg||a5:=Testing||a6:=Check balance||aCurrent:=%dataScreenName_Result%||aResultVar:=dataScreenName_Result:=%aCurrent%||aResultScoreVar:=dataScreenName_Score
- First, it splits it by the “||” character to get an array of text
- Then it iterates through the array of splitted text such as ATITLE:=SCREEN NAME and a1:=LittleDude4Ever , etc.
- For each of these, it sets a storyline variable to a new value. For example, ATITLE := SCREEN NAME means it sets the ATITLE storyline variable to SCREEN NAME. Or, a1:=LittleDude4Ever means it sets the a1 variable (which is on the drag and drop page) to LittleDude4Ever.
This one line would be 10 lines in storyline if you would want to set these variables manually as a trigger one by one.
What about setting a variable to another variable’s value?
“The dating game”
Storyline also sends data to an LRS via xAPI based on receiving information from the game. (I used Torrance Learning’s xAPI.ly to build custom statements but I’ll write a separate blog on that.) This version of Drag’N’Drop is not connected to the LRS, so you won’t be able to save or read your score.