There are a few things you need to take into account before commencing this.
Firstly, you need your LimeSurvey to be configured to allow javascript in the question codes. This is done by modifying a config.php file setting. Add the line "$filterxsshtml = false;" to your config file.
Secondly, displaying videos in web pages is fraught with compatibility issues, so you need to have a good hard think about the methods you use, the video formats you use, and the browsers and platforms your users are likely to use.
I want to start off with a fairly restrictive method; displaying WMV files (WMV files are the native format for Windows Media Player).
In this case, you start by naming your media files in a methodical manner, using the same name, but with a consecutive number at the end of the file name. Let’s say you have three files, we’ll name them “video1.wmv”, “video2.wmv” and “video3.wmv”.
Because the default setup for LimeSurvey doesn’t allow this file type to be uploaded, we need to save these files on our webserver using ftp.
Upload them and remember their location. In my case, I’m uploading them to my “/videos/” directory directly under the webserver root.
Now for the fun part. We want to have a question in our survey display (and play) one of these three videos randomly, and to record which video was played as the answer to a question.
We start by creating a new question.
In the Edit Question section, give the question a code, and make it a “Short Text” question type.
Then click on the “LimeFitWin” button (very left hand side of the question toolbar) to edit the question in full screen. Enter any text you want to have displaying in the question, and then click on “Source”, so we can directly edit the HTML source of the question.
At the position you want the videos, type in the following HTML code:
<span id="embedme" />
This span will be used later to replace with the HTML used to display a video.
Click ‘Source’ again to return to WYSIWYG mode, and then click the “LimeFitWin” button again to return to the normal question edit view.
Now, in the “Help” section, follow the same steps to get to the source code view, and enter:
<script type='text/javascript'>
<!--
var browserName=navigator.appName;
var randomnumber=Math.floor(Math.random()*3)+1;
var showme='video'+randomnumber+'.wmv';
var location='/videos/';
var fieldname='answer74223X13X124';
if(browserName == "Microsoft Internet Explorer") {
document.getElementById('embedme').innerHTML='<object width="320" height="280" id="MediaPlayer1" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject"><param id="objectsrc" name="FileName" value="'+location+showme+'" /><param name="ShowControls" value="true" /><param name="ShowStatusBar" value="false" /><param name="ShowDisplay" value="false" /><param id="objectautostart" name="autostart" value="true" /></object>';
} else {
document.getElementById('embedme').innerHTML='<embed width="320" height="280" id="mediaplayerembed" type="application/x-mplayer2" src="'+location+showme+'" name="MediaPlayer" showcontrols="1" showstatusbar="0" showdisplay="0" autostart="1"></embed>';
}
if(document.getElementById('answerFIELDNAME') != null) {
document.getElementById('answerFIELDNAME').value=showme;
} else {
document.getElementById(fieldname).value=showme;
document.getElementById(fieldname).style.display='none';
}
//-->
</script>
This script will choose a random number out of 3, then using that number select either “video1.wmv”, “video2.wmv” or “video3.wmv” and display that in the span we created earlier.
It will load the video and automatically start playing it, and also write the name of the video into the answer for this question.
You will need to make some modifications to the script, at the top where the variables are set.
With the line:
var randomnumber=Math.floor(Math.random()*3)+1;
Change the number 3 to whatever number of videos you are displaying.
With the line:
var showme='video'+randomnumber+'.wmv';
Change ‘video’ and ‘wmv’ to whatever the standard parts of your video filename is.
With the line:
var location='/videos/';
Change this to the web location of your files.
With the line:
var fieldname='answer74223X13X124';
change this to the SGQA code for your question. The simple way to do this is to look at the URL bar of your web browser while editing the question. It will look something like this:
admin.php?action=editquestion&sid=74223&gid=13&qid=124
In this case the value for sid is 74223, gid is 13 and qid is 124. This translates to a code of answer74223X13X124. If your URL said:
admin.php?action=editquestion&sid=55253&gid=99&qid=356
then your code would be “answer55253X99X356”.
Having made all these changes to the help section of your question, return to the normal view (click “Source”, the “LimeFitWin”) and save your new question.
When you preview the question (if all has been done correctly) you will see one of your videos randomly. If you refresh the preview it will randomly choose another. Note that random does not guarantee that consecutive loads will display a different video. You may get 2 or 3 or 4 of the same one in a row. Over a reasonable sample size, however, you should get a fairly even distribution.