HERE IS A LINK TO THE ACTUAL STORYLINE FILE!
I just want to give an update on a new portfolio piece I drop and reflect a little bit on what I’ve learned about it, and this is for anyone who wants to come in and I don’t know, listen me talk about how I think about this kind of thing or for any sort of future client that sees like, oh, hey, he understands how these particular things work inside of Storyline.
So I like the design. Kind of everything just sort of falls in sequentially. You’ve got Ba Sing Se in the background. You’ve got the avatar logo in the top. This really isn’t about the design portion of things even though it means it follows all the graphic design principles that you’d want it to follow.
Now, the way that this worked before is that I would drag benders to their specific bending boxes and then they would disappear and you would either get the point or not get the point.
After a couple of rounds of feedback, people said that they wanted to try again. And I thought that was a light bulb moment of like, well, of course, you don’t want to be punitive in your learning measures, so let’s figure out how to make this work.
And just to give you a quick illustration of how this does work, this is Aang from Avatar and he’s an air bender. So I’m going to drop him in Air Bender.
And this score up here is a variable. And I thought it was going to be really straightforward as in you adjust, you have a trigger that adjusts the variable whenever you drop Aang into the air bending box.
And this is Iroh. He’s a fire bender. We’re going to drop him in the fire-bending box. And then goes to two.
However, I was coming across a lot of problems. If I was to pick up Aang and drop him back in, then I would get multiple points without having to do anything and I could just reach eight without any problem.
Another problem I ran into is if I took Aang off of air bending and then put him back in, it would also give me extra points.
And I really didn’t want to do any sort of punitive scoring or anything. I also ran into the problem that if I kept using that trick of picking him up and dropping him back in his correct spot, we would go above the threshold of eight.
So I was just racking my brain on what to do and thank you to my instructional design friends, Alex Drobik and Noah Mitchell for being great resources and just Storyline gurus.
If you’re looking to hire people, hire them. You can hire me for something as well, but they walk the walk better than I walk the walk, I’m sure.
So what I did end up doing was I had to do a lot of variable changing to make sure that points lined up just right. And I’ll show you what I mean. I’m going to go ahead and refresh this and start over.
So we’re at zero of eight and the way that we ultimately ended up doing this was I could drop Aang into his air bending slot. And if I moved him away, it would actually take that point away.
So one goes to zero. And if I brought him back, it would go back to one. Luckily Noah caught the fact that if I dropped him back into the initial box, then problems would come back, but we took care of that with more variable play. And I’ll open up Storyline and show what I mean.
But the cool thing is, is I can drop Iroh wherever he isn’t supposed to go. And I like these little red Xs and green check marks that I picked up from Jeff Batt‘s Udemy course, which I’ll drop a link somewhere because it’s fantastic.
But if I drop Iroh into fire bending, I get a point. And if I take him away, I lose a point.
So overall, your learners can get eight points if they keep at it long enough, and that’s really what I want. I want this to be more of a formative assessment than a summative assessment.
And that’s just how this goes with the rest of the bending. So Tenzin’s an air bender. Bolin’s an earth bender. Katara’s water. Toph is earth.
And let’s say I mess up on Zuko. Oh, maybe he’s a water bender. I don’t get that point, but I didn’t set it up to subtract points if I get it wrong. Only subtract points if it leaves the correct state and then based on what their variable is assigned to at the time. So drop Zuko back in fire, and Pakku in water. Once Pakku’s done, we press “SUBMIT” and we’re done with this interaction.
So I’m going to take a second with movie magic and open up that Storyline file.
And the Storyline file just looks like this. It’s a single slide.
As mentioned, I followed Jeff Batt’s Udemy course to kind of get the structure of this. He has a really cool grocery drag and drop interaction where you drop the healthy foods into the shopping cart and the unhealthy foods into the trash can.
But I wanted to kind of take that to the next level. Rather than having two things and having stuff disappear, I wanted to do four quadrants, and I made it way harder on myself by doing the ad points of track points. But I learned a lot in the process, which was really cool.
So if we click into this thing, this is what’s going on behind the scenes. I’ve got all of my… Just, let’s take a quick look at the timeline.
Ba Sing Se is the background. I have a background overlay to make it sort of dark. The top bar is a rectangle that comes in slightly later. The logo cascades in the welcome to the bending sorting after that. And then the score is a variable of eight.
Up towards the top, we’ve got our respective boxes here where you drop in your particular benders.
And then the logos, the fire, water, air, and earth, will cascade in down here on the timeline. And we have the bender box where everyone starts, and everyone is a circular image.
And then the “SUBMIT” button comes in later, and I believe that ends up being its own layer. To give you a quick overview of what my layers are, I’ve got my background, which contains most of these things.
The “SUBMIT” button is defaulted to hidden until the last chip or the last character gets dropped in. I’ve got check boxes for every correct bending placement and X boxes for every incorrect bending placement.
I’ve also got different zones for earth, air, fire, water. I’ve got my “Correct” slide, my “Incorrect” slide and “Try again.” However, the “Incorrect” slide never actually gets used, or maybe it does, but no, actually it’s not true. I believe it just always defaults to “Try again.”
Now where the real magic happens is the triggers. And this took me a long while to figure out, and thanks to Alex and Noah for talking me through this and planting some seeds that ultimately got me where I needed to be. So let’s see. I undocked my triggers here.
And another thing that I found that was actually really helpful was naming these elements with symbols. So I dropped… Once I started getting into changing all the variables and the objects and stuff, I found that I was having to scroll around because you have Aang at the top and Zuko at the bottom because it’s A and Z.
But if you label these with symbols in the front, like the @ symbol, that alphabetically comes towards the top, and I did the same thing with the bending boxes. I did exclamation points, so I wouldn’t have to do a lot of scrolling. So just starting with Aang, this is all the stuff I’ve got going on here.
As far as variables go, I have a variable for every character and I have one variable for the score. Now, these variables are all numbered variables. I started toying around with true and false, but I ended up changing them to numbers and I’ll explain why.
So Aang shows the check mark on the air whenever you drop him into the air bending square, because he’s an air bender. We’re going to show the X layers for earth, fire, and water whenever he gets dropped into earth, fire, and water, because he’s not a bender in any of those elements.
Now here’s where it gets kind of tricky. In the variables, Aang variable is a number variable that defaults to zero. And I’m going to call this essentially the initial state. It’s like initial true and false.
And in hindsight, I could probably have done this with states instead, but this gave me a much better grasp on how variables work. So everything starts at zero.
We then set Aang to a value of one whenever he gets dropped into the air bending square. And in my mind, one is correct. And I’m going to add one to the score when the user drops Aang on the air bending square if that value equals one. So when he gets dropped on, he’s set to one, and when he’s set to one, he gets dropped on that square, we’re going to add a point.
Now we’re going to have to make the inverse true. We’re going to have to set Aang’s variable to two when you drop Aang on either the earth square, the fire square, or the water square, as long as his variable is not zero, as long as he’s not in an initial state.
And I found that was trouble because every time you would drop him somewhere else, that next triggered down, which is subtract. You would subtract the score if you dropped him on a different square.
Another thing I ended up having to do that Noah caught, thank you again, Noah, is if you brought him back to the bender box and then back to the air box, it would do that racking up the points thing. So I had to add the bender box to the variable two conditions. I realize I’m not teaching this very well, I’m sorry, but I’m just kind of talking through the process.
So long story short though, one is a correct state. Two is an incorrect state, but zero is the initial state that needs to happen so that way if I drop him on the wrong box first, I don’t move into negative points.
And that’s how these variables work. And so I did a lot of copying and pasting across these different characters. I would change the Bolin variable to two when Bolin is dropped in these zones and then if the Bolin variable does not equal zero or is no longer in an initial state.
And having to do all of this changing, the symbol trick came in really handy to have all that stuff right up front.
And I did the same thing with the zones because I had to choose those boxes in these different triggers quite often, and naming them that way with this convention really helped.
So that’s my reflection on this particular piece. It was a lot of fun to make. I thought it was going to be a lot simpler than it was, but I’m really glad that I did it because not only do I have a firmer grasp on dragging and dropping interactions, I have a much firmer grasp on how variables work.
And if I were to do this over again, I would probably do this with states instead rather than variables, or explore the option to see if I could do this with states instead. I’m not sure if you can, but it’s worth thinking about how states and triggers interact.
But anyway, if you want to, just head on over to mittstech.com, open up the portfolio. I might still tweak a few things here and there, so if you see that something’s a little bit different. I like to mess with things.
But you can check this out and see the work that I put in. But thank you for watching this. I learned a lot, and I’m really glad that I got to share this learning with you. And I hope that this helps somebody out, especially if they’re working through a similar type of problem. Thanks.