As I said in your other post, you will need to use a cookie to keep track of the allowed time.
1) Download js.cookie.js and place it in your template directory.
-
github.com/js-cookie/js-cookie
2) Add this to the <head> element in startpage.pstpl after the {TEMPLATEJS} placeholder:
<script type="text/javascript" src="{TEMPLATEURL}js.cookie.js"></script>
3) Run the survey in group-by-group mode (you can place single questions in a group).
4) Enable the survey index in "Full" mode.
5) Place this in template.css to hide the index (this is for a copy of the default template):
.outerframe.withindex {
margin: 0 !important;
}
#index {
display: none !important;
}
6) Place this in template.js (this is for a copy of the default template):
//@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;
}
7) Place this script in the source of a question where you want to initiate and run the timer. In this example, the timer will run for 30 seconds and then jump the survey to group 4.
<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>
8) Place this script in the source of every other question where simply want to run the timer. In this example, the survey will jump to group 4 when the allowed time expires.
<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>
Sample survey and template attached (install the template before importing the question: