I am working on a web based application i.e LMS Learning Management System. In this application a student can read chapters and give test for that chapters. And for reading a chapter a specific time is alotted to the user which is capturing using the timer tick. While reading the chapter, a captcha(i.e developed in aspx page) comes at after every 12 minutes. Now i want when captcha comes on the window while reading, the timer should get paused, and when user submit the captcha timer get resumed from where it left its previous tick. For this i have tried a solution using javascript but it didn't work.
Here is the codr that i have tried
<script type="text/javascript">
function startTimer() {
var timer = $find("<%=Timer1.ClientID%>")
timer._startTimer();
}
function stopTimer() {
var timer = $find("<%=Timer1.ClientID%>")
timer._stopTimer();
}
function showCaptchaOnChapter() {
//stopTimer();
ShowNewPage();
setTimeout('showCaptchaOnChapter()', 120000);
stopTimer();
}
function showRandomQuestionOnChapter() {
ShowChapterQuestion();
setTimeout('showRandomQuestionOnChapter()', 900000);
}
//setTimeout('showCaptchaOnChapter()', 360000);
//setTimeout('showRandomQuestionOnChapter()', 120000);
</script>
The definition for ShowNewPage()
function ShowNewPage() {
var callbackFunctionArray = new Array(CloseCaptchaPopUp);
modalWin.ShowURL('Captcha.aspx', 225, 290, 'Please enter characters dislayed in image to proceed', null, callbackFunctionArray);
}
here in this script i had set Captcha arrival time at 2 minutes so i can test faster. Captcha coming at Regular interval i.e of 2 minutes but timer tick not getting stopped.
How could i do this?
After the time out has occurred show your captcha and initiate other timeout.
function showQuestion() {
updateTimer();
getQuestion();
setTimeout(showCaptcha, time);
}
function showCaptcha() {
getCaptcha();
//some listener for submitting of captcha eg:submitCaptcha
}
function submitCaptcha() {
if captcha===correct
showQuestion();
}
Related
document.getElementsByName("Username")[0].value = 'FamilyGuy'
function myFunction(){
//pag 1, delay a second. Giving user name time to fill
document.getElementById("NextButton").click();
}
//delay
setTimeout(myFunction, 1000);
function myFunction(){
//page 2, delay a second. Giving passwrd time to fill befor logging in
document.getElementsByName("Password")[0].value = 'this1sth3p4ssw0rd!'
}
//delay
setTimeout(myFunction, 1000);
document.getElementById("LoginButton").click();
//I am using this extension using this extension
[1]: https://i.stack.imgur.com/LNMiJ.png
setTimeout is an asynchronous function. It doesn't pause the execution of code that follows it.
This means that, in your example code, the two timeouts will run simultaneously, and your login button will be pressed immediately. To fix this, put the second timeout at the end of your first function, rather than in the main body of code. Also put the pressing of the login button inside the second function.
document.getElementsByName("Username")[0].value = 'FamilyGuy'
function myFunctionB(){
//page 2, delay a second. Giving passwrd time to fill befor logging in
document.getElementsByName("Password")[0].value = 'this1sth3p4ssw0rd!'
document.getElementById("LoginButton").click();
}
function myFunctionA(){
//pag 1, delay a second. Giving user name time to fill
document.getElementById("NextButton").click();
//delay
setTimeout(myFunctionB, 1000);
}
//delay
setTimeout(myFunctionA, 1000);
I don't know the way the NextButton operates, but the use of a delay to wait until the Username value changes is probably unnecessary. Consider using the following code:
function myFunction(){
document.getElementsByName("Password")[0].value = 'this1sth3p4ssw0rd!'
document.getElementById("LoginButton").click();
}
document.getElementsByName("Username")[0].value = 'FamilyGuy'
document.getElementById("NextButton").click();
//delay
setTimeout(myFunction, 1000);
This may be one possible implementation to achieve the below-described (what is assumed to be the desired) objective:
A screen with input-boxes username, password and buttons 'Next', 'Login' is rendered
After waiting for some time (say 1.5 seconds), username is auto-populated
Another delay of 2 seconds and 'Next' button click is programatically triggered
After delay of 2 seconds, password is auto-populated
Finally, another delay of 1 second and 'Login' button is programatically triggered.
The time-delays are just randomly assigned in the snippet and may be altered as required.
It would definitely helpful to understand the context within which this is being used - to cater a more suitable answer.
const btnClicked = name => console.log(`${name} button clicked `);
setTimeout(
() => {
document.getElementById("Username").value = 'FamilyGuy';
setTimeout(
() => {
document.getElementById("NextButton").click();
setTimeout(
() => {
document.getElementById("Password").value = 'this1sth3p4ssw0rd!';
setTimeout(
() => {
document.getElementById("LoginButton").click();
},
1000
)
},
2000
)
},
2000
)
},
1500
);
<html>
<body>
<input id='Username' />
<button id='NextButton' onclick='btnClicked("Next")'>Next</button>
<input id='Password' />
<button id='LoginButton' onclick='btnClicked("Login")'>Login</button>
<script src='script.js'></script>
</body>
</html>
code is in MVC and also every request are using ajax call so no change in url.
using below code i ll able to perform firt opration that logout user if user inactive of 30 sec. but not able to perform action when user logout.
<script>
$(function () {
$("body").on('click keypress', function () {
ResetThisSession();
});
});
var timeInSecondsAfterSessionOut = 30; // to change the session time out, change this value. Must be in seconds.
var secondTick = 0;
function ResetThisSession() {
secondTick = 0;
}
function StartThisSessionTimer() {
secondTick++;
console.log(secondTick);
if (secondTick > timeInSecondsAfterSessionOut) {
clearTimeout(tick);
window.location = '/Account/LogOff/0';
}
tick = setTimeout("StartThisSessionTimer()", 1000);
}
StartThisSessionTimer();
</script>
alse i tried the unload or beforeunload method of script but result not proper as expect.
need to logout user if user not perform any action on 30 sec or if user close browser.
thanks in advance.
as i see the var tick is local, and is defined in every tick, so the timeout is called every second:
function StartThisSessionTimer() {
secondTick++;
console.log(secondTick);
if (secondTick > timeInSecondsAfterSessionOut) {
clearTimeout(tick);
window.location = '/Account/LogOff/0';
}
tick = setTimeout("StartThisSessionTimer()", 1000);
}
Try to separate the initializiaton of the timeout, outside of the same scope of repeater of timeout.
tell us if is useful.
Tks
I have a raspberry pi that initiates a garage door close event after a 90s delay. I have been successful in showing the countdown timer dynamically update on a web page but for some reason the countdown is erratic and constantly flickers with lower and then higher numbers.
Clearly I must be refreshing something but needless to say I have spent many hours on forums but to no avail. I am hoping that someone can look at my code and give me some direction.
<?php
$pinInput = trim(shell_exec("gpio read 26"));
$pinOutput = trim(shell_exec("gpio read 2"));
if ($pinInput!=$pinOutput){
echo "Timing for auto reclose...";
?>
<br>
<b><span id="countdown">90</span> Seconds</b>
<script type="text/javascript">
var timer = 90,
el = document.getElementById('countdown');
(function t_minus() {
'use strict';
el.innerHTML = timer--;
if (timer >= 0) {
setTimeout(function () {
t_minus();
}, 1000);
} else {
// do stuff, countdown has finished.
}
}());
</script>
<?php
}
elseif ($pinInput=1)
{
echo "Monitoring input...";
}
else
{
echo "Garage door is closing...";
}
?>
I should also mentioned that the above piece of code is within a file called timing.php. This is called on index.php as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#Input').load('timing.php');
}, 1000); // refresh every 1000 milliseconds
</script>
So in summary, what I would like is for "Timing for auto recluse..." to remain static if ($pinInput!=$pinOutput) but dynamically shown the countdown from 90s.
First let's look at this code, the last bit in your question:
var auto_refresh = setInterval(
function () {
$('#Input').load('timing.php');
}, 1000); // refresh every 1000 milliseconds
That sets up an interval timer that will load the "timing.php" URL into the page once per second.
Now, here's part of what you say is returned from "timing.php":
var timer = 90,
el = document.getElementById('countdown');
(function t_minus() {
'use strict';
el.innerHTML = timer--;
if (timer >= 0) {
setTimeout(function () {
t_minus();
}, 1000);
} else {
// do stuff, countdown has finished.
}
}());
So when the browser receives the response from "timer.php", jQuery will run that code. That sets up a repeating timer function — essentially the same thing as an interval timer, except that it stops itself after a while).
Now, when that code is reloaded, you don't get new global variables timer and el. The global variables already defined by the last load of "timer.php" will simply have their values overridden. That means that the already-in-process previous timeout sequence will suddenly see timer set back to 90.
It's not clear exactly what it is you intend to do. Perhaps that setInterval() is just superfluous, and all you need to do is just load "timeout.php" once. Or, perhaps when the "timeout.php" code loads, it first needs to wipe out any already-running timeout loops, though that seems odd since those are set up to wind down only after 90 seconds.
I am using setInterval to refresh a content of graph in page. How to make a show an alert to user when setinterval is about to refresh that 'the content will be refreshed'.
For example my interval is using 300 secs and I want to show an alert after 290 seconds have passed that 'The content will be refreshed after 10 secs. Do you want to refresh the graph' for each interval. How to do this? Any suggestions?
You should set you interval to 290000ms, and then it will show an alert, and then you use setTimeout to update your page after 10 seconds, like so:
setInterval(function() {
alert("10 seconds to update")
setTimeout(function() {
//REFRESH PAGE
},5000);
}, 10000);
On your page loading you can put your 290 secs refresh
setInterval(function(){
showDialogBox("do you want to refresh");
}, 290000);
and then add a action on the confirm button that will be delayed the last 10sec
confirmButtonOnClick(){
setInterval(function(){
refresh();
}, 10000);
}
In cases like this, I prefer to use setTimeout over setInterval as it gives better control.
So I set two timers -- one for the warning and then another for the timeout itself, then I restart the two timers.
const timeoutWarning = 1800;
const timeoutDone = 2000;
function showWarning() {
console.log('About to time out...');
}
function doTimeout() {
console.log('Timeout reached');
setWarnings();
}
function setWarnings() {
setTimeout(showWarning, timeoutWarning);
setTimeout(doTimeout, timeoutDone);
}
setWarnings();
Something like that:
var interval;
var secondsPassed = 0;
function refreshWithMessage() {
interval = setInterval(function(){
if(secondsPassed == 290) {
//showMessage with options
}
if(secondsPassed == 300) {
clearInterval(interval);
//do what you need here (refresh page?)
}
secondsPassed++;
}, 1000)
}
If you need to let user cancel the interval - you should just clear interval and then reset seconds variable to 0.
hello all i am writing a code for auto logout for inactivity for about 20 minutes which should interact with keyboard as well as mouse and i have following code which works for most of the function but it is not resetting the timer for mouse movement and keyboard activity.
var timoutWarning = 9000; // Display warning in 14 Mins.
var timoutNow = 9000; // Warning has been shown, give the user 1 minute to interact
var logoutUrl = 'logout.php'; // URL to logout page.
var warningTimer;
var timeoutTimer;
// Start warning timer.
function StartWarningTimer() {
warningTimer = setTimeout("IdleWarning()", timoutWarning);
}
// Reset timers.
function ResetTimeOutTimer() {
clearTimeout(timeoutTimer);
StartWarningTimer();
$("#timeout").hide();
}
// Show idle timeout warning dialog.
function IdleWarning() {
clearTimeout(warningTimer);
timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
$("#timeout").show();
}
// Logout the user.
function IdleTimeout() {
window.location = logoutUrl;
}
$( document ).ready(function() {
StartWarningTimer();
});
$('html').mousemove(function() {
ResetTimeOutTimer();
});
i want the code should intract with mouse movement and keyboard press
all kind of help is appreciated please suggest me something
At first, you should not use setTimeout this way - inactive tabs getting slower, so there's no guarantee that your code will be executed in 14 minute. The better way to do that is to check repeatedly the elapsed time.
var startTime = +new Date();
function checkForWarning () {
if (+new Date() - startTime > maxInactiveTime) {
// show warning
}
}
You can track activity this way:
$(document)
.on('click', ResetTimeOutTimer)
.on('mousemove', ResetTimeOutTimer);
Hope it helps.