timelineVariables issue / accessing stimuli in separate .js files #1525

R14Knight · 2021-02-17T17:51:42Z

R14Knight
Feb 17, 2021

Hello there jsPsych users!

Firstly I must admit that I'm am entirely new to coding and thus naive to potentially obvious solutions, so many apologies in advance in needs be.

I'm trying to design a psycholinguistic dual-task, cognitive load experiment with a 2x2 factorial design for my dissertation.
I'm trying to use timeline variables so that I can keep stimuli in separate Javascript files whilst the bones of the experimental procedure are in an html file, however I'm running into issues since introducing timeline variables. I believe I have all the right paths for the scripts in the head over when I get to running it a browser offline, I am getting consol errors saying that I need to specify values for the html-keyboard-response and image-keyboard-response plugins. I also get an error saying that the browser can not access local files so I'm not sure if it's something to do with Cross Origin Resource Sharing and not being able to access the external .js files for privacy reasons.

I'm not sure what I'm doing wrong here so any and all insight is greatly appreciated,
many thanks!

Please find below the html exp. procedure and the separate .js files' content:

Here is the html:

<!DOCTYPE html>
<html>

<head>

    <script src="jspsych/jspsych.js"></script>
    <script src="jspsych/plugins/jspsych-instructions.js"></script>
    <script src="jspsych/plugins/jspsych-image-keyboard-response.js"></script>
    <script src="jspsych/plugins/jspsych-html-keyboard-response.js"></script>
    <script src="jspsych/plugins/jspsych-survey-text.js"></script>
    <script src="jspsych/plugins/jspsych-survey-multi-select.js"></script>
    <script src="jspsych/plugins/jspsych-survey-html-form.js"></script>
    <script src="js/collection.js"></script> 
    <script src="js/syn_load_stimuli.js"></script> 
    <script src="js/syn_task_stimuli.js"></script>
    <link href="jspsych/css/jspsych.css" rel="stylesheet">


</head>

<body></body>

<script>

    var timeline = [];

//Pre-load image/audio coding to be done//

////////////////////////////////////////////////////
//SYN-SYN TRIALS CODE///////////////////////////////
////////////////////////////////////////////////////

//combining the load and task stimuli into a single variable to serve as a 'timelineVariables' complement in procedure//
    var synsyn_trial_info = syn_load_stimuli.concat(syn_task_stimuli);

//participant id//
    var participant_id = {
        type: 'survey-html-form',
        data: {screen_id: "participant_id"},
        preamble: [
            "<p>Welcome to the experiment!</p>" +
            "<p>Please enter an identifier composed of a colour, a vegetable, and the first two digits of your date of birth without spaces.</p>" +
            "<p>If you were born on the 3rd of december 1995, you could enter:</p>" + 
            "<p>pinkonion03</p>"],
        html: "<p>Participant_ID: <input name='Part_ID' type='text' /></p>",
        on_finish: function(data) {
            data.responses = JSON.parse(data.responses);
            jsPsych.data.addProperties({
                part_ID: data.responses.Part_ID,
            })
        }
    };
    timeline.push(participant_id);

//instructions//
    var instructions = {
            type: 'instructions',
            data: {
                screen_id: "instructions"
            },
            pages: [
                '<p>In this task, you will be presented with a picture then a series of sentence fragments.</p>'+
                '<p>You should think about what is happening in the picture. It will disappear after 2 seconds.</p>'+
                '<p>After a pause marked by an "+", the first sentence fragment will appear. Press any key to move to the next fragment.</p>'+
                '<p>Click the "Next" button for more instructions.</p>',
                '<p>After the sentence fragments, you will be asked two questions.</p>'+
                '<p>These questions may be multi-choice OR require you to type an answer.</p>'+
                '<p>You should read at a pace that is natural to you.</p>'+
                '<p>Here are two practice trials to get used to the layout. The actual task will begin afterwards.</p>'+
                '<p>Click the "Next" button to start practice trials.</p>'
            ],
            show_clickable_nav: true,
            post_trial_gap: 1000
    };
    timeline.push(instructions);


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////ACTUAL TRIALS//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//fixation//
    var fix = {
        type: 'html-keyboard-response',
        stimulus: '<span style="font-size:40px;">+</span>',
        choices: jsPsych.NO_KEYS,
        trial_duration: 500,
        data: {
            trial_part: "fixation", 
            screen_id: "fixation"
            }
    };

