diff options
| -rw-r--r-- | a.html | 14 | ||||
| -rw-r--r-- | b.html | 14 | ||||
| -rw-r--r-- | download-utils.js | 50 | ||||
| -rw-r--r-- | index.html | 52 | ||||
| -rw-r--r-- | record.js | 43 |
5 files changed, 173 insertions, 0 deletions
@@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="version" content="A"> + <title>A</title> + + <script src="record.js" defer></script> +</head> +<body> +A +<button onclick="done(event)" id="done">Go Home</button> +</body> +</html> @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="version" content="B"> + <title>B</title> + + <script src="record.js" defer></script> +</head> +<body> +B +<button onclick="done(event)" id="done">Go Home</button> +</body> +</html> diff --git a/download-utils.js b/download-utils.js new file mode 100644 index 0000000..0156bdc --- /dev/null +++ b/download-utils.js @@ -0,0 +1,50 @@ +// citation: https://www.geeksforgeeks.org/how-to-create-and-download-csv-file-in-javascript/ + +// performs a downloadUtils of a csv file, given a string buffer in the format of csv text +const download = data => { + // creating a Blob for having a csv file format + // and passing the data with type + const blob = new Blob([data], {type: 'text/csv'}); + + // Creating an object for downloading url + const url = window.URL.createObjectURL(blob); + + // Creating an anchor(a) tag of HTML + const a = document.createElement('a'); + + // Passing the blob downloading url + a.setAttribute('href', url); + + // Setting the anchor tag attribute for downloading + // and passing the downloadUtils file name + const date = new Date(); + // stamp in format of `YYYY-MM-DDTHHmmss` + const stamp = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}T${date.getHours()}${date.getMinutes()}${date.getSeconds()}`; + const fileName = `cs1300-ab-testing-data-${stamp}.csv`; + a.setAttribute('download', fileName); + + // Performing a downloadUtils with click + a.click() +} + +// given the data as an array of objects, generates the text of it's corresponding csv +const buildcsv = data => { + // Empty array for storing the values + let csvRows = []; + + console.log("buildcsv", data); + data.forEach(d => { + // if the array is empty, append the headers (which are the keys) + if (csvRows.length === 0) { + const headers = Object.keys(d); + csvRows.push(headers.join(',')); + } + + // append the data + const values = Object.values(d).join(','); + csvRows.push(values) + + }) + // Returning the array joining with new line + return csvRows.join('\n'); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..2e1ffc6 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>cs1300 AB Testing</title> + + <script src="download-utils.js"></script> + <script defer> + // redirect user to either A or B, on click of start button + const redirectAB = () => { + // initialize local storage to store data, if not there + const data = localStorage.getItem("cs1300-ab-testing-data"); + if (data == null) { + console.log('setting storage') + localStorage.setItem("cs1300-ab-testing-data", JSON.stringify([])); + } + + location.href = Math.random() > .5 ? "a.html" : "b.html"; + }; + + const downloadAB = () => { + // get the data from local storage, ensure not nullish + let data = localStorage.getItem("cs1300-ab-testing-data"); + data = JSON.parse(data); + if (!data) { + alert("Error: local storage is corrupted or empty!"); + console.error("Error: local storage is corrupted or empty!"); + localStorage.clear(); + return; + } + + const csv = buildcsv(data); + download(csv); + + // clear local storage for future uses + localStorage.clear(); + } + </script> +</head> +<body> +<h2> + cs1300 AB Testing Start Screen +</h2> +<p> + <strong>Task: </strong> On the next page, do XYZ... +</p> +<button onclick="redirectAB()">Start Task</button> +<br /> +<br /> +<button onclick="downloadAB()">Download & Clear Current Data</button> +</body> +</html> diff --git a/record.js b/record.js new file mode 100644 index 0000000..a97ebbd --- /dev/null +++ b/record.js @@ -0,0 +1,43 @@ +// generate a random UID for this user, on page load. +const UID = Math.round(Math.random() * 1000000); +// takes in an event object and updates local storage to contain that event +const recordAction = event => { + let data = localStorage.getItem("cs1300-ab-testing-data"); + data = JSON.parse(data); + // check if parsing is correct + if (!Array.isArray(data)) { + console.error("DATA is not an array") + return; + } + + // 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}); + + 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 => { + // record this event + recordAction(event); + + // TODO: remove event listeners + window.removeEventListener('load', recordAction); + window.removeEventListener('click', recordAction); + + location.href = 'index.html'; +} + +window.addEventListener('load', recordAction); +window.addEventListener('click', recordAction); |