<script type="text/javascript" src="{TEMPLATEURL}js.cookie.js"></script>

.outerframe.withindex {
    margin: 0 !important;
}
 
#index {
  display: none !important;
}

//@name      | initiateTimer
//@author    | Tony Partner
//@editor    | Tony Partner
//@updated_at  | 21/07/2018 16:00:00
//@description  | A function to initiate a cookie-based timer
 
function initiateTimer(allowedTime) {
  // Set the cookie
  var sid = $('input#fieldnames').val().split('X')[0];
  Cookies.set('ls_g_time_'+sid, allowedTime-1, { expires: 365, path: '/' });
}
 
//@name      | runTimer
//@author    | Tony Partner
//@editor    | Tony Partner
//@updated_at  | 21/07/2018 16:00:00
//@description  | A function to run the timer
 
function runTimer(jumpToGroup) {
 
  // Define some vars
  var timerDisplayText = 'Time remaining in this question set:';  // Text in the active timer display
  var hourText = ' hours: ';    // Text appended to hours
  var minuteText = ' minute: ';  // Text appended to minutes
  var secondText = ' seconds';  // Text appended to seconds
 
  var sid = $('input#fieldnames').val().split('X')[0];
  var gid = $('input#fieldnames').val().split('X')[1];
  var lastGroupID = $('#index ol:eq(0) li:eq('+(jumpToGroup-1)+')').attr('data-gid');
  var currentTime = Cookies.get('ls_g_time_'+sid);
 
  // Insert the timer display element
  $('#progress-wrapper').after('<div class="g-timer-display-wrapper" style="border: 1px solid #BBC6CC; width: 200px; margin: 10px auto;">\
                      <div class="g-timer-display-text">'+timerDisplayText+'</div>\
                      <div class="g-timer-display-value"></div>\
                    </div>');
 
  // A function to update the timer display
  function updateTimerDisplay() {
    var displayTime = parseTime(Cookies.get('ls_g_time_'+sid), true, hourText, minuteText, secondText);
    $('.g-timer-display-value').text(displayTime);
  }
  updateTimerDisplay();
 
  // Interval timer
  var gInterval = setInterval(function(){gTimer()}, 1000);
  function gTimer() {
    if(currentTime != 0) { // Update timer cookie and display
      currentTime--
      Cookies.set('ls_g_time_'+sid, currentTime, { expires: 365, path: '/' });
      updateTimerDisplay();
    }
    if(currentTime == 0) { // Stop interval and advance survey
      gTimerStop();
      $('.g-timer-display-wrapper').removeClass('bg-primary').addClass('bg-warning');
 
      // Click on the index
      if(lastGroupID != gid) {
        $('#index li[data-gid="'+lastGroupID+'"]').trigger('click');
      }
    }
  }  
  function gTimerStop() {
    clearInterval(gInterval);
  } 
}
 
//@name      | parseTime
//@author    | Tony Partner
//@editor    | Tony Partner
//@updated_at  | 21/07/2018 16:00:00
//@description  | A function to parse the remaining time
 
var parseTime = function(totalSeconds, showHours, hourText, minuteText, secondText) {
  var hours   = Math.floor(totalSeconds / 3600);
  var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
  var seconds = totalSeconds - (hours * 3600) - (minutes * 60);
 
  // Round seconds
  seconds = Math.round(seconds * 100) / 100
 
  var result = '';
  if(showHours) {
     result += (hours < 10 ? "0" + hours : hours)+hourText;
  }
  result += (minutes < 10 ? "0" + minutes : minutes)+minuteText;
  result += (seconds  < 10 ? "0" + seconds : seconds)+secondText;
  return result;
}

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    // Initiate the timer with allowed time in seconds
    initiateTimer(30);
 
    // Run the timer with the group number to jump to on time expiration
    runTimer(4);
  });
</script>

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    // Run the timer with the group number to jump to on time expiration
    runTimer(4);
  });
</script>