-
Notifications
You must be signed in to change notification settings - Fork 1
/
jspsych-animation-demo.html
114 lines (100 loc) · 4.14 KB
/
jspsych-animation-demo.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
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/jspsych@7.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-animation@1.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
<script src="https://unpkg.com/underscore@1.13.1/underscore-umd-min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
<style>
#jspsych-animation-image {height:100% !important; width: 100% !important;}
.jspsych-btn {margin-bottom: 10px;}
</style>
</head>
<body></body>
<script>
var img_host = 'https://raw.githubusercontent.com/YibiaoLiang/onRoute/ISC2/'
var radius = ['02', '04', '08', '16', '32'];
var n_bin_onWheel = 18;
var n_repetition = 3;
var n_block = 5;
var bin_startPoint = [];
var basic_condition = [];
for (i = 0; i < n_bin_onWheel; i++) {
var bin_width = 360 / n_bin_onWheel;
bin_startPoint.push(i * bin_width);
}
var jitter_option = [];
for (i = 0; i < bin_width; i++) {
jitter_option.push(i);
}
// assign value to each bin in each radius condition for each repetition
for (r = 0; r < radius.length; r++) {
for (b = 0; b < n_bin_onWheel; b++) {
var shuffled_jitter = _.shuffle(jitter_option);
for (rp = 0; rp < n_repetition; rp++) {
var target_num = bin_startPoint[b] + shuffled_jitter[rp]
var targetSeries = []
for (backCount = 20; backCount>0; backCount--){
if (target_num-backCount+1>=0){
targetSeries.push(img_host + "ISC2/" + ('00000' + (target_num-backCount+1)).slice(-6) + '.jpg')
} else {
targetSeries.push(img_host + "ISC2/" + ('00000' + (target_num-backCount+361)).slice(-6) + '.jpg')
}
}
basic_condition.push({
radius: radius[r],
scene_num: ('00000' + (bin_startPoint[b] + shuffled_jitter[rp])).slice(-6).toString(),
wheel_path: img_host + "ISC2/", //Wheel path is the whole folder, so it the image can change base on the mouse, by Bill 11/23/2021 // change to IS2 by Leo 12/2/2021
//wheel_path: img_host+'Wheel'+wheel_num+'/wheel'+wheel_num+'_r'+radius[r]+'/', //Wheel path
img_path: img_host + "ISC2/" + ('00000' + (bin_startPoint[b] + shuffled_jitter[rp])).slice(-6) + '.jpg' ,
// img_path: img_host+'Wheel'+wheel_num+'/wheel'+wheel_num+'_r'+radius[r]+'/'+
// ('00000'+(bin_startPoint[b]+shuffled_jitter[rp])).slice(-6)+'.webp'
target_series:targetSeries
})
}
}
}
var jsPsych = initJsPsych();
var preload_trial = {
type: jsPsychPreload,
auto_preload: true
}
var start = {
type: jsPsychHtmlButtonResponse,
stimulus: '',
choices: ['Run demo']
};
var animation_trial = {
type: jsPsychAnimation,
stimuli: basic_condition[0].target_series,
frame_isi: 100,
sequence_reps: 1,
frame_time: 300,
render_on_canvas:false,
prompt: '<p style="margin-top:0px;">Watch the faces.</p>'
};
var show_data = {
type: jsPsychHtmlButtonResponse,
stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values();
var trial_json = JSON.stringify(trial_data, null, 2);
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
},
choices: ['Repeat demo']
};
var animation_data_loop = {
timeline: [animation_trial, show_data],
loop_function: function() {
return true;
}
};
if (typeof jsPsych !== "undefined") {
jsPsych.run([preload_trial, start, animation_data_loop]);
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>