Video Analyzer

This article will show you how to setup a Video Analyzer exercise


Background

You can have a respondents analyze and rate videos. This exercise will allow a respondent to view a video and provide a rating for each second of the entire video. Using a slider question, each respondent can slider the bar to rate it while watching it. 

Click here to see an example

You will need to program 3 or 4 questions to accomplish this. Below are the instructions for each part. 


Part 1 - Adding the Slider

  1. Add a 'Slider' question type to the page you want the exercise 
  2. Add the code below to your '+ Javascript'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      widthHeight = '1em';
      topValue = '-0.5em';
      var sliderValue = 50;
      minValue = 0;
      maxValue = 100;
      percentageStep = (1 / (maxValue - minValue)) * 2;
      midPoint = minValue + ((maxValue - minValue) / 2);
      jQuery(".cm-slider").on("slide", function(event, ui)
      {
      	sliderValue = ui.value;
      	sliderSize = 1 + Math.abs(sliderValue-50)/25;
      	widthHeight = sliderSize + 'em';
      	topValue = (sliderSize/-2) + 'em';
        	jQuery(".ui-slider-handle").css({
      		'border-radius' : widthHeight,
      		'width' : widthHeight,
      		'height' : widthHeight,
      		'top' : topValue,
            	'margin-left' : topValue
      	});
      	redColor = 255;
      	greenColor = 255;
      	blueColor = 0;
      	if (ui.value < midPoint)
      	{
      		redColor = 255;
      		greenColor = Math.round((percentageStep * ui.value) * 255);
      	}
      	else if (ui.value > midPoint)
      	{
      		redColor = Math.round((2 - (percentageStep * ui.value)) * 255);
      		greenColor = 255;
      	}
      	else
      	{
      		redColor = 255;
      		greenColor = 255;
      	}
      	backColor = "rgb(" + redColor + "," + greenColor + "," + blueColor + ")";
      	jQuery(this).find(".ui-slider-handle").css("background", backColor);
      });
      		
  3. Add the code below to your '+ CSS'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      .cm-slider .ui-slider-handle {
      		background: yellow;
      	}
      	
      	.cm-slider:not(.ui-slider-disabled) .ui-slider-handle:hover {
      		background: yellow;
      	}
      
      .cm-slider-row__label-cell {
      	padding-left: 2em;
        	padding-right: 2em;
      }
      		
  4. In the 'Slider Value' add {{value}}
  5. In the first response option you are going to add the end points of your scale. 
    1. 'Left Response Label' - will be the lowest rating. Usually 'Extremely Dislike' and a negative image.
    2. 'Right Response Label' - will be the highest rating. Usually 'Extremely Like' and a positive image. 
  6. In the 'Overall Question Settings' update the following:
    1. See article: Overall Question Settings: Accessing
    2. 'Value Position' - Select 'Below' and 'Middle' from the drop-downs
    3. 'Hide on submit if valid' - Turn OFF this toggle so it will display when testing
  7. You will then want to add a logic block to the pages the Slider question is on and always setting it to 50 On load. This will be used to initialize the slider value to a neutral midpoint.  

Part 2 - Adding the Video

