diff options
| author | sotech117 <michael_foiani@brown.edu> | 2024-01-19 13:15:08 -0500 |
|---|---|---|
| committer | sotech117 <michael_foiani@brown.edu> | 2024-01-19 13:15:08 -0500 |
| commit | 11047bb715c3dedf3062091236b61677a751f2bc (patch) | |
| tree | 4326e089508ca2e00a5e78e589610fc44d4c0f81 | |
| parent | c4371f61a68dcc25c42fa9fc78c624d75b9964dc (diff) | |
update record.js to store metrics instead of raw data
| -rw-r--r-- | .DS_Store | bin | 0 -> 6148 bytes | |||
| -rw-r--r-- | a.html | 3 | ||||
| -rw-r--r-- | b.html | 3 | ||||
| -rw-r--r-- | record.js | 85 |
4 files changed, 73 insertions, 18 deletions
diff --git a/.DS_Store b/.DS_Store Binary files differnew file mode 100644 index 0000000..5b71036 --- /dev/null +++ b/.DS_Store @@ -9,6 +9,7 @@ </head> <body> A -<button onclick="done(event)" id="done">Go Home</button> +<button onclick="suc(event)" id="success1">Success</button> +<button onclick="fail(event)" id="fail1">Fail</button> </body> </html> @@ -9,6 +9,7 @@ </head> <body> B -<button onclick="done(event)" id="done">Go Home</button> +<button onclick="suc(event)" id="success1">Success</button> +<button onclick="fail(event)" id="fail1">Fail</button> </body> </html> @@ -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); |