Adding Advanced Drag And Drop

Drag-and-drop questions are very popular and you can make some neat-looking drag-and-drop questions in Quizmaker ’09 as Articulate Jeanette Brooks shows us here. Today we look at a third-party tool which allows us to insert some more complex drag-and-drop questions right into our Ariculate presentations. Have a look at these examples embedded in Articulate Presenter:

View Demo

I used the tool Dragster to create the Where In France? demo myself and inserted two other pre-made examples. The man behind Dragster is Articulate user Tony Lowe who is based in the UK. I met Tony at the Leeds Articulate Conference last year and he has been working hard to make Dragster integrate as well as possible within Studio ’09 Pro.

Features include:

  • Insert into Engage, Quizmaker and Presenter.
  • Insert in Presenter either as a Flash movie, or as a web object.
  • Make the background of the activity transparent so that your PowerPoint masterslide will show through.
  • Remove any Dragster branding on the activity.
  • Insert multiple “Dragsters” in the same presentation.
  • Create special resources folder for easier embedding with Articulate.

Dragster is a “in the cloud” type tool meaning that, like Screenr, you don’t need to download any software to use the tool. You just go to the website and build your interaction online. When it is done, you’ll download a zip file which will include your published files ready to insert into Articulate.

While Dragster is easy to use, it took me a little time to get my head around. You need to follow the building sequence and I suppose the most difficult thing is figuring out how to define the droppable areas. But once you have got it, it is dead easy from then on.

How Do You Do It?

Well there are two stages to adding a Dragster interaction into Articulate.

1. Build Your Dragster

First you need to build your Dragster and for that you’ll need to go to the Dragster homepage. There is a trial version which runs just like the full version except you get a watermark. If you like what you see, you can purchase the software for £45.00 (about $68.00 or €50.00) via Paypal.

A few things to remember when you build Dragsters for Articulate.

  • Make sure that you use the Landscape activity layout on the Activity Settings page.
  • Also on the Activity Settings page, uncheck “Show logo on intro.panel” if you want to remove Dragster branding.
  • I won’t go into how to build your Dragster interaction myself. Instead I’ll point you to the resources on the Dragster website.

    1. Overview of how your learner will interact with the Dragster dragndrop exercise.
    2. Overview of the Dragster authoring process.

    You’ll find a lot of other useful links and movies to help you create your first Dragster. I’d recommend you keep it simple the first time, maybe just a couple of draggable objects on a picture. That way, you’ll understand the basics of the tool before you dig in further.

    2. Integrate Your Dragster Into Articulate Presenter

    Assuming you have successfully created your first Dragster, you’ll be able to download a zip file of all the files you’ll need to publish in your Articulate presentation.

    1. Make sure you download the “Embed activity” zip file and save it to your computer.
    2. Unpack the zip file.
    3. Go the slide in PowerPoint where you wish to add the Dragster and choose “Flash Movie” from the Articulate menu.
    4. Browse to the SWF file in the Dragster zip file you unpacked and insert it in your slide.
    5. You’ll find it goes over the sides (left and right) of your slide but not to worry. You’ll be displaying your slide in No Sidebar view and the SWF file will display just fine.

    6. For Synchronization, select “Movie plays independently of the slide”.
    7. Make sure that your Dragster slide is set to advance “By user” as set in Slide Properties.
    8. When you have finished the rest of your presentation or you want to see what it looks like, publish your presentation (to the WEB, to LMS or to CD).
    9. Finally, copy over the “dragndrop” folder from your unzipped Dragster package and place it at the top level of your Articulate published files (next to the player.html file for example).
    10. When you launch the presentation, the Dragster will load within your slide.


    Inserting Dragster into Articulate Quizmaker and Engage

    The principle behind adding Dragster to Quizmaker or Engage is the same as with Presenter or with adding any multiple file package.

    1. Choose Add Media and browse to the dragndrop SWF that you unpacked from the Dragster zip file for Articulate Presenter.
    2. Embed the SWF in the Engage step or the Quizmaker slide. (you can resize the SWF in Quizmaker)
    3. Publish your interaction or quiz.
    4. Finally copy the dragndrop folder which was unpacked from the Dragster zip file and place it at the top level of your published files (at the same level as engage.html or quiz.html).




  • Because each Dragster you create has it own unique ID, you can insert as many Dragster activities into your presentations as you like (maximum 99).
  • You don’t have to use the No Sidebar view in Articulate Presenter but it works better.
  • Dragster is NOT supported either by myself or by Articulate. If you do have any questions about Dragster, be sure to direct them to Webducate support.
  • Both Tony Lowe and myself will be at the 2nd European Articulate Conference in Leeds on May 17th. There are excellent speakers lined up including Clive Shepherd and live video appearences from the Articulate team in the US. There are still a few places left so hurry!

  • This post is tagged

    5 Responses

    1. David Fair says:

      Another great article, Dave! Thanks for sharing this interesting tool!

    2. [...] Using Dragster to add drag-and-drop functionality to Engage, Quizmaker, or Presenter [...]

    3. Bariah Ahmad says:

      This is very helpful, thanks Dave!

    4. Laura says:

      Maybe I did something wrong, but the dimensions of the Dragster file exceed those of the Articulate Presenter stage. The interaction hangs “off the edge” in the published version if I don’t adjust the dimensions in Articulate. If I DO adjust them, everything gets distorted. I can’t figure out how to actually make this look good in Articulate. Any ideas?

    Leave a Reply