fix: Final version commit

package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/leaflet": "^1.9.12",
+    "geist-ui": "^0.0.102",
     "heatmap.js": "^2.0.5",
     "i18next": "^23.11.3",
     "i18next-browser-languagedetector": "^7.2.1",

src/App.js

@@ -7,23 +7,23 @@ import { persist, createJSONStorage } from "zustand/middleware";
 import { PARTICIPANT_NUMBER } from "./core/Constants";
 
 const NoPageFound = React.lazy(() => import("./pages/NoPageFound"));
-const InBetweenSite1 = React.lazy(() =>
-  import("./pages/study_site_1/InBetweenSite1")
+const InBetweenSite1 = React.lazy(
+  () => import("./pages/study_site_1/InBetweenSite1")
 );
-const InBetweenSite2 = React.lazy(() =>
-  import("./pages/study_site_2/InBetweenSite2")
+const InBetweenSite2 = React.lazy(
+  () => import("./pages/study_site_2/InBetweenSite2")
 );
-const InBetweenSite3 = React.lazy(() =>
-  import("./pages/study_site_3/InBetweenSite3")
+const InBetweenSite3 = React.lazy(
+  () => import("./pages/study_site_3/InBetweenSite3")
 );
-const InBetweenSite4 = React.lazy(() =>
-  import("./pages/study_site_4/InBetweenSite4")
+const InBetweenSite4 = React.lazy(
+  () => import("./pages/study_site_4/InBetweenSite4")
 );
-const InBetweenSite5 = React.lazy(() =>
-  import("./pages/study_site_5/InBetweenSite5")
+const InBetweenSite5 = React.lazy(
+  () => import("./pages/study_site_5/InBetweenSite5")
 );
-const InBetweenSite6 = React.lazy(() =>
-  import("./pages/study_site_6/InBetweenSite6")
+const InBetweenSite6 = React.lazy(
+  () => import("./pages/study_site_6/InBetweenSite6")
 );
 
 const MainInfoPage = React.lazy(() => import("./pages/MainInfoPage"));
@@ -35,27 +35,27 @@ const StartPage3 = React.lazy(() => import("./pages/study_site_3/StartPage3"));
 const StartPage4 = React.lazy(() => import("./pages/study_site_4/StartPage4"));
 const StartPage5 = React.lazy(() => import("./pages/study_site_5/StartPage5"));
 const StartPage6 = React.lazy(() => import("./pages/study_site_6/StartPage6"));
-const DeliveryRegions = React.lazy(() =>
-  import("./pages/study_site_6/DeliveryRegions")
+const DeliveryRegions = React.lazy(
+  () => import("./pages/study_site_6/DeliveryRegions")
 );
-const DownloadApp = React.lazy(() =>
-  import("./pages/study_site_6/DownloadApp")
+const DownloadApp = React.lazy(
+  () => import("./pages/study_site_6/DownloadApp")
 );
-const HotelMap = React.lazy(() =>
-  import("./pages/study_site_2/tab_content/HotelMap")
+const HotelMap = React.lazy(
+  () => import("./pages/study_site_2/tab_content/HotelMap")
 );
 const RedirectPage = React.lazy(() => import("./core/RedirectPage"));
-const TourOperators = React.lazy(() =>
-  import("./pages/study_site_2/TourOperators")
+const TourOperators = React.lazy(
+  () => import("./pages/study_site_2/TourOperators")
 );
 
-const GeneralConcerns = React.lazy(() =>
-  import("./pages/study_site_1/GeneralConcerns")
+const GeneralConcerns = React.lazy(
+  () => import("./pages/study_site_1/GeneralConcerns")
 );
 const MyBookings = React.lazy(() => import("./pages/study_site_1/MyBookings"));
 const Rebooking = React.lazy(() => import("./pages/study_site_1/Rebooking"));
-const FlightProblems = React.lazy(() =>
-  import("./pages/study_site_1/FlightProblems")
+const FlightProblems = React.lazy(
+  () => import("./pages/study_site_1/FlightProblems")
 );
 
 export const sensorLogState = createStore(
@@ -70,8 +70,8 @@ export const sensorLogState = createStore(
       },
     }),
     {
-      name: "sensor-storage", // name of the item in the storage (must be unique)
-      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
+      name: "sensor-storage",
+      storage: createJSONStorage(() => sessionStorage),
     }
   )
 );
@@ -130,7 +130,6 @@ const getLatinSquareOrder = function (participantNumber) {
 };
 
 function App() {
-  // TODO FIX...
   /*
     There is an weird interaction/error with the lazy loading of the routers
     and the translation or any other component, that needs to be loaded in

src/core/Constants.jsx

@@ -1,4 +1,4 @@
 export const MOUSE_MODE = true;
 export const HEATMAP_MAX = 999;
 
-export const PARTICIPANT_NUMBER = 1;
+export const PARTICIPANT_NUMBER = 36;

src/core/audio/AudioHandler.jsx

@@ -195,7 +195,7 @@ export function playDetailEarconSonification(textDensity, linkDensity) {
     setTimeout(() => {
       offCooldown = true;
       Tone.Transport.stop();
-    }, 500);
+    }, 800);
   }
 }
 

src/core/audio/MotifHandler.jsx

@@ -64,7 +64,7 @@ export function getMotif7(synth) {
   const now = Tone.now();
   synth.triggerAttackRelease("C#3", 0.2, now);
   synth.triggerAttackRelease("E3", 0.2, now + 0.16);
-  synth.triggerAttackRelease("C4", "4n", now + 0.32);
+  synth.triggerAttackRelease("C#4", "4n", now + 0.32);
 }
 
 export function getMotif8(synth) {

src/pages/study_site_1/InBetweenSite1.jsx

@@ -5,6 +5,11 @@ function InBetweenSite1({ redirectLoc }) {
   return (
     <InfoPageComponent redirectLoc={redirectLoc}>
       <p>You will now visit the FAQ section of BudgetBird Airlines.</p>
+      <p>
+        You will hear sounds on this website when you interact with certain
+        elements. These are present to indicate elements pertained within its
+        parent element and what type these elements are.
+      </p>
       <p>
         Please fulfil the task displayed in the banner above. The goal is{" "}
         <b>only</b> fulfilled when you click on a link, button, or similar that

src/pages/study_site_1/StartPage1.jsx

@@ -13,9 +13,6 @@ function StartPage1({ redirectLoc }) {
     pushToMouseLog(getHeatmapData());
   };
 
-  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
-  // IS THAT OKAY???
-
   const redirectPageStr = "./redirectPage/";
   const bannerTranslationKey = "/task_1_info";
 
@@ -28,7 +25,7 @@ function StartPage1({ redirectLoc }) {
 
   return (
     <StudySite>
-      <WebpageBanner translationKey="task_1_info" />
+      <WebpageBanner text="Your flight was cancelled and you want to contact customer support to get a refund." />
       <Spacer h={2} />
       <img
         src="/images/budget_bird_logo.png"

src/pages/study_site_2/InBetweenSite2.jsx

@@ -8,6 +8,11 @@ function InBetweenSite2({ redirectLoc }) {
         You will now visit the booking page of "Hotel Le Laboratoire" on
         LodgingLuxe.
       </p>
+      <p>
+        You will hear sounds on this website when you interact with certain
+        elements. These are present to indicate elements that are outside the
+        current field of view but can be revealed.
+      </p>
       <p>
         Please fulfil the task displayed in the banner above. The goal is{" "}
         <b>only</b> fulfilled when you click on a link, button, or similar that

src/pages/study_site_2/StartPage2.jsx

@@ -1,11 +1,7 @@
 import React, { useState } from "react";
 import WebpageBanner from "../../components/webpage_container/WebpageBanner";
 import { Tab } from "react-tabs-scrollable";
-import {
-  StudySite,
-  getHeatmapData,
-} from "../../components/webpage_container/StudySite";
-import { pushToMouseLog } from "../../core/log/SensorLogger";
+import { StudySite } from "../../components/webpage_container/StudySite";
 import { Spacer } from "@geist-ui/core";
 import ScrollableTab from "../../components/ScrollableTab";
 import {
@@ -61,12 +57,9 @@ function StartPage2() {
     setActiveTabIndex(index);
   };
 
-  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
-  // IS THAT OKAY???
-
   return (
     <StudySite>
-      <WebpageBanner translationKey="task_2_info" />
+      <WebpageBanner text="Find out how much a booking with the 'Misguided Getaways' tour operator costs." />
       <Spacer h={2} />
       <img
         src="/images/lodgingluxe_logo.png"

src/pages/study_site_2/TourOperators.jsx

@@ -1,38 +1,15 @@
 import React from "react";
 import WebpageBanner from "../../components/webpage_container/WebpageBanner";
-import { Tab } from "react-tabs-scrollable";
 import {
   StudySite,
-  getHeatmapData,
 } from "../../components/webpage_container/StudySite";
-import { pushToMouseLog, getSensorLog } from "../../core/log/SensorLogger";
 import { Divider, Text, Spacer, Card } from "@geist-ui/core";
-import ScrollableTab from "../../components/ScrollableTab";
-import {
-  Emoji,
-  Home,
-  HelpCircle,
-  Map,
-  MapPin,
-  Star,
-  Flag,
-  Key,
-  User,
-  ArrowUpRight,
-} from "@geist-ui/icons";
 
 function TourOperators({ redirectLoc }) {
-  var saveMouseLog = function () {
-    pushToMouseLog(getHeatmapData());
-    //window.location.href = "./" + redirectLoc;
-  };
-
-  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
-  // IS THAT OKAY???
 
   return (
     <StudySite>
-      <WebpageBanner translationKey="task_2_info" />
+      <WebpageBanner text="Find out how much a booking with the 'Misguided Getaways' tour operator costs." />
       <Spacer h={2} />
       <img
         src="/images/budget_bird_logo.png"

src/pages/study_site_3/InBetweenSite3.jsx

@@ -8,6 +8,11 @@ function InBetweenSite3({ redirectLoc }) {
         You will now visit the info page for the Master's programme in Software
         Engineering at the Universiteit van Voorbeeldhuizen (UVV).
       </p>
+      <p>
+        You will hear sounds on this website when you interact with certain
+        elements. These are present to indicate elements that are outside the
+        current field of view but can be revealed.
+      </p>
       <p>
         Please fulfil the task displayed in the banner above. The goal is{" "}
         <b>only</b> fulfilled when you click on a link, button, or similar that

src/pages/study_site_3/StartPage3.jsx

@@ -2,9 +2,7 @@ import React, { useState } from "react";
 import WebpageBanner from "../../components/webpage_container/WebpageBanner";
 import {
   StudySite,
-  getHeatmapData,
 } from "../../components/webpage_container/StudySite";
-import { pushToMouseLog } from "../../core/log/SensorLogger";
 import { Spacer } from "@geist-ui/core";
 import ScrollableTab from "../../components/ScrollableTab";
 import { Tab } from "react-tabs-scrollable";
@@ -63,12 +61,9 @@ function StartPage3({ redirectLoc }) {
     setActiveTabIndex(index);
   };
 
-  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
-  // IS THAT OKAY???
-
   return (
     <StudySite>
-      <WebpageBanner translationKey="task_3_info" />
+      <WebpageBanner text="You have a question on admission on this programme and want to contact someone about it." />
       <Spacer h={2} />
       <img
         src="/images/uvv_logo.png"

src/pages/study_site_4/InBetweenSite4.jsx

@@ -5,6 +5,11 @@ function InBetweenSite4({ redirectLoc }) {
   return (
     <InfoPageComponent redirectLoc={redirectLoc}>
       <p>You will now visit an online travel guide about Iceland.</p>
+      <p>
+        You will hear sounds on this website when you interact with certain
+        elements. These are present to indicate elements pertained within its
+        parent element and what type these elements are.
+      </p>
       <p>
         Please fulfil the task displayed in the banner above. The goal is{" "}
         <b>only</b> fulfilled when you click on a link, button, or similar that

src/pages/study_site_4/StartPage4.jsx

@@ -42,10 +42,6 @@ function StartPage4({ redirectLoc }) {
     </ul>
   );
   
-  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
-  // IS THAT OKAY???
-  // TODO ALSO THINK WHAT TO DO WITH OUT LINKS???
-
   const redirectPageStr = "./redirectPage/";
   const bannerTranslationKey = "/task_4_info";
 
@@ -279,7 +275,7 @@ function StartPage4({ redirectLoc }) {
 
   return (
     <StudySite>
-      <WebpageBanner translationKey="task_4_info" />
+      <WebpageBanner text="Find out details on safety precautions, when driving a 4x4 in Iceland." />
       <Spacer h={1} />
       <img
         src="/images/traveltrekker_logo.png"

src/pages/study_site_5/StartPage5.jsx

@@ -59,12 +59,9 @@ function StartPage5({ redirectLoc }) {
     setActiveTabIndex(index);
   };
 
-  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
-  // IS THAT OKAY???
-
   return (
     <StudySite>
-      <WebpageBanner translationKey="task_5_info" />
+      <WebpageBanner text="Find out if there is a communal gardening space with this flat and get more details on it." />
       <Spacer h={2} />
       <img
         src="/images/cheerful_chateaus_logo.png"

src/pages/study_site_6/StartPage6.jsx

@@ -34,12 +34,9 @@ function StartPage6({ redirectLoc }) {
     </div>
   );
 
-  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
-  // IS THAT OKAY???
-
   return (
     <StudySite>
-      <WebpageBanner translationKey="task_6_info" />
+      <WebpageBanner text="You had problems with using the the 'QuickDelivery' service and want a refund. Contact Customer Support to get a refund." />
       <Spacer h={1} />
       <img
         src="/images/quickdeliver_logo.png"
@@ -183,8 +180,8 @@ function StartPage6({ redirectLoc }) {
             >
               {" "}
               contact us
-            </a>
-            {" "} in regards to any returns and refunds.
+            </a>{" "}
+            in regards to any returns and refunds.
           </Text>
         </Collapse>
         <Collapse title="Business Solutions">