Importing .js file as timeline variable into Gorilla

[Xiaoyue-Zhou]

Dear JSpsych community,

I was trying to upload my JSpsych scripts which locally run well onto the Gorilla platform, but came across a problem when trying to access the .js file where my timeline variable are specified. Specifically, I generated a .js file to contain trial parameters for timeline variable:

(the followings are inside the gorilla.ready() layer)
const trial_config = { hit_window: 1500, feedback_duration: 3000 };

var blank_trial = {
    type:jsPsychHtmlKeyboardResponse,
    stimulus:' ',
    trial_duration:1350,
    post_trial_gap:0
};

var fixation_trial = {
    type:jsPsychHtmlKeyboardResponse,
    stimulus:`<p style='font-size: 50px; font-weight: bold'>+</p>`,
    trial_duration:350,
    post_trial_gap:0
};

var prac_procedure = {
    timeline:[
        blank_trial,
        fixation_trial,
        {
            type:jsPsychAudioKeyboardResponse,
            stimulus:jsPsych.timelineVariable('stimulus'),
            data:jsPsych.timelineVariable('data'),
            prompt:`<p style='font-size: 50px; font-weight: bold'>+</p>`,
            choices:[' '],
            response_ends_trial:false,
            response_allowed_while_playing:true,
            post_trial_gap:1200,
            trial_ends_after_audio:true,

            on_finish:function(data){
                let expected_time = data.expected_times;

                let response_times;
                try{
                    response_times = JSON.parse(data.rt);
                }catch(e){
                    response_times = [];
                }

                let hits = response_times.filter(rt => 
                    rt >= expected_time && 
                    rt <= expected_time + trial_config.hit_window
                ).length;

                data.hits = hits;
                data.false_alarm = response_times.length - hits;
                data.total_deviances = 1;  // Only 1 expected time now

                if (hits > 0) {
                    let validRT = response_times.filter(rt => 
                        rt >= expected_time && 
                        rt <= expected_time + trial_config.hit_window
                    );

                    data.rt = validRT.length > 0 ? validRT[0] - expected_time : -1;
                } else {
                    data.rt = -1;
                }
                console.log(data.rt)
            }
        },
        {
            // feedback
            type:jsPsychHtmlKeyboardResponse,
            stimulus:function(){
                let prev_data = jsPsych.data.get().last(1).values()[0];
                let fb_msg = '';

                if (prev_data.hits === 0) {
                    fb_msg = 'Miss';
                } else if (prev_data.rt <= 800){
                    fb_msg = 'Well done! You caught it.';
                } else {
                    fb_msg = 'Nice. Could you be faster?';
                }

                return `
                <div class="feedback">
                    <p><b>${fb_msg}</b></p>
                </div>
                `;
            },
            choices:'NO_KEYS',
            trial_duration: trial_config.feedback_duration
        }
    ],
    timeline_variables:prac_set1,
    randomize_order:true
};
timeline.push(prac_procedure)

`

where prac_set1 was set outside of the gorilla.ready() function, mimicing the way how other jspsych files are accessed (I am new to javascripta and have no idea whether this is the correct way):

`
import gorilla = require("gorilla/gorilla");

const initJsPsych = window['initJsPsych'];
const jsPsychHtmlKeyboardResponse = window['jsPsychHtmlKeyboardResponse']
const jsPsychAudioKeyboardResponse = window['jsPsychAudioKeyboardResponse']
const jsPsychPreload = window['jsPsychPreload']
const jsPsychFullscreen = window['jsPsychFullscreen']
const jsPsychCallFunction = window['jsPsychCallFunction']

const prac_set1 = window['prac_set1_online']
`

And, the first 2 lines in the .js file are as follow, and I make sure the .js file is read in header and provided in the resources tab:
prac_set1_online = [ { stimulus: gorilla.stimuliURL("prac_1.wav"), data: { "expected_times": 4550 } }, { stimulus: gorilla.stimuliURL("prac_2.wav"), data: { "expected_times": 4160 } }]

As a result, the browser threw an error saying that the timeline variable can't be found. I also tried console.log() the variable prac_set1 , and it turned out undefined.

Does anybody have an idea of how to fix this problem, without moving the content of the .js file into main codes (as I expect generating several sets of the .js files when running the experiment)? I would really appreciated for any suggestions!