CODEWITHSUNDEEP
javascripthtmlcsstimerqualtrics
socialscientist
socialscientist

Reputation: 4232

Javascript: Click 'Next' only if a Qualtrics page has not been viewed

Background

I have implemented (code below) a countdown timer in Qualtrics using the Javascript and CSS found in this post: http://codejaxy.com/q/55868/javascript-timer-qualtrics-qualtrics-progress-to-next-block-when-time-is-up# The exact code I have produced (which simply implements the solution proposed in that post) is found in the 'Current Code' section below.

The code for the countdown timer automatically clicks Next and advances to a new screen when time is up. Which screen it advances to is based on the display logic of each question following that on the current screen (see items 3 and 4 in 'Current Code').

Problem

While this can successfully move someone to the end of a timed section of a survey (i.e. once time is up, you are moved out of the timed section to another, subsequent set of questions that are untimed), it also causes the screen to advance even if one is finished with the timed section. In other words, if the intent is to move a person from any question in the timed question set X to the first question in the untimed question set Y after Z time has passed, if one answers all of the questions in X before Z time has passed, one will be moved from a question in Y to a subsequent question in Y. Essentially, one might end up skipping a question you want a person to answer rather than skipping the remainder of the timed section.

Question

Is there any way to have the code click "Next" only if a certain question has not been viewed? Or maybe reaching a certain point of the survey causes the blockTimeFlag to = 0 and not be changed when time runs out?

In other words, my goal is to not cause the participant to be unable to answer a question in an untimed block of questions because the screen advances automatically upon the timer indicating time is up while the participant has already completed that part.

Current Code

(1) Added the following custom CSS in the survey Look and Feel: 

 .header-cont {  
   width:100%;  
   position:fixed;  
   top:0px;  
   z-index:1000;  
 }  
 .header {  
   height:75px;  
   background:#FFFFFF;  
   width:100%;  
   margin:0px auto;  
 }  
 .timer{   
   margin: auto;  
   text-align: center;  
   vertical-align: middle;        
   font-size: 200%;
    font-family: Arial;
 }

(2) Created a 'Timing' question and included the following in the Javascript (note: this incorporates the solution offered in that post):

Qualtrics.SurveyEngine.addOnload(function()
{
    var headerCont = document.createElement("div");  
 headerCont.className = "header-cont";  
 headerCont.id = "header_container";  
 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>";  
 headerCont.appendChild(header);  
 header.appendChild(timer);  
 document.body.insertBefore(headerCont, document.body.firstChild);
function startTimer(duration, display) {  
  var timer = duration, minutes, seconds;  
  var myTimer = setInterval(function() {  
   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 = 5,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
 var timeOver = function() {  
     document.getElementById("timer_1").innerHTML = "Time is up.";
     Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");    
     $('NextButton').click();}



});

(3) Created an embedded data field in the survey flow before the timer containing blockTimeFlag = 0.

(4) Set the display logic for items based on blockTimeFlag = 0 (i.e. if the blockTimeFlag = 1 - which occurs when time is up - then the item is skipped0

Upvotes: 1

Views: 292

Answers (2)

T. Gibbons
T. Gibbons

Reputation: 5004

I'm assuming your JavaScript is in the survey header or footer. If that is the case, you can put your code in an if statement that checks the value of an embedded variable. This would allow you to turn the timer on or off on a block by block basis by setting the value of the embedded variable.

Qualtrics.SurveyEngine.addOnload(function()
{
if("${e://Field/timerOnOff}" == "on"} {    
  var headerCont = document.createElement("div");
  /* the rest of your code here... */
}
});

Upvotes: 1

Alex Eggers
Alex Eggers

Reputation: 378

This feels like it has two solutions. One is rethinking the architecture of your code to make this an easier issue to solve, but I'm gonna post the quick and dirty solution that comes to my mind at the moment.

From what I understand, the user is advanced once the timer is up, even when they are already past the timed section, and you cannot interfere with the timer itself once it is set. Therefore, the easiest solution i can think of is:

Once the user hits the first question of section Y as you called it, alter the function timeOver(). Make it do whatever, just be careful not to set it to null, since it will still be called and would then throw an error.

If you want a more...structured solution, I would suggest making your timer globally available (or rather as far out as it has to be, global state isn't a good thing from what I know). Then, you can call clearInterval() as soon as the user proceeds to the first question of section Y.

Upvotes: 0

Related Questions