Join Aaron Quigley for an in-depth discussion in this video Building drag-and-drop elements, part of Learning Captivate 8.
The last interaction we're going to look for this course is a drag and drop interaction. Now this is a new feature to Captivate 8 with the drag and drop wizard. Unfortunately we've been working in a responsive project and drag and drop does not yet work with responsive projects. So in order to explore this new feature we're going to start with a blank project from the project picker in Captivate 8. I'll select Blank Project > Create. With this Blank Project open I want to make sure I can see the entire slide. So I'm going to go to View > Magnification > Best Fit.
I'll also turn my Properties panel on, on the righthand side. So I can use it throughout this video. Now I'm creating the Drag and Drop interaction. And I want a pretty plain basic background to my slide. To do this, I'll come to the master slide and just choose a blank background. We now have a blank canvas we can work with to create our drag and drop interaction. Now the way the Drag and Drop Wizard works is we'll have a variety of target areas or places that people will drag items to. And we'll define those. And then we'll also define a variety of objects that people can use to drag.
And the last thing we'll do is in the Wizard is we'll line which item goes where. So our first step though is we need to create the items. I'm going to come up to the shapes drop down menu and I'm going to select the rounded rectangle. Holding down the shift key so it's a perfect square rectangle, I'm going to drag out a box and then use the fill options to color it blue. I'll click away from it. I'll click the box again, and I'm just going to choose to copy this, and then paste it, twice, so that I end up with three different boxes. I'll drag the boxes apart from each other and then to quickly line these up, I'll just click and hold my cursor and drag out a dashed line box that touches all three of the rectangles I just drew.
When I release it, all three of them are now selected. I can right-mouse click, select align, and choose Align Center. And that'll make sure all of my boxes are perfectly lined up. Now these boxes that we drew are known as smart boxes, which means that all I have to do is double click, and I can actually type text right into the middle of the box. This first box, I'm just going to type Object A. The second box will be Object B, and the third box, Object C. Now as I click on a box in the properties panel, I can see that there's a title that goes along with this box.
Here it says smart shape one. If you're working with a lot of different shapes it's a good idea to start labeling these so that you understand what they are. Such as object one. Not only can this be beneficial when you're trying to figure out what object is related to which name, but if you're working in the time line on the left hand side, it can help you organize exactly which objects are which so that if you add time signatures to them, it helps make sense. We won't be using these titling properties in this video, but I want it pointed out as something that's a best practice and is probably a good idea to do every single time you create something. The next step is to create the object that we'll use to sort into these various boxes.
I'm going to create some stars. And I'm going to hold down the Shift key so as I drag out my star it's a perfect star and not just proportionate. Once again I'll just change it's color. Let's use green this time. And then I am going to right click and copy. You can also use the keyboard shortcut of Cmd+C or Ctrl+C on the PC. I am going to paste some more stars. In fact I am going to paste I think four maybe five stars on this page. Now with my stars since they are smart objects again, I am just going to double click and add text. I am going to make two of these stars Cs. One of the stars a B and two of these stars As. So now that we have our objects created, the next step is to use the drag-and-drop wizard to figure out which object goes to which box. Let's go and do that by going to interactions. And drag and drop. Out first step is to select all of the objects that are going to be draggable. So that's all these stars. So I'll click on a star and you can see it has this light green box around it. That means it's one of the items that will be draggable. I'm going to hold down the command key or the control key on a PC and I'm going to click the rest of the stars. So all of the stars have a green box around them, meaning they are draggable items.
I'm now going to click Next in the upper right hand corner. The next step we're going to do is to select the targets, So here's Object A, Object B, and Object C. And I can see that they've got blue boxes around them, because they're our targets. With the targets selected I'm going to go and click Next. At this point we're going to click inside one of the dragable objects and draw a line to its target so this first star is a C, so I'm going to click and hold and draw an arrow down to ObjectC. The second star is a C as well so I'll drag its arrow to ObjectC. The third star is a B so I will drag its arrow to B. And then our two A stars will have arrows pointing to Object A. You'll also notice that at this point, the drag and drop wizard has created some interactive elements for us.
It's created a Submit button as well as a Failure Text button. I'm just going to move the Failure Text button up to the top and make it a little bit bigger. And I'm going to take the submit button and move it also into the middle and make it a little bit bigger. At this point we're not going to edit the text to these buttons, we can do that once the slide's created. If everything looks correct, let's go and click Finish. So at this point our drag and drop interaction is actually complete and ready to be tested. The last thing I'm going to do is to add some text of what's going to pop-up if someone were to get this incorrect. And I'm just going to say, sorry please try again.
Alright let's go ahead and preview our drag and drop interaction by going to the preview menu and let's build this as a project. So you can see that my slides started playing and it paused because there's an interactive element on this slide. I can now click on the stars and drag them to a box. When I get them towards the middle of the box and release they snap in to place. I'm going to go ahead and complete this incorrect. I'm going to put one of the A stars in a C box and then click the Submit button. Because we had one star out of place, it said sorry please try again and it leaves us on this slide.
At this point we could go through and set up our actions to determine whether or not we're going to advance to the next slide if they get it incorrect, or make them retry until they have a correct response before they can advance to the next slide. Once again, drag and drop interactions only work if you start from a blank project and they will not work in responsive projects.
- Choosing a project layout
- Applying and changing themes
- Adding text, media, and shapes
- Inserting interactive elements and widgets
- Adding audio and video
- Adding closed captions to video
- Using responsive templates, text, and images
- Accessing elearning
- Creating software simulations
- Publishing a Captivate project