Skip to content

Commit ffc1bf8

Browse files
michaeldejournettmichaeldejournett
committed
please work
1 parent 4da0e35 commit ffc1bf8

File tree

6 files changed

+88
-44
lines changed

6 files changed

+88
-44
lines changed

‎webcamstudy/asset-manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"files": {
33
"main.css": "https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css",
4-
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.d9612308.js",
4+
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.48afa8d0.js",
55
"static/js/453.e44939a0.chunk.js": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js",
66
"static/media/clip2.mp4": "https://seresl.unl.edu/webcamstudy/static/media/clip2.1e6e426f2cdb61fe74ec.mp4",
77
"static/media/clip3.mp4": "https://seresl.unl.edu/webcamstudy/static/media/clip3.3341365941d9bce4b98b.mp4",
@@ -70,11 +70,11 @@
7070
"static/media/image-8.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-8.e491c615c0e21b7007f5.jpg",
7171
"index.html": "https://seresl.unl.edu/webcamstudy/index.html",
7272
"main.3de88975.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css.map",
73-
"main.d9612308.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.d9612308.js.map",
73+
"main.48afa8d0.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.48afa8d0.js.map",
7474
"453.e44939a0.chunk.js.map": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js.map"
7575
},
7676
"entrypoints": [
7777
"static/css/main.3de88975.css",
78-
"static/js/main.d9612308.js"
78+
"static/js/main.48afa8d0.js"
7979
]
8080
}

‎webcamstudy/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://seresl.unl.edu/webcamstudy/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="https://seresl.unl.edu/webcamstudy/logo192.png"/><link rel="manifest" href="https://seresl.unl.edu/webcamstudy/manifest.json"/><title>React App</title><script type="module">import EmbeddedPageSdk from"https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.7.1.js";window.addEventListener("DOMContentLoaded",()=>{new EmbeddedPageSdk(!1,null,!1)})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.d9612308.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://seresl.unl.edu/webcamstudy/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="https://seresl.unl.edu/webcamstudy/logo192.png"/><link rel="manifest" href="https://seresl.unl.edu/webcamstudy/manifest.json"/><title>React App</title><script type="module">import EmbeddedPageSdk from"https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.7.1.js";window.addEventListener("DOMContentLoaded",()=>{new EmbeddedPageSdk(!1,null,!1)})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.48afa8d0.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

‎webcamstudy/src/components/FaceTask.jsx‎

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,22 @@ function getRandomSubset(array, size) {
1919
}
2020

