Add choice position to data

[kburkin]

Hi! I am working on an experiment where participants are asked to click on one of three images (the odd one out). In the timeline variables for my trials I randomize the order of the images as they appear on the screen, as shown below. For each set of images, there will be an expected odd one out (in this case, "money_01b.jpg").

    {  
        stimulus: '',
        choices: jsPsych.randomization.shuffle([
            '<img src=img/images/meat/meat_01b.jpg style="width:30vw; border:2px solid #000000;" onclick=badading.play()></img>',
            '<img src=img/images/money/money_01b.jpg style="width:30vw; border:2px solid #000000;" onclick=badading.play()></img>',
            '<img src=img/images/punch1/punch1_01s.jpg style="width:30vw; border:2px solid #000000;" onclick=badading.play()></img>',
        ]),
        button_html: '%choice%',
        data: {
            binnumber: '0-0.1',
            pairnumber: '',
            tripletindex: '1288613',
            test_part: 'test',
            odd_one_out: 'money',
            confounding_direction: 'taxonomic',
            affirming_taxonomic: 'construction-related / physical work-related',
            confusing_taxonomic: 'paper-related / thin / flat / text-related',
            affirming_thematic: 'arms/legs/skin-related',
            confusing_thematic: 'feminine (stereotypically) / decorative',
        },
    },

I'm looking for a way to evaluate whether "button_pressed" matches the image I expected to be the odd one out (money). In a previous version of the study, I had hard-coded the order of the images and added the position of the odd one out to my data, so that I could just compare button_pressed to that position. However, since I'm now randomizing the order of the images, I'm not sure how to approach this.

My first thought was that I could add the whole choices array to the output, i.e. by adding

            choices: '%choice%',

to my output, but that seems a bit messy and I'd probably have to edit the resulting string in my output to clean it up.

Does anyone have any thoughts? Also, feel free to ask clarifying questions if needed.

[becky-gilbert]

Hi @kburkin, what version of jsPsych are you using? Starting in v6.3.0, we added the save_trial_parameters parameter to all trials, which allows you to save (or not save) any parameter value to the trial data. In this case, you would want to save the choices parameter in the trial data, which would tell you the randomized choice order for that trial. You can then compare that to the button response value to determine the response accuracy.

And if you want to make the choices array a little bit easier to work with, you could just put the stuff that's specific to each button in that array, and move the rest of the image HTML into the button_html parameter, with %choice% wherever you want the values from the choices array to go. In your case it looks like the things that change across buttons are the subfolders and file names within the img/images folder.

And BTW I think you're missing some double quotes around the image file path in <img src=....

I haven't tested this, but I think something like this would work:

{  
  type: 'html-button-response',
  stimulus: '',
  choices: jsPsych.randomization.shuffle([
    'meat/meat_01b',
    'money/money_01b',
    'punch1/punch1_01s',
  ]),
  button_html: '<img src="img/images/%choice%.jpg" style="width:30vw; border:2px solid #000000;" onclick=badading.play() />',
  data: {
    // ...
  },
  save_trial_parameters: {
    // save the randomly-selected button order to the trial data
    choices: true
  }
}

I hope this helps! Let us know if this works for you, and if you have more issues/questions.

[kburkin]

Thank you @becky-gilbert ! I'm still on version 6.2.0, but I will update and try this out, that sounds very promising! I'll let you know if I have any issues.

[kburkin]

Hi @becky-gilbert, I'm trying to implement this in version 7.0.0, but I'm having some trouble. Here is my trial procedure, where I include the button_html and the save_trial_parameter:

        var test = {
            type: jsPsychOddOneOut, // To reintegrate the "I don't know" button, use "oddoneout.js", which is an edit of this plugin
            stimulus: jsPsych.timelineVariable('stimulus'),
            choices: jsPsych.timelineVariable('choices'),
            button_html: '<img src="img/images/%choice%.jpg" style="width:30vw; border:2px solid #000000;" onclick=badading.play() />',
            prompt: "<span style='font-size:2vw;'><p>Click the image that you think does not belong.</p></span>", // prompt specified in general procedure b/c it does not vary across trials
            data: jsPsych.timelineVariable('data'),
            /* Runs check_choice_correct function to check whether response matched expected response and print 
            accuracy in trial data. I could have specified the function right here instead of creating it in 
            functions.js and calling it here, but this just keeps things looking clean. Note that the order of 
            creating variables and then using them in calculations is often important, (i.e. you can't use a 
            variable that hasn't already been defined) but that for functions the order of operations doesn't matter. 
            See code in functions.js for further comments. */
            save_trial_parameters: {
                choices: true // save the randomly-selected button order to the trial data
            },
            on_finish: check_choice_correct,
            post_trial_gap: 600, // inserted to allow the image button noise to finish
        }

And here is my individual trial information:

    {  
        stimulus: '',
        choices: jsPsych.randomization.shuffle([
            'meat/meat_01b',
            'money/money_01b',
            'punch1/punch1_01s',
        ]),
        data: {
            binnumber: '0-0.1',
            pairnumber: '',
            tripletindex: '1288613',
            test_part: 'test',
            odd_one_out: 'money',
            confounding_direction: 'taxonomic',
            affirming_taxonomic: 'construction-related / physical work-related',
            confusing_taxonomic: 'paper-related / thin / flat / text-related',
            affirming_thematic: 'arms/legs/skin-related',
            confusing_thematic: 'feminine (stereotypically) / decorative',
        },
    },

The error I'm getting seems to be related to calling for "jsPsych.randomization.shuffle" in the individual trial. I've tried to put it in the trial procedure instead, by nesting it within choices, but I've been unable to make it work. Do you have any thoughts on this?

(Note that I'm currently having some issues with my custom plugin because I haven't quite figured out how to update it to 7.0.0, but I think that's an unrelated issue.)

Uncaught ReferenceError: jsPsych is not defined
    at test_stimuli_List1.js:10

[becky-gilbert]

Hi @kburkin, yes I think the problem is the use of jsPsych.randomization.shuffle in your trial information. Instead of doing it that way, could you try making your choices parameter into a function that accesses the trial's choices array from timeline variables, and then calls the randomization function, like this?

trial definition:

var test = {
  // ...
  choices: function() {
    return jsPsych.randomization.shuffle(jsPsych.timelineVariable('choices'));
  },
  // ...
};

trial info:

{
  // ...
  choices: ['meat/meat_01b','money/money_01b','punch1/punch1_01s'],
  // ...
}

And WRT this error:

Uncaught ReferenceError: jsPsych is not defined
    at test_stimuli_List1.js:10

I think this might be a related problem. I'm guessing your trial information is stored in the "test_stimuli_List1.js" file, which is loaded in the <head> section? If so, then if you use any jsPsych functions in that file such as jsPsych.randomization.shuffle, then those functions will produce the "jsPsych is not defined" error when the stimuli file loads, because the code in that file will run before the jsPsych variable is defined in this line in your main script:

var jsPsych = initJsPsych(...);

In your case, moving the jsPsych.randomization.shuffle function into the trial's choices parameter function will solve the problem, since the choices function will run after jsPsych is defined. But I'm not sure if there's another/better way to deal these kinds of cases, i.e. where you want to load a JS file in the <head> section that uses a jsPsych function. Maybe it would work to convert the file into a function that returns the variable(s) contained in the file (like the trial information for timeline variables), and then call that function in the main script after jsPsych is defined.

[kburkin]

Thank you Becky, the choices function is working!