Error: jsPsych.timelineVariable is not a function #2484

mrinmayik · 2022-01-31T18:32:45Z

mrinmayik
Jan 31, 2022

Hello,

I'm super new to JavaScript and jsPsych. I'm coding a recognition memory experiment. I've set it up so that I have a "main" index.html script that does the job of obtaining consent, showing instructions etc. Then there is an EncodingPhase.js that presents the stimuli for the encoding phase. For this purpose I'm using timeline variables as explained in the Reaction Time tutorial and here.

For some reason, however, I'm getting the error "jsPsych.timelineVariable is not a function", that points to the first time timelineVariable is used in EncodingPhase.js. I'm using the exact same structure as the example in the link above. Is this error originating because I have this two-script setup? How do I fix it?

Here are the two scripts:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Pattern Completion</title>

    <script src="jspsych-7.1.2/dist/jspsych.js"></script>    
    <script src="jspsych-7.1.2/dist/plugin-html-keyboard-response.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-html-button-response.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-html-slider-response.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-image-keyboard-response.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-image-button-response.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-survey-likert.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-fullscreen.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-external-html.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-call-function.js"></script>
    <script src="jspsych-7.1.2/dist/plugin-preload.js"></script>

    <script src="EncodingPhase.js"></script> <!--Read in encoding and test scripts-->
  </head>

<body>
<script>

/** INITIALIZE jsPsych **/
var jsPsych = initJsPsych();

/** DEFINE TIMELINE **/
var timeline = []; //specify the jsPsych timeline to which all trials/blocks are pushed

/** CONSENT **/
//function to make sure consent box is clicked before proceeding
var check_consent = function(elem) {
    if(document.getElementById('consent_checkbox').checked) {
        return true;
    }
    else {
        alert("Please consent before continuing.");
        return false;
    }
    return false;
};

var consent_trial = {
    type: jsPsychExternalHtml,
    url: "Instructions/Consent.html", 
    cont_btn: "start",
    //check_fn: check_consent
};

/** INSTRUCTIONS **/
var overall_instructions = {
    type: jsPsychExternalHtml,
    url: "Instructions/OverallInstructions.html", 
    cont_btn: "continue",
};

/** ACTUALLY RUN THE EXPERIMENT **/
//Push the consent trial to the timeline
timeline.push(consent_trial, overall_instructions, EncodingPhase)

jsPsych.run(timeline);
</script>
</body>
</html>

EncodingPhase.js

var encoding_trials = {
    timeline: [
        {
            type: jsPsychHtmlKeyboardResponse,
            stimulus: '+',
            choices: "NO_KEYS",
            trial_duration: 500
        },
        {
            type: jsPsychImageKeyboardResponse,
            stimulus: jsPsych.timelineVariable('face'), //THIS IS WHERE THE ERROR IS GENERATED
            choices: "NO_KEYS",
            trial_duration: 2500
        }
    ],
    timeline_variables: [
        { face: 'Stimuli/Woman_Sleeping_1.jpg' },
        { face: 'Stimuli/Beach_1.jpg' }
    ]
}

enc_timeline.push(encoding_trials);

var EncodingPhase = {
	timeline: enc_timeline
};

Sorry if I'm missing something obvious! This is Day 5 of me using JavaScript!

Thank you,
Mrinmayi

Answered by becky-gilbert

Feb 1, 2022

Hi @mrinmayik, welcome to the jsPsych community! No need to be apologetic - most researchers have very little JS experience. We're here to help 😃

I think the reason for this error is because the code in your EncodingPhase.js file references a jsPsych function (jsPsych.timelineVariable) and that file is loaded before your main script. So when the EncodingPhase file loads, the jsPsych variable hasn't been created yet - it's created in this line in your main script:

var jsPsych = initJsPsych();

Here are some options:

Move the jsPsych initialization line to the start of the EncodingPhase.js file.
Move the code from EncodingPhase.js into your main script (anywhere after jsPsych is initialized…

View full answer

becky-gilbert · 2022-02-01T07:14:06Z

becky-gilbert
Feb 1, 2022
Maintainer

Hi @mrinmayik, welcome to the jsPsych community! No need to be apologetic - most researchers have very little JS experience. We're here to help 😃

I think the reason for this error is because the code in your EncodingPhase.js file references a jsPsych function (jsPsych.timelineVariable) and that file is loaded before your main script. So when the EncodingPhase file loads, the jsPsych variable hasn't been created yet - it's created in this line in your main script:

var jsPsych = initJsPsych();

Here are some options:

Move the jsPsych initialization line to the start of the EncodingPhase.js file.
Move the code from EncodingPhase.js into your main script (anywhere after jsPsych is initialized and before you reference the EncodingPhase variable.
Re-write your EncodingPhase script so that it becomes a function that returns the EncodingPhase variable. Then you can call this function in your main script.

Options 1 and 2 may not be ideal if you want to write your experiment in a modular way, whereas option 3 would allow you to keep the encoding phase code separate and more reusable across different experiments.

Can you let us know if any of those solutions work for you?

Btw it looks like your encoding phase code references an array called enc_timeline but I don't see that variable created anywhere, so you might need to add var enc_timeline = [];.

2 replies

becky-gilbert Feb 1, 2022
Maintainer

I just thought of a 4th option, which is to put the jsPsych initialization line in its own script tag before the EncodingPhase.js file is loaded:

<!DOCTYPE html>
<html>
  <head>
    <title>Pattern Completion</title>
    <script src="jspsych-7.1.2/dist/jspsych.js"></script>
    <!-- load plugins... -->
    <script>
        /** INITIALIZE jsPsych **/
        var jsPsych = initJsPsych();
    </script>
    <script src="EncodingPhase.js"></script> <!--Read in encoding and test scripts-->
  </head>
  <body></body>
  <script>

    /** DEFINE TIMELINE **/
    var timeline = []; //specify the jsPsych timeline to which all trials/blocks are pushed

    // rest of experiment...

I think all of these options should work, so you should just go with the one that makes the most sense to you.

mrinmayik Feb 1, 2022
Author

Hi @becky-gilbert!

Thanks a lot for your quick response!

Option 1 and 2 worked. I haven't tried Option 3 yet (mainly because I think it'll take me some time to figure out how to do it!). Option 4 works too!

Quick question about Option 1:
When I move the initialization of the jsPsych variable from index.html to EncodingPhase.js, I don't get an error from the lines that reference the variable in index.html (e.g., jsPsych.run on the last line of index.html). Is that because the variable is created when the script line <script src="EncodingPhase.js"></script> is executed, and that variable is then available to use in index.html? Does that mean that if I have other .js scripts that need the jsPsych variable, I won't have to initialise it in every script, so long as I read them in after the Encoding.js script?

In any case, Option 4 works perfectly, and makes the most sense given that the final experiment will have more modules like EncodingPhase.js that may be called in different orders. So I'll go with this option!

Thanks again for your help!
Mrinmayi

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Error: jsPsych.timelineVariable is not a function #2484

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Error: jsPsych.timelineVariable is not a function #2484

Uh oh!

mrinmayik Jan 31, 2022

index.html:

EncodingPhase.js

Replies: 1 comment · 2 replies

Uh oh!

Uh oh!

becky-gilbert Feb 1, 2022 Maintainer

Uh oh!

becky-gilbert Feb 1, 2022 Maintainer

Uh oh!

mrinmayik Feb 1, 2022 Author

mrinmayik
Jan 31, 2022

Replies: 1 comment 2 replies

becky-gilbert
Feb 1, 2022
Maintainer

becky-gilbert Feb 1, 2022
Maintainer

mrinmayik Feb 1, 2022
Author