feat: Added Latin Square Route Shuffling

src/App.js

@@ -25,6 +25,68 @@ export const sensorLogState = createStore(
 
 export const { getState, setState, subscribe, getInitialState } = sensorLogState;
 
+
+const webpageOriginalOrder = [
+  {index: 1, redirectedStudyPage: "/study-page-1", redirectedInfoPage: "/in-between-1"},
+  {index: 2, redirectedStudyPage: "/study-page-2", redirectedInfoPage: "/in-between-2"},
+  {index: 3, redirectedStudyPage: "/study-page-3", redirectedInfoPage: "/in-between-3"},
+  {index: 4, redirectedStudyPage: "/study-page-4", redirectedInfoPage: "/in-between-4"},
+  {index: 5, redirectedStudyPage: "/study-page-5", redirectedInfoPage: "/in-between-5"},
+  {index: 6, redirectedStudyPage: "/study-page-6", redirectedInfoPage: "/in-between-6"},
+];
+
+const latinSquare = [
+  [1, 2, 3, 4, 5, 6], 
+  [6, 5, 2, 3, 1, 4], 
+  [3, 4, 5, 1, 6, 2], 
+  [4, 6, 1, 2, 3, 5], 
+  [2, 3, 6, 5, 4, 1],
+  [5, 1, 4, 6, 2, 3]
+];
+
+const getLatinSquareIndex = function(participantNumber) {
+  return ((participantNumber - 1) % latinSquare.length);
+};
+
+const findWebpageOrderElementByIndex = function(index) {
+  for(var el of webpageOriginalOrder) {
+    if(el.index === index) {
+      return el;
+    }
+  }
+};
+
+const findIndexOfOrderElement = function(el, order) {
+  for(var i = 0; i < order.length; i++) {
+    if(order[i] === el) {
+      return i;
+    }
+  }
+};
+
+const getLatinSquareOrder = function(participantNumber) {
+  const latinSquareIndex = getLatinSquareIndex(participantNumber);
+  const latinSquareElement = latinSquare[latinSquareIndex];
+  const originalOrder = [1, 2, 3, 4, 5, 6];
+  var latinSquareRedirectOrder = [];
+  latinSquareRedirectOrder.push(("study-page-" + latinSquareElement[0]));
+
+  for(var originalOrderElement of originalOrder) {
+    const indexElement = findIndexOfOrderElement(originalOrderElement, latinSquareElement);
+    if(indexElement === originalOrder.length - 1) {
+      latinSquareRedirectOrder.push("end");
+      continue;
+    }
+
+    const el = latinSquareElement[indexElement + 1];
+    const elIndex = findIndexOfOrderElement(el, latinSquareElement);
+    const nextLatinSquareIndex = latinSquareElement[(elIndex)];
+    latinSquareRedirectOrder.push(("study-page-" + nextLatinSquareIndex));
+  }
+
+  return latinSquareRedirectOrder;
+};
+
 function App() {
 
   // TODO FIX... 
@@ -43,15 +105,25 @@ function App() {
 
   wait(200);
 
+  const latinSquareOrder = getLatinSquareOrder(3);
+
   return (
     <GeistProvider>
       <React.Suspense fallback="loading">
       <RouteTracker />
         <Routes>
-          <Route path="/" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="info"/></React.Suspense>} />
-          <Route path="/info" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc="in-between"/></React.Suspense>} />
-          <Route path="/in-between" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="otherpage"/></React.Suspense>} />
-          <Route path="/otherpage" element={<React.Suspense fallback={<>...</>}><TestPage2 redirectLoc="end"/></React.Suspense>} />
+          <Route path="/" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc={latinSquareOrder[0]}/></React.Suspense>} />
+          <Route path="/study-page-1" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc={latinSquareOrder[1]}/></React.Suspense>} />
+          <Route path="/in-between-1" element={<React.Suspense fallback={<>...</>}><TestInfoPage 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-2" element={<React.Suspense fallback={<>...</>}><TestInfoPage 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-3" element={<React.Suspense fallback={<>...</>}><TestInfoPage 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-4" element={<React.Suspense fallback={<>...</>}><TestInfoPage 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-5" element={<React.Suspense fallback={<>...</>}><TestInfoPage 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>} />
         </Routes>