-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
341 lines (302 loc) · 15.7 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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html>
<head>
<title>
Fashion Style Similarity Rating Task
</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych-contrib/plugin-pipe"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://unpkg.com/@jspsych/[email protected]/css/survey.css"
type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
on_finish: function () {
window.location = "https://app.prolific.com/submissions/complete?cc=C1JH1RU1"
},
});
var subject_id = jsPsych.data.getURLVariable('PROLIFIC_PID');
var study_id = jsPsych.data.getURLVariable('STUDY_ID');
var session_id = jsPsych.data.getURLVariable('SESSION_ID');
const filename = `${subject_id}.csv`;
jsPsych.data.addProperties({
subject_id: subject_id,
study_id: study_id,
session_id: session_id
});
var timeline = [];
var welcome_page = {
type: jsPsychHtmlKeyboardResponse,
stimulus:`
<h2>Welcome and thank you for participating in this study!</h2>
<p></p>
<p>Press any key to continue.</p>
`
}
var instruction = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this study, you will be asked to compare some outfits from the Spring/Summer 2024 Runway Shows.</p>
<p>Namely, how <strong>similar</strong> or how <strong>dissimilar</strong> they are <strong>in terms of style</strong> to you.</p>
<p></p>
<p>All of the outfits are womenswear, coming from a variety of brands.</p>
<p></p>
<p>If you think they are <strong>similar</strong> in styles, put them <strong>close</strong> to each other.</p>
<p>If you think they are <strong>dissimilar</strong> in styles, put them <strong>apart</strong> from each other.</p>
<p> See demonstration below: </p>
<video width="400", height="355" controls>
<source src="demonstration.mov">
</video>
<p>Press any key to continue.</p>
`
}
var explanation = {
type: jsPsychHtmlKeyboardResponse,
stimulus:
`
<p>Now you will get some practices before the actual trial.</p>
<br>
<p>Upon the start of a trial, 5 outfits will appear within the space.<p>
<p>Move them around according to their similarities <strong>in styles</strong> and finish until you are satisfied with the arrangement.</p>
<br>
<p><strong>There is no right or wrong answer in this task.</strong></p>
<p>Press any key to start the practice trials.</p>
`
}
var background_questions = {
type: jsPsychSurvey,
on_load: () => {
var svContainer = document.querySelector('.sv_container');
svContainer.style.color = 'rgb(0, 0, 0)';
},
pages: [
[
{
type: 'likert',
prompt: 'Is your career related to fashion?',
required: true,
name: 'fashion_career',
likert_scale_values: [
{value: "very related"},
{value: "somewhat related"},
{value: "not related"}
],
}
],
[
{
type: 'likert',
prompt: "How often do you follow developments in women's fashion?",
required: true,
name: 'fashion_engagement',
likert_scale_values: [
{value: "Always"},
{value: "Often"},
{value: "Sometimes"},
{value: "Occasionally"},
{value: "Rarely or Never"}
],
}
],
[
{
type: 'likert',
prompt: 'Do you actively try to style yourself when it comes to your personal fashion choices?',
required: true,
name: 'attention_to_style',
likert_scale_values: [
{value: "Always"},
{value: "Often"},
{value: "Sometimes"},
{value: "Occasionally"},
{value: "Rarely or Never"}
],
}
],
[
{
type: 'likert',
prompt: 'Did you recognize any brands of the outfits you just saw?',
required: true,
name: 'style_recognized',
likert_scale_values: [
{value: "All of them"},
{value: "Most of them"},
{value: "Some of them"},
{value: "A few"},
{value: "None"}
],
}
]
]
};
var preload = {
type: jsPsychPreload,
images: [
"test/img1.png", "test/img2.png", "test/img3.png", "test/img4.png","test/img5.png",
"stimuli/acne.png", "stimuli/alberta.png", "stimuli/3-1-phillip-lim.png", "stimuli/alessandra-rich.png",
"stimuli/balmain.png", "stimuli/altuzarra.png", "stimuli/bottega.png", "stimuli/ann-demeulemeester.png",
"stimuli/burberry.png", "stimuli/attico.png", "stimuli/carolina-herrera.png", "stimuli/bally.png",
"stimuli/blumarine.png", "stimuli/chanel.png", "stimuli/brandon-maxwell.png", "stimuli/chloe.png",
"stimuli/bronx-and-banco.png", "stimuli/christian-dior.png", "stimuli/carven.png", "stimuli/coach.png",
"stimuli/casablanca.png", "stimuli/diesel.png", "stimuli/cecilie-bahnsen.png", "stimuli/dolce-gabbana.png",
"stimuli/coperni.png", "stimuli/dsquared.png", "stimuli/courreges.png", "stimuli/elie-saab.png",
"stimuli/david-koma.png", "stimuli/emporio-armani.png", "stimuli/dion-lee.png", "stimuli/etro.png",
"stimuli/dries-van-noten.png", "stimuli/fendi.png", "stimuli/erdem.png", "stimuli/giambattista-valli.png",
"stimuli/ermanno-scervino.png", "stimuli/giorgio-armani.png", "stimuli/ferrari.png", "stimuli/gcds.png",
"stimuli/givenchy.png", "stimuli/gabriela-hearst.png", "stimuli/hermes.png", "stimuli/heliot-emil.png",
"stimuli/isabel-marant.png", "stimuli/j-w-anderson.png", "stimuli/kenzo.png", "stimuli/sandy-liang.png",
"stimuli/loewe.png", "stimuli/laquan-smith.png", "stimuli/louis-vuitton.png", "stimuli/loveshackfancy.png",
"stimuli/maison-martin-margiela.png", "stimuli/missoni.png", "stimuli/marni.png", "stimuli/mm6.png",
"stimuli/msgm.png", "stimuli/max-mara.png", "stimuli/naeem-khan.png", "stimuli/mcqueen.png",
"stimuli/nina-ricci.png", "stimuli/michael-kors.png", "stimuli/no-21.png", "stimuli/miu-miu.png",
"stimuli/paco-rabanne.png", "stimuli/moschino.png", "stimuli/peter-do.png", "stimuli/mugler.png",
"stimuli/philipp-plein.png", "stimuli/prada.png", "stimuli/philosophy.png", "stimuli/ralph-lauren.png",
"stimuli/prabal-gurung.png", "stimuli/rick-owens.png", "stimuli/proenza-schouler.png", "stimuli/roberto-cavalli.png",
"stimuli/rachel-comey.png", "stimuli/saint-laurent.png", "stimuli/sacai.png", "stimuli/simone-rocha.png",
"stimuli/salvatore-ferragamo.png", "stimuli/staud.png", "stimuli/schiaparelli.png", "stimuli/theory.png",
"stimuli/tibi.png", "stimuli/stella-mccartney.png", "stimuli/ulla-johnson.png", "stimuli/undercover.png",
"stimuli/tods.png", "stimuli/y-project.png", "stimuli/tom-ford.png", "stimuli/yohji-yamamoto.png",
"stimuli/tory-burch.png", "stimuli/valentino.png", "stimuli/versace.png", "stimuli/victoria-beckham.png",
"stimuli/zimmermann.png"
]
}
var test_stimuli = ["test/img1.png", "test/img2.png", "test/img3.png", "test/img4.png", "test/img5.png"]
var imgs = [
"stimuli/acne.png", "stimuli/alberta.png", "stimuli/3-1-phillip-lim.png", "stimuli/alessandra-rich.png",
"stimuli/balmain.png", "stimuli/altuzarra.png", "stimuli/bottega.png", "stimuli/ann-demeulemeester.png",
"stimuli/burberry.png", "stimuli/attico.png", "stimuli/carolina-herrera.png", "stimuli/bally.png",
"stimuli/blumarine.png", "stimuli/chanel.png", "stimuli/brandon-maxwell.png", "stimuli/chloe.png",
"stimuli/bronx-and-banco.png", "stimuli/christian-dior.png", "stimuli/carven.png", "stimuli/coach.png",
"stimuli/casablanca.png", "stimuli/diesel.png", "stimuli/cecilie-bahnsen.png", "stimuli/dolce-gabbana.png",
"stimuli/coperni.png", "stimuli/dsquared.png", "stimuli/courreges.png", "stimuli/elie-saab.png",
"stimuli/david-koma.png", "stimuli/emporio-armani.png", "stimuli/dion-lee.png", "stimuli/etro.png",
"stimuli/dries-van-noten.png", "stimuli/fendi.png", "stimuli/erdem.png", "stimuli/giambattista-valli.png",
"stimuli/ermanno-scervino.png", "stimuli/giorgio-armani.png", "stimuli/ferrari.png", "stimuli/gcds.png",
"stimuli/givenchy.png", "stimuli/gabriela-hearst.png", "stimuli/hermes.png", "stimuli/heliot-emil.png",
"stimuli/isabel-marant.png", "stimuli/j-w-anderson.png", "stimuli/kenzo.png", "stimuli/sandy-liang.png",
"stimuli/loewe.png", "stimuli/laquan-smith.png", "stimuli/louis-vuitton.png", "stimuli/loveshackfancy.png",
"stimuli/maison-martin-margiela.png", "stimuli/missoni.png", "stimuli/marni.png", "stimuli/mm6.png",
"stimuli/msgm.png", "stimuli/max-mara.png", "stimuli/naeem-khan.png", "stimuli/mcqueen.png",
"stimuli/nina-ricci.png", "stimuli/michael-kors.png", "stimuli/no-21.png", "stimuli/miu-miu.png",
"stimuli/paco-rabanne.png", "stimuli/moschino.png", "stimuli/peter-do.png", "stimuli/mugler.png",
"stimuli/philipp-plein.png", "stimuli/prada.png", "stimuli/philosophy.png", "stimuli/ralph-lauren.png",
"stimuli/prabal-gurung.png", "stimuli/rick-owens.png", "stimuli/proenza-schouler.png", "stimuli/roberto-cavalli.png",
"stimuli/rachel-comey.png", "stimuli/saint-laurent.png", "stimuli/sacai.png", "stimuli/simone-rocha.png",
"stimuli/salvatore-ferragamo.png", "stimuli/staud.png", "stimuli/schiaparelli.png", "stimuli/theory.png",
"stimuli/tibi.png", "stimuli/stella-mccartney.png", "stimuli/ulla-johnson.png", "stimuli/undercover.png",
"stimuli/tods.png", "stimuli/y-project.png", "stimuli/tom-ford.png", "stimuli/yohji-yamamoto.png",
"stimuli/tory-burch.png", "stimuli/valentino.png", "stimuli/versace.png", "stimuli/victoria-beckham.png",
"stimuli/zimmermann.png"
]
var practice_trials = {
type: jsPsychFreeSort,
stimuli: test_stimuli,
stim_width: function(){
return window.innerWidth*0.08
},
stim_height: function(){
return window.innerHeight*0.3
},
scale_factor: 1.8,
stim_starts_inside: true,
sort_area_width: function(){
return window.innerWidth*0.9;
},
sort_area_height: function(){
return window.innerHeight*0.9;
},
sort_area_shape: "square",
counter_text_finished: "All outfits placed. Feel free to rearrange them. When you finish, scroll down to click continue.",
counter_text_unfinished: "You still need to place %n% item%s% inside the space.",
data: {
task: "practice"
}
}
var real_trial_start = {
type: jsPsychHtmlButtonResponse,
stimulus: `<p>Good job on finishing the practice trials.</p><p>When you are ready, press continue to start the experiment.</p>
<p>There will only be <strong>1 trial</strong> that consists of <strong>25</strong> outfits. </p>`,
choices: ["Continue"]
}
var stimuli_set = new Array();
imgs_shuffled = imgs.sort(() => Math.random() - 0.5);
for(let i=0; i<25; i++){
stimuli_set.push(imgs_shuffled[i]);
}
var real_trials = {
type: jsPsychFreeSort,
stimuli: stimuli_set,
stim_width: function(){
return window.innerWidth*0.08
},
stim_height: function(){
return window.innerHeight*0.3
},
scale_factor: 1.8,
stim_starts_inside: true,
sort_area_width: function(){
return window.innerWidth*0.9;
},
sort_area_height: function(){
return window.innerHeight*0.9;
},
sort_area_shape: "square",
counter_text_finished: "All outfits placed. Feel free to rearrange them. When you finish, scroll down to click continue.",
counter_text_unfinished: "You still need to place %n% item%s% inside the space.",
data: {
task: "rating_trial"
}
}
var end = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<h2>This is the end of the experiment.</h2>
<br>
<p>Before you go, there are some simple questions for you to answer.</p>
<p>Press any key to continue.</p>
`
}
var goodbye = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<h2> Thank you again for participating and have a nice day! ;)</h2>
<p>Press any key to quit</p>
`
}
const save_data = {
type: jsPsychPipe,
action: "save",
experiment_id: "CEoF3YpOJLVk",
filename: filename,
data_string: ()=>jsPsych.data.get().csv()
};
timeline.push(preload);
timeline.push({
type: jsPsychFullscreen,
fullscreen_mode: true
});
timeline.push(welcome_page);
timeline.push(instruction);
timeline.push(explanation);
timeline.push(practice_trials);
timeline.push(real_trial_start);
timeline.push(real_trials);
timeline.push(end);
timeline.push(background_questions);
timeline.push(goodbye);
timeline.push(save_data);
jsPsych.run(timeline);
</script>
</html>