Skip to content

Commit 6914d8e

Browse files
michaeldejournettmichaeldejournett
committed
adding split tasks and user directed contro
1 parent bb52cc0 commit 6914d8e

8 files changed

Lines changed: 1028 additions & 8 deletions

File tree

‎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.e2758196.css",
4-
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.2d705806.js",
4+
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.47cc698d.js",
55
"static/js/453.e44939a0.chunk.js": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js",
66
"static/media/monkey_business.mp4": "https://seresl.unl.edu/webcamstudy/static/media/monkey_business.4c162ec3365ba53d0a3f.mp4",
77
"static/media/soccer-vid.mp4": "https://seresl.unl.edu/webcamstudy/static/media/soccer-vid.4aa09d7760e7c517c175.mp4",
@@ -223,11 +223,11 @@
223223
"static/media/5point_1920x1080.png": "https://seresl.unl.edu/webcamstudy/static/media/5point_1920x1080.16294bbf8c826fc2134e.png",
224224
"index.html": "https://seresl.unl.edu/webcamstudy/index.html",
225225
"main.e2758196.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.e2758196.css.map",
226-
"main.2d705806.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.2d705806.js.map",
226+
"main.47cc698d.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.47cc698d.js.map",
227227
"453.e44939a0.chunk.js.map": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js.map"
228228
},
229229
"entrypoints": [
230230
"static/css/main.e2758196.css",
231-
"static/js/main.2d705806.js"
231+
"static/js/main.47cc698d.js"
232232
]
233233
}

‎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>Eye Tracking Webcam Study</title><script type="module">import EmbeddedPageSdk from"https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.7.1.js";let reSdk=null;window.addEventListener("DOMContentLoaded",()=>{reSdk=new EmbeddedPageSdk(!1,null,!1)}),window.addEventListener("endmeplease",()=>{reSdk&&reSdk.finishEyeTrackingTest()})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.2d705806.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.e2758196.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>Eye Tracking Webcam Study</title><script type="module">import EmbeddedPageSdk from"https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.7.1.js";let reSdk=null;window.addEventListener("DOMContentLoaded",()=>{reSdk=new EmbeddedPageSdk(!1,null,!1)}),window.addEventListener("endmeplease",()=>{reSdk&&reSdk.finishEyeTrackingTest()})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.47cc698d.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.e2758196.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

‎webcamstudy/src/App.jsx‎

Lines changed: 99 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import SmoothPursuitVideoTask from "./components/SmoothPursuitVideoTask";
77
import InstructionVideoTask from "./components/Instruction/InstructionVideoTask";
88
import VideoTask from "./components/Video/VideoTask";
99
import FaceTask from "./components/FaceTask";
10+
import FaceTask2x2 from "./components/FaceTask2x2";
11+
import FaceTask3x3 from "./components/FaceTask3x3";
1012
import ValidationGrid from "./components/validation_grid/ValidationGrid";
1113

1214
// Utility to shuffle an array
@@ -30,6 +32,8 @@ function App() {
3032
instructionVideoTask: null,
3133
videoTask: null,
3234
faceTask: null,
35+
faceTask2x2: null,
36+
faceTask3x3: null,
3337
});
3438

3539
// State to track study timing
@@ -54,7 +58,8 @@ function App() {
5458
"SmoothPursuitVideoTask",
5559
"InstructionVideoTask",
5660
"VideoTask",
57-
"FaceTask",
61+
"FaceTask2x2",
62+
"FaceTask3x3",
5863
];
5964
const randomized = shuffle(toRandomize);
6065
setRandomizedOrder(randomized);
@@ -191,6 +196,86 @@ function App() {
191196
});
192197
}
193198

