DemoContinuousReport/task.html at master · vej/DemoContinuousReport · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title>My experiment</title>

        <!-- load relevant libraries -->
        <script src="libraries/jspsych.js"></script>
        <script src="libraries/jquery-min.js" type="text/javascript"> </script>
        <script src="libraries/Snap.svg-0.5.1/dist/snap.svg.js"></script>

        <!-- load the jspsych custom plugins.   -->
        <script src="plugins/jspsych-continuous-report.js"></script>
        <script src="plugins/jspsych-snap-keyboard-response.js"></script>

        <!-- load other jspsych plugins used in this demo.   -->
        <script src="plugins/jspsych-html-keyboard-response.js"></script>
        <script src="plugins/jspsych-instructions.js"></script>

        <!-- load colors for color wheel.   -->
        <script src="colors.js"></script>

        <!-- load css files.   -->

        <link rel="stylesheet" href="css/jspsych.css" type="text/css" />
        <link rel="stylesheet" href="css/custom.css" type="text/css" />
       </head>

    <body></body>
</html>


<script>

// Instructions for Study Task
var instructions_study = {
	type : 'instructions',
	pages: ['DEMO STUDY TASK </br></br> Each image will appear one by one. Study the color of each image. You will be asked to recall the colors later.</br></br>' +
'Ready? </br></br>'],
show_clickable_nav: true

}

// Instructions for Recall Task

var instructions_test = {
	type : 'instructions',
	pages: ['DEMO RECALL TASK </br></br>Each image will appear one by one, in white. It will be surrounded by a black circle. ' +
  'The circle acts like a color wheel--move your cursor, and the central image will change color. When the color matches your memory, ' +
  'click the mouse to record your guess. Try to be as accurate as possible. </br></br>' +
'Ready? </br></br>'],
show_clickable_nav: true

}

// location of the images.
var all_images = ['images/stim/1.svg',
         'images/stim/2.svg',
         'images/stim/3.svg',
         'images/stim/4.svg',];


// Probably would want to randomize the stimuli, but for the demo, setting the stimulus order and the "correct" colors:
var color_study_order = {

  image: [1,2,3,4], // i.e. images/stim/1.svg, iamges/stim/2.svg, etc.
  colIndex: [87,171,327,291], // these refer to the index of the "correct" color within colors.js
};

// Probably would want to randomize the stimuli, but for the demo, setting the stimulus order and the "correct" colors:
var color_test_order = {

  image: [1,2,3,4], // i.e. images/stim/1.svg, iamges/stim/2.svg, etc.
  colIndex: [87,171,327,291], // these refer to the index of the "correct" color within colors.js
};


var fixationWhite = {
	type: 'html-keyboard-response',
	stimulus: '<div style="font-size:60px;">+</div>',
	data: {test_part: 'fixation'},
	choices: jsPsych.NO_KEYS,
	trial_duration: 1000

}

// study block stimuli
var studyStim = [];
	for (i = 0; i < color_study_order.image.length; i++) { //for each trial

		studyStim[i] = {
      stimulus: color_study_order.image[i],
      colIndex: color_study_order.colIndex[i],
    };
	};

// recall block stimuli
var testStim = [];
	for (i = 0; i < color_test_order.image.length; i++) { //for each trial within a block

		testStim[i] = {
      stimulus: color_test_order.image[i],
      colIndex: color_test_order.colIndex[i],
    };
	};

  var studyBlock = {
      type: 'snap-keyboard-response',
      stimulus: jsPsych.timelineVariable('stimulus'),
      colIndex: jsPsych.timelineVariable('colIndex'),
      trial_duration: 1000,
      choices: jsPsych.NO_KEYS,
      data: {
        stimulus: jsPsych.timelineVariable('stimulus'),
        colIndex: jsPsych.timelineVariable('colIndex'),
      }
  };

var testBlock = {
    type: 'continuous_report',
    stimulus: jsPsych.timelineVariable('stimulus'),
    colIndex: jsPsych.timelineVariable('colIndex'),
    stim_duration: -1,
    data: {
      stimulus: jsPsych.timelineVariable('stimulus'),
      colIndex: jsPsych.timelineVariable('colIndex'),
    }
};

var study_procedure = {
	    timeline: [fixationWhite, studyBlock],
	    timeline_variables: studyStim

}

var test_procedure = {
	    timeline: [fixationWhite, testBlock],
	    timeline_variables: testStim

}

  var timeline = [instructions_study, study_procedure, instructions_test, test_procedure];

	jsPsych.init({
		timeline: timeline,
		preload_images: all_images, // this speeds things up.
	  show_preload_progress_bar: false,
		on_finish: function() {
      // jsPsych.data.displayData(); // if you want to display the data at the end for debugging purposes.
    }
	});
</script>