Skip to content

Commit 47ca09d

Browse files
WillHAdairWillHAdair
committed
fix: Added Validation Grid and tweaked other componentes.
- Updated the instruction video to clip the monkey business video, update the prompt, and update the questions. - Removed the black bar from the Circle ball video - Lefty justified text in the text task.
1 parent 48e9fa0 commit 47ca09d

22 files changed

Lines changed: 174 additions & 42 deletions

‎webcamstudy/asset-manifest.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"files": {
3-
"main.css": "https://seresl.unl.edu/webcamstudy/static/css/main.a0625579.css",
4-
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.1a22836d.js",
3+
"main.css": "https://seresl.unl.edu/webcamstudy/static/css/main.2a098134.css",
4+
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.b893c783.js",
55
"static/js/453.e44939a0.chunk.js": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js",
6+
"static/media/monkey_business.mp4": "https://seresl.unl.edu/webcamstudy/static/media/monkey_business.4c162ec3365ba53d0a3f.mp4",
67
"static/media/soccer-vid.mp4": "https://seresl.unl.edu/webcamstudy/static/media/soccer-vid.4aa09d7760e7c517c175.mp4",
7-
"static/media/monkey_business.mp4": "https://seresl.unl.edu/webcamstudy/static/media/monkey_business.1f9e790cb2f3f7dd1d75.mp4",
88
"static/media/MB_1210.jpg": "https://seresl.unl.edu/webcamstudy/static/media/MB_1210.de9328f43211b51d8588.jpg",
99
"static/media/MB_2362.jpg": "https://seresl.unl.edu/webcamstudy/static/media/MB_2362.ff588dab34906f0f235a.jpg",
1010
"static/media/MB_2133.jpg": "https://seresl.unl.edu/webcamstudy/static/media/MB_2133.7327516e35ed26e70c29.jpg",
@@ -215,18 +215,19 @@
215215
"static/media/AG_0424.jpg": "https://seresl.unl.edu/webcamstudy/static/media/AG_0424.001b2aa6575734faf97f.jpg",
216216
"static/media/AG_0666.jpg": "https://seresl.unl.edu/webcamstudy/static/media/AG_0666.0bb797d5847b3d3a90db.jpg",
217217
"static/media/star.mp4": "https://seresl.unl.edu/webcamstudy/static/media/star.087e6b09a89c0a6971cf.mp4",
218-
"static/media/circle.mp4": "https://seresl.unl.edu/webcamstudy/static/media/circle.7c0294520af04b4ad4ec.mp4",
218+
"static/media/circle.mp4": "https://seresl.unl.edu/webcamstudy/static/media/circle.814d676e3310fcb0c55d.mp4",
219219
"static/media/infinity.mp4": "https://seresl.unl.edu/webcamstudy/static/media/infinity.e3c99e977647363bba2e.mp4",
220220
"static/media/triangle.mp4": "https://seresl.unl.edu/webcamstudy/static/media/triangle.12162798fecaf045bc8b.mp4",
221221
"static/media/left_right.mp4": "https://seresl.unl.edu/webcamstudy/static/media/left_right.85268d9ab4c8c3005ad4.mp4",
222222
"static/media/square.mp4": "https://seresl.unl.edu/webcamstudy/static/media/square.433322980c135b7cda44.mp4",
223+
"static/media/5point_1920x1080.png": "https://seresl.unl.edu/webcamstudy/static/media/5point_1920x1080.16294bbf8c826fc2134e.png",
223224
"index.html": "https://seresl.unl.edu/webcamstudy/index.html",
224-
"main.a0625579.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.a0625579.css.map",
225-
"main.1a22836d.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.1a22836d.js.map",
225+
"main.2a098134.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.2a098134.css.map",
226+
"main.b893c783.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.b893c783.js.map",
226227
"453.e44939a0.chunk.js.map": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js.map"
227228
},
228229
"entrypoints": [
229-
"static/css/main.a0625579.css",
230-
"static/js/main.1a22836d.js"
230+
"static/css/main.2a098134.css",
231+
"static/js/main.b893c783.js"
231232
]
232233
}

‎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";let reSdk=null;window.addEventListener("DOMContentLoaded",()=>{reSdk=new EmbeddedPageSdk(!1,null,!1),reSdk.startNextExposure()}),window.addEventListener("endmeplease",()=>{reSdk&&reSdk.finishEyeTrackingTest()})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.1a22836d.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.a0625579.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),reSdk.startNextExposure()}),window.addEventListener("endmeplease",()=>{reSdk&&reSdk.finishEyeTrackingTest()})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.b893c783.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.2a098134.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

‎webcamstudy/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Eye Tracking Webcam Study",
3+
"name": "Eye Tracking Webcam Study",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎webcamstudy/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Eye Tracking Webcam Study</title>
2828
<script type="module">
2929
import EmbeddedPageSdk from "https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.7.1.js";
3030

