-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
91 lines (66 loc) · 2.42 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jsPsych library -->
<script src="jspsych/jspsych.js"></script>
<!-- jsPsych plugins-->
<script src="jspsych/plugins/jspsych-fullscreen.js"></script>
<script src="jspsych/plugins/jspsych-draw-and-mouse-tracking.js"></script>
<link rel="stylesheet" href='C:\Users\Gustavo\Desktop\REPOS\TMT_ONLINE_REPO\jsPsych_online_TMT\jspsych\css\jspsych.css'>
</head>
<body></body>
<script>
let timeline = [];
images = ['https://c.files.bbci.co.uk/12A9B/production/_111434467_gettyimages-1143489763.jpg',
'https://images.unsplash.com/photo-1545315171-cc80c905c252?ixlib=rb-1.2.1&w=1000&q=80',
'https://api.time.com/wp-content/uploads/2015/02/cats.jpg?quality=85&w=1024&h=512&crop=1']
let x = 0;
let y = 0;
isDrawing = false;
// store all images names in an array of objects {'fileName': images[imag]}
let container = { }; // main object
timelineVariables = [];
for (imag in images){
// imag = 'stimuli/'+imag;
timelineVariables.push(container['prop'+ imag ] = { 'fileName': images[imag]}
);
}
var fullScreen = {
type: 'fullscreen',
fullscreen_mode: true,
// message: '<p>El experimento ira a pantalla completa cuando usted presione el boton que se encuentra debajo</p><br>',
// button_label: 'Continuar a pantalla completa'
}
let trial = {
timeline: [
{
type: 'html-keyboard-response', //fixation cross
stimulus: `<p style='font-size:350%;color:black'>+</p>`,
choices: jsPsych.NO_KEYS,
trial_duration: 500
},
{
type: 'draw-and-mouse-tracking',
// trial_duration: 10000,
canvas_background_color: 'gray',
stimulus: jsPsych.timelineVariable('fileName'),
// drawline_color: 'red',
content_wrapper_color: 'gray',
// lineWidth: 5
}
],
timeline_variables: timelineVariables
}
jsPsych.init({
timeline: [fullScreen, trial],
// Image data should be preloaded
preload_images: images,
on_finish: function(){
// Display data
jsPsych.data.displayData();
}
});
</script>
</html>