Detect a change of browser tab by end user

DaveB56 · **Posted:** September 11th, 2017, 4:22 pm

Is there anyway an HTML5 publications could have some code in it to detect if an end user changes to a different browser tab, or moves the focus elsewhere while running through a training course on line.

It would be helpful if I could get this information as multi-tasking while trying to complete training often leads to poor quality training and end user dissatisfaction.

Any ideas would be welcome?

Dave B

mackavi · **Posted:** September 11th, 2017, 9:21 pm

Code:

document.hasFocus()

</mack>

DaveB56 · **Posted:** September 11th, 2017, 9:38 pm

Yes, I found a reference to that on the internet but I don't understand how it works Mack,

I presume i would put it as a java script action on each page, but how would it tell me if they have clicked on another browser? Would it return value to be saved into a variable so that I can see it in the saved data?

Bob

DaveB56 · **Posted:** September 11th, 2017, 10:00 pm

Just to clarify Mack, I want to know if at the end of running the timeline have they gone to another tab to do something else, or if they have gone to another tab between the end of the timeline and clicking on the "Next" button.

If the returned value is placed into a variable it would show me how many times they have gone from the training course to another programme in another tab. I don't want to know anything else other than how many times they are leaving the course and returning.

mackavi · **Posted:** September 12th, 2017, 5:54 am

Code:

//set sariables when application starts
//probably need these as publication variables if used on mutliple pages.

myCurrentState = document.hasFocus();
myChangeStateCounter = 0;


//call this function when you need to check if the state has switched.
//for example, you may use a page ticker or you could check on the timeline.
//function must be avialable on each page.

function checkState(){

//assign current state to temp variable
tmpState = document.hasFocus()

//check if current state matches previous checked state
if (myCurrentState != tmpState ){
   //if state has switched from previous, assign new state.
   myCurrentState = tmpState;
   //increment state counter to show number of changes.
   myChangeStateCounter++;
   }
}

</mack>

DaveB56 · **Posted:** September 16th, 2017, 1:16 pm

Thanks for posting Mack. I'm gradually working through this with some success. Now just think of the best way to run the scripts to detect the browser tab changes during the training session. Will come back again if I need some help.

Digital Workshop

Detect a change of browser tab by end user

Who is online