‎webcamstudy/public/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Eye Tracking Webcam Study",
3+
"name": "Eye Tracking Webcam Study",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎webcamstudy/src/App.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import InstructionVideoSurvey from "./components/InstructionVideoSurvey";
99
import VideoTask from "./components/VideoTask";
1010
import VideoSurvey from "./components/VideoSurvey";
1111
import FaceTask from "./components/FaceTask";
12+
import ValidationGrid from "./components/validation_grid/ValidationGrid";
1213

1314
function App() {
1415
const [currentTask, setCurrentTask] = useState(0);
@@ -39,6 +40,7 @@ function App() {
3940

4041
const generateTaskSequence = () => {
4142
const tasks = [
43+
"ValidationGrid",
4244
'ConsentForm',
4345
"TextTask",
4446
"SmoothPursuitVideoTask",
@@ -122,7 +124,7 @@ function App() {
122124
task: "InstructionVideo",
123125
response: {
124126
ballTransfers: studyData.instructionVideoTask.ballTransfers,
125-
noticedShirtChange: studyData.instructionVideoTask.noticedShirtChange,
127+
curtainColor: studyData.instructionVideoTask.curtainColor,
126128
noticedGorilla: studyData.instructionVideoTask.noticedGorilla,
127129
},
128130
isCorrect: true, // No right/wrong answers for this task
@@ -286,6 +288,8 @@ function App() {
286288
return (
287289
<FaceTask onSubmit={(data) => handleTaskComplete("faceTask", data)} />
288290
);
291+
case "ValidationGrid":
292+
return <ValidationGrid onComplete={incrementTask} />;
289293
default:
290294
return <div>Unknown task</div>;
291295
}

‎webcamstudy/src/assets/5point_1920x1080.png‎

58 KB
Loading

‎webcamstudy/src/assets/monkey_business.mp4‎

59.9 MB
Binary file not shown.

‎webcamstudy/src/assets/smooth-pursuit/Circle.mp4‎

-1.58 KB
Binary file not shown.

‎webcamstudy/src/components/InstructionVideoSurvey.jsx‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@ import React, { useState } from 'react';
22

33
const InstructionVideoSurvey = ({ onSubmit }) => {
44
const [ballTransfers, setBallTransfers] = useState('');
5-
const [noticedShirtChange, setNoticedShirtChange] = useState('');
5+
const [curtainColor, setCurtainColor] = useState('');
66
const [noticedGorilla, setNoticedGorilla] = useState('');
77

88
const handleSubmit = (e) => {
99
e.preventDefault();
1010
const result = {
1111
ballTransfers: parseInt(ballTransfers) || 0,
12-
noticedShirtChange,
12+
curtainColor,
1313
noticedGorilla,
1414
timestamp: new Date().toISOString()
1515
};
1616
onSubmit?.(result);
1717
};
1818

19-
const isFormValid = ballTransfers !== '' && noticedShirtChange !== '' && noticedGorilla !== '';
19+
const isFormValid = ballTransfers !== '' && curtainColor.trim() !== '' && noticedGorilla !== '';
2020

2121
return (
2222
<div style={styles.container}>
@@ -25,7 +25,7 @@ const InstructionVideoSurvey = ({ onSubmit }) => {
2525

2626
{/* Ball Transfers Question */}
2727
<div style={styles.questionGroup}>
28-
<h3 style={styles.question}>How many times did the white team transfer the ball?</h3>
28+
<h3 style={styles.question}>How many times did the players wearing white pass the ball?</h3>
2929
<input
3030
type="number"
3131
value={ballTransfers}
@@ -36,24 +36,16 @@ const InstructionVideoSurvey = ({ onSubmit }) => {
3636
/>
3737
</div>
3838

39-
{/* Shirt Change Question */}
39+
{/* Curtain Color Question */}
4040
<div style={styles.questionGroup}>
41-
<h3 style={styles.question}>Did you notice that the shirt colors of the teams changed?</h3>
42-
<div style={styles.radioGroup}>
43-
{['Yes', 'No'].map(option => (
44-
<label key={option} style={styles.radioLabel}>
45-
<input
46-
type="radio"
47-
name="shirtChange"
48-
value={option}
49-
checked={noticedShirtChange === option}
50-
onChange={(e) => setNoticedShirtChange(e.target.value)}
51-
style={styles.radio}
52-
/>
53-
{option}
54-
</label>
55-
))}
56-
</div>
41+
<h3 style={styles.question}>What was the color of the curtain in the background at the end of the video?</h3>
42+
<input
43+
type="text"
44+
value={curtainColor}
45+
onChange={(e) => setCurtainColor(e.target.value)}
46+
placeholder="Enter color"
47+
style={styles.numberInput}
48+
/>
5749
</div>
5850

5951
{/* Gorilla Question */}

0 commit comments

Comments
 (0)