From e2341d15dbf75e2158ed52193152ac9ab5d64748 Mon Sep 17 00:00:00 2001 From: Denis Thiessen Date: Tue, 18 Jun 2024 14:31:45 +0200 Subject: [PATCH] feat: Added log features and elements. --- src/components/DownloadButton.jsx | 2 -- .../webpage_container/StudySite.jsx | 32 +++++++++++++++++-- src/core/Constants.jsx | 2 +- src/core/log/SensorLogger.jsx | 6 ++++ 4 files changed, 37 insertions(+), 5 deletions(-) diff --git a/src/components/DownloadButton.jsx b/src/components/DownloadButton.jsx index e94b15a..154b625 100644 --- a/src/components/DownloadButton.jsx +++ b/src/components/DownloadButton.jsx @@ -3,7 +3,6 @@ import { getTranslation } from "../core/i18n/I18NHandler"; import { getSensorLog } from "../core/log/SensorLogger"; import { Button } from "@geist-ui/core"; import { getUserID } from "./RandomIDComponent"; -import { PARTICIPANT_NUMBER } from "../core/Constants"; function DownloadButton() { const downloadFile = ({ data, fileName, fileType }) => { @@ -23,7 +22,6 @@ function DownloadButton() { const userData = { participantId: getUserID(), sensorLog: getSensorLog(), - participantNumber: PARTICIPANT_NUMBER, }; const exportToJson = (e) => { diff --git a/src/components/webpage_container/StudySite.jsx b/src/components/webpage_container/StudySite.jsx index 55a016a..0d6a9e1 100644 --- a/src/components/webpage_container/StudySite.jsx +++ b/src/components/webpage_container/StudySite.jsx @@ -48,7 +48,15 @@ export function StudySite(props) { var y = event.pageY; // Add data to the heatmap - heatmapInstance.addData({ x: x, y: y, value: 1 }); + const currentTime = new Date(); + const websiteLocation = window.location.href; + heatmapInstance.addData({ + x: x, + y: y, + value: 1, + timestamp: currentTime, + url: websiteLocation, + }); }); document.addEventListener("scroll", function (event) { @@ -61,7 +69,15 @@ export function StudySite(props) { var y = event.pageY; // Add more value for clicks - heatmapInstance.addData({ x: x, y: y, value: 5 }); + const currentTime = new Date(); + const websiteLocation = window.location.href; + heatmapInstance.addData({ + x: x, + y: y, + value: 5, + timestamp: currentTime, + url: websiteLocation, + }); updateHeatmapSize(); }); @@ -97,10 +113,14 @@ export function StudySite(props) { for (let i = 0; i < touches.length; i++) { ongoingTouches.push(copyTouch(touches[i])); + const currentTime = new Date(); + const websiteLocation = window.location.href; heatmapInstance.addData({ x: touches[i].pageX, y: touches[i].pageY, value: 5, + timestamp: currentTime, + url: websiteLocation, }); } }; @@ -112,10 +132,14 @@ export function StudySite(props) { const idx = ongoingTouchIndexById(touches[i].identifier); if (idx >= 0) { + const currentTime = new Date(); + const websiteLocation = window.location.href; heatmapInstance.addData({ x: touches[i].pageX, y: touches[i].pageY, value: 5, + timestamp: currentTime, + url: websiteLocation, }); ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record @@ -132,10 +156,14 @@ export function StudySite(props) { let idx = ongoingTouchIndexById(touches[i].identifier); if (idx >= 0) { + const currentTime = new Date(); + const websiteLocation = window.location.href; heatmapInstance.addData({ x: touches[i].pageX, y: touches[i].pageY, value: 5, + timestamp: currentTime, + url: websiteLocation, }); ongoingTouches.splice(idx, 1); // remove it; we're done diff --git a/src/core/Constants.jsx b/src/core/Constants.jsx index 4396fc8..2e20d3f 100644 --- a/src/core/Constants.jsx +++ b/src/core/Constants.jsx @@ -1,4 +1,4 @@ export const MOUSE_MODE = true; export const HEATMAP_MAX = 999; -export const PARTICIPANT_NUMBER = 9; \ No newline at end of file +export const PARTICIPANT_NUMBER = 1; \ No newline at end of file diff --git a/src/core/log/SensorLogger.jsx b/src/core/log/SensorLogger.jsx index fc84fa3..0efa82c 100644 --- a/src/core/log/SensorLogger.jsx +++ b/src/core/log/SensorLogger.jsx @@ -3,9 +3,11 @@ import { getState, setState } from "../../App"; export function pushToMouseLog(logElement) { const sensorLog = getState().sensorLog; const currentTime = new Date(); + const websiteLocation = window.location.href; const mouseLogElement = { mouseLog: logElement, timestamp: currentTime, + url: websiteLocation }; sensorLog.mouseLog.push(mouseLogElement); setState({ sensorLog: sensorLog }); @@ -19,12 +21,14 @@ export function pushToClickLog(logElement) { const generateLogElement = (el) => { const currentTime = new Date(); + const websiteLocation = window.location.href; return { target: el.target.outerHTML, type: el.type, x: el.x, y: el.y, timestamp: currentTime, + url: websiteLocation }; }; @@ -66,9 +70,11 @@ export function pushToVisitLog(logElement) { export function pushToSonificationLog(logElement) { const sensorLog = getState().sensorLog; const currentTime = new Date(); + const websiteLocation = window.location.href; const sonificationLogElement = { sonificationLog: logElement, timestamp: currentTime, + url: websiteLocation }; sensorLog.playedSonifications.push(sonificationLogElement); setState({ sensorLog: sensorLog });