Skip to content

Commit 8928e1a

Browse files
michaeldejournettmichaeldejournett
committed
adding more features
1 parent 6914d8e commit 8928e1a

16 files changed

+202
-74
lines changed

‎webcamstudy/asset-manifest.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"files": {
3-
"main.css": "https://seresl.unl.edu/webcamstudy/static/css/main.e2758196.css",
4-
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.47cc698d.js",
3+
"main.css": "https://seresl.unl.edu/webcamstudy/static/css/main.f613a2ce.css",
4+
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.19881361.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",
@@ -222,12 +222,12 @@
222222
"static/media/left_right.mp4": "https://seresl.unl.edu/webcamstudy/static/media/left_right.7ee0b44ad1238b00df6e.mp4",
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",
225-
"main.e2758196.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.e2758196.css.map",
226-
"main.47cc698d.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.47cc698d.js.map",
225+
"main.f613a2ce.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.f613a2ce.css.map",
226+
"main.19881361.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.19881361.js.map",
227227
"453.e44939a0.chunk.js.map": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js.map"
228228
},
229229
"entrypoints": [
230-
"static/css/main.e2758196.css",
231-
"static/js/main.47cc698d.js"
230+
"static/css/main.f613a2ce.css",
231+
"static/js/main.19881361.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.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>
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.19881361.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.f613a2ce.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: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import TextTask from "./components/Text/TextTask";
66
import SmoothPursuitVideoTask from "./components/SmoothPursuitVideoTask";
77
import InstructionVideoTask from "./components/Instruction/InstructionVideoTask";
88
import VideoTask from "./components/Video/VideoTask";
9-
import FaceTask from "./components/FaceTask";
109
import FaceTask2x2 from "./components/FaceTask2x2";
1110
import FaceTask3x3 from "./components/FaceTask3x3";
1211
import ValidationGrid from "./components/validation_grid/ValidationGrid";
@@ -31,7 +30,6 @@ function App() {
3130
smoothPursuitVideoTask: null,
3231
instructionVideoTask: null,
3332
videoTask: null,
34-
faceTask: null,
3533
faceTask2x2: null,
3634
faceTask3x3: null,
3735
});
@@ -153,49 +151,6 @@ function App() {
153151
});
154152
}
155153

