Today the new Webducate website and blog went live (View the new website).
This new website includes many improvements including an integrated blog. This means that the blog at this URL will no longer be added to. To stay up to date with developments at Webducate please replace your bookmarks and subscriptions with the new blog location. Thanks!
View the new blog...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).
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!
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!
In the blog post titled Youtube videos in Dragster activities - demo, an activity was demonstrated (youtube heart mri activity) that used a youtube video as the dropzone for the activity (see screenshot below).
This approach opens up enormous possibilities for activities based on interpreting moving rather than static images. The instructions below describe how to go about creating such an activity:
1. Get the youtube video id code
Identify the youtube video on which you wish to base your activity and make a note of the youtube video id code. This is the code in the youtube web address after the ?v= (for example for the youtube video viewed at the web address of http://www.youtube.com/watch?v=UDqvg26jK9s the id code you need to note is UDqvg26jK9s).
2. Identify the video pause time
Watch this video and pause it at the appropriate moment for the drag and drop activity to take place. Make a note of the time displayed in the youtube player bar (in the example screen shot below this time is 42 seconds).
3. Download the youtube dragster files
I have provided a set of 3 files to aid your creation of youtube based 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...)
4. Edit the youtube.xml file
Open the youtube.xml file in a text editor such as Notepad (right click on the file and select Open with > Notepad) This is a very simple file in which you will need to edit only two sections.
Replace the UDqvg26jK9s with you youtube video id code identified in step 1 (i.e. change id="UDqvg26jK9s" to id="your youtube id code").
Replace the 42 with your video pause time in seconds (i.e. change pause="42" to pause="your video pause time in seconds")
Save the amended youtube.xml file.
NB there are two other settings in yourtube.xml which set the video volume (values 0-100) and a background colour (a hex code prefixed by 0x), you should be able to work out how to amend these if necessary)
5. Create a dropzone image of the paused video
Now the tricky bit... Within this downloaded folder is a file called youtube.html If you open this file with your browser it will attempt to display a flash movie that contains the youtube video. However because you are opening this file on your PC, a security message will be displayed and the video will not appear. The easiest way to get around this problem is to upload this folder of three files on to a webserver (e.g. by FTP) and then open the youtube.html file. This should then display the youtube video which can be played and will pause at the appropriate time. The alternative is to amend your flash player security settings as instructed by the pop-up security message, but this approach is not recommended.
When you are viewing youtube.html with the video paused at the appropriate moment, you need to create a jpg image file of this to use as the dropzone image in your activity authoring. I said this bit was a bit tricky!
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.
Ultimately you need to create a jpg image which is 600 by 450 pixels in size which just includes the flash file displaying your youtube video. This means the edges of this image should be where the green background meets the faded background of the flash file. Save this image as youtube.jpg
6. 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 5 as the dropzone. When you are happy with this activity publish it and extract the published files in the usual way.
7. Copy the youtube related files into the activity folder
Copy your edited youtube files into the extracted activity folder (i.e. copy your amended youtube.xml file, and the youtube.swf and youtube.html files into the the activity folder).
8. 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="youtube.jpg" /> replacing youtube.jpg with youtube.swf. Save the amended dragndrop.xml file.
9. Publish the activity on to a webserver
Now if you view this activity by opening the related index.html file, you will encounter the same security message mentioned in step 5. So to test this activity you will need to publish it onto a webserver and then navigate to the activity index.html file.
That's it. I hope you can work your way through this process and create some exciting video based activities using youtube. Soon I will publish files and instructions for creating activities based on video files encoded in FLV format. Watch this space! (view this blog post on creating activities based on flv video files)
In recent weeks a number of improvements have been made to the Dragster 3 authoring system. You can now:
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.
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.
