task-group-categorization-amit/categorization_task.html at master · GoldenbergLab/task-group-categorization-amit · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294

<!DOCTYPE html>
<html>
  <head>
    <title>categorization_task</title>
    <script src="jspsych-6.0.5/jspsych.js"></script>
    <script src="jspsych-6.0.5/plugins/jspsych-image-button-response.js"></script>
    <script src="jspsych-6.0.5/plugins/jspsych-external-html.js"></script>
    <script src="jspsych-6.0.5/plugins/jspsych-html-button-response.js"></script>
    <script src="jspsych-6.0.5/plugins/jspsych-survey-text.js"></script>
    <script src="jspsych-6.0.5/plugins/jspsych-html-keyboard-response.js"></script>
    <script src="jspsych-6.0.5/plugins/jspsych-image-slider-response_noButton.js"></script>
    <script src="jspsych-6.0.5/plugins/jspsych-vsl-grid-scene1.js"></script>
    <script src="categorization_task_functions.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <link href="jspsych-6.0.5/css/jspsych.css" rel="stylesheet" type="text/css"></link>
  </head>
  <body bgcolor="#AAAAAA"></body>
  <script>


  /* ************************************ */
  /* Define experimental variables / upload data */
  /* ************************************ */

  var taskNumber = 50; //must be mutiples of 5. The real trial number will have one extra due to attention check trial
  var attentionCheckInterval = 5; // there will be an attention check every this number of trials
  var Face = {}; //create Face dictionary to (1)record fixation time, (2)make face sample and scale have the same person and valence in every trial
  Face.pos = [ ];  //(3)record data of 12 faces' data in face array
  var facesPool = loadFacePool(51,150);
  var emotion = emotionValence('negative'); //positive or negative
  Face.stims = getStimList(1,4,1,50);  //return a randomized list of stim including practice and task stimulus //can change number

  var practiceStimulusPool = loadStimulus('practice',1,4);
  var taskStimulusPool = loadStimulus('task',1,50);
  var slideList = createSlideList (1,11);//list of instructions slides, which have index from 1 to 11

  var sortImage = {A1:'Rock',A2:'Pop',B1:'Big City',B2:'Small Town',C1:'Ice Cream',C2:'Hamburger',
                   D1:'At the Beach',D2:'At the Pool',E1:'Cat',E2:'Dog'};

  var sortPrompt = ['What kind of music do you prefer?',
                    'Where would you prefer to live?',
                    'What do you prefer to eat?',
                    'Where do you prefer to spend time?',
                    'Which pet do you prefer?'];

  //get distributions of faces
  var face5sd =
     [5,$.getJSON('https://web.stanford.edu/~amitgold/categorization_task/face_distribution_5sd.json', function(data) {
   })]; //the face distribution is in responseJSON, the "5" and "10" are to record SD in data

  var face10sd =
     [10,$.getJSON('https://web.stanford.edu/~amitgold/categorization_task/face_distribution_10sd.json', function(data) {
   })];

  var userList =jQuery.get('https://web.stanford.edu/~amitgold/categorization_task/previousUsersID.txt', function(data) {});

  /* ****************************************************/
  /* Define local functions (other than functions file) */
  /* ****************************************************/

  function saveData(){ //save data function
    $.ajax({
      type: 'post',
      cache: false,
      url: 'https://web.stanford.edu/~amitgold/cgi-bin/save_data.php',
      data: {filename: "2019_categorization_task_pilot_negative_stanford_preload_pictures/" + Face.ID+ ".json",
             filedata: jsPsych.data.get().json()}
      //error: error_callback
    });
  }


  /******************************************/
  /* Set up Instructions */
  /******************************************/

  var instructions = { //11 slides: 1:sorting, 2-9:before prac, 10:before real, 11:end
      type: "image-button-response",
      stimulus: getNextSlide,
      choices: ['Continue'],
      margin_vertical:'30px',
      data: {Name:'instructions'}
  };

  /******************************************/
  /* Start Experiment - trial by trial */
  /******************************************/

  var consent = {
      type:'external-html',
      url: "external_page.html",
      cont_btn: "start",
      check_fn: check_consent
  };

  var citizenship = {
      type: 'image-button-response',
      stimulus: '',
      choices: ['Yes','No'],
      prompt: "Are you an American citizen?",
      data: {Name:'citizenship'}
  };

  var checkCitizen = { //to check if participant is American citizen. If it's 'No', the experiment will be terminated
      timeline: [citizenship],
      loop_function: checkCitizen
  };

  var phone = {
      type: 'image-button-response',
      stimulus: '',
      choices: ['Phone','Computer'],
      prompt: "Are you using a mobile phone or computer to conduct the experiment?",
      data: {Name:'phone'}
  };

  var checkPhone = { //to check if participant is using phone. If it's 'No', the experiment will be terminated
      timeline: [phone],
      loop_function: checkPhone
  };

  var enter_id = {
      type: 'survey-text',
      questions: [{prompt: 'Please enter your mTurk id (this is important for your validation)'}],
      on_finish: function(data){
        Face.ID = JSON.parse(data.responses).Q0; //save id as global variable
        jsPsych.data.addProperties({participant_id: Face.ID});} //record participant id
  };

  var participant_id = { //to check if participants have entered ID (number/character, no punctuation allowed)
      timeline: [enter_id],
      loop_function: checkID,
      loop_function: checkUser
  };

  var sort = {  //minimal group paradigm
      type: 'html-button-response',
      stimulus: getSortImage,
      button_html: optionButton,
      choices: getOptions,
      prompt:getPrompt,
      on_finish:function(){
        delete sortImage[Object.keys(sortImage)[0]];
        delete sortImage[Object.keys(sortImage)[0]];
        return sortImage},
      data: {Name: 'sorting'}
  };


  var fixation = {
      type: 'html-keyboard-response',
      stimulus: '<p style="font-size: 48px;">+</p>',
      trial_duration:  getFixationTime,  //transfer ms to s in units
      data: {Name:'fixation'}
  };

  var stimulus = {
      type: 'image-button-response',
      stimulus: getStim,
      choices: [],
      trial_duration : 5000,
      prompt: "",
      data: {Name:'stimuli'}
  };

  var attention = {
    on_start: saveData,
    type: 'survey-text',
    questions: [{prompt: 'Please describe, in your own words, the content of the image just displayed'}],
    on_finish: function(data){
      Face.description = JSON.parse(data.responses).Q0; } //save description
  };

  var checkAttention = { //to check if participant is American citizen. If it's 'No', the experiment will be terminated
      timeline: [attention],
      loop_function: checkAnswer
  };

  var response = {
      type: 'image-slider-response_noButton',
      stimulus: getScale,
      prompt: "<p>Rate your emotional response to the picture you just saw</p>",
      step:1,
      min:10,
      max:40,
      start:10,
      data: {Name:'scale'}
  };


  var facesSample = {                //we show face array based on participant's response
      type: 'vsl-grid-scene1',
      stimuli:  getFaceSample,  //for selection detail. see function.js
      timing_duration: 1500,
      data: {Name:'array'}
  };


  var button = {
      type: 'image-button-response',
      stimulus: '',
      choices: [' My Group ','Not My Group'],
      prompt:"Please choose the group from which the 12 emotional responses were taken.",
      button_html: getButtons,
      data: function(){
          return {
            Name: 'buttonResponse',
            fixationTime: Face.fixationTime,
            faceIdentity: Face.personX,
            stimList: Face.stims,
            singleStim: Face.stim,
            rating: (jsPsych.data.get().last(2).values())[0].response,
            ratingTime:(jsPsych.data.get().last(2).values())[0].rt,
            sampleSD: Face.recordSD,
            sampleMean: Face.sampleMean,
            description: Face.description,
            pos1:(Face.emotionX + Face.pos[0]),   pos2:(Face.emotionX + Face.pos[1]),
            pos3:(Face.emotionX + Face.pos[2]),   pos4:(Face.emotionX + Face.pos[3]),
            pos5:(Face.emotionX + Face.pos[4]),   pos6:(Face.emotionX + Face.pos[5]),
            pos7:(Face.emotionX + Face.pos[6]),   pos8:(Face.emotionX + Face.pos[7]),
            pos9:(Face.emotionX + Face.pos[8]),   pos10:(Face.emotionX + Face.pos[9]),
            pos11:(Face.emotionX + Face.pos[10]), pos12:(Face.emotionX + Face.pos[11]),
           meanAgents: Face.emotionX +
           (Face.pos[0]+Face.pos[1]+Face.pos[2]+Face.pos[3]+Face.pos[4]+Face.pos[5]+
            Face.pos[6]+Face.pos[7]+Face.pos[8]+Face.pos[9]+Face.pos[10]+Face.pos[11])/12
      }}
  };


  var connectSurvey = {
    on_start: saveData,
    type: 'image-button-response',
    stimulus: getNextSlide,
    choices: ['Begin Survey']
  };

  /******************************************/
  /*           timeline                     */
  /******************************************/
  var collective_emotion_estimation = []; //display instructions
  collective_emotion_estimation.push(consent);
  collective_emotion_estimation.push(checkCitizen,checkPhone);
  collective_emotion_estimation.push(participant_id);
  collective_emotion_estimation.push(instructions);

  var sorting = {        //conduct a practice round with two trials
      timeline: [sort],
      repetitions: Object.keys(sortImage).length/2
  }
  collective_emotion_estimation.push(sorting);

  for (var i = 0; i < slideList.length-3; i++) {
      collective_emotion_estimation.push(instructions)}

  collective_emotion_estimation.push(fixation,stimulus,checkAttention,response,facesSample,button);

  for (var i = 0; i < 3; i++) { // practice task
      collective_emotion_estimation.push(fixation,stimulus,response,facesSample,button);
  };

  collective_emotion_estimation.push(instructions); //diaplay last page of instruction

  for (var i = 0; i < taskNumber/attentionCheckInterval; i++) {
    collective_emotion_estimation.push(fixation,stimulus,checkAttention,response,facesSample,button);
    var k = 0;
    while (k < (attentionCheckInterval - 1)){
    collective_emotion_estimation.push(fixation,stimulus,response,facesSample,button);
    k ++;}
  };

  collective_emotion_estimation.push(connectSurvey);

  /******************************************/
  /*           run the study                */
  /******************************************/
    jsPsych.init({
    preload_images: facesPool,taskStimulusPool,practiceStimulusPool,
    timeline: collective_emotion_estimation,
    on_finish: function(data){
    //saveData
    //var final_submit = function() {
    //       jsPsych.turk.submitToTurk({"completion_time": (new Date().getTime())});
    //};
    //saveData("2019_categorization_task_pilot_negative_stanford_preload_pictures/" + Face.ID+ ".json",
    //jsPsych.data.get().json(), final_submit, final_submit);
    //jsPsych.data.get().localSave('csv',Face.ID+'.csv'); //save as csv file with id as file name
    window.location = "https://stanforduniversity.qualtrics.com/jfe/form/SV_bEiRfX9t4QIxuPX" //redirect to Qualtrics survey
    }
  })

</script>
</html>