%% BioMed_Central_Tex_Template_v1.06
%%                                      %
%  bmc_article.tex            ver: 1.06 %
%                                       %

%%IMPORTANT: do not delete the first line of this template
%%It must be present to enable the BMC Submission system to
%%recognise this template!!

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                     %%
%%  LaTeX template for BioMed Central  %%
%%     journal article submissions     %%
%%                                     %%
%%          <8 June 2012>              %%
%%                                     %%
%%                                     %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                                                 %%
%% For instructions on how to fill out this Tex template           %%
%% document please refer to Readme.html and the instructions for   %%
%% authors page on the biomed central website                      %%
%% http://www.biomedcentral.com/info/authors/                      %%
%%                                                                 %%
%% Please do not use \input{...} to include other tex files.       %%
%% Submit your LaTeX manuscript as one .tex document.              %%
%%                                                                 %%
%% All additional figures and files should be attached             %%
%% separately and not embedded in the \TeX\ document itself.       %%
%%                                                                 %%
%% BioMed Central currently use the MikTex distribution of         %%
%% TeX for Windows) of TeX and LaTeX.  This is available from      %%
%% http://www.miktex.org                                           %%
%%                                                                 %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%% additional documentclass options:
%  [doublespacing]
%  [linenumbers]   - put the line numbers on margins

%%% loading packages, author definitions

%\documentclass[twocolumn]{bmcart}% uncomment this for twocolumn layout and comment line below
\documentclass{bmcart}

%%% Load packages
%\usepackage{amsthm,amsmath}
%\RequirePackage{natbib}
%\RequirePackage[authoryear]{natbib}% uncomment this for author-year bibliography
%\RequirePackage{hyperref}
\usepackage[utf8]{inputenc} %unicode support
\usepackage{pifont} %extra symbols
\usepackage{graphicx}
\usepackage{multirow}
%\usepackage[applemac]{inputenc} %applemac support if unicode package fails
%\usepackage[latin1]{inputenc} %UNIX support if unicode package fails
\usepackage[acronym]{glossaries}  % no section option
%\loadglsentries{glossaries}
\newacronym{POI}{POI}{point of interest}
\newacronym{AdELE}{AdELE}{Adaptive E-Learning via the Eye Tracking}
\newacronym{ESA}{ESA}{Eye tracking based emphatic software agent}
\newacronym{e5Learning}{e5Learning}{Enhanced exploitation of eyes for effective e-learning}
\newacronym{AeLS}{AeLS}{Eye tracking based adaptive  and  personalized  e-Learning  Systems}
\newacronym{Protus}{Protus}{programming tutoring system}
\newacronym{LMS}{LMS}{learning management system}
\newacronym{OGAMA}{OGAMA}{Open Gaze and Mouse Analyzer}
\newacronym{DOM}{DOM}{document object model}
\newacronym{API}{API}{application programming interface}
\newacronym{HTML}{HTML}{Hyper Text Markup Language}
\newacronym{XML}{XML}{Extensible Markup Language}
\newacronym{UI}{UI}{user interface}
\newacronym{HTTP}{HTTP}{hyper text transfer protocol}
\newacronym{kB}{kB}{kilobyte}
\newacronym{kBps}{kBps}{kilobytes per second}
\newacronym{MB}{MB}{megabyte}
\newacronym{MBps}{MBps}{megabyte per second}
\newacronym{GB}{GB}{gigabyte}
\newacronym{TB}{TB}{terabyte}
\newacronym{Hz}{Hz}{hertz}
\newacronym{GHz}{GHz}{gigahertz}
\newacronym{CSS}{CSS}{cascading style sheets}
\newacronym{NPM}{NPM}{Node Package Manager}
\newacronym{MVT}{MVT}{model-view template}
\newacronym{MVC}{MVC}{model-view controller}
\newacronym{ROI}{ROI}{region of interest}
\newacronym{CPU}{CPU}{central processing unit}
\newacronym{RAM}{RAM}{random access memory}
\makeglossaries

\usepackage{listings}
\lstset{
frame=single
}
\definecolor{darkpastelgreen}{rgb}{0.01, 0.75, 0.24}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                             %%
%%  If you wish to display your graphics for   %%
%%  your own use using includegraphic or       %%
%%  includegraphics, then comment out the      %%
%%  following two lines of code.               %%
%%  NB: These line *must* be included when     %%
%%  submitting to BMC.                         %%
%%  All figure files must be submitted as      %%
%%  separate graphics through the BMC          %%
%%  submission process, not included in the    %%
%%  submitted article.                         %%
%%                                             %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%


%\def\includegraphic{}
%\def\includegraphics{}



%%% Put your definitions there:
\startlocaldefs
\endlocaldefs


%%% Begin ...
\begin{document}

%%% Start of article front matter
\begin{frontmatter}

