New concepts for idle detection

[ghost]

Hi all!

1. feature-name

New concepts for idle detection

2. feature-description

I recently wrote some concepts, sketches, ideas to create an API or a way to find out how the user interacts with the page - reference here. So... I made a code that does what I'm saying and in this evaluation that can be inserted in the proposal here - reference here

3. Why? \Notes

1. I would like to contribute to this proposal.
2. I would be happy to help this proposal.
3. My algorithm is a timer, that is, the way the user uses the page according to a defined time.
   • In addition, all interactions are saved in localstorage. This allows, for example, to have a list of previous interactions. With this, it is possible to verify a pattern of behavior of the same type of user.
   • In addition I created a code snippet that creates a percentage, my idea is to check the quality of user interaction. My goal is to check the level of engagement of user interaction on the page.
   • In my algorithm it is possible to check the time the page takes to load as well.
4. I would like to unite two ideas in common: User Interact Api and Idle-Detection.

4. Source-code

var start=0, end;
const timeleft = 10;
const TimeExpect = 1;
const TimeExpectWait = 1;
const message= 'The time is over! User Interact Clicking A Button For A Set Time - timeExpect is: '

const UserInteractLocalStorage = (nameDef, value) => {
    localStorage.setItem(nameDef, value);
    return localStorage.getItem(nameDef);
}

const UserWaitForPageToLoad = () => {
    let timePageLoad = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart
    return UserInteractLocalStorage("timePageLoad", timePageLoad)
}

const UserInteractionForm = () => {
  $('.eform input').on('focus', function(e){
   start=Date.now()
  })
  $(document).on('submit','.eform', function(e){
    end=Date.now()-start;
    let number = start+end;
    console.log("Seconds filling the form", parseFloat(end/1000).toFixed(2) );
    UserInteractLocalStorage("InteractionByForm", number);
});
}

const downloadTimer = setInterval(() => {
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);

const progressBar = setInterval( () => {
  if(timeleft <= 0){
    clearInterval(downloadTimer);
  }
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
}, 1000);

// Timer
// add id Button 
// sample id: '#UserInteractClickingAButtonForASetTime' 
// var button = document.querySelector('button');
// add millisecond|second|minute|hour|day|month|week|year|month|start date|end date|time interval
// add document.getElementById('typeTime').innerText = returnData(typeTime);
// sample document.getElementById('millisecond').innerText = returnData(millisecond); ...etc

function Timer(mins, target, cb) {
    this.counter = mins * 60;
    this.target = target;
    this.callback = cb;
}
Timer.prototype.pad = function(s) {
    return (s < 10) ? '0' + s : s;
}
Timer.prototype.start = function(s) {
    this.count();
}
Timer.prototype.stop = function(s) {
    this.count();
}
Timer.prototype.done = function(s) {
    if (this.callback) this.callback();
}
Timer.prototype.display = function(s) {
    this.target.innerHTML = this.pad(s);
}
Timer.prototype.count = function(s) {
    const self = this;
    self.display.call(self, self.counter);
    self.counter--;
    const clock = setInterval(function() {
        self.display(self.counter);
        self.counter--;
        if (self.counter < 0) {
            clearInterval(clock);
            self.done.call(self);
        }
    }, 1000);
}

const UserInteractButton = (idButton, message, TimeExpect, TimeExpectWait, typeTimeIndex, EngagementLevelIndex) => {
  let button = document.querySelector(idButton)
  let element = document.createElement('div');
  element.setAttribute("id", "viewer");
  element.innerHTML = '';
  document.body.appendChild(element);
  let viewer = document.querySelector('#viewer');
  let getTimer = document.getElementById("viewer").value;
  console.log(getTimer);
  let EngagementLevel = ['new', 'low', 'medium', 'high', 'old']; //window.getDomainEngagementLevel => ‘new’, ‘low’, ‘medium’, ‘high
  let typeTime = ['minutes', 'seconds', 'milliseconds']
  button.addEventListener('click', function() {
    new Timer(TimeExpect, viewer, function() {
        if(TimeExpect==TimeExpectWait){ // timeType: minutes || seconds || milliseconds == TimeExpectWait
          console.log(message+TimeExpect+' '+typeTime[typeTimeIndex], 'EngagementLevel'+EngagementLevel[EngagementLevelIndex]);
          UserInteractLocalStorage('UserInteractButton', TimeExpectWait);
        }
    }).start();
});
}

// UserInteractButton('#UserInteractClickingAButtonForASetTime', message, TimeExpect, TimeExpectWait, 0, 1);
// UserInteractButton('#UserInteractClickingAButtonForASetTime', message, TimeExpect, TimeExpectWait, 0, 2);
// UserInteractButtonn('#UserInteractClickingAButtonForASetTime', message, TimeExpect, TimeExpectWait, 0, 3);
// UserInteractButton('#UserInteractClickingAButtonForASetTime', message, TimeExpect, TimeExpectWait, 0, 4);
// UserInteractButton('#UserInteractClickingAButtonForASetTime', message, UserWaitForPageToLoad(), TimeExpectWait, 0, 4);
UserInteractButton('#UserInteractClickingAButtonForASetTime', message, TimeExpect, TimeExpectWait, 0, 0);

5. References

• https://web.dev/idle-detection/
• https://chromestatus.com/feature/4590256452009984
• https://github.com/raphael-louis-andress/api.wicg.user.interact
• https://wicg.github.io/idle-detection/

[reillyeon]

I think that this is essentially a duplicate of #36. The Idle Detection API is strictly focused on detecting user interaction when a page is not focused.

[ghost]

@reillyeon Hi! How are you? So... thank you for feedback. But... what did you think of this code?