Javascript Timing: Timing incorrect on subsequent timed blocks | XM Community
Skip to main content
I have a kind of complicated survey flow (attached), with six different places in which the Next button is hidden from participants until the time elapses. These six places are organised into 3 groups/blocks, with each group/block comprising of two timed pages (+2 other pages). One page is timed for 150 seconds, and the other page is timed for 60 seconds.



I am using Javascript to time each page, as I have heard that there can be issues with the built-in Qualtrics timer.



The first two pages (in one group/block) are timed correctly. That is, the time I specify in the Javascript is the time that elapses when I preview the survey (timing manually with a stopwatch from when the page loads to when the Next button appears). However, for the four pages after this, the time I specify in the Javascript does not match the time that actually elapses. For example, the Javascript specifies 150 seconds, but only 10 seconds will actually pass before the Next button appears. The exact time that passes between the page loading and the Next button appearing seems to be variable (e.g., sometimes 30 seconds, sometimes 10, sometimes 3), so I can't just add on extra time to the Javascript to match what I want.



Here is one script I am using (on 3 of the pages):

> Qualtrics.SurveyEngine.addOnload(function()

> {

> /*Place your JavaScript here to run when the page loads*/

>

> });

>

> Qualtrics.SurveyEngine.addOnReady(function()

> {

> var displayTime = 150;

> if($('NextButton'))$('NextButton').hide();

> new PeriodicalExecuter(function(){

> if($('NextButton')){$('NextButton').show();$('NextButton');}

> },displayTime);

>

> });

>

> Qualtrics.SurveyEngine.addOnUnload(function()

> {

> /*Place your JavaScript here to run when the page is unloaded*/

>

> });



Here is the other script I am using (on the other 3 pages):

> Qualtrics.SurveyEngine.addOnload(function()

> {

> /*Place your JavaScript here to run when the page loads*/

>

> });

>

> Qualtrics.SurveyEngine.addOnReady(function()

> {

> var displayTime = 60;

> if($('NextButton'))$('NextButton').hide();

> new PeriodicalExecuter(function(){

> if($('NextButton')){$('NextButton').show();$('NextButton');}

> },displayTime);

>

> });

>

> Qualtrics.SurveyEngine.addOnUnload(function()

> {

> /*Place your JavaScript here to run when the page is unloaded*/

>

> });



I have already checked that the scripts are identical across all of the pages, so that can't be it.



Does anyone have any idea why this might be happening and/or what I can do to fix it?
Hey @Rachel ,



Make different variable name(displayTime) in code.



for e.g. var displayTime1 =150; //for 150 seconds

var displayTime2 = 60; //for 60 seconds



Hope this could help
Hi @Rachel ,



You can use setTimeout function instead as specified below (sample survey attached):



Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery("#NextButton").hide();

setTimeout(function(){ jQuery("#NextButton").show() }, 150000);

});



Also few suggestion to your code:

1. instead of $ please use jQuery because $ sign some time conflict with Qualtrics inbuild codes.

2. in PeriodicalExecuter, add code to stop opened instance. refer this link
> @PraDeepKotian_Ugam said:

> Hey @Rachel ,

>

> Make different variable name(displayTime) in code.

>

> for e.g. var displayTime1 =150; //for 150 seconds

> var displayTime2 = 60; //for 60 seconds

>

> Hope this could help



Thanks for your suggestion! Unfortunately, when I tried this it prevented the Next button from appearing even in the first instance.
> @YASH1T said:

> Hi @Rachel ,

>

> You can use setTimeout function instead as specified below (sample survey attached):

>

> Qualtrics.SurveyEngine.addOnReady(function()

> {

> jQuery("#NextButton").hide();

> setTimeout(function(){ jQuery("#NextButton").show() }, 150000);

> });

>

> Also few suggestion to your code:

> 1. instead of $ please use jQuery because $ sign some time conflict with Qualtrics inbuild codes.

> 2. in PeriodicalExecuter, add code to stop opened instance. refer this link



Thanks YASH1T, but this doesn't seem to work either. When I used that code on just the first place I need it, it works, but when it is applied to every place the Next button just appears immediately (even in the first place) and not after the designated time.



Thanks also for your suggestions on the code I was using originally. I got this from another source and didn't realise there might be conflicts.
To anyone who is also looking for an answer to this question, I think I found a solution. I changed every instance of the code to what is below, and it seems to be working perfectly.



> Qualtrics.SurveyEngine.addOnload(function()

> {

> this.hideNextButton();

> this.showNextButton.delay(150);

>

> });

>

> Qualtrics.SurveyEngine.addOnReady(function()

> {

> /*Place your JavaScript here to run when the page is fully displayed*/

>

> });

>

> Qualtrics.SurveyEngine.addOnUnload(function()

> {

> /*Place your JavaScript here to run when the page is unloaded*/

>

> });

Leave a Reply