Passing data to the function in a call-function object

[cslongman]

Hi,

I have tried just about everything I can think of including a whole bunch of searching for a solution, but I can't seem to work this out...

I have a call-function in my script that seems happy enough to change the background image and start up a sound recording when I call it. That code looks like this...

        var context = MiniBlockDat.Context[bl][mb]
        var audio = null;
        var context_start = {
            type: 'call-function',
            func: function(){

                audio = new Audio()
                audio.src = "aud/" + context + ".mp3"
                audio.loop = true
                audio.play()

                document.body.style.backgroundImage = "url('img/" + context + ".jpg')"
                document.body.style.backgroundSize = "100% 100%" 
            }
        }
        timeline.push(context_start)

However, when I try to add a variabel into the data and use that variable in the function it generates a blank screen. That code looks like this...

        var context = MiniBlockDat.Context[bl][mb]
        var audio = null;
        var context_start = {
            type: 'call-function',
            **data: {Context: MiniBlockDat.Context[bl][mb]},**
            func: function(**data**){
                
                **var context = data.Context**

                audio = new Audio()
                audio.src = "aud/" + context + ".mp3"
                audio.loop = true
                audio.play()

                document.body.style.backgroundImage = "url('img/" + context + ".jpg')"
                document.body.style.backgroundSize = "100% 100%" 
            }
        }
        timeline.push(context_start)

Note that the additional bits of code are highliughted in bold.

I have played around with it a bit and it looks like the only bit of code that it doesn't like is where I actually refer to the data in the function (var context = data.Context). Otherwise, it seems to work OK.

Eventually, what I would like is to replace the 'context' variable in the function with the MiniBlockDat.Context variable so that the background and sound change on every trial (note that this piece of code is housed within two for loops that increment the variables bl and mb respectively).

As I said, I have tried to do this a whole load of different ways, but the critical thing that keeps kicking me out seems to be when I use the data that I pass to the function within the function.

Any advice appreciated,

Cai

[becky-gilbert]

Hi Cai, I think one problem here is that the call-function's func parameter isn't passed the trial data as an argument, as is the case with the on_finish parameter. Instead, when the call-function is asynchronous, then "the first argument passed to func will be a callback that you should call when the async operation is complete" - from the call-function parameter descriptions in the docs. This example from the docs shows how the argument to the func function parameter should be used.

Another problem in your case is that you're looping through different context values when the page first loads, but then you need those different values to be "piped in" to the function definitions that are called later on during the experiment. What's happening when your for loop runs is that the context variable isn't being replaced with its current value during the loop, because the function's variables aren't evaluated until the function is actually called. I can think of a few different approaches to solving this.

One approach is to use let instead of var in your for loops - see the 3rd code block in this example. This seems like the easiest solution, but I haven't tried this myself so not sure if it works.

A second approach is to use immediately-invoked function expressions (IIFEs, see the 2nd code block in this example). This is an anonymous function that is called immediately, along with any information you need to get from the current for loop context, and returns a function definition that uses the values that you passed in as arguments. In your case I think it would look like this:

var context = MiniBlockDat.Context[bl][mb]; // this value changes during your for loop
var context_start = {
  type: 'call-function',
  func: (function(curr_context) {
    return function(){
      audio = new Audio()
      audio.src = "aud/" + curr_context + ".mp3" 
      audio.loop = true
      audio.play()
      document.body.style.backgroundImage = "url('img/" + context + ".jpg')"
      document.body.style.backgroundSize = "100% 100%" 
    };
  }(context));  // the IIFE passes in the current value of this context variable, and returns a function definition that uses the value
}
timeline.push(context_start);

A third approach is to make the context variable a global variable, and change its value during the experiment, so that the call-function func is always accessing the current/updated value of this variable when the trial runs. There are lots of places to update the variable's value during the experiment, such as in any trial's on_start or on_finish function. But it's hard to say how exactly you could do this without knowing more about how your experiment is set up. This approach might make sense when it's impossible to know what the context values will be in advance, for instance because of randomization that happens during the experiment, or because they're dependent on participant input/performance.

