JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<input type="text" id="exseconds" />
<div id="output-div"></div>

<article id="1"><a class="title" href="#message" id="Exhibit1">Exhibit 1</a></article>
    <article id="2"><a class="title" href="#shareFile" id="Exhibit2">Exhibit 2</a></article>
    <article id="3"><a class="title" href="#arrange" id="Exhibit 3">Exhibit3</a></article>

CSS

.exactive {
}

JavaScript

//timer
var exhibitLaptime=1;
//interval var
var t;
//on/off boolean
var timer_is_on=0;


function timedCount()
{
document.getElementById('exseconds').value=exhibitLaptime;
exhibitLaptime=exhibitLaptime+1;
t=setTimeout("timedCount()",1000);

}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}

function prePageTransition(){
    //before we transition, log previous page and time
    //if time is greater than 2 seconds we log it
    if (exhibitLaptime >5){
        //replace with local storage update
    document.getElementById('output-div').innerHTML = "You spent " + exhibitLaptime + " seconds on " + article;
        
        
    }
    //stop counting and reset
    stopCount();
    exhibitLaptime=1;
    }
    
function postPageTransition(){
    //after we transition start a new timer
    //alert("START");
    doTimer();
    
}

$(document).ready(function() {

    $('article').click(function () {
        jQuery(this).toggleClass("exactive");
      //simulate the pagetransition events in mobile framework
        if(jQuery(this).hasClass("exactive")){
         prePageTransition()  ;
        postPageTransition()  ;
        article = $(this).find("a").html();   
        } else {
        stopCount(); 
            prePageTransition()  ;
            saveEventRecord()  ;
        }
    });
});