forked from msaddler/jspsych_tutorial_960
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3_advanced.html
executable file
·158 lines (144 loc) · 6.8 KB
/
3_advanced.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
<!DOCTYPE html>
<html>
<head>
<title>Advanced</title>
<meta http-equiv="pragma" content="no-cache">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
<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://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src="util.js"></script>
</head>
<body></body>
<script>
// Initialize the jsPsych object (possibly with arguments: https://www.jspsych.org/7.3/reference/jspsych/)
var jsPsych = initJsPsych({
on_finish: function () {
jsPsych.data.displayData(); // Print data to screen at the end
write_data_to_server(); // This function is defined in `util.js`
},
show_progress_bar: true,
});
// The `write_data_to_server` function requires two global variables to be defined:
// `url_write_data_php` (web location of the write_data.php script) and `output_filename`
var url_experiment_dir = 'https://msaddler.scripts.mit.edu/jspsych_tutorial_960/';
var url_write_data_php = url_experiment_dir + 'write_data.php';
var subject_id = jsPsych.data.getURLVariable('subject_id');
console.log(`subject_id from URL: ${subject_id}`);
if (!subject_id) {
subject_id = jsPsych.randomization.randomID(10);
console.log(`subject_id randomly assigned: ${subject_id}`);
}
var output_filename = `data/experiment3_${subject_id}.json`;
console.log(`Data will be saved to: ${url_experiment_dir + output_filename}`);
// Initialize a timeline (just an empty array)
var timeline = [];
// A preload object will ensure images are loaded from the server before the trial they are used
var preload = {
type: jsPsychPreload,
auto_preload: true,
};
timeline.push(preload);
// Always good to put experiment instructions / disclaimers on the first page
var first_page = {
type: jsPsychHtmlButtonResponse, // This trial will use the "html-button-response" plugin
stimulus: [
'<h2>Simple image classification experiment</h2>' +
'<p>In this experiment, you will briefly see images of human faces.</p>' +
'<p>Your task is to report if the person pictured was wearing a face mask, ' +
'and if so, were they wearing it correctly?</p>'
],
choices: ['Begin experiment'],
};
timeline.push(first_page);
// Define some variables that will be shared across all image trials
var prompt_str = 'Was the person pictured correctly wearing a face mask?';
var choices = ['Correctly wearing mask', 'Incorrectly wearing mask', 'Not wearing mask'];
var maintain_aspect_ratio = true;
var stimulus_width = 300; // Image width in pixels (null will use native width)
var stimulus_duration = 500; // Image presentation duration in ms
// Programatically prepare a list of variables that will vary by trials
var timeline_variables_for_trials = [];
var factors = {
condition: [0, 1, 2], // 3 conditions numbered 0, 1, 2
image_num: arange(50, 53, 1), // 3 images numbered 50 to 52
};
var full_design = jsPsych.randomization.factorial(factors, 1);
var unique_stimulus_duration = [250, 750];
var list_stimulus_duration = jsPsych.randomization.repeat(
unique_stimulus_duration,
full_design.length / unique_stimulus_duration.length);
for (var itr_trial = 0; itr_trial < full_design.length; itr_trial += 1) {
var condition = full_design[itr_trial].condition;
var image_num = full_design[itr_trial].image_num;
timeline_variables_for_trials.push({
image_path: `images/condition${condition}/${image_num}.png`,
stimulus_duration: list_stimulus_duration[itr_trial],
key_answer: `${condition}`,
});
}
console.log(JSON.stringify(timeline_variables_for_trials));
// Prepare timeline for the individual trials
var timeline_for_trials = [
{
type: jsPsychImageButtonResponse, // This trial will use the "image-button-response" plugin
stimulus: jsPsych.timelineVariable('image_path'),
maintain_aspect_ratio: maintain_aspect_ratio,
stimulus_width: stimulus_width,
stimulus_duration: jsPsych.timelineVariable('stimulus_duration'),
prompt: prompt_str,
choices: choices,
data: {
stimulus_duration: jsPsych.timelineVariable('stimulus_duration'),
},
},
// {
// type: jsPsychCategorizeImage, // This trial will use the "categorize-image" plugin
// stimulus: jsPsych.timelineVariable('image_path'),
// maintain_aspect_ratio: maintain_aspect_ratio,
// stimulus_width: stimulus_width,
// stimulus_duration: jsPsych.timelineVariable('stimulus_duration'),
// prompt: [
// '<h3>0 = No mask</h3>' +
// '<h3>1 = Mask worn correctly</h3>' +
// '<h3>2 = Mask worn incorrectly</h3>'
// ],
// choices: ['0', '1', '2'],
// show_stim_with_feedback: false,
// feedback_duration: 1000,
// correct_text: 'Correct',
// incorrect_text: 'The correct response was %ANS%',
// text_answer: jsPsych.timelineVariable('key_answer'),
// key_answer: jsPsych.timelineVariable('key_answer'),
// data: {
// key_answer: jsPsych.timelineVariable('key_answer'),
// stimulus_duration: jsPsych.timelineVariable('stimulus_duration'),
// },
// },
];
// Add the trials to the main timeline
var trials = {
timeline: timeline_for_trials,
timeline_variables: timeline_variables_for_trials,
randomize_order: true,
};
timeline.push(trials);
var last_page = {
type: jsPsychHtmlButtonResponse, // This trial will use the "html-button-response" plugin
stimulus: [
'<h2>Press the button below to end experiment.</h2>' +
'<p>Thank you for participating!</p>'
],
choices: ['End experiment'],
};
timeline.push(last_page);
// Run the timeline
jsPsych.run(timeline);
</script>
</html>