Finally, there's a similar approach to the one above that would work if the current context value can be accessed based on the state of the experiment, such as the current block and/or trial number. In this case, rather than updating the context variable during the experiment, you would be updating the current block/trial number, and then using those global variables within your call-function to get the corresponding context value. It would look something like this:

var curr_trial = 0;

var context_start = {
  type: 'call-function',
  func: function() {
    var context = all_contexts[curr_trial];  // get the appropriate value based on the current trial number
    // ... set up audio etc.
  }
};

var trial = {
  // other parameters ...
  on_finish: function(data) {
    curr_trial++; // increment trial count after each trial
  }
};

I hope this helps. Let us know if any of these approaches work for you.

[becky-gilbert]

No I can't think of why the IIFEs would have knock-on effects... Can you explain what you mean about the block end feedback? Are you doing some data filtering that doesn't work anymore? Do you mind posting the relevant code?

[cslongman]

Hi Becky,

I have done a bit of digging around and it looks like the issue is not with the context START routine, but with the context END routine that is used to stop/reset the sound and the background image. That code looks like this...

            // Context END
            var context_end = {
                type: 'call-function',
                func: function(){
                    audio.pause()
                    audio.currentTime = 0

                    document.body.style.backgroundImage = "url('img/SquareW.png')"
                    document.body.style.backgroundSize = "100% 100%" 
                }
            }
            timeline.push(context_end)

The script will calculate mean acc and RT and provide end of block feedback if I drop this block of code, but of course, this also means that the sounds just keep playing, looping and building on top of each other.

I'll add the block end code here too...

        // End of block feedback
        BlockEnd = {
            type: 'html-keyboard-response',
            choices: [32],
            stimulus: function(){

                var BlockNum = jsPsych.data.get().last(1).values()[0]['BlockNum'];

                if (nCor[BlockNum] > 0){
                    var mRT = Math.round(RT[BlockNum]/nCor[BlockNum])
                } else {
                    var mRT = 0
                }
                
                if (nErr[BlockNum] > 0){
                    var AccProp =  Math.round((nCor[BlockNum]/(nCor[BlockNum]+nErr[BlockNum]))*100)
                } else {
                    var AccProp = 100
                }

                if (BlockNum == 0){

                    return '<p>Practice Block' + '<br><br><br>' +
                    'On average, you took ' + mRT + ' ms to make a correct response.<br>' + 
                    'You made ' + nErr[BlockNum] + ' error(s), so in that block you were ' + AccProp + '% accurate. <br><br><br>' +
                    CatchFB + '<br><br><br>' +
                    'Please respond as quickly and as accurately as possible throughout.<br>' +
                    'Press SPACE when you are ready to start the experimental session.</p>'    
                } else {

                    return '<p>Block number: ' + [BlockNum] + '<br><br><br>' +
                        'On average, you took ' + mRT + ' ms to make a correct response.<br>' + 
                        'You made ' + nErr[BlockNum] + ' error(s), so in that block you were ' + AccProp + '% accurate. <br><br><br>' +
                        CatchFB + '<br><br><br>' +
                        'Please respond as quickly and as accurately as possible throughout.<br>' +
                        'Press SPACE when you are ready to start the next block.</p>'
                }
            }
        }
        timeline.push(BlockEnd)

Thanks again,

Cai

I am happy to share the whole thing with you if you think it will help.

[becky-gilbert]

@cslongman are you seeing any errors in the console when the context_end trials are included? And when you say that the block end feedback calculator isn't working - does that mean the trial is still running, but it's producing incorrect RT and accuracy values?

I would try adding some console.logs in the stimulus function in your BlockEnd trial to see what's going wrong there. For instance, it looks like this line is just getting the data from the last trial:

var BlockNum = jsPsych.data.get().last(1).values()[0]['BlockNum'];

When you add the context_end call-function trials back in, does this trial run after your last 'real' trial, before the BlockEnd trial? If so, then the line above will return the data from your context_end trial, which is probably not what you want! If you need to get the second to last trial in the jsPsych data, you could get the last 2 trials, and then index the second element in the array:

var BlockNum = jsPsych.data.get().last(2).values()[1]['BlockNum'];

[cslongman]

Thank you Becky - I really should have spotted that myself!

All seems to be working perfectly now.

Thanks again for your help.

[becky-gilbert]

Yay! 🎉