Skip to main content

Kinesis Support

All the topics, resources needed for Kinesis.

 

FocusVision Knowledge Base

Multimedia Examples

This example page is still in development and may be outdated. Please contact our Technical Support team for immediate help with this topic.

1:  Uploading Files 

 
HTML editor file upload dialogue box.

1.1:  File Manager

All survey-specific files should be uploaded using the File Manager since they are stored in folders according to the survey id. Multiple files can be selected for upload.


Relative Location:

files/SURVEYID/file.extension

Sample URL:

http://web5.kinesissurvey.com/sample/files/22/brandA.jpg

1.2:  Theme Manager

All theme-related files should be uploaded using the Theme Manager since they are stored in folders according to the theme name. Just like the File Manager, mulitple files can be selected for upload. The theme's file uploader can be accessed from the Manage Files icon 

Relative Location:

theme/THEME_NAME/file.extension

Sample URL:

http://web5.kinesissurvey.com/sample/theme/Default/banner.gif

1.3:  HTML editor (WYSIWYG)

Files can also be uploaded using the built-in features of the HTML editor when editing a page. When uploading files from the HTML editor in the Theme Manager, the files get stored in that theme folder. All other times they will be uploaded to the files folder as if they were uploaded from the File Manager. The HTML editor can only upload one file at a time while the File Manager and Theme Manager can upload multiple files as once.

See the instructions below for using the HTML editor for different file types.

2:  Images

When working with images for the web it is always best to keep file size to a minimum in order to keep page load times down. Most browsers cannot support images over 72 dpi (dots per inch), so it's often useful to scale high resolution images down. Many file types are supported but JPEG, GIF, and PNG are the most commonly used.

2.1:  Image Size Recommendations

Respondents will access your study with a variety of display resolutions. The most popular resolution as of January 2013 is 1366 x 768. Here are some recommendations for image sizes that work across all resolutions:

 
Size Suggested Image Width
 
Very Large 800px
 
Large 520px, 500px
 
Medium 460px, 420px, 320px
 
Small 240px, 180px
 
Thumbnail 100px, 75px

2.2:  HTML editor (WYSIWYG): insert image

 
HTML editor insert image dialogue box.

The insert/edit image icon  is located at the far right of the HTML editor toolbar. In the insert/edit image dialogue box you must first specify the image URL. If the image is already uploaded via the File Manager then you can use the relative location - "files/SURVEYID/file.ext" You can also browse/upload images from the icon located on the right side of the Image URL text field.

The browse tab will show all available image files already uploaded. The upload tab will allow you to upload one image file at a time. The Edit tab lets you view more details about the images or delete files.

Once the image is selected you can modify the image from the appearance tab such as Alignment, Dimensions, or CSS styles. Additional options can be found under the advanced tab. Selecting insert will add the image to your page. You can edit any images inserted by selecting them and choosing the insert/edit image icon from the toolbar.

Images can also be inserted with standard html while viewing in  mode.

2.3:  Adding Image to Question Text/Choices

 
Adding image to question choice from basic properties.

Images can be inserted into the question text or choice text by using standard html syntax.

<img src="files/SURVEYID/image.jpg" alt="File Name" height=100 width=100>


The src (source) is the file location. Alt refers to text that will display if users can not view images. Height and Width refer to the pixel dimensions of the file and are necessary for some browsers to determine page formatting.

Some questions such as Radio, Checkbox and Pulldown allow for images to be placed with anwser choices without using html code. If an image has been uploaded from the File Manager it will be available from the Image option pulldown in the basic question properties.

2.4:  Using ViewProtect®

 
ViewProtect® example with identifier watermark.

ViewProtect® was designed to help protect the safety of sensitive images and concepts as presented in surveys. We do this by providing a watermarked image of a respondent's personal identifier within the image presented. The watermark is designed to be very difficult to remove with third party software. Should a respondent share or leak images, they can be easily identified.

Please note that ViewProtect® may be used in conjunction with the ability to disable the browser's right-click context menu, but due to plug-ins and security settings, not all browsers can reliably block this capability. In addition, screen capturing can bypass any browser-based security precaution. As a result, there is always potential risk of a respondent saving and sharing images, and clients are encouraged to specify all non-disclosure information and enforce a legal 'opt-in' at the start of their survey.

First, ViewProtect® must be enabled from the ViewProtect® tab under Survey Properties. Once enabled, you can modify the watermark, which will be added to your image as an overlay.

All images intended for ViewProtect® use must be uploaded from the File Manager with "View Protect PNG files" checked in the upload dialogue box. You will see a ViewProtect® ID next to the image name. To place this image within your survey, simply pipe using the syntax ~VP#~, with the # referencing the assigned ViewProtect® ID.

3:  Video and Audio

