How to implement a time limit at the block level plus auto-advancing? | XM Community
Solved

How to implement a time limit at the block level plus auto-advancing?

  • 23 December 2019
  • 11 replies
  • 837 views
G
Badge
I have several questions in one block, separated by page breaks. (Concretely, it's each one graphic and one horizontal MC question on each page). I want to set a time limit on the whole block (e.g. 3 minutes). The countdown timer should be visible to the respondent and not restart after each question. After the time limit is over, participants should be auto-advanced to the next block.

I tried the javascript proposed here:
https://stackoverflow.com/questions/47317718/how-to-use-automatically-move-respondents-in-qualtrics-with-global-timer-for-blo

as well as the adjustments proposed here (e.g. hidden MC question, no force response):
https://qualtrics.com/community/discussion/1487/custom-timer-progress-to-next-block-without-waiting-for-response

However, while the timer is working fine, I do not achieve that respondents are auto-advanced to the next block once the time is up. Could you please help me in solving this problem? Since I am completely new to JavaScript, I would be very happy about an ready-to-implement code/solution 😉.

I thank you so much in advance!
icon

Best answer by npetrov937 29 December 2019, 09:33

View original

11 replies

npetrov937
Rank
Userlevel 4
Badge +4
Hi @Geneve ,

After reviewing the sources you're using, I can't immediately see a reason why it would not work.

Perhaps providing the code with some additional relevant information can help troubleshoot. The suggestions in the posts you've mentioned seem quite solid.
G
Badge
Hi @npetrov937 ,

Many thanks for your kind response. I implemented the following:

1) I added the variable "timeRemaining" = 10 as embedded data in the survey flow
2) I added the following JavaScript to the first question of the block:

Qualtrics.SurveyEngine.addOnload(function()
{
var header = document.createElement("div");
header.className = "header"
header.id = "header_1";

var timer = document.createElement("div");
timer.className = "timer";
timer.id = "timer_1";
timer.innerHTML = "Time Remaining: <span id='time'>00:10</span>";

header.appendChild(timer);
document.body.insertBefore(header, document.body.firstChild);

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var myTimer = setInterval(function() {
Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining', timer);
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var text = ('innerText' in display)? 'innerText' : 'textContent';
display[text] = minutes + ":" + seconds;

if (--timer < 0) {
clearInterval(myTimer);
timeOver();
}
}, 1000);
}
var timerSeconds = parseInt("${e://Field/timeRemaining}");
display = document.querySelector('#time');
startTimer(timerSeconds, display);
var timeOver = function() {
document.getElementById("timer_1").innerHTML = "Time is up.";
x = 1;
var bgColor = setInterval(change, 1000);
$('NextButton').click();
}
});

3) I did not select “force response” in any question of the block
4) I added a display logic ("if timeRemaining is greater than 0") to each question (except the first one) of the block

The countdown timer works fine, but when time runs out, the survey waits for a response on the current question and does not automatically progress to the next block. What do I have to change to achieve this?

I thank you so much in advance for your kind support!
npetrov937
Rank
Userlevel 4
Badge +4
Hi @Geneve ,

From your code, delete the following lines:

x = 1;
var bgColor = setInterval(change, 1000);

And it will work fine!

The problem you're getting is that the "change" variable you're supplying the setInterval function is not defined and hence is throwing an error before executing the NextButton.click() function on the next row. You don't even need these two lines - they won't work in the way your code is written.

Hope that helps!
G
Badge
Hi @npetrov937 ,

that's really great, it worked 🙂!! Thank you so very much for your great and kind support and your time!!
A
Hi @npetrov937 and @Geneve
I am trying to use the same Javacode for my study but I have a few questions.
1) When I use the code above, when the time is up, it auto advances but skip the questions that are not part of the block. Do you have any solution to this?
2) When I click to continue before time is up, it goes to the next question even though I want participants to stay in the same page for a few minutes. I am not sure what I did wrong.
Thanks in advance!!
S
Hello, the suggested solutions work great.

I have one follow-up question:

How can you make the timer disappear? That is, is there way to have the timer autoadvance subjects after the time is up but not display the countdown to the participants?
R

Hello everyone, I tried the code but I kept getting NaN:NaN in the timer that displayed. For every new question, this would repeat. Did anyone encounter this?
Also how do you add the "if timeRemaining is greater than 0"?

A

Hi,
thanks to Geneve for posting the question and to npetrov937 for providing a working solution.
I used the code myself, and it works: the timer displays and the respondent is moved on to the next block at timeout.
However, if the respondent is quick and moves on before the timeout. the timer keeps on ticking on the following block.
Is there a way to reset the timer (and stop/hide it) after the respondent moves on?
Cheers!
Andy

G
Badge

Dear Andy,
to handle this, I added the following code to all questions in the next block(s):

Qualtrics.SurveyEngine.addOnload(function()
{
   /*Place your JavaScript here to run when the page loads*/

var header = document.createElement("div"); 
 header.className = "header" 
 header.id = "header_1"; 

var timer = document.createElement("div"); 
 timer.className = "timer"; 
 timer.id = "timer_1"; 


document.getElementById("timer_1").innerHTML = "   "


});

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*/

});

Actually, it just displays a blank space where the timer was displayed before. Hopefully, that helps.

Best wishes

I
Badge

This javascript has been extremely helpful! But some of our tests are very long and I need to be able to put in an hour. Is anyone able to edit this javascript to include an hour?

L

Hej guys!
Reading these comments helped me a lot.
However, now I have a new problem:
I've done everything as described here
(followed the steps described by @Geneve  and deleting the two lines as suggested by @npetrov93). Everything works fine. But then I added a costume
validation to the responses in my block. I need the subjects to be able to
proceed to the next question within the block only, if they entered a correct
response. (It’s like a quiz.) At first everything is fine. However, as soon as
a wrong answer is entered and subjects receive the costume message that their
response was wrong the timer disappears on the screen. Once the correct answer
is entered and subjects go to the next screen they see two timers: The first
one starts the countdown again and the second one continues to count down the
original times (e.g. if my times is set to 30 seconds and it takes 10 seconds
until I enter the correct answer on the first screen the first timer display
shows “20” and the second shows again “30”). The first one seems to be the
relevant one as after that one runs down the block ends. Furthermore, there
seem to be a few things off: e.g., Even on the next block still the info “Time
is up. Time Remaining: 00:00” is displayed and it even seems as if once the
second timer has run of  the first screen
of the second block disappears and automatically the second screen of the
second block is shown.
 
Maybe you guys could help me!? That would be great!
Thx,
Lilia
 

Leave a Reply


Terms & Conditions