Webducate

Dragster 3 - new features - custom skin colours, preview etc

In recent weeks a number of improvements have been made to the Dragster 3 authoring system.  You can now:

1. Reorder the results by element page to get a clearer view of the elements that users are getting correct, close and incorrect in your activities.
   
   
   
2. Use the new custom skin option and custom skin colour setting to select any colour to form the activity background.
   
   
3. Use the new background colour setting to alter the background colour for the activity page.
4. Choose whether to display the Webducate logo on the introduction panel or not using the show logo in intro panel setting.
5. Use a simple new pop-up colour picker to define colours on the activity settings page. This colour picker appears when you select any hex colour text entry. Choose a colour by adjusting the vertical colour scale selector and dragging the circle cusor on the colour chart. When you have selected the correct colour, click on the select colour button in the bottom right of the colour-picker panel. (Thanks are due to Eyecon for developing and making this plugin available).
   
   
6. Preview activities before publishing using the new preview link on the activity publish page.
   
   

Plymouth e-Learning Conference 2009

Thank you to all those who attended my session at this recent conference. Below are my slides which contain a link to the demonstrations activities I showed during my presentation.

Dragster help movie - defining target areas with zoom and keyboard controls

The updated Dragster 3 target area definition facility provides several ways to improve the accuracy and time taken to author element feedback. This help movie provides an overview of the new functionality provided and gives some tips to improve your target area authoring. Included are the use of new keyboard controls (summarised below) and how to zoom in and out during the authoring process (View the defining target areas movie).

Keyboard controls:

Arrow keys - accurately move the last target area point for the live target area.
D - deletes the last target area point on the live target area.
R - resets the target area for the live target area.
W - toggle the cursor and area points from grey to white and back again.

Dragster 3 results by element feedback graph

An additional feature has been added to the View results by element page which provides a graphical overview of the feedback provided on recorded results for each draggable element. This graph displays the relative proportions of correct, close, miss and undefined feedback displayed in the recorded activity results (element feedback is considered undefined if the element has not been moved on to the dropzone image).

These graphs allow the viewer to quickly identify which activity elements are most often positioned correctly and incorrectly.  Clicking on the related View icon will then allow them to investigate the positioning of this element in more detail.

To see this in action view the Volcano activity results by element page.

Please Note - this feature was added on 16th April 2009 and only activities published after this date will display this facility.

Using SWFs as dropzone images in Dragster

One of the more advanced ways of building drag and drop activities with Dragster 3 is to use SWF files (flash movie files) as the drop zone image for your activity.

Why use SWF files?

There are two reasons you may wish to do this:

1. Avoiding distortion on scaling - When you are scaling your activity to fill the browser, the dropzone image can appear pixelated with JPG or GIF files. This is particularly a problem when the dropzone image includes text which can become distorted and difficult to read when scaled. Using a SWF file in these cases means that the dropzone image will scale without distortion (View the Gapminder World Chart activity - try right clicking and using Zoom In to observe how the use of a SWF dropzone retains clarity).
   
   
   
2. Animation and interactivity - Using a SWF as the dropzone allows enormous flexibility in adding interactivity and animation. For example using video in an activity dropzone as demonstrated in this running gait analysis activity.
   
   

How to create SWF files

Now the difficult bit.  Creating SWF files (flash movies) can be quite involved depending on the complexity of the interactions required and will require the use of particular software.  Here are a few tips based on my experience to date:

Without Flash software - When creating non-interactive SWF dropzone images I have made some use of Adobe Fireworks to draw the image and then used the Save as > Flash SWF option. However this approach is not perfect and you may find that fonts, colour gradients, drop shadows etc are lost in the conversion.

With Flash software - Adobe Flash is expensive and complex software but its use offers almost unlimited possibilities. I begin by creating a movie of dimensions 600 by 450 pixels and then draw directly onto the movie stage.  Keep each drawn element on a separate layer and convert elements that you wish to add dropshadow filters into movieclips.

Hopefully this post has demonstrated some of the possibilities offered by using SWF files as dropzone images in Dragster 3 activities. Unfortunately creating SWF files is not simple but hopefully I have shown it can be worth the effort!

Improved target area authoring

We have implemented an update to the target area authoring facility on the Dragster 3 system.  This offers several improvements over the previous version:

1. The position of the last point can now be accurately repositioned using the arrow keys on your keyboard. Click the mouse to place the point, then press the left, right, up and down arrow keys to move the point one pixel in the corresponding directions.
2. The X-Y positions of the cursor and the last point are displayed on the target authoring screen.
3. The point markers now also switch to white when you choose to use a white cursor.
4. Choosing to use a white cursor or target now switches all three options to white.
5. Selections for white cursor and display image / text box are now remembered by the system so you don't have to repeatedly reselect these as you author each target area.

