Preventing Respondents Skipping the Video Question

The Javascript within this document should be used in combination with Voxpopme's IFrame capture setup.

As an embedded question, users may be able to skip past recording a video response. We recommend adding a snippet of Javascript code that disables the ‘Next’ button in the survey until the user has successfully uploaded a response.

Below is the javascript, you will need to replace the disable and enable next button with the appropriate code for the survey platform you are using.

Please bear in mind when you are implementing the Javascript snippet that the 'Next' button will be only be enabled if the event 'response_complete' is triggered. Therefore we suggest implementing a checkbox button below the video capture widget with the message 'I'm having technical difficulty or would no longer like to record', and adding the logic that if the respondent selects this button then the 'Next' button will activate. 

Alternatively, you can add the following events which will allow for a smoother flow for the respondent if they have a technical error. This will allow them to carry on with the survey, however it may skew your reporting of video completes

• "serverDisconnected"
• "publishFailed"
• "noCamera"
• "noMic"

 //DISABLE THE NEXT BUTTON WITH THE APPROPRIATE FUNCTION FROM YOUR SURVEY SYSTEM
disableNextButton();

//this code is used to listen for events from the iframe
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";

var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window (iframe)
var onlyStrings = false;

try {
    window.postMessage({toString: function () {
       onlyStrings = true;
    }}, "*");
} catch (e) {
}

eventer(messageEvent, function (e) {
    if (e.data) {
        var eventData = {};
        if (typeof e.data === 'string' && onlyStrings) {
            eventData = JSON.parse(e.data);
        }
        else {
            eventData = e.data
        }
        var showNextButton = [
            "response_complete"
        ];
        var currentEvent = showNextButton.indexOf(eventData.event);
        if (currentEvent >= 0) {
            //ENABLE THE NEXT BUTTON WITH THE APPROPRIATE FUNCTION FROM YOUR SURVEY SYSTEM
            enableNextButton();
        }
    }
}, false);