visual_texture_familiarity/index.html at main · SchlossVRL/visual_texture_familiarity · GitHub

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
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<!DOCTYPE html>
<html>

<head>
    <title>My experiment</title>
    <script src="jsPsych/jspsych.js"></script>
    <script src="jsPsych/plugin-html-button-response.js"></script>
    <script src="jsPsych/plugin-html-keyboard-response.js"></script>
    <script src="jsPsych/plugin-fullscreen.js"></script>
    <script src="jsPsych/plugin-survey-text.js"></script>
    <script src="jsPsych/plugin-survey-html-form.js"></script>
    <script src="jsPsych/plugin-survey-multi-select.js"></script>
    <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.3"></script>
    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.3"></script>
    <script src="https://unpkg.com/@jspsych-contrib/plugin-pipe"></script>


    <link href="jsPsych/jspsychMAS.css" rel="stylesheet" type="text/css">
</head>

<body></body>
<script>
    async function startExperiment() {
        //Start jsPsych Experiment!!!


        //Initiate jsPsych
        var jsPsych = initJsPsych({
            on_finish: function () {
                // Save data locally as CSV
                jsPsych.data.get().localSave('csv', 'experiment_data.csv');
            }
        });

        const sona_id = jsPsych.data.getURLVariable('id');
        var participant_id = jsPsych.randomization.randomID(10);
        const filename = `${participant_id}.csv`;

        // Add it to every trial's data
        jsPsych.data.addProperties({
            sona_id: sona_id,
            participant_id: participant_id
        });

        /*
        var subject_id = jsPsych.data.getURLVariable('PROLIFIC_PID');
        var study_id = jsPsych.data.getURLVariable('STUDY_ID');
        var session_id = jsPsych.data.getURLVariable('SESSION_ID');

        jsPsych.data.addProperties({
            subject_id: subject_id,
            study_id: study_id,
            session_id: session_id
        });
        */

        //Create timeline
        let timeline = [];


        // Set background color to gray //
        document.body.style.backgroundColor = "rgb(128,128,128)"

        // Function to shuffle an array
        function shuffleArray(array) {
            // Fisher-Yates shuffle
            let arr = array.slice(); // copy
            for (let i = arr.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
            return arr;
        }


        // Preload (if you have images, add them here)
        const preload = {
            type: jsPsychPreload,
            images: [
                'NBT_53/D1.png',
                'NBT_53/D4.png',
                'NBT_53/D8.png',
                'NBT_53/D11.png',
                'NBT_53/D14.png',
                'NBT_53/D16.png',
                'NBT_53/D17.png',
                'NBT_53/D18.png',
                'NBT_53/D19.png',
                'NBT_53/D20.png',
                'NBT_53/D22.png',
                'NBT_53/D25.png',
                'NBT_53/D26.png',
                'NBT_53/D34.png',
                'NBT_53/D35.png',
                'NBT_53/D36.png',
                'NBT_53/D37.png',
                'NBT_53/D46.png',
                'NBT_53/D47.png',
                'NBT_53/D48.png',
                'NBT_53/D49.png',
                'NBT_53/D51.png',
                'NBT_53/D52.png',
                'NBT_53/D53.png',
                'NBT_53/D55.png',
                'NBT_53/D56.png',
                'NBT_53/D57.png',
                'NBT_53/D64.png',
                'NBT_53/D65.png',
                'NBT_53/D66.png',
                'NBT_53/D68.png',
                'NBT_53/D74.png',
                'NBT_53/D75.png',
                'NBT_53/D76.png',
                'NBT_53/D77.png',
                'NBT_53/D78.png',
                'NBT_53/D79.png',
                'NBT_53/D81.png',
                'NBT_53/D82.png',
                'NBT_53/D83.png',
                'NBT_53/D84.png',
                'NBT_53/D85.png',
                'NBT_53/D87.png',
                'NBT_53/D92.png',
                'NBT_53/D94.png',
                'NBT_53/D95.png',
                'NBT_53/D96.png',
                'NBT_53/D101.png',
                'NBT_53/D102.png',
                'NBT_53/D103.png',
                'NBT_53/D104.png',
                'NBT_53/D105.png',
                'NBT_53/D111.png'
            ]
        };
        timeline.push(preload);

        var image_paths = [
            'NBT_53/D1.png',
            'NBT_53/D4.png',
            'NBT_53/D8.png',
            'NBT_53/D11.png',
            'NBT_53/D14.png',
            'NBT_53/D16.png',
            'NBT_53/D17.png',
            'NBT_53/D18.png',
            'NBT_53/D19.png',
            'NBT_53/D20.png',
            'NBT_53/D22.png',
            'NBT_53/D25.png',
            'NBT_53/D26.png',
            'NBT_53/D34.png',
            'NBT_53/D35.png',
            'NBT_53/D36.png',
            'NBT_53/D37.png',
            'NBT_53/D46.png',
            'NBT_53/D47.png',
            'NBT_53/D48.png',
            'NBT_53/D49.png',
            'NBT_53/D51.png',
            'NBT_53/D52.png',
            'NBT_53/D53.png',
            'NBT_53/D55.png',
            'NBT_53/D56.png',
            'NBT_53/D57.png',
            'NBT_53/D64.png',
            'NBT_53/D65.png',
            'NBT_53/D66.png',
            'NBT_53/D68.png',
            'NBT_53/D74.png',
            'NBT_53/D75.png',
            'NBT_53/D76.png',
            'NBT_53/D77.png',
            'NBT_53/D78.png',
            'NBT_53/D79.png',
            'NBT_53/D81.png',
            'NBT_53/D82.png',
            'NBT_53/D83.png',
            'NBT_53/D84.png',
            'NBT_53/D85.png',
            'NBT_53/D87.png',
            'NBT_53/D92.png',
            'NBT_53/D94.png',
            'NBT_53/D95.png',
            'NBT_53/D96.png',
            'NBT_53/D101.png',
            'NBT_53/D102.png',
            'NBT_53/D103.png',
            'NBT_53/D104.png',
            'NBT_53/D105.png',
            'NBT_53/D111.png'
        ]

        var shuffled_images = shuffleArray(image_paths);
        console.log("Shuffled images:", shuffled_images);

        // Each element is an object with a "stimulus" property (image path)
        var timeline_variables = shuffled_images.map(img => {
            return { texture: img };
        });

        // Split into 4 blocks: 13, 13, 13, 14
        const block_sizes = [13, 13, 13, 14];
        let blocks = [];
        let index = 0;

        for (let size of block_sizes) {
            blocks.push(timeline_variables.slice(index, index + size));
            index += size;
        }

        function breakScreen(blockNum) {
            return {
                type: jsPsychHtmlButtonResponse,
                stimulus: `
            <div style="text-align:center;">
                <p>You have completed block ${blockNum} of 4.</p>
                <p>Press Continue when you are ready for the next block.</p>
            </div>
        `,
                choices: ['Continue']
            };
        }


        //var participant_id = jsPsych.data.getURLVariable('participant_id') || Math.floor(Math.random() * 10000);
        //const filename = `participant_${participant_id}.csv`;

        // Initial welcome screen
        var initial_screen = {
            type: jsPsychHtmlButtonResponse,
            stimulus: 'Welcome to our experiment!' +
                '<p> This experiment involves two parts: demographic information, followed by the experimental task.' +
                '<p>At the bottom of this screen, you will see a button that says "Begin Experiment".' +
                '<br>Please only click that button when you are ready to complete the 30 minute experiment in one sitting.</p>' +
                '<p> Once you click that button, it will not be possible to restart the experiment.',
            choices: ['Begin Experiment']
        }
        timeline.push(initial_screen);

        timeline.push({
            type: jsPsychFullscreen,
            fullscreen_mode: true,
        })

        //Consent signing
        var consentSign = {
            type: jsPsychSurveyMultiSelect,
            questions: [
                {
                    prompt:
                        "  <strong>UNIVERSITY OF WISCONSIN-MADISON</strong>" +
                        "  <br><strong>Research Participant Information and Consent Form</strong>" +
                        " <br><br><strong>Title of the Study:</strong> Investigating how observers perceive, interpret, and evaluate visual features in 2D scenes and 3D environments" +
                        " <br><br><strong>Principal Investigator:</strong> Karen B. Schloss (phone: 608-316-4495) (email: kschloss@wisc.edu)" +
                        "  <br><br><strong><u>DESCRIPTION OF THE RESEARCH</u></strong>" +
                        "  <br>You are invited to participate in a research study about how visual features influence the ability to perceive, interpret, navigate, and remember information in visual displays" +
                        "  <br><br>You have been asked to participate because you saw a description of the study and signed up to be a participant." +
                        "  <br><br>The purpose of the research is to understand principles by which people perceive, evaluate and interpret visual information (e.g., the meaning of parts of a scientific diagram)." +
                        "  <br><br>This study will include adults from UW-Madison and nearby areas who volunteer to participate." +
                        "  <br><br>The research will be conducted online, with no requirement to appear in person." +
                        "  <br><br><strong><u>WHAT WILL MY PARTICIPATION INVOLVE?</u></strong>" +
                        "  <br>If you decide to participate in this research you will be presented with visual displays containing images and/or text and will be asked to make judgments about them. For example, you may see shapes and be asked how round they appear or view a graph with a legend and interpret information about the data in the graph." +
                        "  <br><br>You will be asked to respond by making button presses on a keyboard/mouse. You may be asked to complete questionnaires about your expertise or educational level in a given domain (e.g., neuroscience) and questionnaires about what sorts of things you like/dislike. Finally, you may be asked to respond to questions about your experience during the experiment (e.g., how much you enjoyed the task)." +
                        "  <br><br>You will be asked to complete 2-6 surveys or tasks." +
                        "  <br><br>Your participation will last approximately 30-60 minutes per session (as specified when you signed up to participate) and will require 1 session (30 to 60 min total)." +
                        "  <br><br><strong><u>ARE THERE ANY RISKS TO ME?</u></strong>" +
                        "  <br>We don't anticipate any risks to you from participating in this study." +
                        "  <br><br><strong><u>ARE THERE ANY BENEFITS TO ME?</u></strong>" +
                        "  <br>There are no direct benefits for participating in this study." +
                        "  <br><br><strong><u>WILL I BE COMPENSATED FOR MY PARTICIPATION?</u></strong>" +
                        "  <br>Consistent with PSY 202/210/225 policies, you will receive 1 extra credit point/30 minutes of study participation. At the end of the semester, those extra credit points are converted such that 1 point of extra credit = 0.33% added directly to your grade at the end of term. Consult your class syllabus for additional details regarding the application of extra credit points to your final grade." +
                        "  <br><br><strong><u>HOW WILL MY CONFIDENTIALITY BE PROTECTED?</u></strong>" +
                        "  <br>While there will probably be publications as a result of this study, your name will not be used. Typically, group characteristics will be published, but datasets with individual responses may also be shared. In such cases, the data will not be linked to your name or other identifiable information." +
                        "  <br><br><strong><u>WHOM SHOULD I CONTACT IF I HAVE QUESTIONS?</u></strong>" +
                        "  <br>You may ask any questions about the research at any time. If you have questions about the research you can contact the Principal Investigator Karen B. Schloss at 608-316-4495." +
                        "  <br><br>If you are not satisfied with response of research team, have more questions, or want to talk with someone about your rights as a research participant, you should contact the Education and Social/Behavioral Science IRB Office at 608-263-2320." +
                        "  <br><br>Your participation is completely voluntary. If you decide not to participate or to withdraw from the study you may do so without penalty." +
                        "  <br><br>By clicking the box below, you confirm that you have read this consent form, had an opportunity to ask any questions about your participation in this research and voluntarily consent to participate. You may print a copy of this form for your records." +
                        "  <br><br>Please click the box below next to the text 'I consent' to give your informed consent to participate. " +
                        "   </p>",
                    options: ["<strong>I consent</strong>"],
                    horizontal: false,
                    required: true,
                    name: 'Consent'
                },
            ],
            button_label: "Start Experiment",
        };
        timeline.push(consentSign);

        // Demographic questions
        var age_lang_demo = {
            type: jsPsychSurveyText,
            questions: [
                { prompt: "Age", name: 'Age', rows: "1", columns: "3", required: true, },
                { prompt: "Gender", name: 'Gender', rows: "1", columns: "15", required: true, },
                { prompt: "Race/ethnicity", name: 'Race/ethnicity', rows: "1", columns: "30", required: true, },
                { prompt: "List all languages you know", name: "Languages", rows: "6", columns: "60", required: true, }
            ],
            preamble: "Please answer the following questions.",
            button_label: "Done",
            randomize_question_order: false
        }
        timeline.push(age_lang_demo);

        // Consent and demo Completion
        var demo_completion = {
            type: jsPsychHtmlButtonResponse,
            stimulus: "<p>Great job!</p> You have completed the consent process and answered the demographic questions." +
                "<p> Click the button to continue to the experimental task. </p>",
            choices: ['Continue']
        };

        //timeline.push(demo_completion);


        //Instructions for the experiment
        var instructions = {
            type: jsPsychHtmlButtonResponse,
            stimulus: `
                <div style="text-align:left;">
                    <p style="margin-bottom:5px;">In this experiment you will view a series of images like the one below. <br>
                        For each image please think about what it reminds you of and list your responses in the text boxes provided below the image.</p>
                    <div style="text-align:center;">
                        <p style="font-size:24px; font-weight:bold; text-align:center; margin: 0 0 5px 0 ;">What does this image remind you of?</p>
                        <img src="examples/D91.png" style="width:200px; display:block; margin: 0 auto 10px auto;">

                        <label style="display:block; margin:5px 0 2px 0;">1. Response:</label>
                        <input name="resp1" type="text" style="width:35%; display:block; margin:0 auto 5px auto; padding:4px;">

                        <label style="display:block; margin:5px 0 2px 0;">2. Optional:</label>
                        <input name="resp2" type="text" style="width:35%; display:block; margin:0 auto 5px auto; padding:4px;">

                        <label style="display:block; margin:5px 0 2px 0;">3. Optional:</label>
                        <input name="resp3" type="text" style="width:35%; display:block; margin:0 auto 5px auto; padding:4px;">

                        <label style="display:block; margin:5px 0 2px 0;">4. Optional:</label>
                        <input name="resp4" type="text" style="width:35%; display:block; margin:0 auto 5px auto; padding:4px;">

                        <label style="display:block; margin:5px 0 2px 0;">5. Optional:</label>
                        <input name="resp5" type="text" style="width:35%; display:block; margin:0 auto 5px auto; padding:4px;">
                    </div>
                    <p style="margin-bottom:5px;">Your task is to provide at least one response per trial, please enter what the image most strongly reminds you of in the first text box provided. You may provide up to 5 responses. You will not be able to proceed to the next trial until providing at least one reponse. <br>
                        The experiment will take about 30 minutes, and there will be 4 blocks of trials. You will be notified when you have 1/4, 2/4, and 3/4 of the trials. <br>
                        Press 'Continue' when you are ready to begin.</p>
                </div>
                `,
            choices: ['Continue']
        };
        timeline.push(instructions);


        var list_trial = {
            type: jsPsychSurveyHtmlForm,
            preamble: function () {
                return `<div style="text-align:center; padding-bottom:20px;">
                    <p style='font-size:32px; font-weight:bold;'>What does this image remind you of?</p>
                    <img src="${jsPsych.timelineVariable('texture')}" style="width:300px;">
                </div>`;
            },
            html: `
                <label>1. Response:</label><br>
                <input name="resp1" type="text" style="width:80%; margin-bottom:5px;"><br>
                <label>2. Optional:</label><br>
                <input name="resp2" type="text" style="width:80%; margin-bottom:5px;"><br>
                <label>3. Optional:</label><br>
                <input name="resp3" type="text" style="width:80%; margin-bottom:5px;"><br>
                <label>4. Optional:</label><br>
                <input name="resp4" type="text" style="width:80%; margin-bottom:5px;"><br>
                <label>5. Optional:</label><br>
                <input name="resp5" type="text" style="width:80%; margin-bottom:5px;"><br>
            `,
            button_label: "Next",
            on_load: function () {
                const reqField = document.querySelector('input[name="resp1"]');
                const btn = document.querySelector(".jspsych-btn");
                btn.disabled = true;
                reqField.addEventListener("input", () => {
                    btn.disabled = !(reqField.value.trim().length > 0);
                });
            },
            on_finish: function (data) {
                data.image = jsPsych.timelineVariable('texture', true);
            }
        };


        var iti = {
            type: jsPsychHtmlKeyboardResponse,
            stimulus: '<div style="font-size: 40px;">+</div>',   // blank screen
            choices: "NO_KEYS",  // no responses allowed
            trial_duration: 500
        };


        /*var trial_loop = {
            timeline: [list_trial],
            timeline_variables: timeline_variables,
            randomize_order: false  // images are already shuffled
        };

        timeline.push(trial_loop);*/

        // Add blocks with breaks
        for (let b = 0; b < blocks.length; b++) {

            // Add the trial loop for this block
            timeline.push({
                timeline: [iti, list_trial],
                timeline_variables: blocks[b],
                randomize_order: false
            });

            // Add a break AFTER blocks 1–3 (not after the final block)
            if (b < blocks.length - 1) {
                timeline.push(breakScreen(b + 1));
            }
        }


        //Exit fullscreen
        timeline.push({
            type: jsPsychFullscreen,
            fullscreen_mode: false
        })

        //save the data
        const save_data = {
            type: jsPsychPipe,
            action: "save",
            experiment_id: "MuhCtA1AKP0Q",
            filename: filename,
            wait_message: "Please wait while the next page loads.",
            data_string: () => jsPsych.data.get().csv()
        };
        timeline.push(save_data);

        var debrief_script = {
            type: jsPsychHtmlKeyboardResponse,
            stimulus: '<div style="width:800px">Great job! You have finished the experiment.' +
                '<p>The goal of this experiment is to investigate what factors influence the way people interpret the meanings of images. In a series of trials, you indicated what each image reminded you of.</p>' +
                '<p>We are interested in understanding how the concepts that come to mind when viewing an image may influence how it is interpreted in different contexts.</p>' +
                '<p>Thank you for participating! Your credit will be updated on Sona within a few days.</p>' +
                '<p>You may press the "esc" key to end the experiment and exit full screen.</p>' +
                '</div>',
            choices: ['NO_KEYS']
        }
        timeline.push(debrief_script);

        console.log("Timeline contents:", timeline);

        //Run the experiment
        //jsPsych.run(timeline);
        jsPsych.run(timeline).then(() => {
            if (sona_id) {
                window.location.href = `https://uwmadison.sona-systems.com/webstudy_credit.aspx?experiment_id=1652&credit_token=ea076512702d447d87e368a354e37fd9&survey_code=` + sona_id;
            }
        });
    }
    startExperiment();

</script>

</html>