199+
// Add face task 2x2 responses
200+
if (studyData.faceTask2x2 && Array.isArray(studyData.faceTask2x2)) {
201+
// Group results by emotion and gender
202+
const emotions = ["happy", "angry", "sad"];
203+
const genders = ["male", "female"];
204+
205+
emotions.forEach((emotion) => {
206+
genders.forEach((gender) => {
207+
const filteredResults = studyData.faceTask2x2.filter(
208+
(result) =>
209+
result.emotion === emotion &&
210+
result.gender === gender &&
211+
result.gridSize === 2
212+
);
213+
214+
if (filteredResults.length > 0) {
215+
const taskName = `Face2x2_${emotion}_${gender}`;
216+
const response = {
217+
task: taskName,
218+
response: filteredResults.map((result) => ({
219+
trial: result.trial,
220+
emotion: result.emotion,
221+
gender: result.gender,
222+
gridSize: result.gridSize,
223+
startTime: result.startTime,
224+
endTime: result.endTime,
225+
selectedRow: result.selectedRow,
226+
selectedColumn: result.selectedColumn,
227+
correctRow: result.correctRow,
228+
correctColumn: result.correctColumn,
229+
isCorrect: result.correct === "Yes",
230+
})),
231+
isCorrect: calculateOverallFaceCorrectness(filteredResults),
232+
};
233+
jsonData.responses.push(response);
234+
}
235+
});
236+
});
237+
}
238+
239+
// Add face task 3x3 responses
240+
if (studyData.faceTask3x3 && Array.isArray(studyData.faceTask3x3)) {
241+
// Group results by emotion and gender
242+
const emotions = ["happy", "angry", "sad"];
243+
const genders = ["male", "female"];
244+
245+
emotions.forEach((emotion) => {
246+
genders.forEach((gender) => {
247+
const filteredResults = studyData.faceTask3x3.filter(
248+
(result) =>
249+
result.emotion === emotion &&
250+
result.gender === gender &&
251+
result.gridSize === 3
252+
);
253+
254+
if (filteredResults.length > 0) {
255+
const taskName = `Face3x3_${emotion}_${gender}`;
256+
const response = {
257+
task: taskName,
258+
response: filteredResults.map((result) => ({
259+
trial: result.trial,
260+
emotion: result.emotion,
261+
gender: result.gender,
262+
gridSize: result.gridSize,
263+
startTime: result.startTime,
264+
endTime: result.endTime,
265+
selectedRow: result.selectedRow,
266+
selectedColumn: result.selectedColumn,
267+
correctRow: result.correctRow,
268+
correctColumn: result.correctColumn,
269+
isCorrect: result.correct === "Yes",
270+
})),
271+
isCorrect: calculateOverallFaceCorrectness(filteredResults),
272+
};
273+
jsonData.responses.push(response);
274+
}
275+
});
276+
});
277+
}
278+
194279
// Download JSON file
195280
const jsonString = JSON.stringify(jsonData, null, 2);
196281
const blob = new Blob([jsonString], {
@@ -285,6 +370,14 @@ function App() {
285370
return (
286371
<FaceTask onSubmit={(data) => handleTaskComplete("faceTask", data)} />
287372
);
373+
case "FaceTask2x2":
374+
return (
375+
<FaceTask2x2 onSubmit={(data) => handleTaskComplete("faceTask2x2", data)} />
376+
);
377+
case "FaceTask3x3":
378+
return (
379+
<FaceTask3x3 onSubmit={(data) => handleTaskComplete("faceTask3x3", data)} />
380+
);
288381
case "ValidationGrid":
289382
return <ValidationGrid onComplete={incrementTask} />;
290383
default:
@@ -314,13 +407,15 @@ function App() {
314407
// and only when video tasks have ended
315408
const showNextButton =
316409
!isTaskComplete &&
317-
((currentTaskName === "TextTask" && textTaskComplete) ||
318-
![
410+
(((currentTaskName === "TextTask" && textTaskComplete) ||
411+
(![
319412
"ConsentForm",
320413
"FaceTask",
414+
"FaceTask2x2",
415+
"FaceTask3x3",
321416
"TextTask",
322417
].includes(currentTaskName) &&
323-
isVideoTaskComplete());
418+
isVideoTaskComplete())));
324419

325420
const handleNextTask = () => {
326421
// If TextTask, collect results before advancing

0 commit comments

Comments
 (0)