\begin{fmbox}
\dochead{Research}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% Enter the title of your article here     %%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\title{Using Real-Time Online Preprocessed Mouse Tracking for Lower Storage and Transmission Costs}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% Enter the authors here                   %%
%%                                          %%
%% Specify information, if available,       %%
%% in the form:                             %%
%%   <key>={<id1>,<id2>}                    %%
%%   <key>=                                 %%
%% Comment or delete the keys which are     %%
%% not used. Repeat \author command as much %%
%% as required.                             %%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\author[
   addressref={aff1},                   % id's of addresses, e.g. {aff1,aff2}
   corref={aff1},                       % id of corresponding address, if any
   noteref={n1},                        % id's of article notes, if any
   email={fajarpurnama@ieee.org}   % email address
]{\inits{FP}\fnm{Fajar} \snm{Purnama}}
\author[
   %addressref={aff1,aff2},
   addressref={aff1},
   email={tuie@cs.kumamoto-u.ac.jp}
]{\inits{TU}\fnm{Tsuyoshi} \snm{Usagawa}}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% Enter the authors' addresses here        %%
%%                                          %%
%% Repeat \address commands as much as      %%
%% required.                                %%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\address[id=aff1]{%                           % unique id
  \orgname{Graduate School of Science and Technology, Kumamoto University}, % university, etc
  \street{2 Chome-39-1, Kurokami, Chuo Ward},                     %
  \postcode{860-8555}                                % post or zip code
  \city{Kumamoto},                              % city
  \cny{JP}                                    % country
}
%\address[id=aff2]{%
%  \orgname{Marine Ecology Department, Institute of Marine Sciences Kiel},
%  \street{D\"{u}sternbrooker Weg 20},
%  \postcode{24105}
%  \city{Kiel},
%  \cny{Germany}
%}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% Enter short notes here                   %%
%%                                          %%
%% Short notes will be after addresses      %%
%% on first page.                           %%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{artnotes}
%\note{Sample of title note}     % note to the article
\note[id=n1]{Equal contributor} % note, connected to author
\end{artnotes}

\end{fmbox}% comment this for two column layout

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% The Abstract begins here                 %%
%%                                          %%
%% Please refer to the Instructions for     %%
%% authors on http://www.biomedcentral.com  %%
%% and include the section headings         %%
%% accordingly for your article type.       %%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{abstractbox}

\begin{abstract} % abstract
%\parttitle{First part title} %if any
%Text for this section.

%\parttitle{Second part title} %if any
%Text for this section.

Pageview is the most popular webpage analytic metric in all sectors including blogs, business, e-commerce, education, entertainment, research, social media, and technology. To perform deeper analysis, additional methods are required such as mouse tracking, which can help researchers understand online user behavior on a single webpage. However, the geometrical data generated by mouse tracking are extremely large, and qualify as big data. A single swipe on a webpage from left to right can generate a \gls{MB} of data. Fortunately, the geometrical data of each x and y point of the mouse trail are not always needed. Sometimes, analysts only need the heat map of a certain area or perhaps just a summary of the number of activities that occurred on a webpage. Therefore, recording all geometrical data is sometimes unnecessary. This work introduces preprocessing during real-time and online mouse tracking sessions. The preprocessing that is introduced converts the geometrical data from each x and y point to a region-of-interest concentration, in other words only heat map areas that the analyzer is interested in. Ultimately, the approach used here is able to greatly reduce the storage and transmission cost of real-time online mouse tracking.

\end{abstract}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% The keywords begin here                  %%
%%                                          %%
%% Put each keyword in separate \kwd{}.     %%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{keyword}
\kwd{mouse tracking}
\kwd{online}
\kwd{real-time}
\kwd{preprocess}
\kwd{storage cost}
\kwd{transmission cost}
\kwd{geometrical data}
\kwd{region of interest}
\kwd{webpage}
\kwd{big data}
\end{keyword}

% MSC classifications codes, if any
%\begin{keyword}[class=AMS]
%\kwd[Primary ]{}
%\kwd{}
%\kwd[; secondary ]{}
%\end{keyword}

\end{abstractbox}
%
%\end{fmbox}% uncomment this for twcolumn layout

\end{frontmatter}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% The Main Body begins here                %%
%%                                          %%
%% Please refer to the instructions for     %%
%% authors on:                              %%
%% http://www.biomedcentral.com/info/authors%%
%% and include the section headings         %%
%% accordingly for your article type.       %%
%%                                          %%
%% See the Results and Discussion section   %%
%% for details on how to create sub-sections%%
%%                                          %%
%% use \cite{...} to cite references        %%
%%  \cite{koon} and                         %%
%%  \cite{oreg,khar,zvai,xjon,schn,pond}    %%
%%  \nocite{smith,marg,hunn,advi,koha,mouse}%%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%% start of article main body
% <put your article body there>

%%%%%%%%%%%%%%%%
%% Background %%
%%

\section*{Introduction}

We are living in the age of information where information and communication technologies are becoming mainstream \cite{informationagewiki}. Computers and the Internet have become inseparable from our daily lives. It is now possible to do many things without the need to travel and wait; examples include, long-distance communication through online text, voice and video calls, social interaction via social media, online learning, ecommerce or online shopping, and many forms of entertainments such as online music, online videos, and online games. Most importantly, the Internet has become the primary source of information around the world. 

Online analytics has become a major area of interest because it enables the study of users’ online behaviors. These include, users' attentions and, students' performance in online learning. Businesses also use online analytics to capture consumers’ interests in ecommerce, web design and evaluation, etc. Most websites today, use traditional web analytics such as page views, hits, and top exit pages \cite{bluehost2016web}. However, for interactional analysis, further metrics are required. For example, traditional web metrics cannot tell where a user is directing his or her attention or how much interaction has occurred on a web page. In other words, pageview can determine what, when, who, and (to a limited extent) where a user is viewing, but it cannot determine which part of the webpage (the more detailed "where") and how a user is viewing it \cite{purnama2016introductory}.

The best method available today for measuring user attention is eye tracking \cite{pernice2017f}. This method tracks eye ball movements to determine where the user is gazing. The most fundamental aspects of eye movements are fixation and saccade, where fixation is the process of fixing the gaze to a certain \gls{POI}, and saccade is the process of moving the gaze to another POI \cite{holmqvist2005role}. This method has been implemented in many fields, mainly in computer science, engineering, education, medicine, and psychology. However today, eye tracking requires expensive and specialized hardware that is not suitable for wide implementation \cite{lai2013review}. 

Although eye tracking remains a tool for the laboratory, an alternative method has been invented, mouse tracking \cite{cooke2006mouse}. Instead of eye movements, mouse tracking tracks mouse movements and other helpful events. The fundamental strategy of mouse tracking is the recording of mouse clicks, mouse movements, and scrolls. Eye and mouse tracking have been implemented in the fields of education \cite{barrios2004adele} \cite{zushi2012web}, reading patterns \cite{drusch2011gaze}, search engines \cite{huang2011no}, visual navigation \cite{manson2012using}, web evaluation and usability \cite{hsu2018peer} \cite{arroyo2006usability}. Mouse tracking can be treated either independently \cite{navalpakkam2012mouse} or as a correlation to eye tracking \cite{rodden2008eye} in other words, as replacement. 

The biggest problem with default mouse tracking (as well as eye tracking) is the huge volume of data generated, which can be categorized as big data \cite{hariri2019uncertainty} \cite{barrachina2014big}. This high volume is due to the use of geometrical data where each event that occurs on each point of the webpage is recorded. If the distance between left and right is 1000 pixels, then a swipe from left to right will generate 1000 rows of tables. However, analyst may not need all of the mouse tracking data that is generated. Therefore, this paper proposes preprocessing the data based on the analyst's needs. The preprocessing in this case determines the region of interest in other words; which area the tracking should capture rather than capturing each point of interest. Furthermore, the preprocessing is conducted not only online, but also in real-time mouse tracking session.

\section*{Related Work}

\subsection*{Implementations of Eye and Mouse Tracking}

The use of eye \cite{rayner1998eye} and mouse \cite{mueller2001cheese} tracking began in the early 20th century, and since then, there have already been many laboratory experiments conducted using these technologies. Today, there are many attempted implementations of eye and mouse tracking, but it is unclear how widespread and long-running they are. For eye tracking, there is no chance of implementation outside laboratory unless one of two requirements is met: (1) affordable and mainstream hardware \cite{lai2013review} or (2) optimal usage of web cameras \cite{sungkur2016eye} \cite{zheng2018rapid} on laptops and/or cameras on smartphones. By contrast, widespread implementation of mouse tracking is already possible because the required hardware is available by default in all computers and smartphones, but the problem is the generation of big data (the same is true of eye tracking as well).

The following are selected attempts at implementation eye tracking:

\begin{itemize}
    \item \gls{AdELE} frame-work, adaptive, integrated, and real-time eyetracking during e-learning processes \cite{barrios2004adele} \cite{pivec2006eye}.
    \item \gls{ESA}, an eye tracking software that captures the state of awareness of the learners and responds accordingly \cite{wang2006empathic}.
    \item \gls{e5Learning} \cite{calvi2008e5learning}.
    \item \gls{AeLS} \cite{wei2009sensing}.
    \item Eye tracking based \gls{Protus} \cite{ivanovic2017integration}.
\end{itemize}

The following are selected attempts at implementation mouse tracking:

\begin{itemize}
    \item A mouse tracking web application developed by Zushi et al. \cite{zushi2012web} for their own specific \gls{LMS}.
    \item Moodle LMS mouse tracking plugin \cite{rodrigues2013keystrokes} \cite{salmeron2014evaluation} \cite{harrati2016exploring}.
    \item Mouse tracking web browser plugin and client side programming script \cite{fpsubmitted} \cite{purnama2019github}.
\end{itemize}

Some commercial and open source software programs are as follows:

\begin{itemize}
    \item \gls{OGAMA}, an open-source software designed to analyze eye and mouse movements in slideshow study designs \cite{vosskuhler2008ogama}.
    \item Mousetrap, an integrated, open-source mouse-tracking package on OpenSesame for laboratory experiments \cite{kieslich2017mousetrap}.
    \item Known commercial applications: Lucky Orange, Hotjar, Crazy Egg, Fullstory, Ptengine, Heatmap.com, Smartlook, ContentSquare, SessionCam, Seevolution, Capturly, Inspectlet, MouseFlow, Clicktale, and Tamboo \cite{top15heatmap2019}.
\end{itemize}

\subsection*{Mouse Tracking in Web Development} \label{Mouse Tracking in Web Development}
\textcolor{blue}{
The core of mouse tracking in web development is \gls{DOM} which is an \gls{API} for \gls{HTML} and \gls{XML}. It defines the logical structure of documents and the way a document is accessed and manipulated. Supposed a simple HTML page with the codes on Table \ref{tab:hello-world-html}, the DOM structure can be represented on Figure \ref{fig:hello-world-dom}. With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions. DOM is designed to be used with any programming language. Currently, it provides language bindings for Java and ECMAScript (an industry-standard scripting language based on JavaScript and JScript) \cite{wood1998document}.}

% Please add the following required packages to your document preamble:
% \usepackage{graphicx}
\begin{table}[]
\centering
\caption{A web page code in simple HTML that contains html, head, title, body, p, and footer tags.}
\label{tab:hello-world-html}
\begin{lstlisting}[]
<html>
    <head>
        <title>Simple Webpage</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
    <footer>
        <p>CC</p>
    </footer>
</html>
\end{lstlisting}
\end{table}

\begin{figure}[h!]
  \includegraphics[width=0.9\textwidth]{htmldom.png}
  \caption{\csentence{DOM representation of Table \ref{tab:hello-world-html}.}
The html tag is the parent with head, body, and footer tag as the children. Head has a child tag title, body has a child tag p, and footer has a child tag p.}
  \label{fig:hello-world-dom}
\end{figure}

\textcolor{blue}{
The implementation of mouse tracking is based on DOM events, specifically mouse, touch, and \gls{UI} events which are actions that occurs as a result of the user's mouse actions or as result of state change of the user interface or elements of a DOM tree \cite{pixley2000document}. Our previous work \cite{fpsubmitted} uses jQuery to access the DOM API and receives information that are related to mouse, touch, and UI events. They can be stored into default dynamic variables or in an ArrayBuffer for enhanced performance. The list of events are as following:}

\begin{itemize}
    \item \textcolor{blue}{mousedown: when either one of the mouse buttons are pressed (usually left, middle, or right button)}
    \item \textcolor{blue}{mouseup: when either pressed mouse buttons are released}
    \item \textcolor{blue}{mousemove: when the mouse cursor moves}
    \item \textcolor{blue}{mouseleave: when the mouse leaves an element (we only indicate when temporary leaving a webpage)}
    \item \textcolor{blue}{mouseenter: when the mouse enters an element (we only indicate when temporary entering a webpage)}
    \item \textcolor{blue}{beforeunload: when the webpage almost closes}
    \item \textcolor{blue}{scroll: when the webpage scrolls}
    \item \textcolor{blue}{touchstart: when a computer device screen is touching}
    \item \textcolor{blue}{touchend: when a touch from touchstart is removed}
    \item \textcolor{blue}{touchmove: when a touch is moving}
    \item \textcolor{blue}{touchcancel: when a touch is interrupted}
    \item \textcolor{blue}{resize: when the webpage is zoomed in or out}
\end{itemize}

\textcolor{blue}{
The information is then processed by adding important labels such as the date of the received information and duration by calculating the difference between the current and previous received events. Finally the information is either stored locally or sent to a server using \gls{HTTP} post method. Traditionally, the information is transmitted all at once at the end of the session, but in our study \cite{fpsubmitted}, we found that it is better to transmit them in real-time without delay. The difference between offline, regular online, and real-time online mouse tracking is shown in Figure \ref{fig:msflowchart}}.

\begin{figure}[h!]
  \includegraphics[width=0.31\textwidth]{offlinemtflchrt.png}
  \includegraphics[width=0.31\textwidth]{onlinemtflchrt.png}
  \includegraphics[width=0.31\textwidth]{rtonlinemtflchrt.png}
  \caption{\csentence{Flow chart of traditional and current mouse tracking method \cite{fpsubmitted}.}
     The left flowchart is offline mouse tracking, the middle flowchart is regular online mouse tracking, and the right flowchart is real-time online mouse tracking.}
      \label{fig:msflowchart}
      \end{figure}
      
\subsection*{Default Eye and Mouse Tracking Generates Big Data}

Although eye and mouse tracking are not yet mainstream, rumors spread that due to large amounts of data generated, they could not be widely implemented other than at big corporations such as Google and Microsoft, which have gigantic data centers. University network and server administrators are hesitant to implement tracking technologies because they not only generate massive amounts of data, but also eye and mouse tracking are not replacements for existing systems but rather additions. Huang et al. \cite{huang2011no} performed a mouse tracking experiment on Bing's search engine and immediately reduced the sampling rate because the data were too large. 

Leiva and Huang \cite{leiva2015building} believed that a swipe could generate a megabyte of data and the authors further investigated and proved that rumor to be true. While a half-year of Moodle log data with approximately 40 students is only approximately 300 kilobytes (kB) \cite{usagawa2018effectiveness}, mouse tracking data and other event data generated by approximately 22 students reaches approximately 100 megabytes (MB) in only 2 hours \cite{fpsubmitted}, and that figure will double if eye tracking is included. Imagine how much data would be produced by a university with a large number of students if mouse tracking were running on its website for years. 

According to an article by Adekitan et al. \cite{adekitan2019data}, Nigerian University Internet traffic can reach terabytes (TB) in a week and is regarded as big data. The authors' previous mouse tracking session \cite{fpsubmitted} also reaches the same level of Internet traffic if over 100 students are present. Other than volume, mouse tracking met the other 5Vs criteria of big data \cite{hariri2019uncertainty}: velocity, the amount of data generated especially in real-time which is explained in further sections, veracity; meaning that data loss may often occur due to limited connectivity, which can lead to inconsistent data; variety, which is discussed in further sections and previous work \cite{fpsubmitted}; and value, which is discussed in the next paragraph.

It would be wise to start investing in eye and mouse tracking just as big companies today are investing in big data \cite{bughin2016big}, as the data generated by eye and mouse tracking are valuable. By analyzing big data, interesting information can be derived that gives us the knowledge needed to make optimal decisions \cite{husain2015socr}. Just as companies study customers' data to find opportunities to increase their revenues \cite{ahmad2019customer}, traders analyze historical trading data and current sentiments to find optimal positions \cite{sohangir2018big}, researchers study optimal prevention, diagnosis, and treatments in Medicare \cite{dash2019big}, and planners monitor smart cities \cite{bibri2019sustainability}, researchers can use eye and mouse tracking to identify online viewers' attention, behavior, their evaluation of web contents, etc.

\subsection*{Reducing Eye and Mouse Tracking Data}

During high-intensity activities, a user may generate an average of 70  or 70 events per second \cite{rheem2018use}, meaning that 70 rows per second will be generated on a table. The traditional way of reducing the size of these tracking data is by reducing the sampling rate \cite{huang2011no}. Furthermore, the sampling rate should be adaptive and not static. In other words, snapshots should only be taken when an event occurs such as when the mouse cursor moves or a click occurs, and snapshots should not be taken during idle sessions. Performing transmission in real-time helps distribute the transmission burden across time, avoiding bottlenecks. In other words, the tracking data are immediately transmitted to the server at each event occurrence rather than transmitting the mouse tracking data all at once at the end of the session. Compression methods can also be utilized as demonstrated in Leiva and Huang's work \cite{leiva2015building}, but their transmission method is still likely not real-time and is suspected to transmit the compressed tracking data all at once in the end of each session.

On the other hand, the preprocessing technique presented in this paper is designed to work in real-time. Not only does it reduce the data cost but also distributes the transmission burden across the time domain. The cause of the enormous data generation is the geometrical data or tracking of each location where the events occur, in other words the x and y coordinates. Tracking these coordinates provides rich data but sometimes all of that data is not needed. For example, Rodrigues et al. \cite{rodrigues2013keystrokes} only analyzed the amount of key up, key down, mouse down, mouse up, mouse wheel, and mouse movement to measure students' stress, and Li et al. \cite{li2017accessing} only needed the time spent on each page. In such cases, the geometrical data can be omitted. 

At other times, geometrical data are needed; however, it is not each precise x and y point that is needed but rather each area of the page (multiple points) \cite{koh2018experience}. Preprocessing is common in any data analysis to derive useful data prior to transmission and storage of the collected data. However, the preprocessing presented in this work is performed on the client before transmission and storage to reduce the server's burden. Unlike typical preprocessing which is performed to filter redundant data, the preprocessing in this work is specifically based on the demands of the administrators or analyzers; in this case, preprocessing omits the geometrical data or groups them to represent certain areas. This study is a complete work of one the author's previous works \cite{purnama2016demonstration}.

\section*{Method and Simulation}

\subsection*{System Overview}

\begin{figure}[h!]
  \includegraphics[width=0.9\textwidth]{onlnmstr.png}
  \caption{\csentence{System overview of mouse tracking data transaction \cite{fpsubmitted}.}
The framework is divided into two sides: one side is the client and the other side is the server. The client and the server are connected via the Internet. The webpage is in the server consisting of HTML, CSS, and JavaScript. The mouse tracking codes, which are event handling and capturing the command to post its data to the server, are inserted in the JavaScript section. When the client accesses the webpage, it will view the contents that consist of HTML and CSS. The mouse tracking codes within JavaScript are run in the background. The mouse tracking data are sent to the server and processed using server programming language, in this case PHP. Finally, the data are sent to the database; in this case, in SQL.}
  \label{fig:Realtime-Online-Mousetracking}
\end{figure}

The overall system is the same as in the authors’ previous work \cite{fpsubmitted} with the concept discussed in Subsection \ref{Mouse Tracking in Web Development}. In this section, the implementation of the concept to system is discussed. As shown on Figure \ref{fig:Realtime-Online-Mousetracking}, mouse and other event tracking are performed on the client. The tracking codes can be injected internally, for example, as a browser plugin, or externally, for example, where the codes are retrieved alongside the webpage content (\gls{HTML} and \gls{CSS}). Then, the client sends the tracking the data to the server to be stored. The code itself for this work is written in jQuery, which is a simpler coding format of JavaScript for \gls{DOM} manipulation. The external code can be written as a plugin if desired; for example, the authors wrote a Moodle plugin. The server side can be in any programming language, but in this work, PHP was used, and the database used MySQL. The codes are available on GitHub \cite{purnama2019github}.

\textcolor{darkpastelgreen}{
Each web framework may developed their own bindings to access the DOM API. However, the most fundamental implementation is still injecting the mouse tracking code into the script section no matter which web framework is used, which is the default option if the web framework did not developed their own bindings. Below is a list of few web frameworks:}

\begin{itemize}
    \item \textcolor{darkpastelgreen}{NodeJS is browser JavaScript made into server side programming language. Also, NodeJS is written based on the criticism in 2009 about how Apache HTTP server handled huge concurrent user, sequential programming, and blocking functions \cite{ornbo2012sams} while NodeJS is asynchronous and is designed to build scalable network application. Additionally, its runtime is built on Chrome's V8 Engine which implements C++ features such as hidden classes and inline caching to make JavaScript runs much faster \cite{v8engine}. The popular web framework for NodeJS is Express which is a fast, unopinionated, minimalist web framework for Node.js \cite{nodejsexpresswebpage}. The choice for implementing mouse tracking code can either be using developed module available on \gls{NPM}, use TypeScript, or the default option. TypeScript  is a typed superset of JavaScript developed by Microsoft that compiles to plain JavaScript. The advantage for developers are defining interface between software components, and interactive static checking and code refactoring during development \cite{typescript}. The default option is to call the scripts in the webpage layout which is usually written in Jade or Pug.}
    
    \item \textcolor{darkpastelgreen}{Django is a web framework written in Python that uses \gls{MVT} \cite{django}. Like Python almost every module is available, Django prides itself as a batteries-included framework, meaning that it comes with many modules unlike other frameworks, it is not necessary for a developer to write a module from a scratch. Although it is powerful for building huge web applications, the difficulty in building huge application doesn't change when building small applications. For mouse tracking, there is a choice to use Python modules but it is not yet known whether it can interact with the DOM elements in the webpage. Most documentation suggests to use vanilla JavaScript in Django.}
    
    \item \textcolor{darkpastelgreen}{Rails is a \gls{MVC} web framework written in Ruby. Its philosophies are "convention over control" and "don't repeat yourself" where in the 2000s introduced seamless database table creations, migrations, and scaffolding of views to enable rapid application development, even other web frameworks took ideas from Rails. There are few options other than JavaScript in implementing mouse tracking code which are coffee script (JavaScript coding made simpler) and jQuery which can be installed from Ruby's package manager GEM. They are one of the first to introduce unobtrusive JavaScript where it should not be mixed in the HTML file \cite{rails}.}
    
    \item \textcolor{darkpastelgreen}{Laravel is also an MVC web framework but written in PHP and based on Symfony. Laravel values elegance, simplicity, and readability. The mouse tracking code can be written in JavaScript and placed in the asset directory. Laravel Mix is the tool for compiling those assets but the default method is also available \cite{laravel}.}
    
    \item \textcolor{darkpastelgreen}{Spring is an application framework and inversion of control container for the Java platform. The framework's core features can be used by any Java application, but there are extensions for building web applications on top of the Java Enterprise Edition platform. Java is one of the earliest programming language used to make an application and it's still popular today. Java has its own bindings to connect to the DOM API.}
    
    \item \textcolor{darkpastelgreen}{ReactJS is a JavaScript library for building UI which are maintained by Facebook and community. Unlike the previous back-end web framework, ReactJS is a front-end web framework. ReactJS have its own mouse event library which is to be injected on each UI \cite{reactjsmouse}.}
    
    \item \textcolor{darkpastelgreen}{Angular is a complete rewrite to TypeScript based from the same team that built AngularJS. It is a web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. It is one of the most popular framework to build web applications on mobile. The mouse events can be added on the components or templates \cite{angular}.}
\end{itemize}

\subsection*{Three techniques of Mouse Tracking}

\begin{table}[h!]
\caption{Event monitoring difference between default mouse tracking, whole page tracking, and ROI tracking. Second to fourth row contains the three different method of mouse tracking, the first column are the events, and the rest marks whether the events are available on the mouse tracking method or not.}
\label{tab:event-default-vs-page-vs-roi}
\resizebox{\textwidth}{!}{%
\begin{tabular}{|c|c|c|c|}
\hline
\textbf{Events}        & \textbf{Mouse Tracking} & \textbf{Page Tracking} & \textbf{ROI Tracking} \\ \hline
\textbf{Duration}      & \ding{51}                       & \ding{51}                      & \ding{51}                     \\ \hline
\textbf{Click Left}    & \ding{51}                       & \ding{51}                      & \ding{51}                     \\ \hline
\textbf{Click Right}   & \ding{51}                       & \ding{51}                      & \ding{51}                     \\ \hline
\textbf{Click Middle}  & \ding{51}                       & \ding{51}                      & \ding{51}                     \\ \hline
\textbf{Mouse X}       & \ding{51}                       & X                      & Partial               \\ \hline
\textbf{Mouse Y}       & \ding{51}                       & X                      & Partial               \\ \hline
\textbf{Touch X}       & \ding{51}                       & X                      & Partial               \\ \hline
\textbf{Touch Y}       & \ding{51}                       & X                      & Partial               \\ \hline
\textbf{Keyboard Type} & \ding{51}                       & \ding{51}                      & \ding{51}                     \\ \hline
\textbf{Scroll X}      & \ding{51}                       & X                      & Partial               \\ \hline
\textbf{Scroll Y}      & \ding{51}                       & X                      & Partial               \\ \hline
\textbf{Other Events}  & \ding{51}                       & \ding{51}                      & \ding{51}                     \\ \hline
\textbf{Events Amount} & X                       & \ding{51}                      & \ding{51}                     \\ \hline
\end{tabular}
}
\end{table}

For convenience, the techniques of mouse tracking are divided into three types, as shown in Table \ref{tab:event-default-vs-page-vs-roi}. They are called default mouse tracking, whole page tracking, and \gls{ROI} tracking. The default mouse tracking precisely records the geometrical data of the event occurrence such as the horizontal x and vertical y of left clicks, right clicks, middle clicks, mouse movements, scrolls, zooms, and if desired keyboard types. The duration between each event is also measured. Whole page tracking omits the geometrical data and summarizes the number of left clicks, right clicks, middle clicks, mouse movements, scrolls, zooms, and if desired keyboard types that occurred on the webpage. In other words, the amount of activity is measured but not where or when it occurs, and only the total amount of time that the user spends on a webpage is recorded. The most complicated task is ROI tracking, which is a gray area between default mouse tracking and whole page tracking. ROI tracking defines the areas of a webpage to be tracked, for example how many left clicks, right clicks, middle clicks, mouse movements, scrolls, zooms, and keyboard types occurred and how long they occurred on a header, menu, content, footer, etc. This method is ideal because it meets the analyst's requirements and reduces unnecessary resource costs, but the drawback is the heavy labor required to manually define the areas of each webpage. \textcolor{red}{Automatic area definition is possible to certain degree. One way is by attaching "mouseenter" DOM event listener to every element and using "offset" DOM HTML to return the position of the element. Offset DOM HTML returns the left and top element distance from the outermost of the webpage, and by using "width" and "height" DOM HTML to calculate the element's size, it is possible to find the bottom and right as well. However, the limitation is that it cannot perform smart labelling where it can only extract attributes, texts, and values of the element.} An illustration comparing the three types of mouse tracking is shown in Figure \ref{fig:Single-Page-vs-Region-of-Interest-vs-Default-Mouse-Tracking-Illustration}.

  \begin{figure}[h!]
      \includegraphics[width=0.9\textwidth]{3mstr.png}
  \caption{\csentence{Whole page vs region of interest vs default mouse tracking illustration.}
      The left scroll illustrates whole page tracking that summarizes the number of events occurring on the whole page; the middle scroll illustrates ROI tracking that summarizes the number of events occurring in defined areas, and the right scroll illustrates default mouse tracking that records every event and the precise point where it occurs, forming a trajectory.}
      \label{fig:Single-Page-vs-Region-of-Interest-vs-Default-Mouse-Tracking-Illustration}
      \end{figure}

  \begin{figure}[h!]
  \includegraphics[width=0.24\textwidth]{dfmsflw.png}
  \includegraphics[width=0.25\textwidth]{smrmstrflw.png}
  \includegraphics[width=0.37\textwidth]{roimstrflw.png}
  \caption{\csentence{Three Types of Mouse Tracking Flowchart.}
     The left flowchart is default mouse tracking, the middle flowchart is whole page summarized mouse tracking, and the right flowchart is region of interest mouse tracking.}
      \label{fig:three-type-mouse-tracking-flowchart}
      \end{figure}

The flowchart for each implementation of real-time and online mouse tracking is shown in Figure \ref{fig:three-type-mouse-tracking-flowchart}. For default mouse tracking, the information on the event is transmitted to the database each time an event occurrs. For example, when a click occurs, the client immediately transmits the information on where and when it occurs. For whole page tracking, the information is summarized as the number of events that occurred, and they are transmitted to the server when the client closes the webpage. The size of the transmitted data is only slightly larger than that of transmitting single click data when using default mouse tracking. Last, for ROI tracking, the information on the webpage area is summarized and transmitted after the mouse cursor leaves the area, and the process repeats on each movement between areas until the webpage is closed.

\subsection*{Simulation}

The three mouse tracking method are tested on the client and server. Since the author lacks subjects to perform an implementation, a simulation based on previous mouse tracking data was conducted on the server. The mouse tracking data contain mouse tracking records from two quiz sessions in Moodle. They were conducted on the 3rd of January 2019 between approximately 12:00 and 14:30 Japan standard time. There are 2 sessions, with each session lasting approximately an hour and including 22 students (44 total students participating) from the School of Engineering and Applied Sciences, National University of Mongolia accessing the Moodle server at the Human Interface and Cyber Communication Laboratory, Kumamoto University. The data were preprocessed to exclude nonstudents and webpages other than the quiz page data. In other words, the simulation is purely a mouse tracking data transmission, which excludes most of the process, such as accessing the server and navigating the whole Moodle page. This approach shows lower resource consumption than the previous work \cite{fpsubmitted}.

  \begin{figure}[h!]
      \includegraphics[width=0.9\textwidth]{p2pills.png}
  \caption{\csentence{Peer to peer simulation illustration.} The client is a laptop connected via direct channel to the server. the mouse tracking data is sent in timely order from client to server, based on the real session.
}
      \label{fig:Peer-to-Peer-Illustration}
      \end{figure}

The setup can be seen in Figure \ref{fig:Peer-to-Peer-Illustration} where a laptop functioning as a client is peer to peer connected to a personal computer functioning as a server. The mouse tracking data are converted into page tracking and ROI tracking data based on Table \ref{tab:event-default-vs-page-vs-roi}. Three sessions were conducted: the first session was the sending of mouse tracking data to the server, the second session was the sending of page tracking data to the server, and the third session was the sending of ROI tracking data to the server. Since the mouse tracking data contain time interval information between the sending of each event, it is possible to capture the scenario almost exactly.

During these sessions, the data rate is observed, and the \gls{CPU} and \gls{RAM} usages are measured on the server. Figure \ref{fig:Peer-to-Peer-Illustration} shows that one laptop serves as a client to send the data to the server which is a personal computer. The client is an MSI Laptop with i7-7820 HK 2.9 \gls{GHz} x8 32 \gls{GB} RAM while the server is an i7-6850 HK 3.6 GHz x12 32 GB RAM personal computer and the peer to peer connection is a 10 \gls{MBps} network.

\textcolor{brown}{For the client testing, the author performs the quiz session recorded by mouse recording software GhostMouse in order to replay the exact mouse events for the three mouse tracking types and for different browsers. The testing time are short around a minute due to the limited profiling time of the browsers. The performance which is only the JavaScript total running time of four different browsers are measured:}

\begin{itemize}
    \item \textcolor{brown}{Chrome version 80.0.3987.132 that uses V8 Engine.}
    \item \textcolor{brown}{Firefox version 74.069 that uses SpiderMonkey Engine.}
    \item \textcolor{brown}{Microsoft Edge version 80.0.361.62 that uses Chakra.}
\end{itemize}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                               %%
%% Tables                        %%
%%                               %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%% Use of \listoftables is discouraged.
%%
%\section*{Tables}

\begin{table}[h!]
\centering
\caption{Example default mouse tracking data that can be seen in the database table. Column 1 - 3 are labels added using JavaScript, column 4 is the duration calculated from the difference between dates, and the rest of the columns are data retrieved from the DOM API.}
\label{tab:default-mouse-tracking-table}
\resizebox{\textwidth}{!}{%
\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|c|}
\hline
\textbf{ID} & \textbf{Name} & \textbf{Date 2019/3/01} & \textbf{Duration} & \textbf{Left Click} & \textbf{Right Click} & \textbf{Middle Click} & \textbf{Mouse X} & \textbf{Mouse Y} & \textbf{Scroll X} & \textbf{Scroll Y} \\ \hline
1 & Student 1 & 11:06:39 & 13.674 & false & false & false & 0 & 0 & 0 & 0 \\ \hline
2 & Student 1 & 11:06:39 & 0.002 & false & false & false & 1197 & 317 & 0 & 0 \\ \hline
... & ... & ... & ... & ... & ... & ... & ... & ... & ... & ... \\ \hline
286511 & Student 23 & 14:44:09 & 0.002 & false & false & false & 1009 & 179 & 0 & 0 \\ \hline
\end{tabular}%
}
\end{table}

\begin{table}[]
\centering
\caption{Transmission server resource cost of three mouse tracking technique simulations. The first row are the mouse tracking method labels, the second row are the resource metric, and the first column are the statistical metrics.}
\label{tab:simulation-statistic}
\resizebox{\textwidth}{!}{%
\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|}
\hline
\multirow{2}{*}{\textbf{Statistics}} & \multicolumn{3}{c|}{\textbf{Default Mouse Tracking Simulation}} & \multicolumn{3}{c|}{\textbf{ROI Tracking Simulation}} & \multicolumn{3}{c|}{\textbf{Whole Page Tracking Simulation}} \\ \cline{2-10} 
 & \textbf{CPU (\%)} & \textbf{RAM (MB)} & \textbf{Data Rate (kB)} & \textbf{CPU (\%)} & \textbf{RAM (MB)} & \textbf{Data Rate (kB)} & \textbf{CPU (\%)} & \textbf{RAM (MB)} & \textbf{Data Rate (kB)} \\ \hline
\textbf{Minimum} & 0 & 2.88 & 0 & 0 & 1.75 & 0 & 0 & 1.58 & 0 \\ \hline
\textbf{Maximum} & 86 & 3.66 & 228.45 & 12 & 1.92 & 46.8 & 26 & 2.12 & 2.07 \\ \hline
\textbf{Median} & 3 & 3.29 & 5.62 & 0 & 1.86 & 0 & 0 & 2.07 & 0 \\ \hline
\textbf{Average} & 21.34 & 3.25 & 28.23 & 0.87 & 1.85 & 2.28 & 0.05 & 2.06 & 0.01 \\ \hline
\textbf{Standard Deviation} & 29.09 & 0.25 & 36.8 & 1.24 & 0.06 & 5.05 & 0.46 & 0.04 & 0.08 \\ \hline
\end{tabular}%
}
\end{table}

\begin{table}[h!]
\centering
\caption{Example page tracking data that can be seen in the database table. Column 1 and 2 are labels added using JavaScript, column 3 is the duration calculated from the difference between dates, and the rest of the columns are total value of data retrieved from the DOM API.}
\label{tab:page-tracking-table}
\resizebox{\textwidth}{!}{%
\begin{tabular}{|c|c|c|c|c|c|c|c|}
\hline
\textbf{Name} & \textbf{Date 2019/3/01} & \textbf{Duration (seconds)} & \textbf{Left Clicks} & \textbf{Right Clicks} & \textbf{Middle Clicks} & \textbf{Mouse Moves} & \textbf{Scrolls} \\ \hline
Student 1 & 14:12:29 & 41 & 3 & 0 & 0 & 629 & 114 \\ \hline
Student 2 & 14:44:09 & 90 & 7 & 0 & 0 & 1176 & 137 \\ \hline
... & ... & ... & ... & ... & ... & ... & ... \\ \hline
Student 22 & 11:55:14 & 2188 & 157 & 5 & 0 & 20912 & 6626 \\ \hline
Student 23 & 11:57:37 & 2236 & 323 & 0 & 0 & 17982 & 6930 \\ \hline
\end{tabular}%
}
\end{table}

\begin{table}[h!]
\centering
\caption{Example ROI tracking data that can be seen in the database table. Column 1 - 3 are labels added using JavaScript, column 4 is the duration calculated from the difference between dates, column 5 is the area manually labelled by the administrator and the rest of the columns are total value of data retrieved from the DOM API.}
\label{tab:roi-tracking-table}
\resizebox{\textwidth}{!}{%
\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|}
\hline
\textbf{ID} & \textbf{Name} & \textbf{Date 2019/3/01} & \textbf{Duration (second)} & \textbf{Area (x1,x2,y1,y2)} & \textbf{Left Clicks} & \textbf{Right Clicks} & \textbf{Middle Clicks} & \textbf{Mouse Moves} & \textbf{Scrolls} \\ \hline
1 & Student 1 & 11:06:39 & 14.148 & \{"header":{[}0,1920,0,64{]}\} & 0 & 0 & 0 & 1 & 1 \\ \hline
2 & Student 1 & 11:06:40 & 1.179 & \{"quiz1":{[}529,1900,291,570{]}\} & 0 & 0 & 0 & 86 & 0 \\ \hline
... & ... & ... & ... & ... & ... & ... & ... & ... & ... \\ \hline
19062 & Student 23 & 14:44:09 & 0.002 & \{"title":{[}16,1904,150,270{]}\} & 0 & 0 & 0 & 1 & 0 \\ \hline
\end{tabular}%
}
\end{table}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                               %%
%% Figures                       %%
%%                               %%
%% NB: this is for captions and  %%
%% Titles. All graphics must be  %%
%% submitted separately and NOT  %%
%% included in the Tex document  %%
%%                               %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%
%% Do not use \listoffigures as most will included as separate files

%\section*{Figures}
  \begin{figure}[h!]
  \includegraphics[width=0.31\textwidth]{canvas-click.png}
  \includegraphics[width=0.31\textwidth]{canvas-heatmap.png}
  \includegraphics[width=0.31\textwidth]{duration+flow+event.png}
  \caption{\csentence{Visualization of mouse tracking data.}
      Default mouse tracking data can visualize exact points of location, the left image is click visualization and the middle image is a heatmap based on the duration the mouse cursor stays on each point, while ROI tracking can only visualize defined areas and show flows between areas shown on the right image.}
      \label{fig:visualization-of-mouse-tracking-data}
      \end{figure}
      
\begin{figure}[h!]
    \includegraphics[width=0.9\textwidth]{cpumstr.png}
  \caption{\csentence{CPU usage comparison between default mouse tracking, whole page tracking, and ROI tracking.} The horizontal axis is the time interval. The vertical axis is the CPU usage in percentage.
 }
 \label{fig:cpu-default-page-roi}
      
      \end{figure}

\begin{figure}[h!]
    \includegraphics[width=0.9\textwidth]{rammstr.png}
  \caption{\csentence{RAM usage comparison between default mouse tracking, whole page tracking, and ROI tracking.} The horizontal axis is the time interval. The vertical axis is the RAM usage in megabytes.
 }
 \label{fig:ram-default-page-roi}
      
      \end{figure}

\begin{figure}[h!]
    \includegraphics[width=0.9\textwidth]{dtrmstr.png}
  \caption{\csentence{Data rate comparison between default mouse tracking, whole page tracking, and ROI tracking.}The horizontal axis is the time interval. The vertical axis is the data rate in kilobytes per second.
 }
 \label{fig:data-rate-default-page-roi}
      
      \end{figure}

\begin{figure}[h!]
    \includegraphics[width=0.9\textwidth]{brwsperf.png}
  \caption{\csentence{The total script running time of three mouse tracking demo session by the author.} The horizontal axis is the mouse tracking method. The data in order are from Mozila Firefox, Microsoft Edge, and Google Chrome. The vertical axis is the total running time in milliseconds. Among the three browsers Mozilla Firefox performs faster than Microsoft Edge and Internet Explore performs faster than Google Chrome for this work \cite{speedbattlecom}.
 }
 \label{fig:dbrwsperf}
      
      \end{figure}
      
\section*{Result and Discussion}

\subsection*{Default Mouse Tracking}

It is well known that the advantage of default mouse tracking is the detailed and precise data it generates. An example is shown in Table \ref{tab:default-mouse-tracking-table}. The exact x and y points of the locations of event occurrences, such as left clicks, right clicks, middle clicks, mouse movements, scrolls, zooms, and keyboard types, are recorded, including when and for how long each event occurs. Those geometrical data (x,y) make it possible to reproduce the mouse trajectory shown in Figure \ref{fig:visualization-of-mouse-tracking-data}, and adding the time information enables the trajectory's replay.

The rumored disadvantage is the huge transmission and storage cost, and this seems to be true judging from Figure \ref{fig:cpu-default-page-roi}, Figure \ref{fig:ram-default-page-roi}, and Figure \ref{fig:data-rate-default-page-roi}. For the 22 students in each session, the transmission resource cost statistics are shown in Table \ref{tab:simulation-statistic}. The average data rate was 28 \gls{kBps} and was able to peak to 228 kBps. For the two sessions totalling 44 students, the data size was approximately 100 MB and Table \ref{tab:default-mouse-tracking-table} has 286511 rows. The CPU usage was hightly consumptive as well, while the RAM usage was not as consumptive. Even worse, mouse tracking is not a replacement for the existing logging method but rather an addition; in other words, it is expected to add an additional burden to the existing system if mouse tracking is implemented. These data were generated from a 2 1/2 hour mouse tracking session; thus, imagine how much resource mouse tracking would consume if it were run on a university scale with thousands of students for 24 hours daily. \textcolor{brown}{On the client the side, this method also shows the highest total JavaScript running in Figure \ref{fig:dbrwsperf} among the other methods. It is suspected due to the large amount of HTTP Post to the server.}

\subsection*{Webpage Summarized Mouse Tracking}

By omitting the geometrical data (x,y) and summarizing the numbers of events that occurred, the data became as small as possible, as shown in Figure \ref{fig:cpu-default-page-roi}, Figure \ref{fig:ram-default-page-roi}, and Figure \ref{fig:data-rate-default-page-roi} (although they can be further reduced slightly by compression and removal of unnecessary characters and variables). The table was reduced to one row per webpage visit; in this case, Table \ref{tab:default-mouse-tracking-table} with 286511 rows was reduced to 26 rows, as shown in Table \ref{tab:page-tracking-table}. As shown in Table \ref{tab:simulation-statistic}, the data size was reduced from 100 MB to 16 kB. The average data rate was reduced from 28 kBps to 10 Bps. Although there is still RAM usage, CPU usage is slightly visible. Among the three mouse tracking methods mentioned in this work, this technique is the most advantageous in terms of resource cost. \textcolor{brown}{On the client the side, this method also shows the lowest total JavaScript running in Figure \ref{fig:dbrwsperf} among the other methods. It is suspected due to the few amount of HTTP Post to the server.}

However, the disadvantage compared to the three mouse tracking techniques is that it provides the poorest information that makes it impossible to create any visualizations, as shown in Figure \ref{fig:visualization-of-mouse-tracking-data}. The information tells only how many events (such as left clicks, right clicks, middle clicks, mouse movements, scrolls, zooms, and keyboard types) occurred and the length of time that the user spends on the webpage. Nevertheless, the information is richer than traditional logs, as shown in Table \ref{tab:page-tracking-table}.

\subsection*{Region of Interest Mouse Tracking}

This technique is the best of the three, as the desired information is based on the analyst's preferences, and there are lower resource costs than in the default mouse tracking shown in Figure \ref{fig:cpu-default-page-roi} - \ref{fig:dbrwsperf}. Analysts chooses the areas to be analyzed. In this case, the authors defined the following areas for the quiz session: header, title, menu, footer, and each question section. It can be seen in Figure \ref{fig:visualization-of-mouse-tracking-data} that it is possible to create heatmaps of high activity areas, although it is not possible to create precise mouse trajectories as default mouse tracking, but it is possible to capture amounts of movement between areas. The duration is also based on each area. The data size is 5.4 MB with  19062 rows shown in Table \ref{tab:roi-tracking-table}. As shown in Table \ref{tab:simulation-statistic}, the average data rate is 2.28 kBps and the average CPU and RAM usage are 0.87\% and 1.85 MB which are lower than in default mouse tracking. Based on the algorithm of this method, the resource cost should be based on the number of defined areas, where the more areas, the larger the resource cost (note that default mouse tracking cost the largest because the webpage has been divided into the smallest possible areas, which are the x and y points of a webpage).

\textcolor{red}{The disadvantage currently is the lack of smart area definition and labelling. The possibility of area definition is restricted to the parent elements. The possibility of labelling is only information available on elements' attribute, text, and value. To perform custom area definition and labelling, tha analysts must define them manually that requires considerable time and labor.}

\section*{Conclusion and Future Work}

Preprocessing mouse tracking data during real-time and online sessions helps reduce the storage and transmission costs and unexpectedly the JavaScript total running time on the client's browser as well. The techniques presented in this work are whole page tracking and \gls{ROI} tracking. Although the amount of reduced data is very dependent, there are fixed theories. The fixed theories are as follows: whole page tracking reduces the mouse tracking data into one row of tables per webpage visit, and ROI tracking reduces the data into one row of tables per area visit. Selecting the right technique can help reduce the storage and transmission costs while still obtaining the necessary data.

Although this concept works perfectly, but there are still problems with execution. Whole page tracking transmits the data only when the user leaves the page, and if the problems lie with the browser, there is currently no way to tell the user to wait before the transmission process finishes. There will definitely be cases where data are not fully transmitted. \textcolor{red}{The problem for ROI tracking are that it cannot perform smart area definition and labelling. Normally, they are performed by humans. Therefore, one solution is to develop an artificial intelligence for this matter in the future.}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                                          %%
%% Backmatter begins here                   %%
%%                                          %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{backmatter}

%\printglossary[type=\acronymtype,title=List of abbreviations,nonumberlist,nogroupskip]

\section*{List of abbreviations}
\textbf{AdELEAdaptive} E-Learning via the Eye Tracking.AeLSEye tracking based adaptive and personalized e-Learning Systems. \newline
\textbf{API} application programming interface. \newline
\textbf{CPU} central processing unit. \newline
\textbf{CSS} cascading style sheets. \newline
\textbf{DOM} document object model. \newline
\textbf{e5Learning} Enhanced exploitation of eyes for effective e-learning. \newline
\textbf{ESA} Eye tracking based emphatic software agent. \newline
\textbf{GB} gigabyte. \newline
\textbf{GHz} gigahertz. \newline
\textbf{HTML} Hyper Text Markup Language. \newline
\textbf{HTTP}hyper text transfer protocol. \newline
\textbf{kBps} kilobytes per second. \newline
\textbf{LMS} learning management system. \newline
\textbf{MB} megabyte. \newline
\textbf{MBps} megabyte per second. \newline
\textbf{MVC} model-view controller. \newline
\textbf{MVT} model-view template. \newline
\textbf{NPM} Node Package Manager. \newline
\textbf{OGAMA} Open Gaze and Mouse Analyzer. \newline
\textbf{POI} point of interest. \newline
\textbf{Protus} programming tutoring system. \newline
\textbf{RAM} random access memory. \newline
\textbf{ROI} region of interest. \newline
\textbf{UI} user interface. \newline
\textbf{XML} Extensible Markup Language \newline

\section*{Declarations}

\subsection*{Availability of data and materials}
  The datasets generated and/or analyzed during the current study are available in the Mendeley repository titled 'Data for: Implementation of Real-Time Online Mouse Tracking Case Study in a Small Online Quiz' in 'Pre-processed Mouse Tracking Data' directory \cite{preprocessedmousetrackingexperiment}:
  \begin{itemize}
      \item Table \ref{tab:default-mouse-tracking-table}, Table \ref{tab:page-tracking-table}, and Table \ref{tab:roi-tracking-table} data are available in file mouse\_tracking\_mongolia\_anonymous.ods \cite{mouse_tracking_mongolia_anonymous_ods}.
      \item Figure \ref{fig:cpu-default-page-roi}, Figure \ref{fig:ram-default-page-roi}, Figure \ref{fig:data-rate-default-page-roi}, and Table \ref{tab:simulation-statistic} are based on files: cpu\-ram\-mousetracking.txt \cite{cpu-ram-mousetracking-txt}, cpu\-ram\-pagetracking.txt \cite{cpu-ram-pagetracking-txt}, cpu\-ram\-roitracking.txt \cite{cpu-ram-roitracking-txt}, mousetracking\-simulation\-pcapng \cite{mousetracking-simulation-pcapng}, pagetracking\-simulation\-pcapng \cite{pagetracking-simulation-pcapng}, roitracking\-simulation\-pcapng \cite{roitracking-simulation-pcapng}.
  \end{itemize}

\subsection*{Competing interests}
  The authors declare that they have no competing interests.

\subsection*{Funding}
  Part of this work was supported by JSPS KAKENHI Grant-in-Aid for Scientific Research 19H1225100 and 15H02795.

\subsection*{Author contributions}
  Both the authors have participated since the beginning of the work. The main author wrote the manuscript, and the co-author revised the manuscript.

\subsection*{Acknowledgements}
  The authors would like to express their deepest gratitude to Otgontsetseg Sukhbaatar, Lodoiravsal Choimaa, and their students for participating in the mouse tracking quiz session. This manuscript has been proofread by Springer Nature Author Services.
  
  \subsection*{Authors' information}
  \textbf{FP} is currently a doctoral student at Graduate School of Science and
  Technology, Kumamoto University. His research area is in the field of educational technology. \\
  \textbf{TU} joined Kumamoto University in 1983 right after he received an
  M.E. degree from Tohoku University. In 1988, he received a Dr. Eng. from Tohoku
  University. Since 2004 he has been a professor, and he is a member of the IEEE,
  ASA, ASJ, INCE/J, JSET, and JSAI. He is interested in e-learning contents and systems,
  and acoustic signal processing.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                  The Bibliography                       %%
%%                                                         %%
%%  Bmc_mathpys.bst  will be used to                       %%
%%  create a .BBL file for submission.                     %%
%%  After submission of the .TEX file,                     %%
%%  you will be prompted to submit your .BBL file.         %%
%%                                                         %%
%%                                                         %%
%%  Note that the displayed Bibliography will not          %%
%%  necessarily be rendered by Latex exactly as specified  %%
%%  in the online Instructions for Authors.                %%
%%                                                         %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

% if your bibliography is in bibtex format, use those commands:
\bibliographystyle{bmc-mathphys} % Style BST file (bmc-mathphys, vancouver, spbasic).
\bibliography{bmc_article}      % Bibliography file (usually '*.bib' )
% for author-year bibliography (bmc-mathphys or spbasic)
% a) write to bib file (bmc-mathphys only)
% @settings{label, options="nameyear"}
% b) uncomment next line
%\nocite{label}

% or include bibliography directly:
% \begin{thebibliography}
% \bibitem{b1}
% \end{thebibliography}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%                               %%
%% Additional Files              %%
%%                               %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\iffalse
\section*{Additional Files}
  \subsection*{Additional file 1 --- Sample additional file title}
    Additional file descriptions text (including details of how to
    view the file, if it is in a non-standard format or the file extension).  This might
    refer to a multi-page table or a figure.

  \subsection*{Additional file 2 --- Sample additioinal file title}
    Additional file descriptions text.
\fi

\end{backmatter}
\end{document}