Supported video and audio file types are Flash, Quicktime, Shockwave, Windows Media, and Real Media. Because media files require additional plugins to be played you can never guarantee that all respondents can view a particular file.

 
HTML editor insert media dialogue box.
 
Media Type Common Extensions
 
Flash .swf, .f4v, .flv
 
Quicktime .avi, .midi, .mov, .mpeg, .mp3, .wav
 
Shockwave .dcr
 
Windows Media .avi, .midi, .mpeg, .mp3, .wav, .wma, .wmv
 
Real Media .mp3, .ra, .rm, .rv

3.1:  HTML editor (WYSIWYG): insert media

The insert/edit embedded media icon  can be found from the main tool bar in the HTML editor.

A file type must first be selected from the pulldown. Then you must specify the file URL. If the video or audio file is already uploaded via the File Manager then you can use the relative location - "files/SURVEYID/file.ext" You can also browse/upload videos from the icon located on the right side of the file URL text field.

The browse tab will show all available files already uploaded. The upload tab will allow you to upload one file at a time. The Edit tab lets you view more details or delete files.

Once the media file is selected you can modify the it from the advanced tab. The available advanced options depends on the file type selected but typically allows for changes to be made to player functions such as looping or volume.

3.2:  Adding Video and Audio Manually

Video and audio can be emedded manually into the html when viewing in  mode by using the following javascript code.

NOTE: These only include basic parameters such as dimensions. Use the HTML editor to modify properties. These are only one way to include the following types and other html tags such as <object> or <embed> may work as well.

3.2.1:  Flash

<script type="text/javascript">writeFlash({"src":"files/SURVEYID/SWF_video.swf","width":"100","height":"100"});</script>

3.2.2:  Quicktime

<script type="text/javascript">writeQuickTime({"src":"files/SURVEYID/MOV_video.mov","width":"100","height":"100"});</script>

3.2.3:  Shockwave

<script type="text/javascript">writeShockWave({"sound":true,"progress":true,"autostart":true,"swliveconnect":"false","swstretchstyle":
"none","swstretchhalign":"none","swstretchvalign":"none","src":"files/SURVEYID/SB_shockwave.dcr","width":"100","height":"100"})
;</script>

3.2.4:  Windows Media

<script type="text/javascript">writeWindowsMedia({"src":"files/SURVEYID/WMV_video.wmv","width":"250","height":"250"});</script>

3.2.5:  RealMedia

<script type="text/javascript">writeRealMedia({"src":"files/SURVEYID/RM_video.rm","width":"250","height":"250"});</script>

4:  Video Compatibility

Embedding video within a survey can be easily done by using the built-in HTML editor feature "Insert /edit embedded media" and uploading any common web format video file. You could also rely upon external video host providers such as Youtube or Vimeo.

However, if hosting the video in Kinesis, the question often remains - What format should my video file be in?

Many arguments can be made for exclusively using a single format over the others but it is always going to be a possibility that a respondent might not have a certain video plugin installed on their machine or device. The following method will seamlessly fallback to using the most compatible method available and only requires the video to be encoded in 2 formats - OGG and MP4 (H.264).

View Demo

Important: This guide covers the basic steps for converting a video file into the proper encoded formats. The quality and size of the videos is dependent on the original file quality and the specific encoding settings used. You may need to adjust the encoding settings to get the desired output. Though Kinesis suggests easily-accessible open source programs for video encoding, there are many commercial programs available.

4.1:  Further Documentation

The methods and applications discussed in this guide are based on the documentation found here:

The html code used to embed the video within a survey is based on the examples found here:

4.2:  Using Youtube

If you do not wish to host the videos within Kinesis or worry about formats and custom code, you could instead use Youtube. Youtube provides easy to follow file upload tools and will provide all the necessary embed code. This method comes as an added plus to Kinesis, because it uses Youtube's available bandwidth and not ours and will have no impact on the server for large traffic surveys. Also, most smartphones and tablets have Youtube apps installed by default, meaning your video remains compatible across multiple device types.

4.3:  Converting Video for Web Streaming

You can use the instructions found at the link below to convert video files into MP4 (H.264), OGG, and WebM file types.

4.4:  Embedding Files Into a Survey

A video can be inserted anywhere HTML is accepted in a survey, such as an Extra Text question. The following code provides several methods of seamless fallback. It will first check whether the HTML5 <video> tag is accepted by the respondents browser and use the corresponding video file source. For IE or older browsers it then checks for the Quicktime plugin. If Quicktime is not found or disabled it then tries to use Flash. If none of these methods work, it will present an image and download links, however it should be relatively rare for respondents to have browsers incompatible with any of the previous methods.

You can use the online form found at the link below to generate the embed code needed:

Otherwise, you can refer to the examples found at the link below for writing your own custom embed code:

  • Was this article helpful?