Blog Archives

Embed code available for Dragster 3

Following requests we have added a facility to embed your Dragster 3 activities in blog posts and web pages using a similar method to that provided by YouTube. On your Dragster 3 activity publish page you will now find a Dragster 3 activity embed code displayed near the bottom of the page (see below). Select this code and copy to your clipboard (Ctrl C or right click and select Copy – see below).

Select and copy embed code

Paste this code into the HTML of a blog post or the HTML of a web page to display your Dragster 3 activity.

Paste the embed code into the HTML of a blog post using WordPress

Tips – You can amend the dimensions of the embedded activity by editing the values of the width and height attributes in the embed code. You will want to maintain the same ratio between width and height. So example dimensions for a landscape Dragster activity are 900 by 490, 600 by 327, 450 by 245.

You can disable the embed facility in the Dragster 3 activity settings.


Below is an example embedded Dragster 3 activity embedded with a width of 600 and a height of 327:

<iframe src="" width="600" height="327" frameborder="0"></iframe>

Dragster on Android

I finally joined the rest of the world in owning a smart phone this Christmas.  My choice after literally years of consideration was an HTC Desire which uses HTC’s own Sense UI based on the Google’s Android. One major reason for my choice was the availability of the flash player on this platform. So one of the first things I did on turning on my shiny new phone was to try a Dragster activity (see below).

Dragster 3 activity on an HTC Desire

And I was not disappointed.  I was extremely pleased to see that not only did the activity load up exactly as one would expect on a laptop or PC, it also responded as I hoped with the labels dragging with finger swipes on the touch screen. The activity feedback is displayed by tapping on the activity feedback button as you would expect. The only real difference between a PC/laptop with a mouse and cursor, and on the phone is when it comes to displaying feedback on label positioning. As the phone touch screen has no equivalent of mouse/cursor roll-over, I found I needed to tap on the labels in order to display the answer areas and pop-up text. The only problem with this is that if you lift your finger from the screen the answer areas disappear again, so viewing these areas can be problematic if they are small and are obscured by your finger. However when these areas are larger and not obscured this isn’t a problem.

So I think we can now state that Dragster 3 activities can be delivered to users of modern Android smart phones that have an up to date flash player installed. My only reservations are about screensize which limits the accuracy of element positioning and can hinder viewing of feedback as descibed earlier.

This experience makes me very excited about the new generation of Android based tablet computers that are due for release later this year. With their flash compatibility and large touch screens they will be absolutely ideal for delivering tactile drag and drop interactions for learning with Dragster.  I’m expecting 2011 to be a very exciting year!


Use of Dragster in teaching veterinary anatomy

I would like to highlight a piece of research undertaken by Octavio Lopez Albors and colleagues at the Royal Veterinary College which involved collaborations with the Veterinary Faculty in Murcia (Spain) and the Minimally Invasive Surgery Centre in Caceres (Spain). This looked at using Webducate Dragster as a tool to improve the teaching of the important subject of anatomy to veterinary students where the activities were created and shared between these international partners. Below is the presentation made at the XXVIIIth Congress of the European Association of Veterinary Anatomists describing this project.


Embedding Dragster 3 drag and drop activities into Adobe Captivate 5

Dragster 3 offers a great way to add drag and drop activities to e-learning resources created with Adobe Captivate. The process of embedding a Dragster 3 activity in Captivate involves a number of steps described below:

  1. Publish your Dragster 3 activity using the Embed activity publish option and extract the zipped files (more details on the Embed activity publish option).
  2. Create a new blank Captivate project. In this case I am choosing to use a project size that will fit a Dragster 3 landscape activity (1024 x 576).cap1
  3. Select the Captivate slide where you wish to add the Dragster activity. Use the Insert > Animation menu option.cap2
  4. Browse to and select the published Dragster 3 activity SWF file.cap3
  5. You may see a warning at this point about the version of actionscript. I have found that this warning can be ignored, so click Yes.cap4
  6. The outline of the Dragster activity will now appear on the slide. You will need to change two Captivate properties for this inserted activity in the right hand properties panel. Make sure the activity is selected on the slide, then expand the Timing box in the properties panel. Edit the display for a specific time and allocate the appropriate number of seconds.cap5
  7. Now expand the Transition box and select No transition. You have now finished inserting the Dragster activity.cap6
  8. Save your Captivate project. Once you have completed the other aspects of your resource, you are now ready to publish the project.
  9. Select the menu option File > Publish to display the Publish dialog. You can leave most of the publish settings in their default values, apart from one preference. Click the Preferences… button to reveal the preferences dialog.cap7
  10. On the preferences dialog on the Project > Publish settings page, Externalize resources list check the Animations option and click OK.
  11. Now publish the Captivate project. Once complete select No to Do you wish to view the output. There is one more step for you to complete before you can test your resource.cap8
  12. Open your published Captivate project files folder and the published Dragster activity files folder. Copy the SWF file and folder from the published Dragster activity into the published Captivate project files folder. Select Yes to replace the dragster SWF file already in this folder.cap9
  13. Now you can test your Captivate resource by opening the appropriate HTM file with your browser. An example Captivate resource created by following these steps is shown below (View this example Captivate).


