HTML + Time

September 27, 2006 2:23 PM

I would like a "Next" button to be invisible for a set duration of time. So far, my endevors have proved unsuccessful.

I've tried just about everything that W3 recommends, in particular the simple examples. No luck. Any HTML or CSS ideas that you can point me to/explain?

As to the purpose of this timefoolery. I am programming a web survey that has embedded video content on one question. It is essential that the respondents watch the video. I would like the "Next" button (which is of the most basic makeup) to be invisible for the duration of the video so that the respondent doesn't click "Next" before watching the video.

Thank you kindly.

posted by panoptican to computers & internet (15 comments total)

Set a timer (setInterval, I think) to trigger a Javascript function which goes through the DOM and changes the CSS value of your next button, which was once "display: none;" to "display: inline;".

What will your users without Javascript do?
posted by adipocere at 2:28 PM on September 27, 2006

put your next button in an IDed tag with style="display:none;"

write a javascript function inline to the html to make the display:block after x amount of time

<div id ='next_button' style=display:none;'>here's where your next button goes</div>

<script>
function showNextButton() {
document.getElementById('next_button').style.display = block;
}
window.onload = setTimeout(showNextButton, 3600);
</script>

I didn't test this, but that's the idea. Start a timer when the page loads for x milliseconds, at which point fire the showNextButton() function which unhides the next_button div
posted by mcstayinskool at 2:29 PM on September 27, 2006

I'm more of a fan of disabling control elements as opposed to making them invisible. It lets the user know that they will be able to do something, just not right now.

<script>



  function enable_button() {

    var button = document.getElementById('next_button');

    button.disabled = false;

  }



  document.onload = setTimeout('enable_button()', 4000); //4 seconds



</script>



<input type='button' id='next_button' disabled='true' value='Next'>

posted by turaho at 2:29 PM on September 27, 2006

setTimeout(). Wait, didn't we do this one before, and agree there's no simple way to do it because video download times vary?
posted by orthogonality at 2:29 PM on September 27, 2006

How about instead putting a code at the end of the video and requiring the user to input that code to go on to the next screen? Won't handle all the cases, but nothing will. In general it's not nice to the user to have UI elements appear and disappear.
posted by ldenneau at 2:31 PM on September 27, 2006

orthogonality is right-- if you want to do this and have it work flawlessly, this is not the approach.

fwiw, i've taken an online sexual harrassment course that did this. they did it with flash. that's probably not what you want to hear though...
posted by mcstayinskool at 2:34 PM on September 27, 2006

If you happen to be embedding the video in flash (like Youtube does), then it's quite easy to make the flash movie call some javascript on the page when the movie has finished playing.
posted by matthewr at 2:34 PM on September 27, 2006

I don't think any browser implements the HTML+TIME recomendation.
posted by MonkeySaltedNuts at 2:35 PM on September 27, 2006

What do you want to happen for survey participants who have disabled JavaScript in their browsers? Make sure they aren't stuck with a Next button that never becomes enabled.
posted by matthewr at 2:36 PM on September 27, 2006

Also, consider providing a visible, enabled control for those with javascript disabled either via a <noscript> ... </noscript&gt block. If you object to duplicating the code for the control, you could also use javascript that on page load immediately hides/disables the control and then shows/enables it later via a timer.
posted by RichardP at 2:39 PM on September 27, 2006

The video is embedded mpg, not flash.

Ortho is right that because download times vary, this isn't an ideal solution. But our primary goal is to allow enough time for the video to start. It's fine that it won't sync up perfectly.

The disappearing vs. disabling points are well taken. Disabling makes far more sense.

JavaScript is most likely the solution. It's a conjoint study that requires JavaScript enabled browsers.

I'm trying turaho's suggestion right now.

Thanks all for the quick suggestions.
posted by panoptican at 2:44 PM on September 27, 2006

Windows Media Player (and I'm assuming other players too) have javascript interfaces. It shouldn't be too difficult to write some JavaScript that polls the player every second and changes the disabled state of the button when the video stops.

If it is windows media you're using, test it on several machines - they changed the command structure at some point which caused me some headaches a few years back, but I was doing some hideously complicated interactions that really should have been done in flash...
posted by twine42 at 4:08 PM on September 27, 2006

If you wanted to make it really simple you could make the button an animated gif that switched from completely transparent graphic to a viewable one in a set amount of time.
posted by visual mechanic at 5:03 PM on September 27, 2006

If you're curious, here's what we did. The following code went into the header.

<script language="javascript">



<!--



var blnWatchedMovie = 0;



window.setTimeout("blnWatchedMovie = 1;", 60000);



//-->



</script>

And the below code went into something called Custom JavaScript verification. We're using Sawtooth Software SSI Web to program our survey. turaho suggestion sent us in the right direction and the tech guys at Sawtooth Software (the most amazing technical support I've ever dealt with) helped finish the deal. Thanks again everyone for your help.

if(blnWatchedMovie == 0)





{



  alert("You must watch the movie before continuing");



}



else



{



  bln_custom_result = true;



}

posted by panoptican at 5:06 PM on September 27, 2006

I think this is what ortho was referring to.
posted by blag at 3:33 AM on September 28, 2006