update record.js to store metrics instead of raw data

1 files changed, 69 insertions, 16 deletions

diff --git a/record.js b/record.js
index a97ebbd..8666493 100644
--- a/record.js
+++ b/record.js
@@ -1,11 +1,53 @@
 // generate a random UID for this user, on page load.
 const UID = Math.round(Math.random() * 1000000);
+
+// variables to store user interaction data
+let num_clicks = 0;
+let timestamp_load;
+let timestamp_first_click;
+let did_misclick = false;
+let mouse_move_distance = 0;
+let mouse_prev_pos;
+
 // takes in an event object and updates local storage to contain that event
 const recordAction = event => {
+    switch (event.type) {
+        case 'click':
+            if (num_clicks++ === 0) timestamp_first_click = Date.now();
+            break;
+        case 'load':
+            timestamp_load = Date.now();
+            break;
+        case 'pointermove':
+            // deconstruct x,y
+            const {pageX, pageY} = event;
+            // update distance
+            if (mouse_prev_pos != null) {
+                const dist = Math.sqrt((pageX - mouse_prev_pos.pageX)*(pageX - mouse_prev_pos.pageX)
+                    + (pageY - mouse_prev_pos.pageY) * (pageY - mouse_prev_pos.pageY))
+                mouse_move_distance += dist;
+            }
+            // update prev pos for next
+            mouse_prev_pos = {pageX, pageY};
+            break;
+        case 'beforeunload':
+            recordData();
+            cleanupHandlers();
+            break;
+    }
+}
+
+// to be called when the user leaves the page to track the user's data in local storage
+const recordData = () => {
+    alert('here');
+    const timestamp_unload = Date.now().toString();
+
+    // get the current data object and parse it
     let data = localStorage.getItem("cs1300-ab-testing-data");
     data = JSON.parse(data);
     // check if parsing is correct
     if (!Array.isArray(data)) {
+        alert("Error storing data!!")
         console.error("DATA is not an array")
         return;
     }
@@ -13,31 +55,42 @@ const recordAction = event => {
     // get version form the meta tag on the html file
     const version = document.querySelector("meta[name='version']").getAttribute("content");
     const uid = UID;
-    const timestamp = Date.now().toString();
-    const action = event.type;
-    let target = event.target.tagName;
-    let targetId = event.target.id;
-    if (target == null) {
-        target = 'N/A'
-    }
-    if (targetId) {
-        target += `#${targetId}`
-    }
-    data.push({uid, version, action, target, timestamp});
 
+    // calculate metrics
+    const time_to_first_click = timestamp_first_click - timestamp_load;
+    const time_on_page = timestamp_unload - timestamp_load;
+
+    // update localstorage
+    data.push({uid, version, timestamp_load, time_on_page, time_to_first_click, mouse_move_distance, did_misclick});
     localStorage.setItem("cs1300-ab-testing-data", JSON.stringify(data));
 }
-// to be called on the click that determined when the task is completed to clean up event listeners
-const done = event => {
+
+// to be called on the click that determined when the task is completed sucessfully
+const suc = event => {
     // record this event
     recordAction(event);
+    alert("You succeeded in the task :)");
 
-    // TODO: remove event listeners
+    // redirect user to home
+    location.href = 'index.html';
+}
+
+// to be called on the click that determined when the task is completed on fail
+const fail = event => {
+    // record this event
+    recordAction(event);
+    alert("You failed the task, but keep on trying.");
+    did_misclick = true;
+}
+
+const cleanupHandlers = () => {
     window.removeEventListener('load', recordAction);
     window.removeEventListener('click', recordAction);
-
-    location.href = 'index.html';
+    window.addEventListener('pointermove', recordAction);
+    window.removeEventListener('beforeunload', recordAction);
 }
 
 window.addEventListener('load', recordAction);
 window.addEventListener('click', recordAction);
+window.addEventListener('pointermove', recordAction);
+window.addEventListener('beforeunload', recordAction);