This problem can be broken down into 3 smaller ones:
1. How to store the information you need to track.
You need to track at least two things:
a. The time that the participant started.
I suggest using a numeric story variable to do this, eg.$started
b. The name of each Passage they visited and the time spent viewing that passage.
I suggest using an Array of Generic Object instances, where each Generic Object represnts a Passage visited.
The code to define these story variabes within your project's StoryInit special passage would look something like the following.
<<set $history to []>>
<<set $started to 0>>
2. How to update the story variables.
There is a special passage named PassageReady whos contents gets processed after each Passage Transition, you can use code like the following in it to update the above variables.
/* Note: time is measured in the number of milliseconds since Unix Epoch. (January 1, 1970 00:00:00 UTC) */
/* Update the time of the previous history record if there is one. */
<<if $history.length gt 0>>
<<set $history.last().time to Date.now()>>
<<else>>
/* Record the time the first passage was shown. */
<<set $started to Date.now()>>
<</if>>
/* Add current passage's history record to the array, unless it has a 'no-history' passage tag. */
<<if not tags().includes('no-history')>>
<<set $history.push({
"passage": passage(),
"time": 0
})>>
<</if>>
The Generic Object being added (pushed) to the $history Array consists of two properties:
passage - used to store the Name of the current passage being shown.
time - number of elapsed milliseconds, starts as zero but is updated when the next passage is shown.
The above code example uses a number of features of SugarCube and JavaScript:
<array>.length; <array>.last(); Date.now(); tags(); <array>.includes(); not operator; <array>.push(); and passage()
3. How to determine then number of seconds between each history record.
This can further be broken for into 2 sub-parts:
a. How to calculate the number of seconds between to millisecond values.
The following JavaScript defines a setup.toSeconds() function which accepts two millisecond values and returns the number of whole seconds between then. This code should be placed within your project's Story Javascript area.
setup.toSeconds = function (from, to) {
/* Determine the number of milliseconds between the two times. */
var milliseconds = from - to;
/* Convert the milliseconds into whole seconds, trancating any remainding time. */
var seconds = Math.abs(Math.trunc(milliseconds / 1000));
return seconds;
};
The above code example uses a two JavaScript features: Math.trunc() and Math.abs()
b How to loop through the history records to display their contents.
note: The Passage containing the following code should be assigned a no-history Passage Tag so that it is exclude from the history tracking.
History:
\<<nobr>>
<<set _last to $started>>
<<for _event range $history>>
<br>Passage: <<= _event.passage>>, Seconds: <<= setup.toSeconds(_last, _event.time)>>.
<<set _last to _event.time>>
<</for>>
<</nobr>>
The _last variable is initially assigned the time that the participant started and then later updated to be the time associated with the previously displayed history record, doing this allows the calculation of the elapsed seconds between each point in time.