//syntactic cognitive load//
    var syn_load = {
        type: 'image-keyboard-response',
        stimulus: function() { 
            jsPsych.timelineVariable("syn_load_image", true)},
        choices: jsPsych.NO_KEYS,
        trial_duration: 2000,
        stimulus_height: 640,
        stimlus_width: 480,
        data: {
            screen_id: "syn_load",
            trial_part: "syn_load"
        }   
    };
   
//syntactic processing task - first sentence fragment// 
    var syn_task1 = {
        data: {
            screen_id: "syn_task1",
            trial_part: "syn_task1"
        },
        type: 'html-keyboard-response',
        stimulus: jsPsych.timelineVariable('frag1'),
        choices: jsPsych.ALL_KEYS
    };
     
//syntactic processing task - second sentence fragment//      
    var syn_task2 = {
        type: 'html-keyboard-response',
        stimulus: jsPsych.timelineVariable('frag2'),
        choices: jsPsych.ALL_KEYS,
        data: {
            screen_id: "syn_task2",
            trial_part: "syn_task2"
        },
    };

//syntactic processing task - third sentence fragment// 
    var syn_task3 = {
        type: 'html-keyboard-response',
        stimulus: jsPsych.timelineVariable('frag3'),
        choices: jsPsych.ALL_KEYS,
        data: {
            screen_id: "syn_task3",
            trial_part: "syn_task3"
        },
    };

//syntactic processing task - forth sentence fragment// 
     var syn_task4 = {
        type: 'html-keyboard-response',
        stimulus: jsPsych.timelineVariable('frag4'),
        choices: jsPsych.ALL_KEYS,
        data: {
            screen_id: "syn_task4",
            trial_part: "syn_task4"
        },
    };
    
//syntactic load question//
    var syn_load_que = {
        type: 'survey-multi-select',
        questions: jsPsych.timelineVariable('syn_load_questions'),
        data: {
            screen_id: "syn_load_que",
            trial_part: "syn_load_que"
        },
        on_finish: function (data){

            if(data.responses == jsPsych.timelineVariable('syn_load_answer')){
            data.accuracy = true;
            } else {
            data.accuracy = false;
            }
        }
    };

//syntactic task question//
    var syn_task_que = {
   
        type: 'survey-multi-select',
        questions: jsPsych.timelineVariable('syn_task_questions'),
        data: {
            screen_id: "syn_task_que",
            task_part: "syn_task_que"
        },
        on_finish: function(data){

            if(data.responses == jsPsych.timelineVariable('syn_task_answer')){
            data.accuracy = true;
            } else {
            data.accuracy = false;
            }
        }
    };
    
//syntactic load + syntactic processing task procedure//
    var synsyn_procedure = {
       
        timeline: [fix, syn_load, syn_task1, syn_task2, syn_task3, syn_task4, fix, syn_load_que, fix, syn_load_que],
        timeline_variables: synsyn_trial_info

    };
    timeline.push(synsyn_procedure);

    jsPsych.init({
            timeline: timeline,
            override_safe_mode: true,
            on_finish: function() {
                var csv = jsPsych.data.get().csv();
                var filename = "first_collection.csv";
                downloadCSV(csv, filename)
                jsPsych.data.displayData();
            }
        });


</script>
</html>

Here is are the two Javascript files:

syn_load_stimuli:

var syn_load_stimuli = [

      {
        syn_load_image: 'frog.jpg',
        syn_load_questions: [{
            prompt: "In the picture, where was the frog sitting?", 
            options: ["on Saturn", "on a leaf", "on a bench", "on Mout Fuji", "on a sand dune"], 
            horizontal: true,
            required: true,
            }],
        syn_load_answer: "{\"Q0\":[\"on a leaf\"]}"

        },

        {},
        {},
        {},


    ];

