Skip to content

Commit 20c297a

Browse files
WillHAdairWillHAdair
committed
embed qualtrics survey blocks into tasks for Text and Video Tasks
1 parent 223b79a commit 20c297a

File tree

8 files changed

+186
-60
lines changed

8 files changed

+186
-60
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.ea5d9395.css",
4-
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.5d9fbd49.js",
4+
"main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.86536664.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-16.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-16.8583b0dd5e9bb251fc9c.jpg",
7171
"index.html": "https://seresl.unl.edu/webcamstudy/index.html",
7272
"main.ea5d9395.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.ea5d9395.css.map",
73-
"main.5d9fbd49.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.5d9fbd49.js.map",
73+
"main.86536664.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.86536664.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.ea5d9395.css",
78-
"static/js/main.5d9fbd49.js"
78+
"static/js/main.86536664.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.5d9fbd49.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.ea5d9395.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.86536664.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.ea5d9395.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/ConsentForm.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ const ConsentForm = () => {
1313
}}>
1414
<h2>Demographic Information</h2>
1515
<iframe
16-
src="https://unlcorexmuw.qualtrics.com/jfe/form/SV_3QwHelT1w9lmD3w"
17-
height="800px"
16+
src="https://unlcorexmuw.qualtrics.com/jfe/form/SV_6YFOhCRXbWEtLxQ?block=consent"
1817
width="600px"
18+
height="600px"
1919
title="Consent Form"
2020
/>
2121
</div>

‎webcamstudy/src/components/TextTask.jsx‎

Lines changed: 63 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ Did gyre and gimble in the wabe:
66
All mimsy were the borogoves,
77
And the mome raths outgrabe.
88
9-
“Beware the Jabberwock, my son!
9+
"Beware the Jabberwock, my son!
1010
The jaws that bite, the claws that catch!
1111
Beware the Jubjub bird, and shun
12-
The frumious Bandersnatch!”
12+
The frumious Bandersnatch!"
1313
1414
He took his vorpal sword in hand;
1515
Long time the manxome foe he sought—
@@ -26,15 +26,16 @@ The vorpal blade went snicker-snack!
2626
He left it dead, and with its head
2727
He went galumphing back.
2828
29-
“And hast thou slain the Jabberwock?
29+
"And hast thou slain the Jabberwock?
3030
Come to my arms, my beamish boy!
31-
O frabjous day! Callooh! Callay!”
31+
O frabjous day! Callooh! Callay!"
3232
He chortled in his joy.
3333
34-
’Twas brillig, and the slithy toves
34+
'Twas brillig, and the slithy toves
3535
Did gyre and gimble in the wabe:
3636
All mimsy were the borogoves,
37-
And the mome raths outgrabe.`
37+
And the mome raths outgrabe.`,
38+
// Add your other two texts here...
3839
];
3940

