Since Captivate 4 Beta I’ve had a constant shadow. I call him Rod. I also call him Boss. I also call him Dad but that’s another story. Anyway, unlike normal shadows this one has a voice, or rather a megaphone, saying the same thing over and over again.

“Drag And Drop Question Widget…Drag And Drop Question Widget…Drag And Drop Question Widget”

(Of course I exaggerate. There are also intermittent requests that I close caption, and enhance the voice over for his course.)

And so it is today that the first commercial Drag and Drop Question Widget has been released! The product page has links to a tutorial (well soon at least) and a heap of examples (three at the moment, more to come) so I’m not going to go into that for this post. What I will do is share with you some of the history that has contributed to this widget. Although this is the first commercial Drag and Drop widget, it’s at least the fourth that I’ve built from scratch. I’ll also share with you some lessons I’ve learned in the building process.

But before you do that, I recommend you go buy the widget or look at some of the examples. You know, so that we’re all on the same page. 😛

[Edit: There is now a trial version available on the product page for you to play around with]

A Short History of the Short History of D&D

The first Drag and Drop widget that I built was one of the examples packaged with WidgetFactory 1. It was very simple. You had a circle, a square, and a star on the left that you’d drag over to correspondingly shaped target objects on the right. In the properties you could define what combination of objects would result in a correct answer (say: Star over circle, Circle over Square, Square over star). I’m still getting e-mails from people who have customised that widget to work with their own graphics. All up about 270 lines of code.

The second was made for a course where we wanted the audience to recreate a diagram. No properties, but this widget randomised the positions of the drag objects, perfected the hit testing code when dropped on multiple targets, and amazingly came out at the same line count: 270.

Hint: Safe 7 BL, JHA TL and BR, JSA TR.

The third widget was to be used in the same course to teach Personal Protective Equipment. This one was insane.

First of all, the correct answer was to put the long brimmed hard hat on his head, along with the safety glasses. Put the boots on his feet, and the gloves on his hands, trousers on his legs. For the torso however, it’s not so clear cut. You could either put the blue and yellow high visibility shirt on, or the regular shirt with the orange high visibility vest. That’s multiple correct answers folks. That complicates the submit process (where you detect whether the question was answered correctly or not) a LOT.

Then you need to make sure that the man can’t where a hat on his foot and earmuffs on his legs. In other words, specifying which targets drag objects can be dropped on.

Then you need to have certain parts of clothing appear behind the man while others appear on top. For example when you drag the wide brimmed hat over the guy’s head, the back of the hat appears behind his head, while the shade appears over his face.

Then there’s the tool tips that come up when you leave your mouse over one of the objects long enough, the animation that plays when you clear the question, and detecting whether the target had conflicting objects (if you drag a second shirt onto the guy the old one will jump back to its starting position. But if you drop the blue safety harness on, the shirt will stay). These are all things that even the Drag and Drop Lite widget doesn’t do.

Now when I went to dig this widget out of it’s rusty subfolder, I found that I had changed a number of essential classes in my library that the widget worked off of. So it’s not working just at the moment, but I’ll (probably) fix it and post it later. Just rest assured that in its youth, it worked (almost) perfectly. Here’s a screenshot.

End line count: 704 (minus the several essential classes). By now I’ve sorta got used to programming the runtime part of the widget. It’s making it customisable with properties that’s I’m avoiding as best I can. Rightly so too. Which leads me to:

Lessons Learned

Lesson 1: The Properties Interface is Larger than the Actual Widget

The Properties Interface for the Drag and Drop Lite widget took me a looooong time to program. The Runtime part of the widget came together in a snap. Granted I’d had more practise at the runtime portion, and some of the code that controls the actual drag and dropping I’d already written for the Correct Answer tab in the Properties Interface. Let me put it another way:

The whole widget  is over 4,000 lines of code. 80% of that code is for the Properties Interface. That’s with me bludging off using Keith Peters Minimal Comps component library.

You may have heard me talk about widgets as being a software program in their own right in the eSeminar a few weeks ago. Well I’d like to revise that statement: Widget’s are like two software programs. One for the Properties Interface, one for the Runtime.

Lesson 2: Captivate has White Blood Cells

White blood cells are good. They go around your body chomping down on any germs they find. Well I am now of the opinion that Captivate does indeed have an immune system. I have also come to a unique understanding of what it must be like to be a bacteria.

Just in case you ignored my advice above and haven’t seen the examples and/or bought the Drag and Drop widget yet, I’ll tell you a little bit about how it works. What you actually end up dragging around at runtime are elements on the Captivate slide, such as: Captions, Highlight boxes, Images, Animations, or anything else (except shapes).  The problem is, Captivate’s not too happy about us shifting stuff about. I suppose it’s natural. I mean if you wanted to move someone’s liver to another spot in their body their immune system might have something to say about that.

So what’s Captivate doing? Well Adobe would have to confirm, but what seems to be happening is that when Captivate detects that one of the slide objects has had the audacity to move from its assigned location, it adds an identical object to the stage in its ‘proper’ position. Meaning that you end up seeing two instances of the same object on slide. This is REALLY ANNOYING! I found a work around that basically shifts these new objects 1000 pixels off stage so you can’t see them (hehe). It’s possible that this may be just a Question Widget thing, I don’t know. So just as a warning for anyone else tinkering with slide objects. Keep on the lookout for stray Captivate blood cells.

That’s not to discourage you from playing about with objects on the slide. As a matter of fact I encourage it! I encourage it so much that this will be the subject of next week’s post. So stay tuned.

Conclusion

It’s been a long, fun, and sometimes stressful road to building this thing. But honestly the widget’s not the most important part of the question. Like any software, the end result is determined not by how powerful the product is, but how creatively people use it. Let your imagination run wild! The types of questions you can build are unlimited.

As for me, I’m just glad to the megaphone-wielding shadow has something new to say.

“Drag And Drop Interactive Widget…Drag And Drop Interactive Widget…Drag And Drop Interactive Widget”