hicsail · wenhwang97 · Sep 10, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,15 @@
 import "./App.css";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createHashRouter, RouterProvider } from "react-router-dom";
 import { TestPage } from "./pages/TestPage";
+import { AuthPage } from "./pages/AuthPage";
 
 function App() {
-  const router = createBrowserRouter([{ path: "assessments", element: <TestPage /> }]);
+  const router = createHashRouter([
+    { path: "assessments/:participantId", element: <TestPage /> },
+    { path: "assessments", element: <TestPage /> },
+    { path: "auth/:participantId", element: <AuthPage /> },
+    { path: "auth/", element: <AuthPage /> },
+  ]);
 
   return <RouterProvider router={router} />;
 }

diff --git a/src/components/ChoiceReactionTimeMain.tsx b/src/components/ChoiceReactionTimeMain.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Grid, Typography } from "@mui/material";
 import { shuffleList } from "../utils/generalUtils";
 import { choiceReactionTimeConfig as uiConfig } from "../config/uiConfig";
 import { choiceReactionTimeConfig as testConfig } from "../config/testConfig";
@@ -37,24 +37,7 @@ export const ChoiceReactionTimeMain: FC<ChoiceReactionTimeMainProps> = ({
   }, [handleSubmit]);
 
   return (
-    <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 display="flex" flexDirection="column" alignItems="center" gap={5}>
       <Box position="relative">
         <Box>
           {hide ? (
@@ -82,23 +65,48 @@ export const ChoiceReactionTimeMain: FC<ChoiceReactionTimeMainProps> = ({
           )}
         </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 sx={{ position: "fixed", bottom: 10, left: 0, right: 0, display: "flex", justifyContent: "center", p: 1 }}>
+        <Grid container spacing={3} sx={{ width: "100%" }}>
+          <Grid item xs={6}>
+            <Button
+              fullWidth
+              variant="contained"
+              onClick={() => submitHandler("<")}
+              sx={{
+                backgroundColor: uiConfig.buttonColor,
+                "&:hover": {
+                  backgroundColor: uiConfig.buttonColor,
+                },
+                height: "15vh",
+                color: "black",
+                fontSize: 80,
+                fontWeight: "bold",
+              }}
+            >
+              {"<"}
+            </Button>
+          </Grid>
+          <Grid item xs={6}>
+            <Button
+              fullWidth
+              variant="contained"
+              onClick={() => submitHandler(">")}
+              sx={{
+                backgroundColor: uiConfig.buttonColor,
+                "&:hover": {
+                  backgroundColor: uiConfig.buttonColor,
+                },
+                height: "15vh",
+                color: "black",
+                fontSize: 80,
+                fontWeight: "bold",
+              }}
+            >
+              {">"}
+            </Button>
+          </Grid>
+        </Grid>
+      </Box>
     </Box>
   );
 };
diff --git a/src/components/DigitSymbolMatchingMain.tsx b/src/components/DigitSymbolMatchingMain.tsx
@@ -2,6 +2,16 @@ import { FC } from "react";
 import { Box, Button, Divider, Grid, Typography } from "@mui/material";
 import { digitSymbolConfig as testConfig } from "../config/testConfig";
 import { digitSymbolConfig as uiConfig } from "../config/uiConfig";
+import styled from "@emotion/styled";
+
+const Cell = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "leftBox" && prop !== "rightBox" && prop !== "middleBox",
+})<{ leftBox?: boolean; rightBox?: boolean; middleBox?: boolean }>(({ leftBox, rightBox }) => ({
+  borderLeft: leftBox ? "2px solid black" : "1px solid black",
+  borderRight: rightBox ? "2px solid black" : "1px solid black",
+  borderBottom: "2px solid black",
+  borderTop: "2px solid black",
+}));
 
 interface DigitSymbolMatchingMainProps {
   correctIndex: number;
@@ -21,22 +31,23 @@ export const DigitSymbolMatchingMain: FC<DigitSymbolMatchingMainProps> = ({ corr
         width={uiConfig.topSymbolHeight}
         style={{ marginBottom: 8 }}
       />
-      <Grid container spacing={1} marginBottom={8}>
+      <Grid container spacing={0} marginBottom={8}>
         {testConfig.symbolPairs.map((symbol, index) => (
           <Grid item key={index}>
-            <Box
+            <Cell
+              leftBox={index === 0}
+              rightBox={index === testConfig.symbolPairs.length - 1}
               display="flex"
               flexDirection="column"
               justifyContent="center"
               alignItems="center"
-              border="2px solid black"
             >
               <img src={symbol.image} height={uiConfig.listSymbolHeight} style={{ margin: 5 }} />
-              <Divider sx={{ width: "100%", borderBottom: "2px solid black" }} />
-              <Typography variant="h3" margin="5px">
+              <Divider sx={{ width: "100%", borderBottom: "1px solid black" }} />
+              <Typography variant="h3" margin="5px" fontSize={uiConfig.listFontSize}>
                 {symbol.num}
               </Typography>
-            </Box>
+            </Cell>
           </Grid>
         ))}
       </Grid>
@@ -64,7 +75,7 @@ export const DigitSymbolMatchingMain: FC<DigitSymbolMatchingMainProps> = ({ corr
                 height: uiConfig.buttonHeight,
                 backgroundColor: uiConfig.buttonBg,
                 color: uiConfig.textColor,
-                fontSize: uiConfig.fontSize,
+                fontSize: uiConfig.bubttonFontSize,
                 "&:active": {
                   backgroundColor: uiConfig.buttonClickedBg,
                 },
@@ -85,7 +96,7 @@ export const DigitSymbolMatchingMain: FC<DigitSymbolMatchingMainProps> = ({ corr
                 height: uiConfig.buttonHeight,
                 backgroundColor: uiConfig.buttonBg,
                 color: uiConfig.textColor,
-                fontSize: uiConfig.fontSize,
+                fontSize: uiConfig.bubttonFontSize,
                 "&:active": {
                   backgroundColor: uiConfig.buttonClickedBg,
                 },
@@ -106,7 +117,7 @@ export const DigitSymbolMatchingMain: FC<DigitSymbolMatchingMainProps> = ({ corr
                 height: uiConfig.buttonHeight,
                 backgroundColor: uiConfig.buttonBg,
                 color: uiConfig.textColor,
-                fontSize: uiConfig.fontSize,
+                fontSize: uiConfig.bubttonFontSize,
                 "&:active": {
                   backgroundColor: uiConfig.buttonClickedBg,
                 },

diff --git a/src/components/MemoryRecallMain.tsx b/src/components/MemoryRecallMain.tsx
@@ -30,6 +30,14 @@ export const MemoryRecallMain: FC<MemoryRecallMainProps> = ({ selected, handleSu
   }, [clickedNum]);
 
   const clickHandler = (index: number) => {
+    if (clickedNum >= maxSelection) {
+      return;
+    }
+
+    if (values[randomList[index]] !== "unselected") {
+      return;
+    }
+
     setClickedNum((num) => num + 1);
     setValues((prev) => {
       const newValues = { ...prev };
@@ -41,10 +49,10 @@ export const MemoryRecallMain: FC<MemoryRecallMainProps> = ({ selected, handleSu
 
   return (
     <Grid container direction="column" spacing={1}>
-      {Array.from({ length: 4 }).map((_, rowIndex) => (
+      {Array.from({ length: 8 }).map((_, rowIndex) => (
         <Grid container item spacing={1} key={rowIndex}>
-          {Array.from({ length: 4 }).map((_, colIndex) => {
-            const index = rowIndex * 4 + colIndex;
+          {Array.from({ length: 2 }).map((_, colIndex) => {
+            const index = rowIndex * 2 + colIndex;
             return (
               <Grid item key={colIndex}>
                 <Box

diff --git a/src/components/SoundCheck.tsx b/src/components/SoundCheck.tsx
@@ -30,7 +30,7 @@ export const SoundCheck: FC = () => {
   const [animationClass, setAnimationClass] = useState("");
 
   useEffect(() => {
-    setRandomNum(Math.floor(Math.random() * 10));
+    setRandomNum(Math.floor(Math.random() * 9));
   }, []);
 
   useEffect(() => {
@@ -77,7 +77,7 @@ export const SoundCheck: FC = () => {
   };
 
   return (
-    <>
+    <Box marginX="auto" width="80%">
       <Typography variant="h4" textAlign="initial" fontWeight="bold" marginBottom={1}>
         Sound Check
       </Typography>
@@ -88,10 +88,10 @@ export const SoundCheck: FC = () => {
         Otherwise, please increase your speaks volume.
       </Typography>
       <Grid container direction="column" spacing={1} marginTop={1}>
-        {Array.from({ length: 2 }).map((_, rowIndex) => (
+        {Array.from({ length: 3 }).map((_, rowIndex) => (
           <Grid container item spacing={1} key={rowIndex}>
-            {Array.from({ length: 5 }).map((_, colIndex) => {
-              const index = rowIndex * 5 + colIndex + 1;
+            {Array.from({ length: 3 }).map((_, colIndex) => {
+              const index = rowIndex * 3 + colIndex + 1;
               return (
                 <Grid item key={colIndex}>
                   <AnimatedBox
@@ -118,6 +118,6 @@ export const SoundCheck: FC = () => {
           </Grid>
         ))}
       </Grid>
-    </>
+    </Box>
   );
 };
diff --git a/src/components/SpacialMemoryMain.tsx b/src/components/SpacialMemoryMain.tsx
@@ -58,7 +58,7 @@ export const SpacialMemoryMain: FC<SpacialMemoryMainProps> = ({ numNodes, handle
   };
 
   return (
-    <Box>
+    <>
       <Grid container direction="column">
         {grid.map((row: any[], rowIndex: number) => (
           <Grid container item key={rowIndex} justifyContent="center">
@@ -76,11 +76,23 @@ export const SpacialMemoryMain: FC<SpacialMemoryMainProps> = ({ numNodes, handle
             ))}
           </Grid>
         ))}
-        <Button variant="contained" disabled={!enabled} sx={{ width: 400, marginTop: 2 }} onClick={submitHandler}>
+      </Grid>
+      <Box
+        sx={{
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          p: 1,
+        }}
+      >
+        <Button variant="contained" fullWidth disabled={!enabled} onClick={submitHandler} sx={{ fontSize: 20 }}>
           Submit
         </Button>
-      </Grid>
-    </Box>
+      </Box>
+    </>
   );
 };
 

diff --git a/src/components/VisualPairsMemorize.tsx b/src/components/VisualPairsMemorize.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import { visualPairsConfig as testConfig } from "../config/testConfig";
-import { Box, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 
 interface ChoiceReactionTimeMemorizeProps {
   imageGroupList: string[];
@@ -33,9 +33,9 @@ export const VisualPairsMemorize: FC<ChoiceReactionTimeMemorizeProps> = ({
   }, [pairIdx]);
 
   return (
-    <Box>
+    <>
       {pairIdx >= 0 && pairIdx < imageGroupList.length && (
-        <Grid container spacing={5}>
+        <Grid container direction="column" spacing={3}>
           <Grid
             item
             component="img"
@@ -48,6 +48,6 @@ export const VisualPairsMemorize: FC<ChoiceReactionTimeMemorizeProps> = ({
           />
         </Grid>
       )}
-    </Box>
+    </>
   );
 };
diff --git a/src/components/VisualPairsRecall.tsx b/src/components/VisualPairsRecall.tsx
@@ -32,7 +32,17 @@ export const VisualPairsRecall: FC<VisualPairsRecallProps> = ({ imageTheme, refe
               border="3px solid red"
             />
           </Grid>
-          {options.slice(0, 2).map((option, idx) => (
+          <Grid item>
+            <Box
+              component="img"
+              height={uiConfig.imageHeight}
+              src={`../src/assets/visual-pair/${imageTheme}${options[0]}.jpg`}
+              onClick={() => submitHandler(options[0])}
+            />
+          </Grid>
+        </Grid>
+        <Grid container spacing={1}>
+          {options.slice(1, 3).map((option, idx) => (
             <Grid key={idx} item>
               <Box
                 component="img"
@@ -44,7 +54,7 @@ export const VisualPairsRecall: FC<VisualPairsRecallProps> = ({ imageTheme, refe
           ))}
         </Grid>
         <Grid container spacing={1}>
-          {options.slice(2).map((option, idx) => (
+          {options.slice(3).map((option, idx) => (
             <Grid key={idx} item>
               <Box
                 component="img"

diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
@@ -6,7 +6,7 @@
  * @property textColor - Text color configuration
  */
 export const soundCheckConfig = {
-  buttonWidth: 100,
+  buttonWidth: "25vw",
   buttonHeight: 60,
   fontSize: 30,
   buttonColor: {
@@ -31,9 +31,10 @@ export const soundCheckConfig = {
  */
 export const digitSymbolConfig = {
   topSymbolHeight: "70vh",
-  listSymbolHeight: "50vh",
+  listSymbolHeight: "30vh",
+  listFontSize: 30,
   buttonHeight: 58,
-  fontSize: 32,
+  bubttonFontSize: 32,
   numpadBg: "#f0f0f0",
   buttonBg: "#d3d3d3",
   buttonClickedBg: "#a9a9a9",
@@ -44,16 +45,16 @@ export const digitSymbolConfig = {
  * @property cellSize - Size of each cell in pixels
  */
 export const spacialMemoryConfig = {
-  cellSize: "15vh",
+  cellSize: "20vw",
 };
 
 /**
  * @property buttonColor - Button color configuration
  * @property textColor - Text color configuration
  */
 export const memoryRecallConfig = {
-  buttonWidth: 140,
-  buttonHeight: "18vh",
+  buttonWidth: "40vw",
+  buttonHeight: "8vh",
   fontSize: 25,
   buttonColor: {
     unselected: "#839d97",