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.
Input Field
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.
As you see, once I type anything in the box, the button is enabled. This is done through JavaScript and jQuery. I created this function as a standalone support, so anywhere I can use it throughout the course. All I have to do in Storyline is to add the Storyline variable I want to store the field value in:
AlterGuyName||Enter your “guy name” here
What JavaScript does is checks if a textbox has a || character in the placeholder. If it does, it removes the first part (AlterGuyName), and remembers that this is the storyline variable we need to update. Whenever I type in the textbox, letter by letter, it updates the storyline variable, AlterGuyName.
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.
Profile Builder
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.
This little hack with the ~~ makes sure that if any text box has ~~ in it, JavaScript will make sure the text (replaced by the variable) will not shrink! You’ll see that in a minute.
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.
This LittleDude4Ever has been actually dragged and dropped by JavaScript. For storyline, it is exactly the same as you manually did it. Why is it important? Because once you manually drop a different item into the neon box, let’s say Bugg.
… 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.
JavaScript picks the latest item, finds the location of the target, and simulates a drag and drop into the target. Just as if you were doing it manually.
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:
When you click on the first heart to set the screen name, a JavaScript trigger runs: runVar(“dataScreenName”);
What this line does is calling a function called runVar and hands over the name of a storyline variable, called dataScreenName. Then JavaScript does the rest of the magic.
What’s dataScreenName?
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_ScoreSo, dataScreenName is a text, holding the value above. What this runVar JavaScript function does with the text is the following:
- 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?
aCurrent:=%dataScreenName_Result%
When you put a variable name inbetween % signs, the runVar JavaScript function first grabs the value of the dataScreenName_Result, and then sets the aCurrent variable to the grabbed value. So, aCurrent will hold whatever the dataScreenName_Result variable’s value was. (This is the same as the manual version where you set a variable to another variable’s value.)
“The dating game”
The dating simulation part is created in Construct, a 2D game engine. The output of this game engine is a webobject inside storyline. The two communicates back and forth via JavaScript. Depending on how well you set up your profile, your chances to get dates or get engaged may vary.
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.
There’s a lot more inside Drag’N’Drop , including how to make sure you don’t have to edit published files to add JavaScript and other files… Still working on some details for the ATD TK conference (two hour hands-on advanced session). For now, just try to play with it . Good luck with your dates!
Leave a Comment