Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Disable next button until respondent has completed video response

We are conducting a survey where respondents are asked to answer an open-ended question with a video response. A third-party vendor provided a widget for video capture, which I've embedded in the survey, but they also suggest adding some script to disable the next button until respondents have actually completed the video. They have provided some script, but I'm not sure exactly how to customize it for my needs. See the script below.  Apologies that I have very little experience with this kind of thing. Thanks so much.

 //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);
asked Oct 27, 2016 by anonymous
If I'm understanding correctly, the widget will handle determining whether or not the respondent has finished the task all on its own.  All you should have to do is add code that hides / shows the next button.  To do this, replace "disableNextButton();" with this:
$('#next_button').hide();

and replace "enableNextButton();" with this:
$('#next_button').show();


Do these changes work?
I'm very inexperienced, so maybe I'm not replacing things correctly, but I was still able to click the next button without completing a video when testing the survey. Here is what I had in the html <head> tag:


<script type="text/javascript">
$('#next_button').hide();

/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
$('#next_button').show();
</script>

I don't have a good understanding of what the widget does or does not do in terms of determining if a task has been finished. All I was really given was the code above. In any case, I very much appreciate the help!
That's close.  I believe you accidentally removed some important characters from the code.  First, there's this line in your code:

/this code is used to listen for events from the iframe


It should start with two slashes instead of one, like in the code you posted in the original question.  Second, you cut off some code from the end.  Notice this bit from the end of your original post:

        }
    }
}, false);


This still needs to exist in the code, between ".show();" and the closing "</script>".

Finally, the HTML head tag may not be the best place for this code.  I'd probably put this in one of the question text fields, like Header 1.

1 Answer

0 votes
This is some javascript I've used to do this exact thing.  I usually put this script in my head to disable the next button when the page loads:
<script type="text/javascript">
function disableNext ( )
{
  document.mainform.sys_next_button.disabled = true;
}
window.onload = disableNext;
</script>

In the body of the question use this with your video link:

<a href="VIDEO LINK HERE" target="_blank" id="link1">LINK TEXT TO SHOW</a>

<div id="videotext" style="display:none;"><p>Now please click on 'Next' to continue.</p> </div>


Then I put this script in the footer to enable the Next button when a certain amount of time has expired (I calculate this based on the length of the video and this example is for 30,000 milliseconds or 30 seconds)

<script type="text/javascript">
var link = document.getElementById("link1");
link.onclick = function enableNextButton ()
{
      $("div.submit_div").slideUp(00).delay(30000).fadeIn(1000);
      document.mainform.sys_next_button.disabled = false;
      $("#videotext").hide(0).delay(30000).show(0);
}
</script>
answered Oct 27, 2016 by Jay Rutherford Gold (26,800 points)
Thanks for the quick response! In this case, respondent aren't watching a video, they are being asked to make a video of themselves answering a question. They aren't required to make the video a certain length of time, so I was hoping to adapt the code I was given to enable the next button after the "event" of them completing a response. If I can't figure that out, I think your solution of delaying for a certain amount of time will be the next best thing.
Sorry for the misunderstanding.  Zach may be able to chime in with some better script for your exact situation, but perhaps the solution I provided gives you something to work with or may be useful to you in the future.
Auto-submit Next button with v9.4.0
...