-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path4_expert.html
executable file
·152 lines (140 loc) · 6.79 KB
/
4_expert.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
<!DOCTYPE html>
<html>
<head>
<title>Expert</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://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/[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();
write_data_to_server();
},
extensions: [{
type: jsPsychExtensionMouseTracking,
params: { minimum_sample_time: 0 },
}]
});
// 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 subject_id = jsPsych.data.getURLVariable('PROLIFIC_PID'); // capture info from Prolific
// var session_id = jsPsych.data.getURLVariable('SESSION_ID'); // capture info from Prolific
// var study_id = jsPsych.data.getURLVariable('STUDY_ID'); // capture info from Prolific
// var completion_url = 'https://app.prolific.co/submissions/complete?cc=AAAAAAAA'; // Get from Prolific
var output_filename = `data/experiment4_${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>Demo of fancier plugins</h2>' +
'<p><b>These plugins may not work with all browswers / devices.</b></p>' +
'<p>In this experiment, ...</p>' +
'<p>Your task is to...</p>'
],
choices: ['Begin experiment'],
};
timeline.push(first_page);
// Mouse-tracking draw trial
var trial_draw = {
type: jsPsychHtmlButtonResponse,
stimulus: '<div id="target" style="width:450px; height: 450px; background-color: #666; margin: auto;"></div>',
choices: ['Done'],
prompt: "<p>Move your mouse around inside the square.</p>",
extensions: [
{ type: jsPsychExtensionMouseTracking, params: { targets: ['#target'] } }
],
data: {
task: 'draw'
}
};
timeline.push(trial_draw);
// Mouse-tracking replay trial
var trial_replay = {
type: jsPsychHtmlButtonResponse,
stimulus: '<div id="target" style="width:450px; height: 450px; background-color: #666; margin: auto; position: relative;"></div>',
choices: ['Done'],
prompt: "<p>Here's the recording of your mouse movements</p>",
on_load: function () {
var mouseMovements = jsPsych.data.get().last(1).values()[0].mouse_tracking_data;
var targetRect = jsPsych.data.get().last(1).values()[0].mouse_tracking_targets['#target'];
var startTime = performance.now();
function draw_frame() {
var timeElapsed = performance.now() - startTime;
var points = mouseMovements.filter((x) => x.t <= timeElapsed);
var html = ``;
for (var p of points) {
html += `<div style="width: 3px; height: 3px; background-color: blue; position: absolute; top: ${p.y - 1 - targetRect.top}px; left: ${p.x - 1 - targetRect.left}px;"></div>`
}
document.querySelector('#target').innerHTML = html;
if (points.length < mouseMovements.length) {
requestAnimationFrame(draw_frame);
}
}
requestAnimationFrame(draw_frame);
},
data: {
task: 'replay'
}
}
timeline.push(trial_replay);
// Image sorting trial (NOTE: this seems to work for Chrome but not Safari)
stimuli_to_sort = [];
list_image_num = jsPsych.randomization.repeat(arange(40, 60, 1), 1);
for (var itr = 0; itr < 6; itr += 1) {
stimuli_to_sort.push(`images/condition0/${list_image_num[itr]}.png`)
}
console.log(stimuli_to_sort);
var trial_sort = {
type: jsPsychFreeSort,
stimuli: stimuli_to_sort,
stim_width: 100,
stim_height: 100,
sort_area_shape: 'square',
sort_area_width: 500,
sort_area_height: 500,
prompt: "<p>Click and drag the images below to sort them so that similar images are close together.</p>",
prompt_location: 'below',
};
timeline.push(trial_sort);
// Run the timeline
jsPsych.run(timeline);
</script>
</html>