Looking for some javascript that the user can’t click the “next” page link until x time has elapsed. I want to be able to put the time to elapse in the href with the “next” page link. This way I only have to put the javascript once in an include file.
Appreciate your help and maybe there is an easier or more efficient way to do this.
Thank you.
I don’t mean to be rude, but I would close my browser immediately on finding such an annoying delay, and find some other business to deal with instead.
That’s not a fair comment because it’s a requirement for a course to have a certain amount of “seat time” where the student can’t proceed to fast.
Well in that case, you can use setTimeout to activate a function that enables the next button.
but if you put it in the URL, a student’s gonna just adjust that and go fast anyway. At the very least hide the value.
I must agree with Paul that this seems like a poorly designed system, but if its got a fixed time period, you shouldnt need to put it into the URL - you should know ahead of time based on the page/section the student is looking at how long the timer needs to be.
a setTimeout wired to a line which sets the .disabled property of the next button to false.
That can be solved through database and sql.
Not really sure what that means or how to do it.
It can, but that still doesnt mean put it on the URL 
Those are both pretty standard terms “javascript7”
setTimeout
.disabled
Of course, would not do that!
My skill set is primarily database so I need to figure out how to do this, particularly how to put the time in the href, separate from the javacsript. The time will change depending on the length of the content.
Thank you for your replies!
<button onclick="timedText()">Start your timer</button>
<body>
<div>You can click the NEXT button in:<span id="time"></span> minutes.</div>
</body>
<p id="next"></p>
<script>
function timedText() {
setTimeout(TimeExpired, 6000)
}
function TimeExpired() {
document.getElementById("next").innerHTML = "<a href=http://www.sitepoint.com>click</a>";
}
</script>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
//this is where you can modifies the time amount.
var minutes = 3,
display = document.querySelector('#time');
startTimer(minutes, display);
};
</script>I have this code that if you click on Start your timer the hyperlink will appear in 3 seconds. I am trying to get rid of the Start your timer button and make it an onload function but can’t seem to get that to work. Any help would be appreciated! Also, is there a way to have the timer stop at zero and display “please click next”.
There is some better code!
So now I am lost in that I would like to have the href link separate at the bottom of a page and include the time in the href.
Is that possible?
<script>
var oneHour = 60 * 60, // 60 seconds * 60 minutes
twentyMins = 20 * 60, // 20 minutes * 60 seconds
oneMin = 60, // 60 seconds
oneMinFiveSecs = 65,
fiveSecs = 5;
window.onload = function () {
countDown('my_div1', '<a href="hello.html">Hello</a>', fiveSecs);
}
document.getElementById('alert').onclick = function () {
alert("This alert stops the interval from firing while it is opened,\n" +
"but the interval doesn't care, it will recalculate the correct time\n" +
"next time if runs.");
};
function countDown(elID, output, seconds) {
"use strict";
var timer, // timer will hold a reference to the id of our interval
// store a reference to the element so we don't have to keep looking it up
el = document.getElementById(elID),
getTime = function () {
// get the current time in ms since Unix epoch
return (new Date()).getTime();
},
// we will be done counting down when we are
// `seconds` seconds from the current time
finishAt = getTime() + (seconds * 1000),
pad = function (n) {
return n > 9 ? n : '0' + n;
},
lastCount = -1,
update = function () {
var hours,
now = getTime(),
mins,
// the seconds remaining is the finish time
// minus the current time divided by 1000ms
secs = Math.floor((finishAt - now) / 1000);
// Since we might be running this update function more than once
// a second, check to see if the number of seconds has changed since
// our last run. If it hasn't there is no need to do any more calculations
// nor update the DOM.
if (lastCount !== secs) {
lastCount = secs;
// you need to make the current time is equal to OR GREATER THEN the finish time
// because the interval could have actually fired sometime (shortly)
// after the time stored in finishAt
if (now >= finishAt) {
clearInterval(timer);
el.innerHTML = output;
} else {
// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); // 60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;
secs = Math.floor(secs);
// pad any numbers less than 9 with a leading 0
secs = pad(secs);
mins = pad(mins);
hours = pad(hours);
el.innerHTML = 'Time until link appears: ' + hours + ':' + mins + ':' + secs;
}
}
};
// display the counter right away
update();
// start the timer, updating twice a second to try and avoid
// having the counter seem to skip numbers
timer = setInterval(update, 499);
}
</script>
</head>
<div id="my_div1"></div>