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).

   

3. Select the Captivate slide where you wish to add the Dragster activity. Use the Insert > Animation menu option.

   

4. Browse to and select the published Dragster 3 activity SWF file.

   

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.

   

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.

   

7. Now expand the Transition box and select No transition. You have now finished inserting the Dragster activity.

   

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.

   

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.
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.

    
    

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:

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.

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.

CourseLab

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):

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

Embedding Dragster activities in Lectora projects

Lectora is a comprehensive e-learning authoring tool offered by Trivantis. In this post I review the steps used to embed a Dragster activity into a Lectora project.
Go to the Lectora project page you want to add the activity to and select in the menu:

Add > Object > Animation



In the Animation Properties panel click the Import button and Choose From file

Navigate to and select the dragndrop.swf of your published dragster activity. Click Apply

Now the activity will appear on the page. You will probably want to reposition and resize it to fit into the page content area. (Tip – press the shift key while dragging the resize frame to maintain the proportions of the activity display).

Publish the Lectora project

When you have finished publishing, copy the other dragster activity files EXCEPT the index.html file into the folder containing the publishedLectora project (this will usually be two files, dragndrop.xml and the dropzone image file).

View the published Lectora project and you should see a working dragster activity on the page where it was added.

Multiple activities in one Lectora project

If you intend to add more than one Dragster activity to the same Lectora resource there are some additional steps you need to complete.

For each of the published Dragster activities you are using in your lectora project rename the dragndrop.xml file to include a number so that they don’t overwrite each other when copied into the published Lectora project folder. (e.g. dragndrop1.xml dragndrop2.xml dragndrop3.xml etc)

Then for each dragster activity in the lectora project in the related Animation Properties click on the Parameters tab.

Click the Add button.

In the pop-up select flashvars from the list for Name.

In the Value entry add:

XMLfilename=dragndrop1.xml

Where the number in the xml filename relates to the appropriate dragster activity xml filename as you amended earlier.

Click OK and Apply

Do this for each of the dragster activities then publish the lectora project.

Copy the files from all of your published dragster activities into the folder of the published lectora project (not the dragster activity index.html files!)

View the project.

Dragster 3 on the Nokia N900

We are pleased to annouce that we have now successfully viewed and completed an example Dragster 3  activity on a mobile phone. The phone used was the Nokia N900 running the Maemo operating system. At this point the N900 smart phone is supplied with Flash player 9.4 which allows Dragster 3 activities to be viewed as part of web pages in the phones web browser. This a very exciting development and we now feel that the ability to deliver rich drag and drop learning activities on to a wide variety of mobile devices via Dragster 3 will soon be a reality.

However it is still very early days in the development of flash players for touch screen mobile devices and in conducting these tests we did encounter a couple of significant usability issues:

1. The drag and drop functionality provided by the phone touchscreen does not allow activity elements to be moved. Instead any attempt to drag and drop an element in the activity is interpreted as a browser page scrolling interaction and moves the whole activity. At this point the activity can only be completed using the keyboard controls for positioning the draggable elements. In the case of the N900 there is a sliding keyboard integrated into the phone which allows this type of keyboard control to be used without obscuring the activity itself. In the case of smartphones with touchscreen keyboards this will become a significant problem as the activity will be obscured or need to be reduced in size for this method of control to be used.
2. There does not appear to be an equivalent of mouse rollover interactions for phone touch screens at this point. This means that pop-up text feedback can only be displayed using a prolonged click on an activity element. This also causes a flash player context menu to appear over the activity. This will disappear if the user clicks somewhere outside this menu.

While it is possible to complete an activity despite these issues, it is hoped that these will be addressed in future updates to the flash player plugins available on mobile devices. We will continue to review and report on these exciting developments…

New Dragster 3 feature – specify individual draggable element colours

We 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.

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).

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).
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.

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

Dragster activity “word cloud”

In my recent demonstration of Dragster 3 at ALT-C 2009 I encountered an unforeseen issue which has led me to develop a new activity results viewing facility.  I’ve called this a “word cloud” (the best I can come up with for now… suggestions welcome!) as it closely resembles a tag cloud, only the words displayed aren’t tags in the normal sense.

The issue

The third activity demonstrated at ALT-C 2009 involved a brainstorm where participants individually identified applications of blogs in teaching and positioned these on a matrix (akin to a virtual post-it note adding activity). The Webducate results recording system then allowed me to show the combined results of this activity back to the audience.

I must admit that I hadn’t anticipated how effective this activity was going to be in generating and collating ideas from the audience. With 24 activity responses, consisting of four applications each, the resulting collation shows approximately 96 applications. When viewing this number of labels (virtual post-its) simultaneously it is difficult to quickly identify any emerging themes or focus on any particularly interesting items (see the screenshot above).

The word cloud

So following several days of reflection on this issue, I came up with the idea of a “word cloud”. This facility displays the most commonly used words  in the collated entries, in the manner of a tag cloud. This clearly identifies the emerging themes and makes each word into a link to a view of the recorded results that include just those labels that contain the selected word. (View an example word cloud)

An activity word cloud is now available for all brainstorming style Dragster 3 activities and how this works can be seen in the example shown below (this is the word cloud generated by the ALT-C 2009 demo activity)

This word cloud highlights the concepts of feedback, reflection, students, sharing, knowledge and collaboration from the 96 responses recorded during the demonstration. Clicking on the reflection link displays the screen shown below.

Here I have spread out the over-lapping reflection labels. This word related view allows the statements incorporating this term and their positions to be quickly viewed. In this case it shows reflection being most commonly associated with the activity of student writing blogs, but with one contribution considering reflection as an appropriate use for staff in reading the blogs of peers.

As with all Webducate results pages, these various views are available to the activity author and can be shared with participants via the share URL. In a classroom response setting, these views can be displayed back to the audience to facilitate related discussion and analysis.

And finally…

This facility is very much a work in progress and I welcome feedback. Please let me know what you think!

ALT-C 2009 presentation – Developing a class room response system for drag and drop activities

Here are my slides from the presentation made at ALT-C 2009 where Dragster 3 was demonstrated as a classroom response system. Thank you to all those who attended and took part!

The activities used in the presentation and the associated recorded results can be viewed here.

Dragster & Articulate example – Know your europe

Another excellent piece of work from the team at the University of Leeds which demonstrates how a series of Dragster 3 activities can be delivered within an Articulate Presenter presentation. Particularly effective is the use of audio to introduce each of the drag and drop activities.  (View the Know the European Union presentation).

Next Page »