Dragster 3 - Results histogram

A bar chart displaying the profile of recorded activity scores has been added to the results page for Dragster 3 activities.  Clicking on a bar in the chart will display only those activity results within the range represented by that bar. 

Try it and see!

With this feature you can now quickly assess how your students are doing and identify problem areas.

Embedding a Dragster activity in a CourseLab course

CourseLab is a powerful free e-learning content authoring package which uses a familiar authoring interface modeled on Powerpoint. Here are a set of instructions for integrating a Dragster drag and drop activity within a CourseLab course:

1. Author and publish your dragster activity.
2. Unzip the published dragster activity to view all the activity files.
3. Now go to your courselab course. On the slide use the menus to select Insert > Object  and expand the Media section and drag a Flash object on to the slide.
   
   
4. Resize this flash object to make it as large as possible.
5. Right click on the Flash object and select properties.
   
   
   
   
6. For the file option, select the dragndrop.swf file in your published Dragster activity.
7. Publish your completed Courselab course on to your PC.
8. You now need to copy some additional dragster activity files into your CourseLab course to make the dragster activity work. These files are dragndrop.xml and any image files within the published dragster activity folder. So select all these files and copy them (Ctrl-C).
   
   
   
9. Now unzip your published courselab course.
10. Open the unzipped course folder paste the dragster activity files into the folder called 1 (you should see a file called start.html within this folder).
    
    
    
    
11. Now test the course by opening start.html inside the folder called 1.
12. Re-zip the course for upload in your VLE.

Any problems encountered are most likely to be due to copying the extra dragster files into the incorrect folder in the published CourseLab course.
(Note - the dragster activity will not work when using the View module preview in rthe CourseLab authoring system unless you also copy these extra dragster activity files into the folder called 1 inside the folder used to save the course during its development)

There is an alternative simpler integration method that uses Insert > Object > External and the Iframe option. This requires that the dragster activity already be available on the Internet and also that it scales with the browser size (a setting only available in Dragster 3). This approach doesn't require you to copy the extra activity files as the working dragster activity is being imported "live" from the web using the iframe rather than running inside the courselab course.

View an example created using these 2 approaches

Note - CourseLab itself incorporates drag and drop functionality which allows simple drag and drop activities to be authored within courses without using Dragster. However in Webducate's opinion creating an activity as rich as an average Dragster drag and drop activity within CourseLab would be extremely difficult  if not impossible (but feel free to give it a go!).

PhysioUK - online course management system

Its been a long painstaking development process but just before Christmas 2008 Webducate completed the new PhysioUK website. This represents probably the most sophisticated web based face-to-face course management system around and includes a whole host of features including:

• Full course search facilities
• Integrated online payment system
• Automated course enrolment and pre-course confirmation emails
• PDF course documentation generated dynamically from data base of course details
• Waiting list enrolment automatically provided when courses are full
• Automated traceable PDF course completion certificates
• PDF registers generated for checking attendence
• Comprehensive web based admin system behind the scenes
• Participant accounts providing personal enrolment details, certificates downloads, receipts etc via a login
• and much, much more...

With this new site PhysioUK intend to spend less time managing their courses and more time developing new innovative services for their clients.
For Webducate this website has been the most ambitious and demanding project yet and we are looking forward to developing even more features for PhysioUK in the future!

Previous to working with Webducate our experience of getting our new website written had been painful to say the least. However, fortunately for us, we started working with them and the website developed quickly into something that was far better than we initially imagined. They have been both highly professional, and more importantly adaptable, in both the development and implementation of the website. I can't thank Tony (and his team) enough for giving us a site wihich has streamlined our business to a new and far improved level.
Chris Murphy - PhysioUK

Using Dragster with the eXe eLearning XHTML editor

eXe the free eLearning XHTML editor is an increasingly popular tool for authoring e-learning content and it is very easy to embed Dragster activities into eXe resources. This is how you do it:

1. Publish and unzip your Dragster activity on your PC.
2. Open the eXe editor and at the appropriate point in your content, select the Flash with text iDevice.
3. Using the Select Flash Object button browse to your unzipped dragster activity folder and select the file called dragndrop.swf.
4. 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).
5. Export your finished eXe resource (e.g. File > Export > Web site > Self-contained folder).
6. Once you have exported the eXe resource, you need to copy all the Dragster activity files EXCEPT the activity index.html file 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.
8. If necessary re-zip the eXe resources including the additional Dragster activity files for upload into a VLE.

View an example eXe resource with an embedded Dragster activity.

Trouble shooting:

If you have any problems with the activity displaying within the eXe resource it is probably because you haven't copied the necessary Dragster activity files into the folder with the other exported eXe files.