156-
// Add face task responses
157-
if (studyData.faceTask && Array.isArray(studyData.faceTask)) {
158-
// Group results by emotion, gender, and grid size
159-
const emotions = ["happy", "angry", "sad"];
160-
const genders = ["male", "female"];
161-
const gridSizes = [2, 3];
162-
163-
emotions.forEach((emotion) => {
164-
genders.forEach((gender) => {
165-
gridSizes.forEach((gridSize) => {
166-
const filteredResults = studyData.faceTask.filter(
167-
(result) =>
168-
result.emotion === emotion &&
169-
result.gender === gender &&
170-
result.gridSize === gridSize
171-
);
172-
173-
if (filteredResults.length > 0) {
174-
const taskName = `Face_${emotion}_${gender}_${gridSize}x${gridSize}`;
175-
const response = {
176-
task: taskName,
177-
response: filteredResults.map((result) => ({
178-
trial: result.trial,
179-
emotion: result.emotion,
180-
gender: result.gender,
181-
gridSize: result.gridSize,
182-
startTime: result.startTime,
183-
endTime: result.endTime,
184-
selectedRow: result.selectedRow,
185-
selectedColumn: result.selectedColumn,
186-
correctRow: result.correctRow,
187-
correctColumn: result.correctColumn,
188-
isCorrect: result.correct === "Yes",
189-
})),
190-
isCorrect: calculateOverallFaceCorrectness(filteredResults),
191-
};
192-
jsonData.responses.push(response);
193-
}
194-
});
195-
});
196-
});
197-
}
198-
199154
// Add face task 2x2 responses
200155
if (studyData.faceTask2x2 && Array.isArray(studyData.faceTask2x2)) {
201156
// Group results by emotion and gender
@@ -366,10 +321,6 @@ function App() {
366321
onComplete={(data) => handleTaskComplete("videoTask", data)}
367322
/>
368323
);
369-
case "FaceTask":
370-
return (
371-
<FaceTask onSubmit={(data) => handleTaskComplete("faceTask", data)} />
372-
);
373324
case "FaceTask2x2":
374325
return (
375326
<FaceTask2x2 onSubmit={(data) => handleTaskComplete("faceTask2x2", data)} />
@@ -410,7 +361,6 @@ function App() {
410361
(((currentTaskName === "TextTask" && textTaskComplete) ||
411362
(![
412363
"ConsentForm",
413-
"FaceTask",
414364
"FaceTask2x2",
415365
"FaceTask3x3",
416366
"TextTask",

‎webcamstudy/src/components/Instruction/InstructionVideoTask.jsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,16 @@ const InstructionVideoTask = ({ onComplete }) => {
3838
setShowCross(false);
3939
setShowInstruction(true);
4040
}, 1000);
41-
42-
const instructionTimer = setTimeout(() => {
43-
setShowInstruction(false);
44-
}, 2000);
4541

4642
return () => {
4743
clearTimeout(crossTimer);
48-
clearTimeout(instructionTimer);
4944
};
5045
}, []);
5146

47+
const handleInstructionContinue = () => {
48+
setShowInstruction(false);
49+
};
50+
5251
useEffect(() => {
5352
if (showCross || showInstruction || !plyrReady || step !== 0) return;
5453

@@ -64,7 +63,7 @@ const InstructionVideoTask = ({ onComplete }) => {
6463
try {
6564
// eslint-disable-next-line no-undef
6665
const player = new window.Plyr(videoRef.current, {
67-
controls: ['play', 'progress', 'current-time', 'mute', 'volume'],
66+
controls: [],
6867
ratio: null,
6968
fullscreen: { enabled: false },
7069
});
@@ -125,6 +124,12 @@ const InstructionVideoTask = ({ onComplete }) => {
125124
<h2 className="instruction-instruction-text">
126125
Count how many times the players wearing white pass the ball.
127126
</h2>
127+
<button
128+
onClick={handleInstructionContinue}
129+
className="instruction-continue-button"
130+
>
131+
Continue
132+
</button>
128133
</div>
129134
) : step === 0 ? (
130135
<div className="instruction-video-section">
@@ -137,7 +142,7 @@ const InstructionVideoTask = ({ onComplete }) => {
137142
) : (
138143
<video
139144
ref={videoRef}
140-
controls
145+
controls={false}
141146
autoPlay
142147
muted
143148
crossOrigin="anonymous"

‎webcamstudy/src/components/Instruction/Instructions.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@
137137
height: 100vh;
138138
width: 100vw;
139139
display: flex;
140+
flex-direction: column;
140141
justify-content: center;
141142
align-items: center;
142143
z-index: 9999;
@@ -148,6 +149,24 @@
148149
text-align: center;
149150
font-weight: normal;
150151
margin: 0;
152+
margin-bottom: 30px;
153+
}
154+
155+
.instruction-continue-button {
156+
font-size: 24px;
157+
font-weight: bold;
158+
padding: 15px 40px;
159+
background-color: #3498db;
160+
color: white;
161+
border: none;
162+
border-radius: 5px;
163+
cursor: pointer;
164+
transition: all 0.3s ease;
165+
}
166+
167+
.instruction-continue-button:hover {
168+
background-color: #2980b9;
169+
transform: scale(1.05);
151170
}
152171

153172
/* Video section */

‎webcamstudy/src/components/SmoothPursuitVideoTask.jsx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,16 @@ const SmoothPursuitVideoTask = ({ onSubmit, onTaskComplete }) => {
3737
setVideoError(false);
3838

3939
const crossTimer = setTimeout(() => setPhase('instruction'), 1000);
40-
const instructionTimer = setTimeout(() => setPhase('video'), 2000);
4140

4241
return () => {
4342
clearTimeout(crossTimer);
44-
clearTimeout(instructionTimer);
4543
};
4644
}, [currentVideoIndex]);
4745

46+
const handleInstructionContinue = () => {
47+
setPhase('video');
48+
};
49+
4850
// This logic remains the same
4951
useEffect(() => {
5052
const video = videoRef.current;
@@ -101,6 +103,12 @@ const SmoothPursuitVideoTask = ({ onSubmit, onTaskComplete }) => {
101103
return (
102104
<div style={styles.phaseContainer}>
103105
<h2 style={styles.instructionText}>Track the ball in the video</h2>
106+
<button
107+
onClick={handleInstructionContinue}
108+
style={styles.continueButton}
109+
>
110+
Continue
111+
</button>
104112
</div>
105113
);
106114
case 'video':
@@ -121,7 +129,7 @@ const SmoothPursuitVideoTask = ({ onSubmit, onTaskComplete }) => {
121129
ref={videoRef}
122130
style={styles.video}
123131
src={currentVideo.src}
124-
controls
132+
controls={false}
125133
muted
126134
playsInline
127135
preload="auto"
@@ -166,6 +174,7 @@ const styles = {
166174
height: '100vh',
167175
width: '100vw',
168176
display: 'flex',
177+
flexDirection: 'column',
169178
justifyContent: 'center',
170179
alignItems: 'center',
171180
backgroundColor: '#fff',
@@ -180,8 +189,20 @@ const styles = {
180189
textAlign: 'center',
181190
fontWeight: 'normal',
182191
margin: 0,
192+
marginBottom: '30px',
183193
color: '#2c3e50',
184194
},
195+
continueButton: {
196+
fontSize: '24px',
197+
fontWeight: 'bold',
198+
padding: '15px 40px',
199+
backgroundColor: '#3498db',
200+
color: 'white',
201+
border: 'none',
202+
borderRadius: '5px',
203+
cursor: 'pointer',
204+
transition: 'all 0.3s ease',
205+
},
185206
videoContainer: {
186207
height: '100vh',
187208
width: '100vw',

‎webcamstudy/src/components/Video/VideoTask.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
height: 100vh;
3636
width: 100vw;
3737
display: flex;
38+
flex-direction: column;
3839
justify-content: center;
3940
align-items: center;
4041
z-index: 9999;
@@ -46,6 +47,24 @@
4647
text-align: center;
4748
font-weight: normal;
4849
margin: 0;
50+
margin-bottom: 30px;
51+
}
52+
53+
.video-task-continue-button {
54+
font-size: 24px;
55+
font-weight: bold;
56+
padding: 15px 40px;
57+
background-color: #3498db;
58+
color: white;
59+
border: none;
60+
border-radius: 5px;
61+
cursor: pointer;
62+
transition: all 0.3s ease;
63+
}
64+
65+
.video-task-continue-button:hover {
66+
background-color: #2980b9;
67+
transform: scale(1.05);
4968
}
5069

5170
.video-task-video-section {

‎webcamstudy/src/components/Video/VideoTask.jsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,16 @@ const VideoTask = ({ onComplete }) => {
3737
setShowCross(false);
3838
setShowInstruction(true);
3939
}, 1000);
40-
41-
const instructionTimer = setTimeout(() => {
42-
setShowInstruction(false);
43-
}, 2000);
4440

4541
return () => {
4642
clearTimeout(crossTimer);
47-
clearTimeout(instructionTimer);
4843
};
4944
}, []);
5045

46+
const handleInstructionContinue = () => {
47+
setShowInstruction(false);
48+
};
49+
5150
useEffect(() => {
5251
if (showCross || showInstruction || !plyrReady || step !== 0) return;
5352

@@ -62,7 +61,7 @@ const VideoTask = ({ onComplete }) => {
6261
try {
6362
// eslint-disable-next-line no-undef
6463
const player = new window.Plyr(videoRef.current, {
65-
controls: ['play', 'progress', 'current-time', 'mute', 'volume'],
64+
controls: [],
6665
ratio: null,
6766
fullscreen: { enabled: false },
6867
});
@@ -123,6 +122,12 @@ const handleSurveySubmit = (result) => {
123122
<h2 className="video-task-instruction-text">
124123
Please watch the following video carefully
125124
</h2>
125+
<button
126+
onClick={handleInstructionContinue}
127+
className="video-task-continue-button"
128+
>
129+
Continue
130+
</button>
126131
</div>
127132
) : step === 0 ? (
128133
<div className="video-task-video-section">
@@ -135,7 +140,7 @@ const handleSurveySubmit = (result) => {
135140
) : (
136141
<video
137142
ref={videoRef}
138-
controls
143+
controls={false}
139144
autoPlay
140145
muted
141146
crossOrigin="anonymous"

0 commit comments

Comments
 (0)