HTML or PHP code for timeline over several pages

Question

Hi,
I would like to have a timeline displayed ( in the upper right corner) that measures time over several pages and shows the subjects how long they have been working on the questionnaires. It should NOT be a countdown, but start from 0 seconds. Can you please give me the HTML or PHP code for this? And is this technically possible at all?

Thanks a lot in advance.

Answer 1

Please use the code for the countdown, remove that part

  // Is the time up?
  if (remain <= 0) {
    remain = 0;
    // Stop the timer
    window.clearInterval(timerInterval);
    // Display a message (optional)
    alert(„The time is up.“);
    // Redirect the participant to the next page (optional)
    SoSciTools.submitPage();
  }

change timeLeftso that the questionnaire provides the time when the timer started, that is in PHP code

// Save the start time into the variable $timestart
if (!isset($timestart)) {
  $timestart = time();
  registerVariable($timestart);
}

this together with that

// JavaScript to display timer
$timeGone = time() - $timestart;
// Instead of JS01 the identifier of the text must be entered here
show('JS01', array(
  '%timeGone%' => $timeGone
));

And back in the JavaScript

var timeGone = %timeGone%;
...
var remain = timeGone + timePage;

You can rename "remain" throughout the script, but technically that should be it.

Comments

Thank you for your reply.
I used this HTML code now:
<!-- HTML-element to display the remaining time -->
<div id="timeDisplay" style="font-size: 200%; margin: 16px 0; text-align: center">&ndash;</div>
 
<script type="text/javascript">
<!--
 
// Get the remaining time from the php code
var timeStart = new Date();
 
// Refresh the time display and check whether the time is up
function updateCountdown() {
  // calculate the remaining time
  var now = new Date();
  var timePage = Math.floor((now.getTime() - timeStart.getTime()) / 1000);  // Time passed in seconds
 
 
  // Display the time
  var display = document.getElementById("timeDisplay");
  if (!display) {
    return;
  }
  while (display.lastChild) {
    display.removeChild(display.lastChild);
  }
  var minutes = Math.floor(remain / 60);
  var seconds = String(remain - 60 * minutes);
  if (seconds.length < 2) {
    seconds = "0" + seconds;
  }
  var displayText = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(displayText);
  display.appendChild(displayNode);
}
 
// Initialize
var timerInterval = window.setInterval(updateCountdown, 250);
updateCountdown();
 
var timeGone = %timeGone%;
...
var remain = timeGone + timePage;

// -->
</script>

And this PHP code:
// Save the start time into the variable $timestart
if (!isset($timestart)) {
  $timestart = time();
  registerVariable($timestart);
}

// JavaScript to display timer
$timeGone = time() - $timestart;
// Instead of JS01 the identifier of the text must be entered here
show('JS01', array(
  '%timeGone%' => $timeGone
));

But this error occured:
For the placeholder %timeGone% neither an input field was prepared with prepare_input(), nor a content was specified with replace().

AND:

The question with the identifier JS01 does not exist in the project.
--> What question do you refer to?

Thanks in advance.

---

> For the placeholder %timeGone% neither an input field was prepared with prepare_input(), nor a content was specified with replace().

This is the PHP code to embed the JavaScript into your page, not part of the JS code:

show('JS01', array(
  '%timeGone%' => $timeGone
));

When storing the JS code as JS01, and using this PHP code to embed it into the page, the placeholder will be replaced properly.

> The question with the identifier JS01 does not exist in the project.

You will have to replace the JS01 by the ID if the text (format "HTML code") in which you wrote the JS code.