-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
259 lines (224 loc) · 21.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!-- Yi-Chia Chen -->
<!DOCTYPE html>
<html lang='en' translate='no'>
<head>
<meta charset='utf-8'>
<title>UCLA Experiment</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Raleway&display=swap' />
<link rel='stylesheet' href='style.css' />
<script src='https://hcaptcha.com/1/api.js?hl=en' async defer></script>
</head>
<body>
<noscript>It seems that JavaScript is disabled in your browser. Please go to settings and enable JavaScript for this experiment.</noscript>
<!--======== INSTRUCTIONS ========-->
<div class='pageBox' id='instrBox'>
<p id='instrText'></p>
<img id='instrImg' alt='Image Error: Please contact yichiachen@ucla.edu and include the code "IMG-ERROR" to receive your credit.'></img>
<video class='instrVid' id='instrVid' preload='auto' muted loop>
<source src='Stimuli/ale_af_ori.mp4' type='video/mp4' />
Video Error: Please contact yichiachen@ucla.edu and include the code "VID-ERROR" to receive your credit.
</video>
<div class='exampleVidContainer'>
<video class='instrExamples' preload='auto' muted loop>
<source src='Stimuli/boo_nu_ori.mp4' type='video/mp4' />
Video Error: Please contact yichiachen@ucla.edu and include the code "VID-ERROR" to receive your credit.
</video>
<video class='instrExamples' preload='auto' muted loop>
<source src='Stimuli/ian_ha_mir.mp4' type='video/mp4' />
Video Error: Please contact yichiachen@ucla.edu and include the code "VID-ERROR" to receive your credit.
</video>
<video class='instrExamples' preload='auto' muted loop>
<source src='Stimuli/mil_an_mir.mp4' type='video/mp4' />
Video Error: Please contact yichiachen@ucla.edu and include the code "VID-ERROR" to receive your credit.
</video>
<video class='instrExamples' preload='auto' muted loop>
<source src='Stimuli/rac_sa_ori.mp4' type='video/mp4' />
Video Error: Please contact yichiachen@ucla.edu and include the code "VID-ERROR" to receive your credit.
</video>
</div>
<div class='ratingContainer' id='ratingExample'>
<div class='ratingButton r6'><p class='ratingLabels'>Certainly<br /><span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r5'><p class='ratingLabels'>Probably<br /><span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r4'><p class='ratingLabels'>Guess<br /><span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r3'><p class='ratingLabels'>Guess<br />Not <span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r2'><p class='ratingLabels'>Probably<br />Not <span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r1'><p class='ratingLabels'>Certainly<br />Not <span class='adj'>Pleasing</span></p></div>
</div>
<div class='button' id='nextButton' onclick='instr.next()'>NEXT</div>
<!--======== INFORMED CONSENT FORM ========-->
<div class='pageBox' id='consentBox'>
<div class='consentInstr'>To conduct this experiment, we need to include this information sheet:</div>
<div id='consentTextBox'>
<strong>INFORMATION SHEET for online participants</strong><br /><br />
You are invited to participate in a research study on human vision, conducted by Hongjing Lu, PhD, of the Dept. of Psychology at UCLA. You were selected as a possible participant in this study because you have normal or corrected vision, and are 18 years of age or older. For scientific reasons, this consent form does not include complete information about the study hypotheses and the research questions being tested. You will be fully debriefed following your participation in the research.<br /><br />
<strong>Purpose of Study</strong><br />
The purpose of the study is to understand human perception and cognition.<br /><br />
<strong>Procedures Involved in Study</strong> <br />
If you agree to participate, you may receive a demographic questionnaire to collect information of your age, gender, ethnicity, and language. You may be presented with images, videos, or sounds on a computer screen, and answer simple questions and/or perform simple tasks by interacting with a website via a keyboard or a computer mouse. You may also be asked to fill out a 50-item questionnaire. Each item is a statement describing yourself (e.g., “I prefer to do things with others rather than on my own.”) and you will indicate how strongly you agree or disagree with the statement. Your responses will be recorded by the computer and will not be identified with you in any way. The session will take 60 minutes.<br /><br />
<strong>Potential Risks and Discomforts</strong><br />
There is no known risk/discomfort in this study. If you experience any discomfort during the experiment, you can stop at any time and notify the experimenter. <br /><br />
<strong>Potential Benefits to Subject</strong><br />
There are no direct benefits from participating in this study.<br /><br />
<strong>Potential Benefits to Society</strong><br />
The findings of the study will help improve procedures for making important decisions to avoid unwanted biases. For example, people’s preference of irrelevant information in a scenario sometimes irrationally or unjustly bias decision making. By understanding people’s preferences, we will be able to design better environments for people to make rational and just decisions.<br /><br />
<strong>Payment for Participation</strong><br />
You will receive 1 hour of credit for your psychology class if you signed up for the study through the UCLA Psychology Department Subject Pool; otherwise you will receive the payment in the rate of $10 per hour for your participation.<br /><br />
<strong>Alternatives to Participation</strong><br />
An alternative to participating in this project and fulfilling Psychology 10 requirements is to participate in other research or to do an equivalent classroom project.<br /><br />
<strong>Confidentiality</strong><br />
Your identity in this study will be treated as confidential. The results of the study, including laboratory or any other data, may be published for scientific purposes but will not include any identifiable references to you.<br />
Your IP Addresses may be collected to prevent the same IP address from participating twice. Your platform ID (e.g., Mturk worker ID, Prolific ID, or Sona ID) will not be shared with anyone outside of the research team and will not be linked to study responses. However, any work performed on MTurk can be linked to the user’s public profile page. Thus, you may wish to restrict what information you choose to share in your public profile.<br /><br />
<strong>Participation and Withdraw</strong><br />
Your participation is VOLUNTARY. You may withdraw from the experiment at any time without suffering any negative consequences. You may refuse to answer any questions that you do not want to answer and still remain in the study.<br /><br />
<strong>Identification of Investigators</strong><br />
If you have any questions, feel free to contact Dr. Hongjing Lu (hongjing@ucla.edu), at the Department of Psychology, UCLA, 405 Hilgard Ave., Los Angeles, CA 90095-1563.<br /><br />
<strong>Rights of Research Subjects</strong><br />
You may withdraw your consent at any time and discontinue participation without penalty. You are not waiving any legal claims, rights or remedies because of your participation in this research study.<br /><br />
<strong>UCLA Office of the Human Research Protection Program (OHRPP)</strong><br />
If you have questions about your rights as a research subject, or you have concerns or suggestions and you want to talk to someone other than the researchers, you may contact the UCLA OHRPP by phone: (310) 206-2040; by email: participants@research.ucla.edu or by mail: Box 951406, Los Angeles, CA 90095-1406.
</div>
</div>
</div>
<!--======== INSTRUCTIONS QUIZ ========-->
<div class='pageBox' id='instrQBox'>
<div class='qMain'>What is your job in this part of the experiment?</div>
<label><div class='option'><input class='optionRadio' type='radio' name='instrQ' value='forgot' /><div class='optionText'>Select this option if you do not remember.</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='instrQ' value='feeling' /><div class='optionText'>To rate how positive you feel looking at each walker.</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='instrQ' value='personality' /><div class='optionText'>To rate how much you like the personality of the walker.</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='instrQ' value='emotion' /><div class='optionText'>To rate how positive each walker's mood looks to you.</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='instrQ' value='aesthetics' /><div class='optionText'>To rate how visually pleasing each walker looks to you.</div></div></label>
<div class='button' onclick='SUBMIT_INSTR_Q()'>SUBMIT</div>
<br />
<div class='warning' id='instrQWarning'></div>
<br />
</div>
<!--======== EXPERIMENT TRIAL ========-->
<div class='pageBox' id='trialBox'>
<div class='progressBar'><span id='progress'>0</span>% completed</div>
<div class='testVidPlaceHolder'>
<video class='testVid' id='testVid' preload='auto' muted>
<source src='Stimuli/ale_af_ori.mp4' type='video/mp4' />
Video Error: Please contact yichiachen@ucla.edu and include the code "VID-ERROR" to receive your credit.
</video>
</div>
<div id='bufferDiv'>
<video id='bufferVid' preload='auto'>
<source src='Stimuli/ale_af_ori.mp4' type='video/mp4' />
</video>
</div>
<div class='ratingContainer' id='ratingContainer'>
<div class='ratingButton r6' id='r6'><p class='ratingLabels'>Certainly<br /><span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r5' id='r5'><p class='ratingLabels'>Probably<br /><span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r4' id='r4'><p class='ratingLabels'>Guess<br /><span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r3' id='r3'><p class='ratingLabels'>Guess<br />Not <span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r2' id='r2'><p class='ratingLabels'>Probably<br />Not <span class='adj'>Pleasing</span></p></div>
<div class='ratingButton r1' id='r1'><p class='ratingLabels'>Certainly<br />Not <span class='adj'>Pleasing</span></p></div>
</div>
</div>
<!--======== EXPERIMENT BREAK ========-->
<div class='pageBox' id='restBox'>
<p id='restText'></p>
</div>
<!--======== DEBRIEFING QUESTION ========-->
<div class='pageBox' id='questionsBox'>
You're almost done! Please answer these last questions:<br /><br /><br />
<div class='boldText'>How often do you spontaneously notice how visually pleasing (or unpleasing) things are in your day-to-day life?</div>
<div class='likertWrap'>
<div class='likertLine'></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyThing' value='1' required /><p class='likertText'>1</p><p class='likertText'>very seldom</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyThing' value='2' required /><p class='likertText'>2</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyThing' value='3' required /><p class='likertText'>3</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyThing' value='4' required /><p class='likertText'>4</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyThing' value='5' required /><p class='likertText'>5</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyThing' value='6' required /><p class='likertText'>6</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyThing' value='7' required /><p class='likertText'>7</p><p class='likertText'>very often</p></label></div>
</div>
<br /><br /><br />
<div class='boldText'>How often do you spontaneously notice how visually pleasing (or unpleasing) people's body movements are in your day-to-day life?</div>
<div class='likertWrap'>
<div class='likertLine'></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyMovement' value='1' required /><p class='likertText'>1</p><p class='likertText'>very seldom</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyMovement' value='2' required /><p class='likertText'>2</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyMovement' value='3' required /><p class='likertText'>3</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyMovement' value='4' required /><p class='likertText'>4</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyMovement' value='5' required /><p class='likertText'>5</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyMovement' value='6' required /><p class='likertText'>6</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='dailyMovement' value='7' required /><p class='likertText'>7</p><p class='likertText'>very often</p></label></div>
</div>
<br /><br /><br />
<div class='boldText'>In terms of judging visual appeal of objects and scenes, how similar do you think your visual preferences are compares to the majority?</div>
<div class='likertWrap'>
<div class='likertLine'></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityThing' value='1' required /><p class='likertText'>1</p><p class='likertText'>very dissimilar</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityThing' value='2' required /><p class='likertText'>2</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityThing' value='3' required /><p class='likertText'>3</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityThing' value='4' required /><p class='likertText'>4</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityThing' value='5' required /><p class='likertText'>5</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityThing' value='6' required /><p class='likertText'>6</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityThing' value='7' required /><p class='likertText'>7</p><p class='likertText'>very similar</p></label></div>
</div>
<br /><br /><br />
<div class='boldText'>In terms of judging visual appeal of people's body movements, how similar do you think your visual preferences are compares to the majority?</div>
<div class='likertWrap'>
<div class='likertLine'></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityMovement' value='1' required /><p class='likertText'>1</p><p class='likertText'>very dissimilar</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityMovement' value='2' required /><p class='likertText'>2</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityMovement' value='3' required /><p class='likertText'>3</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityMovement' value='4' required /><p class='likertText'>4</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityMovement' value='5' required /><p class='likertText'>5</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityMovement' value='6' required /><p class='likertText'>6</p></label></div>
<div class='likert likertOptions'><label><input type='radio' name='typicalityMovement' value='7' required /><p class='likertText'>7</p><p class='likertText'>very similar</p></label></div>
</div>
<br /><br /><br />
<div class='boldText'>Did you complete this experiment seriously throughout (without randomly responding)?</div>
<div class='smallDimText'>You will receive credit regardless what your answer is here. Please be honest for science! Thanks!</div>
<label><div class='option'><input class='optionRadio' type='radio' name='serious' value='0' /><div class='optionText'>No, I didn't.</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='serious' value='1' /><div class='optionText'>Yes, I did.</div></div></label>
<br /><br /><br />
<div class='boldText'> Was any part of the procedure unclear? Did you have any problems completing any of the tasks?</div>
<div class='smallDimText'>You will receive credit regardless what your answer is here. Please be honest for science! Thanks!</div>
<textarea id='problems' rows='3' cols='90'></textarea>
<br /><br /><br />
<div class='boldText'>What is your gender?</div>
<label><div class='option'><input class='optionRadio' type='radio' name='gender' value='F' /><div class='optionText'>Female</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='gender' value='M' /><div class='optionText'>Male</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='gender' value='O' /><div class='optionText'>Another Gender</div></div></label>
<label><div class='option'><input class='optionRadio' type='radio' name='gender' value='N' /><div class='optionText'>I would rather not say</div></div></label>
<br /><br /><br />
<div class='boldText'>What is your age?</div>
<input type='number' id='age' min='0' max='199'/>
<br /><br /><br />
<div class='button' onclick='SUBMIT_DEBRIEFING_Q()'>SUBMIT</div>
<br />
<div class='warning' id='Qwarning'></div>
<br />
</div>
<!--======== DEBRIEFING ========-->
<div class='pageBox' id='debriefingBox'>
You are done! Thank you very much! Whenever you are ready, click END to get credit.<br /><br />
Interested in what we are testing? See below for more information!<br /><br />
<div class='button' onclick='END_TO_SONA()'>END</div>
<br /><br />
<strong>Debriefing Sheet</strong><br />
Thanks for participating in the experiment.<br /><br />
In this study, we are exploring people's aesthetic taste in human body movements. We ask: Are there reliable individual tastes in movements? Are there reliable differences between people? Does the gender or emotional state of the walker influence people's aesthetic experience of the walker's movements?<br /><br />
Please don't hesitate to contact the researcher if you have any questions:<br /><br />
Yi-Chia Chen<br />
UCLA Computational Vision and Learning Laboratory<br />
<a href='https://ycc.vision/' target='_blank' rel='noopener noreferrer'>https://ycc.vision/</a><br />
yichiachen@ucla.edu
<br /><br />
<strong>Here's some additional information about the core project this study is associated with:</strong><br />
We are studying human aesthetic experience by looking at how people’s aesthetic tastes differ based on their personality and the types of images, videos, or sounds being judged. We also explore what and why some types of images, videos, or sounds are preferred over others. Here are a few example scientific questions we are looking at:<br /><br />
Do people agree what actions look elegant and what does not?<br />
Can we predict what images you will tend to like based on what sounds you tend to like?<br />
Would a person’s personality influence how similar their aesthetic tastes are to others?<br /><br />
If you have any questions, please feel free to contact the researcher Hongjing Lu at hongjing@ucla.edu.
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.min.js'></script>
<script src='func.js'></script>
<script src='expt.js'></script>
<script src='index.js'></script>
</body>
</html>