Setting Image Button L/R Orientation

[inkbear]

I am trying to hold the orientation (L/R) in a trial_info.js include along with the other variables. Then use that variable to decide if the buttons need to be flipped left/right.

trail_info.js segment:

var train_info = [
    {
        ...
        target_direction: "left",
    },
];

Main file creates two arrays for the orientations

   // target is left
    var button_array =  [
        jsPsych.timelineVariable('target_image_button'),
        jsPsych.timelineVariable('character_image_button'),
        jsPsych.timelineVariable('distractor_image_button'),
    ];
    // target is right
    var button_array_flip =  [
        jsPsych.timelineVariable('distractor_image_button'),
        jsPsych.timelineVariable('character_image_button'),
        jsPsych.timelineVariable('target_image_button'),
    ];

A wrapper for the variables has the conditional function. (1 == 1) will be replaced later with target_direction logic.

var train_wrapper = {
        timeline_variables: train_info,
         button_html: function(){
             if(1 == 1){
                 return button_array; 
             } else {
                 return button_array_flip;
             }        
         },
        // button_html: button_array, // This works but fais when trying to use the simple conditional function.
        timeline: [main_trial, if_node, blank_interval],
        repetitions: 1
    }
    timeline.push(train_wrapper);

I don't think I am using the functions properly.

[inkbear]

Found a few things I was doing wrong. Maybe this will help others.

First, specify where the image is to occur in normal orientation and create a value for which is the correct choice. The target and distractor values here are simply passed through to make data collection/viewing easier.

var test_info = [
    {
        target: "cat",
        distractor: "dog",
        left_image: "storage/cct/english/v2/jpg/dog.jpg",
        right_image: "storage/cct/english/v2/jpg/cat.jpg",
        center_image: "storage/cct/english/v2/png/grandma.png", 
        prompt_audio: "storage/cct/english/v2/mp3/touch_cat.mp3",
        feedback_audio: "storage/cct/english/v2/wav/cat.wav",
        correct_choice: "right",
    },
    {
        target: "banana",
        distractor: "book",
        left_image: "storage/cct/english/v2/jpg/banana.jpg",
        right_image: "storage/cct/english/v2/jpg/book.jpg",
        center_image: "storage/cct/english/v2/png/grandma.png",            
        prompt_audio: "storage/cct/english/v2/mp3/touch_banana.mp3",
        feedback_audio: "storage/cct/english/v2/wav/banana.wav",
        character: "storage/cct/english/v2/png/grandma.png",
        correct_choice: "left",
    },

Second, at the top specify the button HTML with a variable name enclosed by percent symbols.

  var button_html = '<img src="%choice%" height="250px"/>'; 

Third, put the images into the choices array (not in button_html).

    var train_wrapper = {
        timeline_variables: train_info,     
        timeline: [main_trial, if_node, blank_interval],
        choices: [jsPsych.timelineVariable('left_image'), jsPsych.timelineVariable('center_image'), jsPsych.timelineVariable('right_image')],
        repetitions: 1,
    }
    timeline.push(train_wrapper);

This wrapper allows setting up the L/R orientation and a few other things before going to the main_trial which does the work.
Last, be sure to add the true parameter when calling jsPsych.timelineVariable or you will get the function and not the value returned: jsPsych.timelineVariable('correct_choice', true).

   var main_trial = {
        type: 'audio-button-response',
        stimulus: jsPsych.timelineVariable('prompt_audio'),
        button_html: button_html,   
        margin_horizontal: margin_horizontal,
        trial_duration: 70000, // move on after 7 seconds
        data: {
            trial_part: 'test',
            target: jsPsych.timelineVariable('target'),
            distractor: jsPsych.timelineVariable('distractor'),
        },
        on_finish: function(data){
            // translate the friendly parameter to the index number
            if(jsPsych.timelineVariable('correct_choice', true) == 'left'){
                var correct_choice = 0; 
            } else {
                var correct_choice = 2
            }
            // check if correct
            if(data.button_pressed == correct_choice){
                data.correct = true; 
            } else {
                data.correct = false;
            }
        },
        
    }