This will be where the video is programmed and will display for the respondent

  1. Add a 'Static Element' question on the same page and under the 'Slider' question from Part 1 
    1. See article: Standard Question: Static Elements
  2. Add the code below to the 'Source Code Editor' in the 'Static Element'
    1. See article: Source Code Editor
      <div align="center" id="videoContainer">
      	<div id="videoElement"> </div>
      </div>
      		
  3. Add the code below to your '+ JavaScript'. 
    1. See article: Adding JavaScript and/or CSS to a Question
    2. Update line 4 with the video url
    3. Update line 11 replacing 'VID1_3' with question number you want to store the 'Numeric' data. You will create this is Part 3. It will be the parsed out data per second. 
    4. Update line 12 replacing 'VID1_4' with the question number you want to store any additional data above and beyond Part 3. This will be contained in a string.  
      cmSurvey.hideNextButton(true); /* HIDE THE NEXT PAGE BUTTON */
      var playerInstance = jwplayer("videoElement");
      //jQuery(".cm-slider").slider('value', 50);
      playerInstance.setup({
        file: "https://cdn2.cmix.com/surveyContent/survey_1762/uploads/SoCalGas_Solar_B2C_TV_2016.mp4", /* UPDATE VIDEO URL */
        image: "https://cdn2.cmix.com/surveyContent/survey_2144/uploads/playButton.jpg",
        controls: false,
        autostart: false,
        pause: false
      });
      var $slider = jQuery(".cm-slider");
      var $recordFields = jQuery("#question-VID1_3 input[type='number']"); /* UPDATE NUMERIC QUESTION NUMBER */
      var $textQuestion = jQuery("#question-VID1_4 input[type='text']"); /* UPDATE TEXT QUESTION NUMBER */
      var resultsLimit = $recordFields.length;
      var recordedSecondValue = 0;
      playerInstance.onTime(function(event) {
        var currentTime = Math.floor(event.position);
        var sliderValue = $slider.slider("option", "value");
        //sliderValue = "[" + ("0000"+currentTime).slice(-4) + ":" +  ("000"+sliderValue).slice(-3) + "]";
        if (currentTime && (currentTime != recordedSecondValue)) {
          recordedSecondValue = currentTime;
          if (currentTime <= resultsLimit) {
            $recordFields.eq(currentTime - 1).val(sliderValue);
          } else {
            var $currentField = $textQuestion;
            $currentField.val($currentField.val() + + sliderValue + ";" );
          }
        }
      });
      var firstDisplayClick = true;
      playerInstance.on('displayClick', function() {
          if (firstDisplayClick) {
              playerInstance.play();
              firstDisplayClick = false;
              playerInstance.setControls(false);
          }
          //jQuery(".cm-slider").slider( "option", "disabled", false);
      });
      playerInstance.onPlaylistComplete(function() {
          cmSurvey.hideNextButton(false);
          jQuery("#cm-NextButton").click();
          //jQuery(".jw-icon-playback").css("visibility", "visible");
      });
      		
  4. Add the code below to your 'ADD CSS'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      .jw-text-duration,
      .jw-text-elapsed,
      .jw-controlbar-center-group {
      		visibility: hidden;
      	}
      		
  5. In the 'Overall Question Settings' update the following:
    1. See article: Overall Question Settings: Accessing
    2. 'Hide on submit if valid' - Turn OFF this toggle so it will display when testing
  6. Add the following code to the 'Source Code Editor' of the 'Survey Header' field in the 'Default Text' Card
    1. See article: Default Text: Accessing Default Text Menu
       
      <script src="https://cdn2.cmix.com/surveyContent/thirdparty/jwplayer7_4_3/jwplayer.js"></script>
      		

Part 3 - Storing the Values

This will be where you data will be stored for each second of the video as the respondent slides the bar

  1. Add a 'Numeric Field' question type to the same page
    1. See article: Standard Question: Numeric Fields
    2. Generate as many responses as you have seconds. This should bot exceed 900 (60secs X 15mins)
  2. In the 'Overall Question Settings' update the following:
    1. See article: Overall Question Settings: Accessing
    2. 'Hide on submit if valid' - Turn OFF this toggle so it will display when testing
  3. Add the code below to your '+ CSS'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      .cm-response-container, .cm-qtext{
          display: none;
      }
      		
  4. NOTE: You do not need to add any question text as this will not be seen by a respondent. It may add confusion while testing if question text appears.

Part 4 - Extra Values

This question does not need to be added unless you go over the maximum amount of responses needed in Part 3. It will be a text field that will hold the data in a string

  1. Add a 'Text Fields' question type on the same page as the other ones you created and at the bottom of the page. 
    1. See article: Standard Question: Text Fields
  2. In the 'Overall Question Settings' update the following:
    1. See article: Overall Question Settings: Accessing
    2. 'Skip Logic' - Add 'TEST = "N"' in order to skip this question for live respondents
    3. 'Hide on submit if valid' - Turn OFF this toggle so it will display when testing
  3. NOTE: You do not need to add any question text as this will not be seen by a respondent. It may add confusion while testing if question text appears.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us