Embedding Flash Video Response Questions Inside WebCT

From CTLpedia

This article assumes the following: 1. You know how to encode video to the .flv (Flash) format 2. You understand how to access the Assessments feature of WebCT

How to hand-bake video flash questions into a WebCT Quiz

1. Make sure you have a folder inside your course files area containing the contents from Jeoren Wijering’s FLV Flash player (downloadable from http://www.jeroenwijering.com/?item=JW_FLV_Player) and create a folder specifically for flash video content. This example will use a folder called ’flash_videos’
   
2. Inside the zip file downloaded above, you should have two files of interest if you are only interested in getting flash video content to appear inside a quiz. (if you are doing anything else such as embedding it on a page of your course content, there are other steps involved). The only two files we want out of the above zip package are called:
   • flvplayer.swf
   • swfobject.js
3. When the above is unzipped and unpackaged inside the video folder inside your course it should look like so:
   
   

   
4. Upload any video files in .flv format to this folder for ease of use in following these instructions. (If you want to structure your content so that the flv video files are elsewhere inside your file manager, you will need to slightly alter the paths used to point to them in the next steps).
5. In this example, we’ve used a video file called ’q1fsclip1.flv’. Once uploaded it should look like so:
   
   

   
6. Since WebCT uses a special type of file storage on its backend, when building content in other areas of the course that accept HTML content, such as the discussions area, announcements, and quiz questions, you have to hand-code the HTML so that it uses WebCT’s HREF file reference system. (Note: you can view this file reference for any file in the file manager by clicking on the action menu and choosing View File HREF. This will make sense in the next step:)
   
   
   

   

   
   

7. Clicking this box will give you a popup window with the code needed to properly reference the file. It has the format of /webct/RelativeRsourceManager/Template/<folder_or_path>/<file> where <folder_or_path> is the folder or path in your file manager containing the file you wish to reference and <file> is the actual file you wish to reference. For example completing the above actions would give you this following file reference:
   

   /webct/RelativeResourceManager/Template/flash_videos/flvplayer.swf
   

8. These last few steps are what it takes to actually get the file to appear in a quiz question. Using your favorite method of creating quiz questions (Respondus, import from another course, or by hand), get all questions ready except for the quiz question itself.
   
9. Create/Edit the question and be sure that you have the Use HTML box selected:
   
   
   

   

   
   

10. 
    In the Question text enter the following code:

    <script type="text/javascript"
    src="/webct/RelativeResourceManager/Template/flash_videos/swfobject.js">
    </script>
    
    <div id="player">This text will be replaced</div>
    
    <script type="text/javascript">
    var so = new SWFObject('/webct/RelativeResourceManager/Template/flash_videos/flvplayer.swf','mpl','320','240','7');
    so.addParam('allowfullscreen','true');
    so.addVariable('displayheight','240');
    so.addVariable('file','/webct/RelativeResourceManager/Template/flash_videos/q1fsclip1.flv');
    so.addVariable('height','240');
    so.addVariable('width','320');
    so.addVariable('autostart','false');
    so.write('player');
    </script>
    
    

    
    

11. It won’t look very readable at all inside the editing box, but you can type it up in notepad or other text editor first to be sure it matches the format above, and then copy and paste it inside:
    
    
    

    

    
    

12. In order to complete the question, you need to be certain of how you are using the quiz feature. If you wish to collect an immediate response to the video (such as impressions, a review, etc.,) you should be using a short answer or paragraph style answer. If you wish to ask a series of questions about the video, you will likely use a one-answer multiple choice question with a correct answer of (’Click here to continue’) so that the question isn’t counted towards their overall grade. In either case, click the preview button at the bottom of the form to see if everything worked:
    
    
    

    

    
    

13. If all is well, you should see a preview window with the video inside:
    
    
    

    

    
    

14. If you see this, then you are pretty much guaranteed that this is how it will look to students when they take a quiz/assessment with this question inside.

Important Notes:

• If you are creating more than one of these video response questions inside an assessment where more than one question is being displayed at a time in the assessment, you only need to include the following line once in first question you place first in order of the questions you include in your quiz/assessment:

<script type="text/javascript"
src=
"/webct/RelativeResourceManager/Template/flash_videos/swfobject.js">
</script>

• If you are creating more than one of these video response questions inside an assessment where more than one question is being displayed at a time in the assessment, you need to vary the following lines:

...
<div id="player2">This text will be replaced</div>
...
AND
...
so.write('player2');
...

(Be sure the id’s of the lines match up. For example above (’player2’ in the <div> tag matches ’player2’ in the lower part of the script code). Each video player must be unique otherwise the individual videos won’t show up. Use numbers appended to the value with no spaces or special characters.

If you don’t get these varied or set up properly, the videos won’t play or even show up properly next to their assigned question or order in the quiz. As stated above, this only applies if you are displaying more than one question at a time in the quiz. For an assessment using singly-displayed questions, you need to repeat the exact same steps for each video response question you wish in your assessment.