4041
function pickRandomText() {
@@ -63,7 +64,7 @@ const TextTask = () => {
6364
let formattedTextContainer = formattedTextRef.current;
6465

6566
let cleanedText = text.replace(/\n+/g, ' ');
66-
let words = cleanedText.match(/[\w’']+|[.,!?;:"”“—-]|\s+/g) || [];
67+
let words = cleanedText.match(/[\w'']+|[.,!?;:"""—-]|\s+/g) || [];
6768

6869
formattedTextContainer.innerHTML = '';
6970

@@ -102,33 +103,47 @@ const TextTask = () => {
102103
<div
103104
className="textTask"
104105
style={{
105-
textAlign: 'center',
106-
fontFamily: 'Arial, sans-serif',
107106
height: '100vh',
108107
width: '100vw',
109108
display: 'flex',
110109
flexDirection: 'column',
110+
fontFamily: 'Arial, sans-serif',
111+
textAlign: 'center',
111112
justifyContent: 'center',
112113
alignItems: 'center',
113114
position: 'relative',
114115
backgroundColor: '#fff',
116+
overflow: 'hidden', // Prevent scrollbars
117+
boxSizing: 'border-box',
115118
}}
116119
>
117120
{showCross ? (
118-
console.log("Fixation cross is rendering...") || (
119-
<div style={styles.crossContainer}>
120-
<div style={styles.cross}>+</div>
121-
</div>
122-
)
121+
<div style={styles.crossContainer}>
122+
<div style={styles.cross}>+</div>
123+
</div>
123124
) : (
124125
<>
125-
<h3 style={{ margin: '2em 25% 0' }}>
126-
Please read the following text carefully:
127-
</h3>
128-
<div
129-
ref={formattedTextRef}
130-
className="formatted-text"
131-
style={{
126+
{/* Text Section - Takes up 50% of viewport height */}
127+
<div style={{
128+
flex: '0 0 50vh',
129+
display: 'flex',
130+
flexDirection: 'column',
131+
justifyContent: 'center',
132+
alignItems: 'center',
133+
padding: '10px',
134+
boxSizing: 'border-box',
135+
}}>
136+
<h3 style={{
137+
margin: '0 0 20px 0',
138+
fontSize: '18px',
139+
textAlign: 'center',
140+
}}>
141+
Please read the following text carefully:
142+
</h3>
143+
<div
144+
ref={formattedTextRef}
145+
className="formatted-text"
146+
style={{
132147
display: 'flex',
133148
flexWrap: 'wrap',
134149
justifyContent: 'flex-start',
@@ -137,8 +152,31 @@ const TextTask = () => {
137152
maxWidth: '33%',
138153
width: '100%',
139154
lineHeight: 2,
140-
}}
141-
/>
155+
}}
156+
/>
157+
</div>
158+
159+
{/* Survey Section - Takes up 50% of viewport height */}
160+
<div style={{
161+
flex: '0 0 50vh',
162+
width: '100%',
163+
display: 'flex',
164+
justifyContent: 'center',
165+
alignItems: 'center',
166+
padding: '10px',
167+
boxSizing: 'border-box',
168+
}}>
169+
<iframe
170+
src="https://unlcorexmuw.qualtrics.com/jfe/form/SV_6YFOhCRXbWEtLxQ?block=text"
171+
style={{
172+
width: '90%',
173+
height: '100%',
174+
border: 'none',
175+
borderRadius: '5px',
176+
}}
177+
title="Survey"
178+
/>
179+
</div>
142180
</>
143181
)}
144182

@@ -148,10 +186,10 @@ const TextTask = () => {
148186
flex-wrap: nowrap;
149187
}
150188
.letter {
151-
font-size: 24px;
189+
font-size: 18px;
152190
}
153191
.space {
154-
width: 4px;
192+
width: 3px;
155193
}
156194
`}</style>
157195
</div>
@@ -170,7 +208,6 @@ const styles = {
170208
alignItems: 'center',
171209
zIndex: 9999,
172210
backgroundColor: '#fff',
173-
border: '3px dashed red', // Temporary debug border — remove later
174211
},
175212
cross: {
176213
fontSize: '100px',

‎webcamstudy/src/components/VideoTask.jsx‎

Lines changed: 64 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -61,41 +61,78 @@ const VideoTask = () => {
6161
<div
6262
className="videoTask"
6363
style={{
64-
display: 'flex',
65-
justifyContent: 'center',
66-
alignItems: 'center',
6764
height: '100vh',
6865
width: '100vw',
66+
display: 'flex',
67+
flexDirection: 'column',
6968
position: 'relative',
7069
backgroundColor: '#fff',
70+
overflow: 'hidden', // Prevent scrollbars
71+
boxSizing: 'border-box',
7172
}}
7273
>
7374
{showCross ? (
74-
console.log('Rendering fixation cross...') || (
75-
<div style={styles.crossContainer}>
76-
<div style={styles.cross}>+</div>
77-
</div>
78-
)
75+
<div style={styles.crossContainer}>
76+
<div style={styles.cross}>+</div>
77+
</div>
7978
) : (
80-
<video
81-
ref={videoRef}
82-
controls
83-
crossOrigin="anonymous"
84-
playsInline
85-
style={{
86-
width: '80vw',
87-
height: 'auto',
88-
maxWidth: '900px',
89-
maxHeight: '80vh',
90-
border: '1px solid #ccc',
91-
borderRadius: 5,
92-
boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
93-
background: '#000',
94-
}}
95-
>
96-
<source src={video.src} type={video.type} />
97-
Your browser does not support the video tag.
98-
</video>
79+
<>
80+
{/* Video Section - Takes up 60% of viewport height */}
81+
<div
82+
style={{
83+
flex: '0 0 60vh',
84+
display: 'flex',
85+
justifyContent: 'center',
86+
alignItems: 'center',
87+
padding: '10px',
88+
boxSizing: 'border-box',
89+
}}
90+
>
91+
<video
92+
ref={videoRef}
93+
controls
94+
crossOrigin="anonymous"
95+
playsInline
96+
style={{
97+
width: '90%',
98+
height: '90%',
99+
maxWidth: '800px',
100+
border: '1px solid #ccc',
101+
borderRadius: 5,
102+
boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
103+
background: '#000',
104+
objectFit: 'contain',
105+
}}
106+
>
107+
<source src={video.src} type={video.type} />
108+
Your browser does not support the video tag.
109+
</video>
110+
</div>
111+
112+
{/* Survey Section - Takes up 40% of viewport height */}
113+
<div
114+
style={{
115+
flex: '0 0 40vh',
116+
width: '100%',
117+
display: 'flex',
118+
justifyContent: 'center',
119+
alignItems: 'center',
120+
padding: '10px',
121+
boxSizing: 'border-box',
122+
}}
123+
>
124+
<iframe
125+
src="https://unlcorexmuw.qualtrics.com/jfe/form/SV_6YFOhCRXbWEtLxQ?block=video"
126+
style={{
127+
width: '95%',
128+
height: '100%',
129+
border: 'none',
130+
borderRadius: '5px',
131+
}}
132+
title="Video Survey"
133+
/>
134+
</div>
135+
</>
99136
)}
100137
</div>
101138
);
@@ -113,7 +150,6 @@ const styles = {
113150
alignItems: 'center',
114151
backgroundColor: '#fff',
115152
zIndex: 9999,
116-
border: '3px dashed red', // ← temporary visual debug aid
117153
},
118154
cross: {
119155
fontSize: '100px',

‎webcamstudy/static/js/main.86536664.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.86536664.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.86536664.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)