feat: setup test battery (#11)

* create test battery and setup spacial memory * disable zoom in/out * finish setup for choice reaction * add config for digit symbol and visual pairs * add context * add num pad to digit symbol test * add random wait timer * change test battery to page * add router * reconfig timer for choice reaction * add visual pairs test * add helper function for generate random num list * disable submit button during memorize stage * add placeholder transition page * setup memory recall component * rename digit symbol * fix sizing * modify script to accept same network traffic * add sound check component * change transition from page to component * add general direction page * add delay to memory recall after 5 selection * add placeholder for audio play
hicsail · Aug 30, 2024 · d4d8285 · d4d8285
1 parent 31e8908
commit d4d8285
Show file tree

Hide file tree

Showing 156 changed files with 1,016 additions and 104 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
@@ -14,7 +14,8 @@
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.16.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,11 @@
 import "./App.css";
-/*
-import { randomSelectFromList } from "./utils/generalUtils";
-import { ChoiceReactionTimeMain } from "./components/ChoiceReactionTimeMain";
-import { DigitSymbolCodingMain } from "./components/DigitSymbolCodingMain";
-import { MemoryRecallMain } from "./components/MemoryRecallMain";
-import { SpacialMemoryMain } from "./components/SpacialMemoryMain";
-*/
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { TestPage } from "./pages/TestPage";
+
 function App() {
-  return (
-    <>
-      {/* <SpacialMemoryMain numNodes={5} /> */}
-      {/* <MemoryRecallMain selected={["Octopus", "Elephant", "Cat", "Lion", "Squirrel"]} /> */}
-      {/* <DigitSymbolCodingMain correctIndex={Math.floor(Math.random() * 10) + 1} /> */}
-      {/* <ChoiceReactionTimeMain
-        correctIndex={randomSelectFromList([0, 1, 2])}
-        correctSymbol={randomSelectFromList(["<", ">"])}
-      /> */}
-    </>
-  );
+  const router = createBrowserRouter([{ path: "assessments", element: <TestPage /> }]);
+
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/src/assets/visual-pair/bar1.jpg b/src/assets/visual-pair/bar1.jpg
diff --git a/src/assets/visual-pair/bar2.jpg b/src/assets/visual-pair/bar2.jpg
diff --git a/src/assets/visual-pair/bar3.jpg b/src/assets/visual-pair/bar3.jpg
diff --git a/src/assets/visual-pair/bar4.jpg b/src/assets/visual-pair/bar4.jpg
diff --git a/src/assets/visual-pair/bar5.jpg b/src/assets/visual-pair/bar5.jpg
diff --git a/src/assets/visual-pair/bar6.jpg b/src/assets/visual-pair/bar6.jpg
diff --git a/src/assets/visual-pair/bar7.jpg b/src/assets/visual-pair/bar7.jpg
diff --git a/src/assets/visual-pair/bar8.jpg b/src/assets/visual-pair/bar8.jpg
diff --git a/src/assets/visual-pair/barn1.jpg b/src/assets/visual-pair/barn1.jpg
diff --git a/src/assets/visual-pair/barn2.jpg b/src/assets/visual-pair/barn2.jpg
diff --git a/src/assets/visual-pair/barn3.jpg b/src/assets/visual-pair/barn3.jpg
diff --git a/src/assets/visual-pair/barn4.jpg b/src/assets/visual-pair/barn4.jpg
diff --git a/src/assets/visual-pair/barn5.jpg b/src/assets/visual-pair/barn5.jpg
diff --git a/src/assets/visual-pair/barn6.jpg b/src/assets/visual-pair/barn6.jpg
diff --git a/src/assets/visual-pair/barn7.jpg b/src/assets/visual-pair/barn7.jpg
diff --git a/src/assets/visual-pair/barn8.jpg b/src/assets/visual-pair/barn8.jpg
diff --git a/src/assets/visual-pair/barn9.jpg b/src/assets/visual-pair/barn9.jpg
diff --git a/src/assets/visual-pair/bath1.jpg b/src/assets/visual-pair/bath1.jpg
diff --git a/src/assets/visual-pair/bath2.jpg b/src/assets/visual-pair/bath2.jpg
diff --git a/src/assets/visual-pair/bath3.jpg b/src/assets/visual-pair/bath3.jpg
diff --git a/src/assets/visual-pair/bath4.jpg b/src/assets/visual-pair/bath4.jpg
diff --git a/src/assets/visual-pair/bath5.jpg b/src/assets/visual-pair/bath5.jpg
diff --git a/src/assets/visual-pair/bath6.jpg b/src/assets/visual-pair/bath6.jpg
diff --git a/src/assets/visual-pair/bath7.jpg b/src/assets/visual-pair/bath7.jpg
diff --git a/src/assets/visual-pair/bath8.jpg b/src/assets/visual-pair/bath8.jpg
diff --git a/src/assets/visual-pair/beach1.jpg b/src/assets/visual-pair/beach1.jpg
diff --git a/src/assets/visual-pair/beach2.jpg b/src/assets/visual-pair/beach2.jpg
diff --git a/src/assets/visual-pair/beach3.jpg b/src/assets/visual-pair/beach3.jpg
diff --git a/src/assets/visual-pair/beach4.jpg b/src/assets/visual-pair/beach4.jpg
diff --git a/src/assets/visual-pair/beach5.jpg b/src/assets/visual-pair/beach5.jpg
diff --git a/src/assets/visual-pair/beach6.jpg b/src/assets/visual-pair/beach6.jpg
diff --git a/src/assets/visual-pair/beach7.jpg b/src/assets/visual-pair/beach7.jpg
diff --git a/src/assets/visual-pair/beach8.jpg b/src/assets/visual-pair/beach8.jpg
diff --git a/src/assets/visual-pair/bed1.jpg b/src/assets/visual-pair/bed1.jpg
diff --git a/src/assets/visual-pair/bed2.jpg b/src/assets/visual-pair/bed2.jpg
diff --git a/src/assets/visual-pair/bed3.jpg b/src/assets/visual-pair/bed3.jpg
diff --git a/src/assets/visual-pair/bed4.jpg b/src/assets/visual-pair/bed4.jpg
diff --git a/src/assets/visual-pair/bed5.jpg b/src/assets/visual-pair/bed5.jpg
diff --git a/src/assets/visual-pair/bed6.jpg b/src/assets/visual-pair/bed6.jpg
diff --git a/src/assets/visual-pair/bed7.jpg b/src/assets/visual-pair/bed7.jpg
diff --git a/src/assets/visual-pair/bed8.jpg b/src/assets/visual-pair/bed8.jpg
diff --git a/src/assets/visual-pair/boat1.jpg b/src/assets/visual-pair/boat1.jpg
diff --git a/src/assets/visual-pair/boat2.jpg b/src/assets/visual-pair/boat2.jpg
diff --git a/src/assets/visual-pair/boat3.jpg b/src/assets/visual-pair/boat3.jpg
diff --git a/src/assets/visual-pair/boat4.jpg b/src/assets/visual-pair/boat4.jpg
diff --git a/src/assets/visual-pair/boat5.jpg b/src/assets/visual-pair/boat5.jpg
diff --git a/src/assets/visual-pair/boat6.jpg b/src/assets/visual-pair/boat6.jpg
diff --git a/src/assets/visual-pair/boat7.jpg b/src/assets/visual-pair/boat7.jpg
diff --git a/src/assets/visual-pair/boat8.jpg b/src/assets/visual-pair/boat8.jpg
diff --git a/src/assets/visual-pair/buffet1.jpg b/src/assets/visual-pair/buffet1.jpg
diff --git a/src/assets/visual-pair/buffet2.jpg b/src/assets/visual-pair/buffet2.jpg
diff --git a/src/assets/visual-pair/buffet3.jpg b/src/assets/visual-pair/buffet3.jpg
diff --git a/src/assets/visual-pair/buffet4.jpg b/src/assets/visual-pair/buffet4.jpg
diff --git a/src/assets/visual-pair/buffet5.jpg b/src/assets/visual-pair/buffet5.jpg
diff --git a/src/assets/visual-pair/buffet6.jpg b/src/assets/visual-pair/buffet6.jpg
diff --git a/src/assets/visual-pair/buffet7.jpg b/src/assets/visual-pair/buffet7.jpg
diff --git a/src/assets/visual-pair/buffet8.jpg b/src/assets/visual-pair/buffet8.jpg
diff --git a/src/assets/visual-pair/closet1.jpg b/src/assets/visual-pair/closet1.jpg
diff --git a/src/assets/visual-pair/closet2.jpg b/src/assets/visual-pair/closet2.jpg
diff --git a/src/assets/visual-pair/closet3.jpg b/src/assets/visual-pair/closet3.jpg
diff --git a/src/assets/visual-pair/closet4.jpg b/src/assets/visual-pair/closet4.jpg
diff --git a/src/assets/visual-pair/closet5.jpg b/src/assets/visual-pair/closet5.jpg
diff --git a/src/assets/visual-pair/closet6.jpg b/src/assets/visual-pair/closet6.jpg
diff --git a/src/assets/visual-pair/closet7.jpg b/src/assets/visual-pair/closet7.jpg
diff --git a/src/assets/visual-pair/closet8.jpg b/src/assets/visual-pair/closet8.jpg
diff --git a/src/assets/visual-pair/door1.jpg b/src/assets/visual-pair/door1.jpg
diff --git a/src/assets/visual-pair/door2.jpg b/src/assets/visual-pair/door2.jpg
diff --git a/src/assets/visual-pair/door3.jpg b/src/assets/visual-pair/door3.jpg
diff --git a/src/assets/visual-pair/door4.jpg b/src/assets/visual-pair/door4.jpg
diff --git a/src/assets/visual-pair/door5.jpg b/src/assets/visual-pair/door5.jpg
diff --git a/src/assets/visual-pair/door6.jpg b/src/assets/visual-pair/door6.jpg
diff --git a/src/assets/visual-pair/door7.jpg b/src/assets/visual-pair/door7.jpg
diff --git a/src/assets/visual-pair/door8.jpg b/src/assets/visual-pair/door8.jpg
diff --git a/src/assets/visual-pair/entry1.jpg b/src/assets/visual-pair/entry1.jpg
diff --git a/src/assets/visual-pair/entry2.jpg b/src/assets/visual-pair/entry2.jpg
diff --git a/src/assets/visual-pair/entry3.jpg b/src/assets/visual-pair/entry3.jpg
diff --git a/src/assets/visual-pair/entry4.jpg b/src/assets/visual-pair/entry4.jpg
diff --git a/src/assets/visual-pair/entry5.jpg b/src/assets/visual-pair/entry5.jpg
diff --git a/src/assets/visual-pair/entry6.jpg b/src/assets/visual-pair/entry6.jpg
diff --git a/src/assets/visual-pair/entry7.jpg b/src/assets/visual-pair/entry7.jpg
diff --git a/src/assets/visual-pair/entry8.jpg b/src/assets/visual-pair/entry8.jpg
diff --git a/src/assets/visual-pair/example1.jpg b/src/assets/visual-pair/example1.jpg
diff --git a/src/assets/visual-pair/example2.jpg b/src/assets/visual-pair/example2.jpg
diff --git a/src/assets/visual-pair/example3.jpg b/src/assets/visual-pair/example3.jpg
diff --git a/src/assets/visual-pair/example4.jpg b/src/assets/visual-pair/example4.jpg
diff --git a/src/assets/visual-pair/example5.jpg b/src/assets/visual-pair/example5.jpg
diff --git a/src/assets/visual-pair/example6.jpg b/src/assets/visual-pair/example6.jpg
diff --git a/src/assets/visual-pair/field1.jpg b/src/assets/visual-pair/field1.jpg
diff --git a/src/assets/visual-pair/field2.jpg b/src/assets/visual-pair/field2.jpg
diff --git a/src/assets/visual-pair/field3.jpg b/src/assets/visual-pair/field3.jpg
diff --git a/src/assets/visual-pair/field4.jpg b/src/assets/visual-pair/field4.jpg
diff --git a/src/assets/visual-pair/field5.jpg b/src/assets/visual-pair/field5.jpg
diff --git a/src/assets/visual-pair/field6.jpg b/src/assets/visual-pair/field6.jpg
diff --git a/src/assets/visual-pair/field7.jpg b/src/assets/visual-pair/field7.jpg
diff --git a/src/assets/visual-pair/field8.jpg b/src/assets/visual-pair/field8.jpg
diff --git a/src/assets/visual-pair/kitchen1.jpg b/src/assets/visual-pair/kitchen1.jpg
diff --git a/src/assets/visual-pair/kitchen2.jpg b/src/assets/visual-pair/kitchen2.jpg
diff --git a/src/assets/visual-pair/kitchen3.jpg b/src/assets/visual-pair/kitchen3.jpg
diff --git a/src/assets/visual-pair/kitchen4.jpg b/src/assets/visual-pair/kitchen4.jpg
diff --git a/src/assets/visual-pair/kitchen5.jpg b/src/assets/visual-pair/kitchen5.jpg
diff --git a/src/assets/visual-pair/kitchen6.jpg b/src/assets/visual-pair/kitchen6.jpg
diff --git a/src/assets/visual-pair/kitchen7.jpg b/src/assets/visual-pair/kitchen7.jpg
diff --git a/src/assets/visual-pair/kitchen8.jpg b/src/assets/visual-pair/kitchen8.jpg
diff --git a/src/assets/visual-pair/lobby1.jpg b/src/assets/visual-pair/lobby1.jpg
diff --git a/src/assets/visual-pair/lobby2.jpg b/src/assets/visual-pair/lobby2.jpg
diff --git a/src/assets/visual-pair/lobby3.jpg b/src/assets/visual-pair/lobby3.jpg
diff --git a/src/assets/visual-pair/lobby4.jpg b/src/assets/visual-pair/lobby4.jpg
diff --git a/src/assets/visual-pair/lobby5.jpg b/src/assets/visual-pair/lobby5.jpg
diff --git a/src/assets/visual-pair/lobby6.jpg b/src/assets/visual-pair/lobby6.jpg
diff --git a/src/assets/visual-pair/lobby7.jpg b/src/assets/visual-pair/lobby7.jpg
diff --git a/src/assets/visual-pair/lobby8.jpg b/src/assets/visual-pair/lobby8.jpg
diff --git a/src/assets/visual-pair/playground1.jpg b/src/assets/visual-pair/playground1.jpg
diff --git a/src/assets/visual-pair/playground2.jpg b/src/assets/visual-pair/playground2.jpg
diff --git a/src/assets/visual-pair/playground3.jpg b/src/assets/visual-pair/playground3.jpg
diff --git a/src/assets/visual-pair/playground4.jpg b/src/assets/visual-pair/playground4.jpg
diff --git a/src/assets/visual-pair/playground5.jpg b/src/assets/visual-pair/playground5.jpg
diff --git a/src/assets/visual-pair/playground6.jpg b/src/assets/visual-pair/playground6.jpg
diff --git a/src/assets/visual-pair/playground7.jpg b/src/assets/visual-pair/playground7.jpg
diff --git a/src/assets/visual-pair/playground8.jpg b/src/assets/visual-pair/playground8.jpg
diff --git a/src/assets/visual-pair/temple1.jpg b/src/assets/visual-pair/temple1.jpg
diff --git a/src/assets/visual-pair/temple2.jpg b/src/assets/visual-pair/temple2.jpg
diff --git a/src/assets/visual-pair/temple3.jpg b/src/assets/visual-pair/temple3.jpg
diff --git a/src/assets/visual-pair/temple4.jpg b/src/assets/visual-pair/temple4.jpg
diff --git a/src/assets/visual-pair/temple5.jpg b/src/assets/visual-pair/temple5.jpg
diff --git a/src/assets/visual-pair/temple6.jpg b/src/assets/visual-pair/temple6.jpg
diff --git a/src/assets/visual-pair/temple7.jpg b/src/assets/visual-pair/temple7.jpg
diff --git a/src/assets/visual-pair/temple8.jpg b/src/assets/visual-pair/temple8.jpg
diff --git a/src/assets/visual-pair/underwater1.jpg b/src/assets/visual-pair/underwater1.jpg
diff --git a/src/assets/visual-pair/underwater2.jpg b/src/assets/visual-pair/underwater2.jpg
diff --git a/src/assets/visual-pair/underwater3.jpg b/src/assets/visual-pair/underwater3.jpg
diff --git a/src/assets/visual-pair/underwater4.jpg b/src/assets/visual-pair/underwater4.jpg
diff --git a/src/assets/visual-pair/underwater5.jpg b/src/assets/visual-pair/underwater5.jpg
diff --git a/src/assets/visual-pair/underwater6.jpg b/src/assets/visual-pair/underwater6.jpg
diff --git a/src/assets/visual-pair/underwater7.jpg b/src/assets/visual-pair/underwater7.jpg
diff --git a/src/assets/visual-pair/underwater8.jpg b/src/assets/visual-pair/underwater8.jpg
diff --git a/src/components/ChoiceReactionTimeMain.tsx b/src/components/ChoiceReactionTimeMain.tsx
@@ -1,40 +1,104 @@
-import { FC } from "react";
-import { Box, Typography } from "@mui/material";
+import { FC, useEffect, useState } from "react";
+import { Box, Button, Typography } from "@mui/material";
 import { shuffleList } from "../utils/generalUtils";
 import { choiceReactionTimeConfig as uiConfig } from "../config/uiConfig";
+import { choiceReactionTimeConfig as testConfig } from "../config/testConfig";
 
 interface ChoiceReactionTimeMainProps {
   correctIndex: 0 | 1 | 2;
   correctSymbol: string;
+  handleSubmit: (result: boolean) => void;
 }
 
-export const ChoiceReactionTimeMain: FC<ChoiceReactionTimeMainProps> = ({ correctIndex, correctSymbol }) => {
+export const ChoiceReactionTimeMain: FC<ChoiceReactionTimeMainProps> = ({
+  correctIndex,
+  correctSymbol,
+  handleSubmit,
+}) => {
+  const [hide, setHide] = useState(true);
+
+  const waitTime =
+    Math.floor(Math.random() * (testConfig.waitTimeMax - testConfig.waitTimeMin)) + testConfig.waitTimeMin;
   const symbols = shuffleList(["<", ">"]);
   const colors = shuffleList([uiConfig.choiceColor.color0, uiConfig.choiceColor.color1]);
 
+  const submitHandler = (input: string) => {
+    const result = correctSymbol === input;
+    setHide(true);
+    handleSubmit(result);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setHide(false);
+    }, waitTime);
+
+    return () => clearTimeout(timer);
+  }, [handleSubmit]);
+
   return (
-    <Box position="relative">
-      <Box>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <Box
-            key={index}
-            width={80}
-            height={80}
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            border={1}
-            marginY={2}
-            sx={{
-              backgroundColor: index === correctIndex ? colors[0] : colors[1],
-            }}
-          >
-            <Typography variant="h2" fontWeight="bold">
-              {index === correctIndex ? correctSymbol : symbols.pop()}
-            </Typography>
-          </Box>
-        ))}
+    <Box display="flex" alignItems="center" gap={15}>
+      <Button
+        variant="contained"
+        onClick={() => submitHandler("<")}
+        sx={{
+          backgroundColor: uiConfig.buttonColor,
+          "&:hover": {
+            backgroundColor: uiConfig.buttonColor,
+          },
+          width: 160,
+          height: 160,
+          color: "black",
+          fontSize: 80,
+          fontWeight: "bold",
+        }}
+      >
+        {"<"}
+      </Button>
+      <Box position="relative">
+        <Box>
+          {hide ? (
+            <Box width={82} />
+          ) : (
+            Array.from({ length: 3 }).map((_, index) => (
+              <Box
+                key={index}
+                width={80}
+                height={80}
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                border={1}
+                marginY={2}
+                sx={{
+                  backgroundColor: index === correctIndex ? colors[0] : colors[1],
+                }}
+              >
+                <Typography variant="h2" fontWeight="bold">
+                  {index === correctIndex ? correctSymbol : symbols.pop()}
+                </Typography>
+              </Box>
+            ))
+          )}
+        </Box>
       </Box>
+      <Button
+        variant="contained"
+        onClick={() => submitHandler(">")}
+        sx={{
+          backgroundColor: uiConfig.buttonColor,
+          "&:hover": {
+            backgroundColor: uiConfig.buttonColor,
+          },
+          width: 160,
+          height: 160,
+          color: "black",
+          fontSize: 80,
+          fontWeight: "bold",
+        }}
+      >
+        {">"}
+      </Button>
     </Box>
   );
 };
diff --git a/src/components/DigitSymbolCodingMain.tsx b/src/components/DigitSymbolCodingMain.tsx