How to create a YouTube based Dragster 3 activity

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)

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.