From fceadb5c74485af9ed32b9a1ffec53dac037a9e2 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Wed, 16 Oct 2024 08:24:38 -0400 Subject: [PATCH 01/17] change stage order and increase button size --- src/components/GeneralDirection.tsx | 32 ++++++++++++++++++---- src/components/SoundCheck.tsx | 2 +- src/components/tests/SpatialMemoryMain.tsx | 8 +++++- src/contexts/general.context.tsx | 4 +-- src/pages/TestPage.tsx | 6 ++-- 5 files changed, 39 insertions(+), 13 deletions(-) diff --git a/src/components/GeneralDirection.tsx b/src/components/GeneralDirection.tsx index 1ed20c8..0d1c0b5 100644 --- a/src/components/GeneralDirection.tsx +++ b/src/components/GeneralDirection.tsx @@ -1,20 +1,40 @@ import { FC, useContext } from "react"; -import { Button } from "@mui/material"; +import { Box, Button, Divider, Typography } from "@mui/material"; import { GeneralContext, Stage } from "../contexts/general.context"; export const GeneralDirection: FC = () => { const cxt = useContext(GeneralContext); const continueButtonHandler = () => { - cxt?.setStage(Stage.SOUND_CHECK); + cxt?.setStage(Stage.TRANSITION); }; return ( <> -

General Direction Placeholder

- + + + Directions + + + + Please do NOT use paper! Solve all questions in your mind. Click "Begin Test" to proceed. + + + + + ); }; diff --git a/src/components/SoundCheck.tsx b/src/components/SoundCheck.tsx index 423fafe..cb0551f 100644 --- a/src/components/SoundCheck.tsx +++ b/src/components/SoundCheck.tsx @@ -89,7 +89,7 @@ export const SoundCheck: FC = () => { if (index === cxt?.soundCheckNumber) { setTimeout(() => { - cxt?.setStage(Stage.TRANSITION); + cxt?.setStage(Stage.GENERAL_DIRECTION); }, 2000); } else { setTimeout(() => { diff --git a/src/components/tests/SpatialMemoryMain.tsx b/src/components/tests/SpatialMemoryMain.tsx index 81ac8cf..fb67ee0 100644 --- a/src/components/tests/SpatialMemoryMain.tsx +++ b/src/components/tests/SpatialMemoryMain.tsx @@ -130,7 +130,13 @@ export const SpatialMemoryMain: FC = ({ toTestPhase }) = p: 1, }} > - diff --git a/src/contexts/general.context.tsx b/src/contexts/general.context.tsx index 328c283..c7ffdf1 100644 --- a/src/contexts/general.context.tsx +++ b/src/contexts/general.context.tsx @@ -2,8 +2,8 @@ import { createContext, Dispatch, FC, ReactNode, SetStateAction, useState } from export enum Stage { NULL = 0, - GENERAL_DIRECTION = 1, - SOUND_CHECK = 2, + SOUND_CHECK = 1, + GENERAL_DIRECTION = 2, TRANSITION = 3, TEST = 4, } diff --git a/src/pages/TestPage.tsx b/src/pages/TestPage.tsx index 7007bfe..7272c03 100644 --- a/src/pages/TestPage.tsx +++ b/src/pages/TestPage.tsx @@ -28,10 +28,10 @@ export const TestPage: FC = () => { if (!sessionStorage.getItem("testPhase") || !sessionStorage.getItem("stage")) { sessionStorage.setItem("testPhase", String(generalConfig.testOrder[0])); - sessionStorage.setItem("stage", String(Stage.GENERAL_DIRECTION)); + sessionStorage.setItem("stage", String(Stage.SOUND_CHECK)); sessionStorage.setItem("questionNumber", "0"); cxt!.setTestPhase(generalConfig.testOrder[0]); - cxt!.setStage(Stage.GENERAL_DIRECTION); + cxt!.setStage(Stage.SOUND_CHECK); } else { cxt!.setTestPhase(Number(sessionStorage.getItem("testPhase")) as TestPhase); cxt!.setStage(Number(sessionStorage.getItem("stage")) as Stage); @@ -85,8 +85,8 @@ export const TestPage: FC = () => { return ( <> - {cxt?.stage === Stage.GENERAL_DIRECTION && } {cxt?.stage === Stage.SOUND_CHECK && } + {cxt?.stage === Stage.GENERAL_DIRECTION && } {cxt?.stage === Stage.TRANSITION && } {cxt?.stage === Stage.TEST && } From 5ccde053f470c1c7512f581ca2bd17b86a15c54c Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Wed, 16 Oct 2024 08:26:20 -0400 Subject: [PATCH 02/17] change width for general instructions --- src/components/GeneralDirection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/GeneralDirection.tsx b/src/components/GeneralDirection.tsx index 0d1c0b5..b70cebb 100644 --- a/src/components/GeneralDirection.tsx +++ b/src/components/GeneralDirection.tsx @@ -11,12 +11,12 @@ export const GeneralDirection: FC = () => { return ( <> - - + + Directions - + Please do NOT use paper! Solve all questions in your mind. Click "Begin Test" to proceed. From f22123df3f581d24fde5d3de1d12c0de4ad36ba8 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Wed, 16 Oct 2024 08:29:44 -0400 Subject: [PATCH 03/17] change width for sound check --- src/components/SoundCheck.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SoundCheck.tsx b/src/components/SoundCheck.tsx index cb0551f..3f9e8f8 100644 --- a/src/components/SoundCheck.tsx +++ b/src/components/SoundCheck.tsx @@ -126,18 +126,18 @@ export const SoundCheck: FC = () => { }; return ( - + Sound Check - + If you can hear this message, click the announced number. - + Otherwise, please increase your speaks volume. - + {Array.from({ length: 3 }).map((_, rowIndex) => ( {Array.from({ length: 3 }).map((_, colIndex) => { From 10c264f45d67b4c1b6d1919d4c5407b67cabe25b Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Wed, 16 Oct 2024 08:38:13 -0400 Subject: [PATCH 04/17] fix font size --- src/components/GeneralDirection.tsx | 2 +- src/components/SoundCheck.tsx | 7 ++++--- src/components/tests/MemoryRecallMain.tsx | 8 ++++---- src/config/ui.config.ts | 2 +- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/GeneralDirection.tsx b/src/components/GeneralDirection.tsx index b70cebb..45b16d6 100644 --- a/src/components/GeneralDirection.tsx +++ b/src/components/GeneralDirection.tsx @@ -16,7 +16,7 @@ export const GeneralDirection: FC = () => { Directions - + Please do NOT use paper! Solve all questions in your mind. Click "Begin Test" to proceed. diff --git a/src/components/SoundCheck.tsx b/src/components/SoundCheck.tsx index 3f9e8f8..5cecb49 100644 --- a/src/components/SoundCheck.tsx +++ b/src/components/SoundCheck.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, IconButton, Typography } from "@mui/material"; +import { Box, Divider, Grid, IconButton, Typography } from "@mui/material"; import { FC, useContext, useEffect, useState } from "react"; import { soundCheckConfig as uiConfig } from "../config/ui.config"; import { GeneralContext, Stage } from "../contexts/general.context"; @@ -130,10 +130,11 @@ export const SoundCheck: FC = () => { Sound Check - + + If you can hear this message, click the announced number. - + Otherwise, please increase your speaks volume. diff --git a/src/components/tests/MemoryRecallMain.tsx b/src/components/tests/MemoryRecallMain.tsx index 41482f1..c8dadb1 100644 --- a/src/components/tests/MemoryRecallMain.tsx +++ b/src/components/tests/MemoryRecallMain.tsx @@ -154,18 +154,18 @@ export const MemoryRecallMain: FC = ({ phase, toTestPhase top: 0, left: 0, right: 0, - width: "80vw", + width: "85vw", marginX: "auto", marginY: 4, }} > {!showInstruction && phase === TestPhase.MEMORY_RECALL_IMMEDIATE && ( - + Please memorize these five animals until the end of the test. )} {showInstruction && ( - + Select the five animals you have heard. )} @@ -176,7 +176,7 @@ export const MemoryRecallMain: FC = ({ phase, toTestPhase )} {showOptions && ( - + {Array.from({ length: 8 }).map((_, rowIndex) => ( {Array.from({ length: 2 }).map((_, colIndex) => { diff --git a/src/config/ui.config.ts b/src/config/ui.config.ts index 644357a..b2d6727 100644 --- a/src/config/ui.config.ts +++ b/src/config/ui.config.ts @@ -51,7 +51,7 @@ export const spatialMemoryConfig = { * @property textColor - Text color configuration */ export const memoryRecallConfig = { - buttonWidth: "40vw", + buttonWidth: "42vw", buttonHeight: "8vh", fontSize: 25, buttonColor: { From 709292d38cd78c251dd3aa399fd1035429871001 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Wed, 16 Oct 2024 08:40:20 -0400 Subject: [PATCH 05/17] fix button font size --- src/components/GeneralDirection.tsx | 2 +- src/components/tests/SpatialMemoryMain.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/GeneralDirection.tsx b/src/components/GeneralDirection.tsx index 45b16d6..5db3174 100644 --- a/src/components/GeneralDirection.tsx +++ b/src/components/GeneralDirection.tsx @@ -31,7 +31,7 @@ export const GeneralDirection: FC = () => { p: 1, }} > - diff --git a/src/components/tests/SpatialMemoryMain.tsx b/src/components/tests/SpatialMemoryMain.tsx index fb67ee0..c0d89e8 100644 --- a/src/components/tests/SpatialMemoryMain.tsx +++ b/src/components/tests/SpatialMemoryMain.tsx @@ -132,7 +132,7 @@ export const SpatialMemoryMain: FC = ({ toTestPhase }) = > + {!displayInstructions && ( + + phase === cxt!.testPhase)} /> + + )} + {displayInstructions && } + + {instructionComponents[cxt!.testPhase]!.length <= 0 ? ( + + ) : ( + + )} + ); }; diff --git a/src/components/instructions/InstructionContainer.tsx b/src/components/instructions/InstructionContainer.tsx new file mode 100644 index 0000000..75f37b4 --- /dev/null +++ b/src/components/instructions/InstructionContainer.tsx @@ -0,0 +1,78 @@ +import { FC, useState } from "react"; +import { TestPhase } from "../../contexts/general.context"; +import { Box, Button, Divider, Typography } from "@mui/material"; + +const titleMapping: { [key in TestPhase]?: string } = { + [TestPhase.MEMORY_RECALL_IMMEDIATE]: "Memory - Immediate Recall", + [TestPhase.VISUAL_PAIRS_MEMORIZE]: "Visual Paired Associates - Learn", + [TestPhase.CHOICE_REACTION_TIME]: "Choice Reaction Time", + [TestPhase.VISUAL_PAIRS_RECALL]: "Visual Paired Associates - Test", + [TestPhase.DIGIT_SYMBOL_MATCHING]: "Digit Symbol Matching", + [TestPhase.SPATIAL_MEMORY]: "Spatial Memory", + [TestPhase.MEMORY_RECALL_DELAYED]: "Memory - Delayed Recall", +}; + +export const instructionComponents: { [key in TestPhase]?: JSX.Element[] } = { + [TestPhase.MEMORY_RECALL_IMMEDIATE]: [], + [TestPhase.VISUAL_PAIRS_MEMORIZE]: [], + [TestPhase.CHOICE_REACTION_TIME]: [], + [TestPhase.VISUAL_PAIRS_RECALL]: [], + [TestPhase.DIGIT_SYMBOL_MATCHING]: [], + [TestPhase.SPATIAL_MEMORY]: [], + [TestPhase.MEMORY_RECALL_DELAYED]: [], +}; + +interface InstructionContainerProps { + phase: TestPhase; + handleTransition: () => void; +} + +export const InstructionContainer: FC = ({ phase, handleTransition }) => { + const [instructionIdx, setInstructionIdx] = useState(0); + + return ( + <> + + + {titleMapping[phase]} + + + {instructionComponents[phase]![instructionIdx]} + + + {instructionIdx + 1 < instructionComponents[phase]!.length ? ( + + ) : ( + + )} + + + ); +}; From 07776e1a073f2000e759df0ccfa29f5e4877eeb8 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 09:47:13 -0400 Subject: [PATCH 07/17] add instructions for visual pairs memorize --- .../instructions/InstructionContainer.tsx | 3 ++- src/components/instructions/VisualPairs.tsx | 20 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/components/instructions/VisualPairs.tsx diff --git a/src/components/instructions/InstructionContainer.tsx b/src/components/instructions/InstructionContainer.tsx index 75f37b4..4f7dbf5 100644 --- a/src/components/instructions/InstructionContainer.tsx +++ b/src/components/instructions/InstructionContainer.tsx @@ -1,6 +1,7 @@ import { FC, useState } from "react"; import { TestPhase } from "../../contexts/general.context"; import { Box, Button, Divider, Typography } from "@mui/material"; +import { vpmInstructions } from "./VisualPairs"; const titleMapping: { [key in TestPhase]?: string } = { [TestPhase.MEMORY_RECALL_IMMEDIATE]: "Memory - Immediate Recall", @@ -14,7 +15,7 @@ const titleMapping: { [key in TestPhase]?: string } = { export const instructionComponents: { [key in TestPhase]?: JSX.Element[] } = { [TestPhase.MEMORY_RECALL_IMMEDIATE]: [], - [TestPhase.VISUAL_PAIRS_MEMORIZE]: [], + [TestPhase.VISUAL_PAIRS_MEMORIZE]: vpmInstructions, [TestPhase.CHOICE_REACTION_TIME]: [], [TestPhase.VISUAL_PAIRS_RECALL]: [], [TestPhase.DIGIT_SYMBOL_MATCHING]: [], diff --git a/src/components/instructions/VisualPairs.tsx b/src/components/instructions/VisualPairs.tsx new file mode 100644 index 0000000..bdfb56b --- /dev/null +++ b/src/components/instructions/VisualPairs.tsx @@ -0,0 +1,20 @@ +import { Grid, Typography } from "@mui/material"; +import { generalConfig as testConfig } from "../../config/test.config"; +import { FC } from "react"; + +const VPVisual: FC = () => ( + + + + +); + +export const vpmInstructions: JSX.Element[] = [ + <> + + + You will see {Object.keys(testConfig.visualPairsAns).length} image pairs, like above. Learn which images go + together. Later you will be tested on that. + + , +]; From 1aea61bba88b5406a58325b90391a9c1ec28620d Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 09:49:11 -0400 Subject: [PATCH 08/17] add instructions for choice reaction --- .../instructions/ChoiceReactionTime.tsx | 88 +++++++++++++++++++ .../instructions/InstructionContainer.tsx | 3 +- 2 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 src/components/instructions/ChoiceReactionTime.tsx diff --git a/src/components/instructions/ChoiceReactionTime.tsx b/src/components/instructions/ChoiceReactionTime.tsx new file mode 100644 index 0000000..385cbda --- /dev/null +++ b/src/components/instructions/ChoiceReactionTime.tsx @@ -0,0 +1,88 @@ +import { Box, Typography } from "@mui/material"; +import { FC } from "react"; +import { choiceReactionTimeConfig as uiConfig } from "../../config/ui.config"; +import { generalConfig as testConfig } from "../../config/test.config"; + +const CRTVisual0: FC = () => ( + + {[">", "<", ">"].map((symbol, index) => ( + + + {symbol} + + + ))} + +); + +const CRTVisual1: FC = () => ( + + {[">", "<", "<"].map((symbol, index) => ( + + + {symbol} + + + ))} + +); + +export const crtInstructions: JSX.Element[] = [ + <> + + + Look at the 3 colored squares. + + + Two squares are the same color, one is different (ODD-COLOR). + + , + <> + + + Now look at the ARROW inside the ODD-COLOR. + + + When the odd-color arrow points right, tap the RIGHT-ARROW button at the{" "} + bottom of the screen with your right hand. + + , + <> + + + When the odd-color arrow points left, tap the LEFT-ARROW button at the{" "} + bottom of the screen with your left hand. + + , + <> + + + You will see {Object.keys(testConfig.choiceReactionTimeAns).length} sets of ARROWs. Please response as fast as you + can. + + , +]; diff --git a/src/components/instructions/InstructionContainer.tsx b/src/components/instructions/InstructionContainer.tsx index 4f7dbf5..8e5d24c 100644 --- a/src/components/instructions/InstructionContainer.tsx +++ b/src/components/instructions/InstructionContainer.tsx @@ -2,6 +2,7 @@ import { FC, useState } from "react"; import { TestPhase } from "../../contexts/general.context"; import { Box, Button, Divider, Typography } from "@mui/material"; import { vpmInstructions } from "./VisualPairs"; +import { crtInstructions } from "./ChoiceReactionTime"; const titleMapping: { [key in TestPhase]?: string } = { [TestPhase.MEMORY_RECALL_IMMEDIATE]: "Memory - Immediate Recall", @@ -16,7 +17,7 @@ const titleMapping: { [key in TestPhase]?: string } = { export const instructionComponents: { [key in TestPhase]?: JSX.Element[] } = { [TestPhase.MEMORY_RECALL_IMMEDIATE]: [], [TestPhase.VISUAL_PAIRS_MEMORIZE]: vpmInstructions, - [TestPhase.CHOICE_REACTION_TIME]: [], + [TestPhase.CHOICE_REACTION_TIME]: crtInstructions, [TestPhase.VISUAL_PAIRS_RECALL]: [], [TestPhase.DIGIT_SYMBOL_MATCHING]: [], [TestPhase.SPATIAL_MEMORY]: [], From c99699ae8bfc651ab7393bca463f813e70a07e35 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 09:51:43 -0400 Subject: [PATCH 09/17] add instructions for visual pairs recall --- .../instructions/InstructionContainer.tsx | 4 ++-- src/components/instructions/VisualPairs.tsx | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/instructions/InstructionContainer.tsx b/src/components/instructions/InstructionContainer.tsx index 8e5d24c..0f6f97c 100644 --- a/src/components/instructions/InstructionContainer.tsx +++ b/src/components/instructions/InstructionContainer.tsx @@ -1,7 +1,7 @@ import { FC, useState } from "react"; import { TestPhase } from "../../contexts/general.context"; import { Box, Button, Divider, Typography } from "@mui/material"; -import { vpmInstructions } from "./VisualPairs"; +import { vpmInstructions, vprInstructions } from "./VisualPairs"; import { crtInstructions } from "./ChoiceReactionTime"; const titleMapping: { [key in TestPhase]?: string } = { @@ -18,7 +18,7 @@ export const instructionComponents: { [key in TestPhase]?: JSX.Element[] } = { [TestPhase.MEMORY_RECALL_IMMEDIATE]: [], [TestPhase.VISUAL_PAIRS_MEMORIZE]: vpmInstructions, [TestPhase.CHOICE_REACTION_TIME]: crtInstructions, - [TestPhase.VISUAL_PAIRS_RECALL]: [], + [TestPhase.VISUAL_PAIRS_RECALL]: vprInstructions, [TestPhase.DIGIT_SYMBOL_MATCHING]: [], [TestPhase.SPATIAL_MEMORY]: [], [TestPhase.MEMORY_RECALL_DELAYED]: [], diff --git a/src/components/instructions/VisualPairs.tsx b/src/components/instructions/VisualPairs.tsx index bdfb56b..c81ec94 100644 --- a/src/components/instructions/VisualPairs.tsx +++ b/src/components/instructions/VisualPairs.tsx @@ -18,3 +18,21 @@ export const vpmInstructions: JSX.Element[] = [ , ]; + +export const vprInstructions: JSX.Element[] = [ + <> + + + Let's test your memory for the images you learned a few minutes ago. + + + You will need to select the image that goes together with the image with red outline at the{" "} + top left corner. + + , + <> + + You will be asked to recall all {Object.keys(testConfig.visualPairsAns).length} pairs. Let's start! + + , +]; From 538ea4713df6af321ca2f2b710bd6ea046a4ea25 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 10:00:22 -0400 Subject: [PATCH 10/17] add instructions for digit symbols --- .../instructions/DigitSymbolMatching.tsx | 64 +++++++++++++++++++ .../instructions/InstructionContainer.tsx | 3 +- .../tests/DigitSymbolMatchingMain.tsx | 2 +- 3 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 src/components/instructions/DigitSymbolMatching.tsx diff --git a/src/components/instructions/DigitSymbolMatching.tsx b/src/components/instructions/DigitSymbolMatching.tsx new file mode 100644 index 0000000..274721e --- /dev/null +++ b/src/components/instructions/DigitSymbolMatching.tsx @@ -0,0 +1,64 @@ +import { Divider, Grid, Typography } from "@mui/material"; +import { FC } from "react"; +import { Cell } from "../tests/DigitSymbolMatchingMain"; +import { digitSymbolConfig as testConfig } from "../../config/test.config"; +import { generalConfig } from "../../config/test.config"; +import { digitSymbolConfig as uiConfig } from "../../config/ui.config"; + +const DSMVisual: FC = () => ( + + {testConfig.symbolPairs.map((symbol, index) => ( + + + + + + {symbol.num} + + + + ))} + +); + +export const dsmInstructions: JSX.Element[] = [ + <> + + + Each symbol has a number. + + , + <> + + + + When a symbol appears at the top, press its number on the number pad at the{" "} + bottom of the screen (here it is 1). + + , + <> + + You will see {Object.keys(generalConfig.digitSymbolAns).length} questions in this test. + + + Your score will be how many correct responeses you make, so try to be accurate and{" "} + quick! + + , +]; diff --git a/src/components/instructions/InstructionContainer.tsx b/src/components/instructions/InstructionContainer.tsx index 0f6f97c..04f0eba 100644 --- a/src/components/instructions/InstructionContainer.tsx +++ b/src/components/instructions/InstructionContainer.tsx @@ -3,6 +3,7 @@ import { TestPhase } from "../../contexts/general.context"; import { Box, Button, Divider, Typography } from "@mui/material"; import { vpmInstructions, vprInstructions } from "./VisualPairs"; import { crtInstructions } from "./ChoiceReactionTime"; +import { dsmInstructions } from "./DigitSymbolMatching"; const titleMapping: { [key in TestPhase]?: string } = { [TestPhase.MEMORY_RECALL_IMMEDIATE]: "Memory - Immediate Recall", @@ -19,7 +20,7 @@ export const instructionComponents: { [key in TestPhase]?: JSX.Element[] } = { [TestPhase.VISUAL_PAIRS_MEMORIZE]: vpmInstructions, [TestPhase.CHOICE_REACTION_TIME]: crtInstructions, [TestPhase.VISUAL_PAIRS_RECALL]: vprInstructions, - [TestPhase.DIGIT_SYMBOL_MATCHING]: [], + [TestPhase.DIGIT_SYMBOL_MATCHING]: dsmInstructions, [TestPhase.SPATIAL_MEMORY]: [], [TestPhase.MEMORY_RECALL_DELAYED]: [], }; diff --git a/src/components/tests/DigitSymbolMatchingMain.tsx b/src/components/tests/DigitSymbolMatchingMain.tsx index 5ab1426..aca7c50 100644 --- a/src/components/tests/DigitSymbolMatchingMain.tsx +++ b/src/components/tests/DigitSymbolMatchingMain.tsx @@ -8,7 +8,7 @@ import { TestContext } from "../../contexts/test.context"; import { getNextTestPhase } from "../../utils/general.utils"; import { DigitSymbolMatchingResult } from "../../contexts/types/result.type"; -const Cell = styled(Box, { +export 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", From d2a477325b18b24ed11d2c9ad21111f4e71200be Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 11:24:01 -0400 Subject: [PATCH 11/17] add instructions for spatial memory --- public/assets/click.png | Bin 0 -> 16150 bytes .../instructions/InstructionContainer.tsx | 3 +- src/components/instructions/SpatialMemory.tsx | 71 ++++++++++++++++++ src/components/tests/SpatialMemoryMain.tsx | 31 ++++---- 4 files changed, 91 insertions(+), 14 deletions(-) create mode 100644 public/assets/click.png create mode 100644 src/components/instructions/SpatialMemory.tsx diff --git a/public/assets/click.png b/public/assets/click.png new file mode 100644 index 0000000000000000000000000000000000000000..be0a3db357eae8acc9127a7be92420a61e65a91d GIT binary patch literal 16150 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 = ({ matrix, clickPosX, clickPosY }) => ( + + {matrix.map((row: any[], rowIndex: number) => ( + + {row.map((cell: boolean, colIndex: number) => ( + + + {colIndex === clickPosX && rowIndex === clickPosY && ( + + )} + + ))} + + ))} + +); + +export const smInstructions: JSX.Element[] = [ + <> + + + Memorize the pattern on the grid + + , + <> + + + Fill in the blank squares to recreate the pattern. + + , +]; diff --git a/src/components/tests/SpatialMemoryMain.tsx b/src/components/tests/SpatialMemoryMain.tsx index c0d89e8..33a7aaf 100644 --- a/src/components/tests/SpatialMemoryMain.tsx +++ b/src/components/tests/SpatialMemoryMain.tsx @@ -6,20 +6,25 @@ import { TestContext } from "../../contexts/test.context"; import { TestPhase } from "../../contexts/general.context"; import { SpatialMemoryResult } from "../../contexts/types/result.type"; -const Cell = styled(Box, { +export const Cell = styled(Box, { shouldForwardProp: (prop) => prop !== "topBox" && prop !== "bottomBox" && prop !== "leftBox" && prop !== "rightBox", -})<{ topBox?: boolean; bottomBox?: boolean; leftBox?: boolean; rightBox?: boolean }>( - ({ theme, topBox, bottomBox, leftBox, rightBox }) => ({ - width: uiConfig.cellSize, - height: uiConfig.cellSize, - backgroundColor: theme.palette.background.paper, - borderTop: topBox ? "3px solid black" : "1px solid black", - borderBottom: bottomBox ? "3px solid black" : "1px solid black", - borderLeft: leftBox ? "3px solid black" : "1px solid black", - borderRight: rightBox ? "3px solid black" : "1px solid black", - transition: "background-color 0.2s ease", - }) -); +})<{ + topBox?: boolean; + bottomBox?: boolean; + leftBox?: boolean; + rightBox?: boolean; + cellwidth?: string; + cellheight?: string; +}>(({ theme, topBox, bottomBox, leftBox, rightBox, cellwidth, cellheight }) => ({ + width: cellwidth ?? uiConfig.cellSize, + height: cellheight ?? uiConfig.cellSize, + backgroundColor: theme.palette.background.paper, + borderTop: topBox ? "3px solid black" : "1px solid black", + borderBottom: bottomBox ? "3px solid black" : "1px solid black", + borderLeft: leftBox ? "3px solid black" : "1px solid black", + borderRight: rightBox ? "3px solid black" : "1px solid black", + transition: "background-color 0.2s ease", +})); interface SpatialMemoryMainProps { toTestPhase: (testPhase: TestPhase) => void; From f74ae6c8427a1ba90dcf2d7b96fe9d334d94efc2 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 11:32:16 -0400 Subject: [PATCH 12/17] optimize choice reaction instruction --- .../instructions/ChoiceReactionTime.tsx | 44 ++++++------------- 1 file changed, 14 insertions(+), 30 deletions(-) diff --git a/src/components/instructions/ChoiceReactionTime.tsx b/src/components/instructions/ChoiceReactionTime.tsx index 385cbda..51936b7 100644 --- a/src/components/instructions/ChoiceReactionTime.tsx +++ b/src/components/instructions/ChoiceReactionTime.tsx @@ -3,33 +3,17 @@ import { FC } from "react"; import { choiceReactionTimeConfig as uiConfig } from "../../config/ui.config"; import { generalConfig as testConfig } from "../../config/test.config"; -const CRTVisual0: FC = () => ( - - {[">", "<", ">"].map((symbol, index) => ( - - - {symbol} - - - ))} - -); +const color0 = uiConfig.choiceColor.color0; +const color1 = uiConfig.choiceColor.color1; + +interface CRTVisualProps { + symbols: string[]; + colors: string[]; +} -const CRTVisual1: FC = () => ( +const CRTVisual: FC = ({ symbols, colors }) => ( - {[">", "<", "<"].map((symbol, index) => ( + {symbols.map((symbol, index) => ( ( border={1} marginY={1} sx={{ - backgroundColor: index < 2 ? uiConfig.choiceColor.color0 : uiConfig.choiceColor.color1, + backgroundColor: colors[index], }} > @@ -53,7 +37,7 @@ const CRTVisual1: FC = () => ( export const crtInstructions: JSX.Element[] = [ <> - + ", "<", ">"]} colors={[color0, color1, color1]} /> Look at the 3 colored squares. @@ -62,7 +46,7 @@ export const crtInstructions: JSX.Element[] = [ , <> - + ", "<", ">"]} colors={[color0, color1, color1]} /> Now look at the ARROW inside the ODD-COLOR. @@ -72,14 +56,14 @@ export const crtInstructions: JSX.Element[] = [ , <> - + ", "<", "<"]} colors={[color0, color0, color1]} /> When the odd-color arrow points left, tap the LEFT-ARROW button at the{" "} bottom of the screen with your left hand. , <> - + ", "<", "<"]} colors={[color0, color0, color1]} /> You will see {Object.keys(testConfig.choiceReactionTimeAns).length} sets of ARROWs. Please response as fast as you can. From cf63aac19f19a13a423f52fd3517fb08ace0e377 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 11:49:10 -0400 Subject: [PATCH 13/17] add instructions for memory recall --- src/components/Transition.tsx | 2 +- .../instructions/InstructionContainer.tsx | 7 +++--- src/components/instructions/MemoryRecall.tsx | 23 +++++++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 src/components/instructions/MemoryRecall.tsx diff --git a/src/components/Transition.tsx b/src/components/Transition.tsx index dbf970e..1406eb1 100644 --- a/src/components/Transition.tsx +++ b/src/components/Transition.tsx @@ -35,7 +35,7 @@ export const Transition: FC = ({ handleTransition }) => { > {instructionComponents[cxt!.testPhase]!.length <= 0 ? ( ) : ( )} diff --git a/src/components/instructions/MemoryRecall.tsx b/src/components/instructions/MemoryRecall.tsx new file mode 100644 index 0000000..b7933dd --- /dev/null +++ b/src/components/instructions/MemoryRecall.tsx @@ -0,0 +1,23 @@ +import { Typography } from "@mui/material"; + +export const mriInstructions: JSX.Element[] = [ + <> + + You will need to play the audio and remember the five animals you hear. You need to memorize them + until the end of the test. + + , + <> + + For this section, you will be asked to select the animals you heard from the list after you hear the audio. + + , +]; + +export const mrdInstructions: JSX.Element[] = [ + <> + + You have heard the names of five animals at the beginning of the test. Select those five animals. + + , +]; From 381c7f7aa95d5d27b526be220818926b66a55f7a Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 12:09:55 -0400 Subject: [PATCH 14/17] change figures for visual pairs instructions --- src/components/instructions/VisualPairs.tsx | 40 ++++++++++++++++++--- src/config/test.config.ts | 2 +- 2 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/components/instructions/VisualPairs.tsx b/src/components/instructions/VisualPairs.tsx index c81ec94..41e5ff5 100644 --- a/src/components/instructions/VisualPairs.tsx +++ b/src/components/instructions/VisualPairs.tsx @@ -1,17 +1,44 @@ -import { Grid, Typography } from "@mui/material"; +import { Box, Grid, Typography } from "@mui/material"; import { generalConfig as testConfig } from "../../config/test.config"; import { FC } from "react"; -const VPVisual: FC = () => ( +const VPVisual0: FC = () => ( ); +const VPVisual1: FC = () => ( + + + + + + + + + + + {[3, 4].map((option, idx) => ( + + + + ))} + + + {[5, 6].map((option, idx) => ( + + + + ))} + + +); + export const vpmInstructions: JSX.Element[] = [ <> - + You will see {Object.keys(testConfig.visualPairsAns).length} image pairs, like above. Learn which images go together. Later you will be tested on that. @@ -21,10 +48,13 @@ export const vpmInstructions: JSX.Element[] = [ export const vprInstructions: JSX.Element[] = [ <> - + Let's test your memory for the images you learned a few minutes ago. + , + <> + You will need to select the image that goes together with the image with red outline at the{" "} top left corner. @@ -32,7 +62,7 @@ export const vprInstructions: JSX.Element[] = [ , <> - You will be asked to recall all {Object.keys(testConfig.visualPairsAns).length} pairs. Let's start! + You will be asked to recall all {Object.keys(testConfig.visualPairsAns).length} pairs of images. Let's start! , ]; diff --git a/src/config/test.config.ts b/src/config/test.config.ts index 3b73b1f..ae8d1ad 100644 --- a/src/config/test.config.ts +++ b/src/config/test.config.ts @@ -23,7 +23,7 @@ export const generalConfig = { digitSymbolAns: [3, 8, 4, 0, 7, 0, 3, 5, 8, 2], choiceReactionTimeAns: [2, 2, 1, 1, 0, 2, 1, 0, 1, 0] as (0 | 1 | 2)[], visualPairsAns: { - example: [3, 1], + bar: [3, 1], lobby: [1, 2], underwater: [8, 5], temple: [4, 6], From 550ba3f1d1d5fd56943cbd4f909944d51293c13e Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 12:25:38 -0400 Subject: [PATCH 15/17] add ending page --- src/components/Ending.tsx | 25 +++++++++++++++++++++++++ src/contexts/general.context.tsx | 1 + src/pages/TestPage.tsx | 14 +++++++++++++- 3 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/components/Ending.tsx diff --git a/src/components/Ending.tsx b/src/components/Ending.tsx new file mode 100644 index 0000000..6e115f8 --- /dev/null +++ b/src/components/Ending.tsx @@ -0,0 +1,25 @@ +import { FC, useEffect } from "react"; +import { Box, Divider, Typography } from "@mui/material"; + +export const Ending: FC = () => { + useEffect(() => { + sessionStorage.clear(); + }, []); + + return ( + <> + + + Congratulations + + + + You have completed the test. Thank you for participating. + + + You may now close the tab. + + + + ); +}; diff --git a/src/contexts/general.context.tsx b/src/contexts/general.context.tsx index c7ffdf1..125ef11 100644 --- a/src/contexts/general.context.tsx +++ b/src/contexts/general.context.tsx @@ -6,6 +6,7 @@ export enum Stage { GENERAL_DIRECTION = 2, TRANSITION = 3, TEST = 4, + ENDING = 5, } export enum TestPhase { diff --git a/src/pages/TestPage.tsx b/src/pages/TestPage.tsx index 7272c03..8eba21d 100644 --- a/src/pages/TestPage.tsx +++ b/src/pages/TestPage.tsx @@ -11,6 +11,7 @@ import { SoundCheck } from "../components/SoundCheck"; import { GeneralDirection } from "../components/GeneralDirection"; import { useNavigate, useParams } from "react-router-dom"; import { generalConfig } from "../config/test.config"; +import { Ending } from "../components/Ending"; export const TestPage: FC = () => { const { studyId } = useParams<{ studyId: string }>(); @@ -45,8 +46,18 @@ export const TestPage: FC = () => { sessionStorage.setItem("results", "[]"); sessionStorage.setItem("testPhase", String(target)); - sessionStorage.setItem("stage", String(Stage.TRANSITION)); sessionStorage.setItem("questionNumber", "0"); + + if (target === TestPhase.FINISHED) { + sessionStorage.setItem("stage", String(Stage.ENDING)); + cxt!.setTestPhase(target); + cxt!.setStage(Stage.ENDING); + + return; + } + + sessionStorage.setItem("stage", String(Stage.TRANSITION)); + cxt!.setTestPhase(target); cxt!.setStage(Stage.TRANSITION); }; @@ -89,6 +100,7 @@ export const TestPage: FC = () => { {cxt?.stage === Stage.GENERAL_DIRECTION && } {cxt?.stage === Stage.TRANSITION && } {cxt?.stage === Stage.TEST && } + {cxt?.stage === Stage.ENDING && } ); }; From 95686981c3a790e12601c9c8a846c132d8e7fbbb Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 12:25:56 -0400 Subject: [PATCH 16/17] fix text --- src/components/GeneralDirection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GeneralDirection.tsx b/src/components/GeneralDirection.tsx index 5db3174..2e4f7a3 100644 --- a/src/components/GeneralDirection.tsx +++ b/src/components/GeneralDirection.tsx @@ -16,7 +16,7 @@ export const GeneralDirection: FC = () => { Directions - + Please do NOT use paper! Solve all questions in your mind. Click "Begin Test" to proceed. From 5d07af017318cdb209b225be58cdd28855edd0e4 Mon Sep 17 00:00:00 2001 From: wenhwang97 Date: Thu, 17 Oct 2024 12:32:35 -0400 Subject: [PATCH 17/17] disable focus --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index f5f1d13..071d25d 100644 --- a/src/index.css +++ b/src/index.css @@ -52,7 +52,7 @@ button:hover { } button:focus, button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; + outline: none; } @media (prefers-color-scheme: light) {