feat: Participant Number Setup

src/App.js

@@ -4,11 +4,13 @@ import { GeistProvider, CssBaseline } from '@geist-ui/core'
 import RouteTracker from "./core/log/RouteTracker";
 import { createStore } from 'zustand/vanilla'
 import { persist, createJSONStorage } from 'zustand/middleware'
+import { PARTICIPANT_NUMBER } from "./core/Constants";
 
 const NoPageFound = React.lazy(() => import("./pages/NoPageFound"));
 const TestPage = React.lazy(() => import("./pages/TestPage"));
 const TestPage2 = React.lazy(() => import("./pages/TestPage2"));
 const TestInfoPage = React.lazy(() => import("./pages/TestInfoPage"));
+const TestInfoPage2 = React.lazy(() => import("./pages/TestInfoPage2"));
 const TestEndPage = React.lazy(() => import("./pages/TestEndPage"));
 
 export const sensorLogState = createStore(
@@ -87,7 +89,7 @@ function App() {
 
   wait(200);
 
-  const latinSquareOrder = getLatinSquareOrder(3);
+  const latinSquareOrder = getLatinSquareOrder(PARTICIPANT_NUMBER);
 
   return (
     <GeistProvider>
@@ -95,17 +97,17 @@ function App() {
       <RouteTracker />
         <Routes>
           <Route path="/" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc={latinSquareOrder[0]}/></React.Suspense>} />
-          <Route path="/in-between-1" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="study-page-1"/></React.Suspense>} />
+          <Route path="/in-between-1" element={<React.Suspense fallback={<>...</>}><TestInfoPage2 redirectLoc="study-page-1"/></React.Suspense>} />
           <Route path="/study-page-1" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc={latinSquareOrder[1]}/></React.Suspense>} />
-          <Route path="/in-between-2" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="study-page-2"/></React.Suspense>} />
+          <Route path="/in-between-2" element={<React.Suspense fallback={<>...</>}><TestInfoPage2 redirectLoc="study-page-2"/></React.Suspense>} />
           <Route path="/study-page-2" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc={latinSquareOrder[2]}/></React.Suspense>} />
-          <Route path="/in-between-3" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="study-page-3"/></React.Suspense>} />
+          <Route path="/in-between-3" element={<React.Suspense fallback={<>...</>}><TestInfoPage2 redirectLoc="study-page-3"/></React.Suspense>} />
           <Route path="/study-page-3" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc={latinSquareOrder[3]}/></React.Suspense>} />
-          <Route path="/in-between-4" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="study-page-4"/></React.Suspense>} />
+          <Route path="/in-between-4" element={<React.Suspense fallback={<>...</>}><TestInfoPage2 redirectLoc="study-page-4"/></React.Suspense>} />
           <Route path="/study-page-4" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc={latinSquareOrder[4]}/></React.Suspense>} />
-          <Route path="/in-between-5" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="study-page-5"/></React.Suspense>} />
+          <Route path="/in-between-5" element={<React.Suspense fallback={<>...</>}><TestInfoPage2 redirectLoc="study-page-5"/></React.Suspense>} />
           <Route path="/study-page-5" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc={latinSquareOrder[5]}/></React.Suspense>} />
-          <Route path="/in-between-6" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="study-page-6"/></React.Suspense>} />
+          <Route path="/in-between-6" element={<React.Suspense fallback={<>...</>}><TestInfoPage2 redirectLoc="study-page-6"/></React.Suspense>} />
           <Route path="/study-page-6" element={<React.Suspense fallback={<>...</>}><TestPage2 redirectLoc={latinSquareOrder[6]}/></React.Suspense>} />
           <Route path="/end" element={<React.Suspense fallback={<>...</>}><TestEndPage /></React.Suspense>} />
           <Route path="*" element={<React.Suspense fallback={<>...</>}><NoPageFound /></React.Suspense>} />

src/components/DownloadButton.jsx

@@ -2,6 +2,8 @@ import React from "react";
 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 }) => {
@@ -18,10 +20,17 @@ function DownloadButton() {
             a.remove();
         }
         
+
+        const userData = {
+            participantId: getUserID(),
+            sensorLog: getSensorLog(),
+            participantNumber: PARTICIPANT_NUMBER
+        }
+
         const exportToJson = e => {
             e.preventDefault();
             downloadFile({
-                data: JSON.stringify(getSensorLog()),
+                data: JSON.stringify(userData),
                 fileName: 'sensorData.json',
                 fileType: 'text/json',
             })

src/core/Constants.jsx

@@ -1,2 +1,5 @@
 export const MOUSE_MODE = true;
 export const HEATMAP_MAX = 999;
+
+
+export const PARTICIPANT_NUMBER = 7;

src/pages/TestInfoPage2.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import InfoPageComponent from "../components/InfoPageComponent";
+
+function TestInfoPage2({redirectLoc}) {
+        return (<InfoPageComponent redirectLoc={redirectLoc}>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+            </InfoPageComponent>);
+}
+
+export default TestInfoPage2;