Dragster – Using the embed activity publish option with Wimba Create, eXe and CourseLab

In March 2010 a new publish option was provided for Dragster 3 activities called the Embed activity option. The format of the activity files published via this option have been specifically designed to facilitate the integration of the published Dragster 3 activity into e-learning resources created with other common authoring software. The steps by which an embed activity can be integrated into an Articulate Presenter presentation have been described in a previous blog post. This post will review how this publish option can be used to quickly and easily add Dragster 3 activities to resources created using other authoring software such as Wimba Create, Exe and CourseLab.

To publish a Dragster 3 activity using the Embed activity option click on the Embed activity link on the publish dragster activity page as shown below:

Embed download link

Extract the downloaded zip file to view the files making up an activity published in this format. These consist of a SWF file and a folder containing all other related activity files that have the same name (see below). These file and folder names are important and should not be changed.

Embed files

In general terms the steps involved in adding a Dragster 3 activity published in this format to your e-learning resource or course are:

  1. To embed the activity into your e-learning resource you should use the normal options available for inserting a flash movie according to the software involved (see below for specific details).
  2. If you have multiple Dragster activities, insert each related activity SWF file at the appropriate point in the resource.
  3. Publish the resource.
  4. Copy all the embedded Dragster activity folders into the published resource files (usually at the root level).
  5. View the resource.

Wimba Create (Coursegenie)

  1. At the appropriate point in your MS Word document select the Interaction > Media options in the Wimba Create menu.
  2. In the related pop-up:
    • select the Flash option
    • for File browse to the published Dragster 3 activity SWF file
    • define the Display as Width 600 and Height 660 for portrait activities Width 900 and Height 490 for landscape activities.
    • Check the Autostart option (leave the Loop option unchecked).
    • the accessibility tab allows the entry of a long textual description of the activity and for the addition of a link to download a flash player.
    • click OK to embed the activity.
  3. Repeat the previous steps to insert other activity files at appropriate points.
  4. Publish the course files using the Generate Course menu option.
  5. Copy all the Dragster activity SWF files into the Wimba Create published media folder.
  6. Copy all the published Dragster activity folders into the root folder of the published Wimba Create course.
  7. View the Wimba Create course by opening its index.html file in your browser.

eXe – e-learing XHTML editor

  1. Open the eXe editor and at the appropriate point in your content, select the Flash with text iDevice.
  2. Using the Select Flash Object button browse to your unzipped dragster activity folder and select the SWF file.
  3. You will need to size the activity appropriately in the eXe iDevice using the dimensions below :Dragster 3 – Portrait 600 by 660 – Landscape 900 by 490

    Dragster 2 – 700 by 560

    Tip – you can scale the embedded activity by using smaller dimensions while keeping the height and width in the same proportions (e.g. Dragster 3 Landscape at a scale of 80% – 720 by 392).

  4. Repeat steps 1 to 3 to insert multiple Dragster activities.
  5. Export your finished eXe resource (e.g. File > Export > Web site > Self-contained folder).
  6. Copy all the published Dragster activity folders into the same folder as the other eXe exported files (if eXe exported a zip file, you will need to extract this zip file before copying these files).
  7. To view the finished eXe resource open the index.html file within the eXe exported folder.


  1. On the appropriate CourseLab slide use the menus to select Insert > Object and expand the Media section and drag a Flash object on to the slide.
  2. Resize this flash object to make it as large as possible.
  3. Right click on the Flash object and select properties.
  4. For the file option, select the SWF file for your published Dragster activity.
  5. Repeat steps 1 to 4 to add multiple Dragster activities to your CourseLab course.
  6. Publish your completed Courselab course on to your PC and extract the published zip file.
  7. Copy the published Dragster activity folders into the folder called 1 (you should see a file called start.html within this folder). Now test the course by opening start.html inside the folder called 1.
  8. Re-zip the course for upload in your VLE.

Dragster 3 – new loading animation

A new setting has been added to Dragster 3 which animates the display of activity elements and the display and hiding of activity information panels.  These animations are designed to be subtle and appealing so hopefully you will like them too!  This setting is called Animate activity loading and is available at the bottom of the general block on the activity settings page (see below):