2121
const FaceTask = ({ onSubmit }) => {
22-
const [taskStage, setTaskStage] = useState(0); // 0 for 2x2, 1 for 3x3
22+
const [taskStage, setTaskStage] = useState(0);
2323
const [trial, setTrial] = useState(0);
2424
const [grid, setGrid] = useState([]);
2525
const [completed, setCompleted] = useState(false);
2626
const [showCross, setShowCross] = useState(true);
2727
const [imagesLoaded, setImagesLoaded] = useState(false);
28-
const [results, setResults] = useState([]); // store result rows
28+
const [results, setResults] = useState([]);
2929

3030
const currentTask = TASKS[taskStage];
3131
const { gridSize, trials: maxTrials } = currentTask;
3232

33-
// Dynamically load all images from Right and Wrong folders
34-
const rightImagePaths = useMemo(() =>
33+
const rightImagePaths = useMemo(() =>
3534
importAll(require.context('../assets/images/Right', false, /\.(png|jpe?g|svg)$/)),
3635
[]
3736
);
38-
const wrongImagePaths = useMemo(() =>
37+
const wrongImagePaths = useMemo(() =>
3938
importAll(require.context('../assets/images/Wrong', false, /\.(png|jpe?g|svg)$/)),
4039
[]
4140
);
@@ -51,53 +50,43 @@ const FaceTask = ({ onSubmit }) => {
5150

5251
const generateNewGrid = useCallback(async () => {
5352
const totalCells = gridSize * gridSize;
54-
// Start with wrong faces (Wrong images) - these should NOT be clicked
5553
let newGrid = getRandomSubset(wrongImagePaths, totalCells).map((src, i) => ({
5654
src,
5755
id: i + 1,
58-
isCorrect: false, // These are incorrect to click - avoid these
56+
isCorrect: false,
5957
}));
6058

61-
// Replace one random position with a correct face (the target to find)
6259
const replacedIndex = Math.floor(Math.random() * totalCells);
6360
newGrid[replacedIndex] = {
6461
src: rightImagePaths[Math.floor(Math.random() * rightImagePaths.length)],
6562
id: replacedIndex + 1,
66-
isCorrect: true, // This is the one to click - the correct face
63+
isCorrect: true,
6764
};
6865

6966
setGrid(newGrid);
7067
setImagesLoaded(false);
7168

72-
// Preload all images for this grid
7369
try {
7470
const imagePromises = newGrid.map(image => preloadImage(image.src));
7571
await Promise.all(imagePromises);
7672
setImagesLoaded(true);
7773
} catch (error) {
7874
console.error('Error loading images:', error);
79-
// Still set to true to prevent indefinite waiting
8075
setImagesLoaded(true);
8176
}
8277
}, [gridSize, rightImagePaths, wrongImagePaths]);
8378

8479
useEffect(() => {
8580
setShowCross(true);
8681
setImagesLoaded(false);
87-
88-
// Start generating the grid immediately
8982
generateNewGrid();
9083
}, [trial, taskStage, generateNewGrid]);
9184

9285
useEffect(() => {
93-
// Only hide cross when both conditions are met:
94-
// 1. Images are loaded
95-
// 2. At least 1 second has passed
9686
if (imagesLoaded) {
9787
const timer = setTimeout(() => {
9888
setShowCross(false);
9989
}, 1000);
100-
10190
return () => clearTimeout(timer);
10291
}
10392
}, [imagesLoaded]);
@@ -107,12 +96,10 @@ const FaceTask = ({ onSubmit }) => {
10796

10897
const clickedImage = grid[index];
10998
const isCorrectClick = clickedImage?.isCorrect === true;
110-
111-
// Calculate row and column from index (1-based indexing)
99+
112100
const row = Math.floor(index / gridSize) + 1;
113101
const column = (index % gridSize) + 1;
114102

115-
// Record result with position information
116103
const result = {
117104
gridSize,
118105
trial: trial + 1,
@@ -184,25 +171,30 @@ const FaceTask = ({ onSubmit }) => {
184171
</p>
185172
) : (
186173
<div className="grid" style={gridStyle}>
187-
{grid.map((image, idx) => (
188-
<img
189-
key={`${trial}-${image.id}`}
190-
src={image.src}
191-
className="grid-item"
192-
data-id={image.id}
193-
data-correct={image.isCorrect ? 'T' : 'F'}
194-
alt="Game"
195-
style={{
196-
objectFit: 'cover',
197-
cursor: 'pointer',
198-
border: '2px solid transparent',
199-
transition: '0.3s',
200-
width: `calc(70vh / ${gridSize + 1})`,
201-
height: `calc(70vh / ${gridSize + 1})`,
202-
}}
203-
onClick={() => handleClick(idx)}
204-
/>
205-
))}
174+
{grid.map((image, idx) => {
175+
const row = Math.floor(idx / gridSize) + 1;
176+
const column = (idx % gridSize) + 1;
177+
return (
178+
<img
179+
key={`${trial}-${image.id}`}
180+
src={image.src}
181+
className="grid-item"
182+
data-id={image.id}
183+
data-correct={image.isCorrect ? 'T' : 'F'}
184+
data-re-aoi-name={`${row}-${column}-${image.isCorrect ? 'correct' : 'incorrect'}`}
185+
alt="Game"
186+
style={{
187+
objectFit: 'cover',
188+
cursor: 'pointer',
189+
border: '2px solid transparent',
190+
transition: '0.3s',
191+
width: `calc(70vh / ${gridSize + 1})`,
192+
height: `calc(70vh / ${gridSize + 1})`,
193+
}}
194+
onClick={() => handleClick(idx)}
195+
/>
196+
);
197+
})}
206198
</div>
207199
)}
208200
</>
@@ -217,7 +209,6 @@ const FaceTask = ({ onSubmit }) => {
217209
);
218210
};
219211

220-
// Styles
221212
const styles = {
222213
crossContainer: {
223214
position: 'absolute',

‎webcamstudy/static/js/main.48afa8d0.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webcamstudy/static/js/main.48afa8d0.js.LICENSE.txt‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/**
2+
* @license React
3+
* react-dom-client.production.js
4+
*
5+
* Copyright (c) Meta Platforms, Inc. and affiliates.
6+
*
7+
* This source code is licensed under the MIT license found in the
8+
* LICENSE file in the root directory of this source tree.
9+
*/
10+
11+
/**
12+
* @license React
13+
* react-dom.production.js
14+
*
15+
* Copyright (c) Meta Platforms, Inc. and affiliates.
16+
*
17+
* This source code is licensed under the MIT license found in the
18+
* LICENSE file in the root directory of this source tree.
19+
*/
20+
21+
/**
22+
* @license React
23+
* react-jsx-runtime.production.js
24+
*
25+
* Copyright (c) Meta Platforms, Inc. and affiliates.
26+
*
27+
* This source code is licensed under the MIT license found in the
28+
* LICENSE file in the root directory of this source tree.
29+
*/
30+
31+
/**
32+
* @license React
33+
* react.production.js
34+
*
35+
* Copyright (c) Meta Platforms, Inc. and affiliates.
36+
*
37+
* This source code is licensed under the MIT license found in the
38+
* LICENSE file in the root directory of this source tree.
39+
*/
40+
41+
/**
42+
* @license React
43+
* scheduler.production.js
44+
*
45+
* Copyright (c) Meta Platforms, Inc. and affiliates.
46+
*
47+
* This source code is licensed under the MIT license found in the
48+
* LICENSE file in the root directory of this source tree.
49+
*/

‎webcamstudy/static/js/main.48afa8d0.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)