Auto skip to next question after time limit

In this article we will learn how to create a JavaScript timer. Once we have the timer we will show you how to connect it to the next button on the page so that it gets pressed when the timer is done.

Ok so first off we need some metadata. In this example we are going to have the six questions of our survey and then a question to hold the mins and the seconds of the timer. We will then create six pages and on each page we will add the Question to be asked and also the mins and seconds questions.

Metadata(en-AU, Question, Label)
Q1 "Q1"
    categorical [1..1]
    {
        A "A",        B "B",
        C "C",        D "D",
        E "E",        F "F"
    };
    Q2 "Q2"
    categorical [1..1]
    {
        A "A",        B "B",
        C "C",        D "D",
        E "E",        F "F"
    };
    Q3 "Q3"
    categorical [1..1]
    {
        A "A",        B "B",
        C "C",        D "D",
        E "E",        F "F"
    };
   Q4 "Q4"
    categorical [1..1]
    {
        A "A",        B "B",
        C "C",        D "D",
        E "E",        F "F"
    };
    Q5 "Q5"
    categorical [1..1]
    {
        A "A",        B "B",
        C "C",        D "D",
        E "E",        F "F"
    };
   Q6 "Q6"
    categorical [1..1]
    {
        A "A",        B "B",
        C "C",        D "D",
        E "E",        F "F"
    };
    Mins "Mins"
    long;
    Secs "Secs"
    long;
   P1 ""
    page(
        Q1, Mins, Secs
    );
    P2 ""
    page(
         Q2, Mins, Secs
    );
    P3 ""
    page(
         Q3, Mins, Secs
    );
    P4 ""
    page(
         Q4, Mins, Secs
    );
    P5 ""
    page(
         Q5, Mins, Secs
    );
    P6 ""
    page(
         Q6, Mins, Secs
    );
End Metadata

Next we need to have some routing. In this example we are going to have some web routing which will set the global template and then ask all six questions

Routing(Web)
' Count Down
Mins=0
Secs=10
IOM.Layouttemplate="timer.html"
P1.ask()
Mins=0
Secs=10
P2.Ask()
Mins=0
Secs=10
P3.Ask()
Mins=0
Secs=10
P4.Ask()
Mins=0
Secs=10
P5.Ask()
Mins=0
Secs=10
P6.Ask()
End Routing

Next we need our template, copy this basic html into a new html file and save it as timer.html

Next we need to add the timer code in. We are going to create the timer in JavaScript so first we need to add the JavaScript tags into our template. In this example we are going to put them after the head tag and before the title tag.

Next we are going to declare some variables that will be used in the timer.

var mins,secs,TimerRunning,TimerID,oButton,oMins,oSecs;
TimerRunning=false;

So what do we have , well we have a variables to hold the mins and the seconds ( mins,secs ) then we have a variable to tell us if the timer is running or not ( TimerRunning ). Next we have a variable that will hold the TimerID, this just allows us to store the return location for the timer object, this way we can get back to the timer if we need to reset or adjust it. ( TimerID )  and then finally we have three variables that will hold the button object and the mrInterview minutes and seconds objects. ( oButton, oMins, oSecs ). Finally we set the TimerRunning variable to false. This tells us that at this stage the timer is not running.

Now that we have all this , we need a function to start the timer off. Type this function into your template.

function Init()
{
oMins = document.getElementById("_Q1");
oSecs = document.getElementById("_Q2");
mins=oMins.value;
secs=oSecs.value;
StopTimer();
StartTimer();
}

The first thing this function does is to find the mins and seconds objects and store them into the oMins and oSecs variables. Next we store the values of those questions into the two JavaScript variables. Next we run a function that will stop the timer if it is running , then we will start it again. We do this so that we can use the same template on each page. Next add the following,

function StopTimer()
{
if(TimerRunning)
 clearTimeout(TimerID);
TimerRunning=false;
}

This is the StopTimer function and as we can see the first thing we do is to check to see the value of the TimerRunning variable and if it is true we clear the timer by using the TimerID and set the value to the TimerRunning variable to false. Next type the following,

function Check()
{
 if(mins==5 && secs==0)
   alert("You have only five minutes remaining");
  else if(mins==0 && secs==0)
  {
  alert("TIME UP");
  }
}

this is the check function and has been added so that we can see when the time is up or perhaps give a  warning when a particular amount of time has passed. We will change this function later when we know the code is working correctly. Next enter the Pad function.

function Pad(number)
{
if(number<10)
 number=0+""+number;
return number;
}

This function is used to format a number passed into it and put a leading zero in front of it if it is less that 10. The result of this function for the numbers between 0 and 10 would be "01,02,03,04,05,06,07,08,09". Next add the StartTimer function.

function StartTimer()
{
TimerRunning=true;
window.status="Time Remaining "+Pad(mins)+":"+Pad(secs);
oMins.value = mins
oSecs.value = secs
TimerID=self.setTimeout("StartTimer()",1000);
Check();
if(mins==0 && secs==0)
 StopTimer();
if(secs==0)
 {
 mins=mins-1;
 secs=60;
 }
 secs=secs-1;
}

In this function we set the TimerRunning variable to true, then using the window.status command we display the value of the timer in the status bar of the browser. Next we store the value of the JavaScript variables mins and secs back into the DataCollection mins and seconds variables so that they can be seen by the user. Next we start the timer and tell the timer to run the StartTimer function every 1000 milliseconds. Next we have the check function this goes a ahead and checks to see if the amount of time the timer should be running for has exceeded.

And finally we have the code that adjusts the mins and secs values. So if the value of the Secs variable is equal to 0, the mins variable gets deducted by one and the seconds reset to 60 otherwise we take one of the secs variable.

The last thing we need to do to get this to work is to add the following to the body tag of our template. This makes sure that when the template has been loaded the timer is started.

If your code is correct you should see that when you run your survey the numbers in the mins and secs questions get decremented every second and when 0 is reached you get a message box that says "TIME UP".

Now that we have that working we can make the next changes. So the idea of this article is to , when a certain time has been reached the next button is hit so what we need to do is firstly make all the questions have a No Answer option so that they can be skipped. To do that we will add an "NA" onto each question like this.

Q1 "Q1"
    categorical [1..1]
    {
        A "A",
        B "B",
        C "C",
        D "D",
        E "E",
        F "F",
        TimeRunOut "Time Run Out" NA
    };

Next we will add the code in the routing to allow us to skip answering the questions. We will do this at the global level using the IOM object. Add the following to the top of your routing,

IOM.MustAnswer = false

and then in your template, where we have the alert("TIME UP"); code we will replace that with the following.

//alert("TIME UP");
var oItem = document.getElementById('_NNext');
oItem.click();

Now when we run the script we will see that after the 10 second countdown has been completed the next button will be hit and the respondent will be moved onto the next question. You should note as well that if you removed the previous button they would not be able to move back so with this feature you could create some sort of timed test if you wanted.

The full code for this article can be found in :
http://CodeCorner.SmaterDimensions.Com @ Auto skip to next question after time limit