syn_task_stimuli

var syn_task_stimuli = [
    
    {fragment1: "The otter ",
     fragment2: "that the shrimp adored", 
     fragment3: "collected shells", 
     fragment4: "from the seabed",
    },

    {   syn_task_questions: [{
            prompt: "In the sentence, what was the otter collecting?", 
            options: ["clams", "seaweed", "coral", "shells", "rocks"], 
            horizontal: true,
            required: true
            }],
        syn_task_answer: "{\"Q0\":[\"shells\"]}",
    },

    {},
    {},
    {},
    {},


];

jodeleeuw · 2021-02-17T18:19:03Z

jodeleeuw
Feb 17, 2021
Maintainer

Hi @R14Knight,

Are the syn_load_stimuli and syn_task_stimuli files exactly the same as what you've posted here? I'm asking because the blank objects {} will create problems because jsPsych will be expecting those to have all the various timeline variables. Similarly, the first object in syn_task_stimuli has the properties fragment1, fragment2, etc., but not the properties that define the timeline variables.

3 replies

R14Knight Feb 17, 2021
Author

Hi @jodeleeuw,

Thank you so much for the speedy reply and your help! I had the black objects to fill with more stimuli later but have now deleted them. I have also matched the object properties in syn_task_stimuli with the timeline variables.
In addition to all these alterations and removing the anonymous function from the image-keyboard-response, the image is now loading, however the fragments are still showing as undefined.

Apologies for flagging up more errors,

All the best and many thanks again

becky-gilbert Feb 17, 2021
Maintainer

Hi @R14Knight, just wanted to add that, when you use timeline variables, the names in your timeline variables need to exactly match the names you give to the jsPsych.timelineVariable function. So for instance, with this trial procedure:

var synsyn_procedure = {
  timeline: [fix, syn_load, syn_task1, syn_task2, syn_task3, syn_task4, fix, syn_load_que, fix, syn_load_que],
  timeline_variables: synsyn_trial_info
};

One of the trials references a timeline variable parameter called frag4:

var syn_task4 = {
  type: 'html-keyboard-response',
  stimulus: jsPsych.timelineVariable('frag4'), // <-- each object in timeline variables should have "frag4"
  choices: jsPsych.ALL_KEYS,
  data: {
     screen_id: "syn_task4",
    trial_part: "syn_task4"
  },
};

So each of the objects in your your synsyn_trial_info timeline variables array should contain a parameter called frag4, but it looks like you might using different names in your objects (e.g. {fragment1: "The otter ", etc.).

Also, all of your synsyn_trial_info timeline variables objects should have all of the same parameters, because each object represents a single trial in your entire synsyn_procedure timeline:

timeline: [fix, syn_load, syn_task1, syn_task2, syn_task3, syn_task4, fix, syn_load_que, fix, syn_load_que],

See the timeline variable docs for more info. Hope this helps!

R14Knight Feb 27, 2021
Author

This was very informative, thank you!
It was an issue with timeline variable objects not having the same parameters -
all sorted now!

Many thanks again

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

timelineVariables issue / accessing stimuli in separate .js files #1525

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

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!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

timelineVariables issue / accessing stimuli in separate .js files #1525

Uh oh!

R14Knight Feb 17, 2021

Replies: 1 comment · 3 replies

Uh oh!

jodeleeuw Feb 17, 2021 Maintainer

Uh oh!

Uh oh!

R14Knight Feb 17, 2021 Author

Uh oh!

becky-gilbert Feb 17, 2021 Maintainer

Uh oh!

Uh oh!

R14Knight Feb 27, 2021 Author

R14Knight
Feb 17, 2021

Replies: 1 comment 3 replies

jodeleeuw
Feb 17, 2021
Maintainer

R14Knight Feb 17, 2021
Author

becky-gilbert Feb 17, 2021
Maintainer

R14Knight Feb 27, 2021
Author