I am building a survey in Qualtrics and use the method clickNextButton to automatically direct the participant to the next page with questions. I implemented the method in several following pages. Furthermore, participants are also able to click the next button themselves. The problem arises when they do so: if they click on the next button before the time limit, in the next page the method directs the participant earlier than given to the page after that one.
this.hideNextButton();
var that = this;
(function(){that.clickNextButton();}).delay(40);
For example, I set the time limit on 40 seconds on every page. On page 1, the participant manually clicks on the 'next button' after 10 seconds. What happens then is that on page 2, the participant is forwarded to page 3 after 28 seconds instead of 40. If he would have clicked on the 'next button' on page 1 after 5 seconds, he would have been forwarded on page 2 to page 3 after around 33 seconds. So it apparently depends on his click speed on page 1 when he will be directed on page 2. How can I prevent this?
Rather than using the timer for automatic redirection. call respective on click method when the question is answered so it will redirect to the respective page. and also reset the timer on every page redirection.
You need to clear the timeout if the respondent clicks the Next button themselves (delay is just a prototypejs implementation of setTimeout). Do it something like this:
Qualtrics.SurveyEngine.addOnReady(function() {
this.hideNextButton();
var that = this;
var timer = setTimeout(function() { that.clickNextButton(); },4000);
Qualtrics.SurveyEngine.addOnPageSubmit(function() { clearTimeout(timer); });
});
Related
I have 2 pages. On page-a.php a user clicks a button, which creates page-2.php and after completing some tasks on that second page the user click "Submit" button, at which point I would like to turn off the timer. I would like to record that time using Google Analytics which I think I can do with something like that:
// Feature detects Navigation Timing API support.
if (window.performance) {
// Gets the number of milliseconds since page load
// (and rounds the result since the value must be an integer).
var timeSincePageLoad = Math.round(performance.now());
// Sends the timing event to Google Analytics.
gtag('event', 'timing_complete', {
'name': 'load',
'value': timeSincePageLoad,
'event_category': 'JS Dependencies'
});
}
The question is how do I start that timer and keep it across pages?
Across pages you can use cookie storage. I think in your case you should save in cookie timestamp of first page view and timestamp of button "Submit" click on second page. Cookie expiration time - 30 min, for example. Then calculate time difference and send event with custom metric to GA triggered by click "Submit" just after calculating. In report you'll have time from view page one to click "Submit" within one session, if I understood correctly what do you need.
I'm trying to calculate time when user is out of current tab.
if user is changes tab for more than 3 times, page should navigate to another page. OR if user changes tab for more than 10 seconds, page should navigate to another page.
So far i got this only:
$(window).blur(function() {
alert("You are navigating to other tabs or window. this is your first warning. Doing this again may cancel your current examination.");
});
i need something like this:
if (user changes tab){
//display warning
}
if(user changes tab for more than 3 times){
//navigate to another page
}
if(user changes tab for more than 10 seconds){
//navigate to another page
}
Answer originally came from: https://stackoverflow.com/a/1760268/680578
His code snippet can be found here: http://jsfiddle.net/meehanman/40edh944/
You are able to keep track of active/inactive tabs using jQuery's focus and blur. You should be able to use a global variable to keep track of the amount of times the user did not have their focus on your tab. Displaying your warning at the first time, and your second warning after 3 times.
Whether it has been 10 seconds can be done using a setInterval countdown for example. Which you can clear as soon as your user comes back to your tab.
var counter = 0;
$(window).focus(function() {
//do something
});
$(window).blur(function() {
//do something
});
I have two pages: index.aspx and dream.aspx. I have a button click me on index.aspx Here's my Jquery code that clicks on that button:
function createItemButton()
{
setTimeout(
function()
{
$("#CreateItem").click();
},5000); //Delay of 5 seconds
}
createItemButton();
The delay added is because of the rest of the code not posted here. Once the click me button is triggered, it takes me to the dream.aspx page. There's another button back on that page, which when clicked, takes me back to the index.aspx page. Here's my attempt to automate everything:
function createItemButton()
{
setTimeout(
function()
{
$("#CreateItem").click(); //id of click me button on index.aspx page
},5000); //Delay of 5 seconds
}
function createItemButton1()
{
setTimeout(
function()
{
$("#back").click(); //id of back button on dream.aspx page
},7000); //Delay of 7 seconds
}
function call()
{
createItemButton();
createItemButton1();
}
call();
My thinking is that once it redirects to the dream.aspx page, it'll wait another 2 seconds ( 7000 - 5000 delay ) and the trigger a click on the back button and take me back to the index.aspx page. But for some reason, after it is taking me to the dream.aspx page, it's not triggering a click on the back button on the same page. I have tried giving multiple delays in the same setTimeout() function also. Something like:
function(){
setTimeout(function() {
$("#CreateItem").click();
$("#back").click();
}, 3000));
}
I have been informed that this code will give a delay of 3 seconds to each of the clicks. But it did not work for me. I also tried a couple of other things but nothing worked.
Basically, once I move from the index.aspx page after clicking on the click me button, I want the back button on the dream.aspx page to take me back to the index.aspx page after a couple of seconds. All automated. FYI, I am running this code in console. Any help is much appreciated. Thanks.
The code for back button (function createItemButton1()) and its call must be placed in dream.aspx. Once you leave index.aspx, all javascript code in it is gone along with any pending timeouts.
May I know if it is possible to refresh a page 90 seconds later after clicking a button.
Scenario:
At 10:10:00, a person click a button on my website. The button will show some information in the current page.
At 10:11:30, (which is 90 seconds later) the page refresh itself.
I can't seems to find any thing about this. Mostly, I see pages that show how to refresh the same page without pressing a button.
The button that I am referring to use <input type="submit"></input and not the normal <button> and therefore the page will refresh immediately.
Use window.setTimeOut for that.
document.getElementById("myBtn").addEventListener("click",function () {
var timeoutID = window.setTimeout(function () {
alert("That was 2 secs slow!");
}, 2000);
});
<button id="myBtn">delayed alert</button>
I have an add-to-bag button used throughout our site and we want a dynamic popup to appear to acknowledge what was just added, and then it goes away. I'm finding that if you click another add button, it has the previous dialog's timeout attached. To fix this so the next dialog has its own 10,000 setTimeout rather than whatever is left over from the last one I have come up with the following code (that doesn't do the trick).
$(document).ready(function ()
{
// Create object for future dialog box - so it's available to the close method
var addToBagDialogVar = $('<div id="addToBagDialogBox"></div>');
var autoCloseTimeout = 10000;
var dialogTimer;
$(".addToBagPU").click(function (e)
{
var result = "";
$.get(this.href, function (data) { SetData(addToBagDialogVar, data); });
return false;
});
// Start listening for the close link click
$(document).on("click", "#bagPUCloseLink", function (event)
{
event.preventDefault();
CloseDialog(addToBagDialogVar);
});
function SetData(addToBagDialogVar, data)
{
result = data;
var regex = data.match("{{(.*)}}");
var bagCount = regex[1];
addToBagDialogVar.html(result).dialog({
open: function ()
{
clearTimeout(dialogTimer);
$(".ui-dialog-titlebar-close").hide();
SetBagCount(bagCount),
dialogTimer = setTimeout(function () { CloseDialog(addToBagDialogVar); }, autoCloseTimeout);
},
show: { effect: "fadeIn", duration: 800 },
close: function () { clearTimeout(dialogTimer); },
width: 320
});
}
function CloseDialog(closeThisDialog)
{
closeThisDialog.dialog("close");
closeThisDialog.dialog("destroy").remove();
}
});
The dialog is loaded with dynamic content from an external .Net page with product data and has a close link inside that page, which is why the dialog is loaded into addToBagDialogVar so it's available to CloseDialog.
All of that works just fine. It's just the reset of the timer that doesn't appear to be happening. If I go down a page of products and add each one to my bag, the 3rd or 4th dialog is only up for a second or so because they have all been using the first dialogs setTimeout.
I've read and read and tried too many different ways to remember and now my brain is mush.
I propose an alternate explanation for the behavior you're observing. When you click the first "add to cart", a timer is started. As you go down the page clicking "add to cart", a new timer is started each time. There's no overlap, just a bunch of separate timers running normally (although incidentally, each new dialog box blows away the timer ID you've previously created; I'll come back to this).
When your first dialog's timer expires, the dialog closes itself via the HTML ID, meaning it closes itself with something like a jquery $('div#addToBagDialogBox').closeOrSomethingLikeThat(), that is, every dialog inside a div with an id of addToBagDialogBox. The first timer expiration is closing all of your dialogs, because they all use that same HTML ID. The other timers are running perfectly, but when they expire there's nothing left for them to do.
You can fix the early-close problem by assigning a unique HTML ID to each dialog you create. And you'll want to manage your timer IDs on a per-dialog basis as well, such that each dialog has its own timer ID.
Edit: Just for nerdy grins, think about the details of the scenario you described. Your first timer is running, counting down normally, and you start four other timers while the first dialog is still there. The ID of the fifth timer is in your variable dialogTimer. So when the first dialog's timer expires, the close processing occurs, and you call clearTimeout with the ID of the fifth dialog's timer. So your first dialog's timer expired, the dialog closed all the other dialogs, and the cleanup cancelled the fifth timer. There are three other timers still running, their IDs lost forever. They finally expire and their shutdown functions run, but they're totally without effect, their companion dialogs long gone. Sorry, bona fide nerd here.