How do I hide the progress bar and nav buttons until a video finishes?

Question

I'm using SSI Web 8 to create a survey. I'm displaying a video on a question and want to hide the progress bar as well as the previous and next buttons until the video finishes playing. I've seen some information on how kind-of do this in versions 6 and 7, but they only work on the next button. Any suggestions?

Comments

Not really an answer to your question, so I'll just pose this as a comment.  You could always time how long they were on the page, and if the time was less than the video, show a text/filler that says "We know you didn't watch the video, please go back and view it again."    SSI Web version 7 and 8 have a PageTime() function you can use to record the time between a start page and end page.

Answer 1

There are a number of ways to do this with JavaScript. But I'm going to give you a solution that uses the new jQuery functionality in version 8. More specifically, I'm going to use the jQuery delay and fadeIn functions to manipulate the two HTML div tags that contain the progress bar and the previous and next buttons.

The code snippet below executes when the document is ready (when everything has been loaded onto the page). It then hides the div with the class name of "submit_div" and the div with the class name of "progress_bar" until the delay has been fulfilled. Then, as a bonus, I'm telling it to fade in the divs as a special effect. The value of the delay is 5000 or five seconds. The value of the fadeIn is 1000 or one second.

<script type="text/javascript">
    $(document).ready(function(){
      $("div.submit_div").slideUp(00).delay(5000).fadeIn(1000);
      $("div.progress_bar").slideUp(00).delay(5000).fadeIn(1000);  
    });
</script>

Place this code into any of the Question Text boxes (Header 1, Header 2, Body, Footer) wherever you want it to work its magic. Of course you'll want to edit the delay to correspond with the length of your video. Just keep in mind that JavaScript uses milliseconds, so 1 second = 1000.

Comments

Thanks for posting this solution! If anyone is doing a block of randomized videos you can also add a piped in numeric value based on the length of the video like this:

<script type="text/javascript">
    $(document).ready(function(){
      $("div.submit_div").slideUp(00).delay([%ListLabel(timepipe1, 1)%]).fadeIn(1000);
      $("div.progress_bar").slideUp(00).delay([%ListLabeltimepipe1, 1)%]).fadeIn(1000);  
    });
</script>

---

This is fantastic! Thanks so much! I had to change it a little to get rid of the next button, but great snippet of code. I changed div.submit_div to div#submit_button