animate loading setting

These new animations can easily be disabled by unchecking this setting before publishing your activity. View theVolcano labelling activity which now uses this loading anmation.

screenshot of activity elements loading with the new animation setting


Improved Dragster 3 – Articulate integration

Until recently the only way to embed a Dragster 3 activity in an Articulate presentation was to use the Web Object option. This approach suffers from a couple of drawbacks in that Articulate player elements (e.g. pop-up windows for notes and attachments) would disappear behind the Dragster activity and also the authoring process wasn’t straight forward as you would have to publish the dragster activity on-line and independently of the articulate presentation. With recent updates to Dragster 3 you can now use the Flash Movie option to embed a Dragster activity which avoid these drawbacks.

The steps involved in embedding a Dragster 3 activity are:

  1. Author your Dragster 3 activity in the usual way (Tip – use the landscape layout option as this fits best into an articulate
  2. Publish your Dragster 3 activity using the Embed activity zip download optionembed1
  3. Unzip the downloaded activity files. You will see they consist of a single flash SWF file with a name like dragndrop1023.swf and a similarly named folder which contains the rest of the activity related files.embed5
  4. In Powerpoint click the Articulate, Insert Flash Movie button. Browse to the SWF file for your published Dragster activity and click Open.
  5. In the Flash Movie settings change the Advance to the next slide option to When user clicks next and Synchronisation option to Movie displays independently of slide. Click OK to finish inserting the Flash movie.embed2
  6. The embedded Dragster activity will be displayed as a blank rectangle which will extend beyond the edges of the powerpoint
    slide. Resize this activity by dragging the handles at the sides and corners of this rectangle for a more appropriate fit (Tip – hold down the shift key when resizing to maintain the aspect ratio of the activity). NB – if you set this slide’s articulate Slide properties to Change view to the No sidebar display option you don’t have to resize the embedded Dragster activity!
  7. Repeat the activity and publishing process described above for each activity you wish to add to the Articulate presentation.
  8. Publish the completed Articulate presentation.
  9. Copy the folders of the dragster activity related files into the root folder of the published Articulate presentation.embed3
  10. Finally view your Articulate presentation (example presentation).
  11. embed4

Hopefully this new approach will make it even easier to create rich interactive resources using Articulate and Dragster 3!

Other tips

Use the Dragster 3 transparent skin option to seamlessly blend your activity into the articulate presentation.

New Dragster 3 feature – specify individual draggable element colours

e were recently approached by Oxford University Press who were creating a set of Dragster 3 activities that required the draggable text boxes to be different colours.   As this was not easily achievable with the existing authoring system a new activity setting called Set individual text box / label colours was added to the activity settings page. When this setting is checked, colour selection options are presented on the activity Add/edit elements page (see below) allowing these initial element colours to be easily defined.

Select element colour screen shot

In the activities created by Oxford University Press these element colours are used to identify the text blocks that make up different  portions of the name of an organic chemical structure (see below).

Screen shot of example dragster 3 activity

View the Oxford University Press naming organic compounds activities


New Dragster features – transparent skin and textbox height

Two new features have been added to Dragster 3:

  1. A new activity setting allows the height of draggable text boxes and labels to be optionally fixed. By default these draggable text boxes and labels automatically resize their height to fit their text content. Now by specifying a value greater than zero in the new Text box / label height setting all draggable elements will have the same fixed height. This is particularly useful for activities involving the completion of flowcharts, matrices or tables. This setting is used in this example flowchart based activity (activity courtesy of Dominic Alder – University of Bristol).Flowchart based activity using fixed element heights
  2. A new option on the Activity skin colour selection is the transparent skin option. This option hides the activity skin entirely allowing the selected activity Background colour to be displayed. This facility allows for the activity to be seamlessly integrated into other web content as illustrated in this articulate presentation example.
  3. Example articulate presentation with embedded dragster activities

If you can identify other useful additions to Dragster please get in touch!


Dragster 3 – Basic formating tags in pop-up text feedback

Dragster 3 has been updated to allow basic HTML formatting tags to be used in pop-up feedback text. Four tags can now be used when defining this text:

  1. <b>bold</b>
  2. <i> italic</i>
  3. <sup>superscript</sup>
  4. <sub>subscript</sub>

NB – you should ensure that the activity setting HTML formating in element text is checked when using these tags, particularly if using subscripts and superscripts.

Unfortunately bold and italic formatting cannot be applied to superscript or subscript text.

Example pop-up feedback illustrating bold and subscript formatting