-
Notifications
You must be signed in to change notification settings - Fork 0
/
jspsych-dial-response.html
130 lines (122 loc) · 4.4 KB
/
jspsych-dial-response.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
<!DOCTYPE html>
<html>
<head>
<title>dial response demo</title>
<script src="jspsych-6.1.0/jspsych.js"></script>
<script src="jspsych-dial-response.js"></script>
<script src="jquery-3.5.1.js"></script>
<script src="jQuery-Knob-master/js/jquery.knob.js"></script>
<link href="jspsych-6.1.0/css/jspsych.css" rel="stylesheet">
</head>
<body></body>
<script>
// pick a random starting value for the first 'cursor mode' trial
var min_dial_val = 0;
var max_dial_val = 360;
var get_rand_starting_val = function() {
return Math.round(min_dial_val + (Math.random() * max_dial_val));
}
// cursor mode = true, keypress to continue
var dial_response_key = {
type: 'dial-response',
prompt: '<p>Please move the cursor so that it is<br>pointing to NNE.</p><p>Press the Enter key when you are finished.</p>',
display_input: false,
min: min_dial_val,
max: max_dial_val,
starting_value: get_rand_starting_val,
width: 400,
height: 400,
cursor_mode: true,
cursor_size: 10,
thickness: 0.15,
gauge_color: 'blue',
background_color: 'gray',
line_cap: 'butt',
show_next_button: false,
allow_key_to_end_trial: true,
choices: ['enter']
};
// cursor mode = true, next button to continue
var dial_response_next = {
type: 'dial-response',
prompt: '<p>Please move the green cursor so that it is positioned<br>where 7pm would be on a clock face.</p><p>Click the Next button when you are finished.</p>',
display_input: false,
min: min_dial_val,
max: max_dial_val,
starting_value: get_rand_starting_val,
width: 300,
height: 300,
cursor_mode: true,
cursor_size: 2,
thickness: 0.2,
gauge_color: "chartreuse",
background_color: "black",
line_cap: 'round',
button_margin_vertical: '30px'
};
// cursor mode = false (i.e. gauge mode), response ends the trial, no next button
var dial_response_gauge = {
type: 'dial-response',
prompt: '<p>The trial will end after you make a response.</p>',
display_input: true,
min: 0,
max: 100,
starting_value: 10,
width: 300,
height: 300,
cursor_mode: false,
thickness: 0.1,
angle_offset: -90,
angle_arc: 180,
gauge_color: "red",
background_color: "#ABB5BF",
input_color: "orange",
response_ends_trial: true,
show_next_button: false
};
// require movement
var dial_response_require_movement = {
type: 'dial-response',
prompt: '<p>Move the cursor to 2.</p><p>You must move the cursor in order to continue.</p>',
display_input: true,
min: 1,
max: 12,
step: 1,
starting_value: 10,
width: 300,
height: 300,
cursor_mode: true,
cursor_size: 3,
thickness: 0.1,
gauge_color: "red",
background_color: "#ABB5BF",
input_color: "blue",
button_margin_vertical: '30px',
require_movement: true
};
// set the trial duration
var dial_response_time_limit = {
type: 'dial-response',
prompt: '<p>You have 5 seconds to make a response, then the trial will end.</p>',
display_input: false,
min: 1,
max: 360,
starting_value: 90,
width: 300,
height: 300,
cursor_mode: true,
cursor_size: 1,
thickness: 1,
gauge_color: "#222222",
background_color: "#ABB5BF",
show_next_button: false,
trial_duration: 5000
};
jsPsych.init({
timeline: [dial_response_key, dial_response_next, dial_response_gauge, dial_response_require_movement, dial_response_time_limit],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>