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.
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:
- 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).
- 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 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:
- <b>bold</b>
- <i> italic</i>
- <sup>superscript</sup>
- <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.
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).
LT@Leeds podcast
Check out the LT@Leeds podcast for an entertaining and informative insight into the use of learning technologies produced by the team at the University of Leeds. I’m obviously excited by the topic of episode 6, but I’m sure this podcast will cover many other interesting topics too!
How to create a video based Dragster activity using an FLV file
In the previous blog post instructions were provided on how to create dragster activities that used a youtube video as the dropzone. In this post a similar set of instructions and files are provided that demonstrate how to create a video based Dragster 3 drag and drop activity where you have the original video file available and can convert it into an FLV file.
Below is an example activity created using the approach described here:
1. Create your video file
A useful overview of creating digital video is provided by mediacollege.com
To make the most of the dropzone area of a dragster 3 activity you
should try to encode your video with dimensions of 600 by 450 pixels.
Other video sizes will work but these will be resized
within the activity dropzone. The activity will take place on the paused last frame of the video and so it should be edited with this in mind.
2. Publish/Convert your video file into FLV format
In order to display a video within a Dragster 3 activity it needs to be encoded in the flash compatible FLV video format. There are a variety of tools available for publishing into FLV format or converting from alternative formats (e.g. Adobe Flash, On2 Flix, Sorenson Squeeze, Riva FLV encoder).
Save this video file as video.flv
3. Download the FLV video dragster files
I have provided a set of 4 files to aid your creation of these video Dragster 3 activities.
Download a zip file containing these files
You will need to save these on to your PC and extract them (left click on the downloaded zip file and select Extract all…)
Now copy the video file (video.flv) into this extracted folder overwriting the example video file with the same name already in this folder.
4. Create a dropzone image of the paused video
Within this downloaded folder is a file called video.html Open this file in your web browser to view your video as it will be displayed within the Dragster activity. Play the video until it reaches the end frame and pauses. At this point you need to create a jpg image file to use as the dropzone image in your activity authoring.
As mentioned in the previous post, I have used two alternative methods to do this:
1. use screen capture software such as TechSmith SnagIt
2. press the PrtScrn button on your keyboard then open image editing software such as Photoshop or Fireworks and use Paste to place a copy of your entire screen into the working area. Then crop this image.
Ultimately you need to create a jpg image which is 600 by 450 pixels in size which just includes the flash file displaying your video. This means the edges of this image should be where the green background meets the edges of the video. Save this image as video.jpg
5. Author and publish the Dragster 3 activity
You should now login to your myWebducate account and author the activity in the usual way using the jpg image created in step 4 as the dropzone. When you are happy with this activity publish it and extract the published files in the usual way.
6. Copy the video related files into the activity folder
Copy your video files into the extracted activity folder (i.e. copy the files: video.flv, video.swf, SteelOverNoVol.swf, video.html into the activity folder).
7. Edit the Dragster 3 activity dragndrop.xml file
Nearly done now… Open the published activity dragndrop.xml file in a text editor such as Notepad and edit the line <target targetImage=”video.jpg“
/> replacing video.jpg with video.swf. Save the amended dragndrop.xml file.
8. Test the activity
You can now test this activity by opening the index.html file within the activity folder with your web browser.
Have fun using these two approaches to embed video in your activities. If/when you develop an activity you are proud of and are happy to share please do let me know!
