jspsych-problem: Visual Analogue Scale - Showing pictures which are defined in a different script

[OberSchmetteBennett]

Hello everyone,

I'm totally new in jspsych so I could really use some help with my programming-problem:

Currently I defined a trial with an Analogue-Scale plugin. Within that trial I defined that 2 pictures should be seen by the participants in random order. Their task is to rate how similar both pictures are. Pretty straight forward so far. If this was the end of my problem the code would look like this in a classic way:

//Preload Pictures//
    var all_images = ['img/blue.png', 'img/orange.png', 'img/Kinski.jpg'
    , 'img/Cola.jpg', 'img/santa.jpg', 'img/anger.jpg'];

//Defined Trial//
var trial_option_2 = {
        type: jsPsychHtmlSliderResponse,
        stimulus: function() {
            var rand_images = jsPsych.randomization.sampleWithoutReplacement(all_images,2);
            return `<div style="width:1000px;">
                    <p>How similar are the pictures?</p>
                    <div style="width:500; float: left;">
                        <img src="` + rand_images[0]  + `" />
                    </div>
                    <div style="width:500; float: right;">
                        <img src="` + rand_images[1]  + `" />
                    </div>
                    </div>`;
        },
        require_movement: true,
        labels: ['not similar', 'quite similar', 'very similar']
    };

//Timeline Push//
var test = {
  timeline: [trial_option_2],
    repetitions: 11 };
    timeline.push(test);

But of course it is more complicated. In this experiment there is no picture pool like above (var all images) The participants should receive individual trials/ pictures based on their predefined subject-ID which they have to insert at the beginning of the experiment. This code gets compared to all codes within an separate/ own .js file (inputFile.js) which contains all blocks and trials (for each code). The function to make this possible is:

// preload//

//parameters//
	var run_count = 1;
	var block_count = 1;
	var trial_count_encoding = 0;
	var correct_response_count = 0;
	var missed_response_count = 0;

//function//
		// create array of images
		var encoding_trial_pic = [function () {
		// get the subject ID that was entered from the jsPsych.data object
		var subject_ID = jsPsych.data.get().last(1).values()[0]['subject'];
		// access the sub-dictionary containing the input data for this subject ID from inputFile.js
		var my_stimuli = test[subject_ID];
		// access the encoding block (first encoding block is indexed with 1 and all encoding blocks have odd indices)
		var encoding_trials = my_stimuli[block_count];
		// access the current trial; the trial counter variable serves as index for current trial
		var this_trial = encoding_trials[trial_count_encoding];
		// access the image path
		var this_stimulus = this_trial['picture'];
		// return the image path
		return this_stimulus
	}];

When I put this function inside the trial_option_2 trial, it looks like this:

//Defined Trial//
var trial_option_2 = {
    type: jsPsychHtmlSliderResponse,
	stimulus: function() {
		// get the subject ID that was entered from the jsPsych.data object
		var subject_ID = jsPsych.data.get().last(1).values()[0]['subject'];
		// access the sub-dictionary containing the input data for this subject ID from inputFileTempMemRandNew.js
		var my_stimuli = test[subject_ID];
		// access the encoding block (first encoding block is indexed with 1 and all encoding blocks have odd indices)
		var encoding_trials = my_stimuli[block_count];
		// access the current trial; the trial counter variable serves as index for current trial
		var this_trial = encoding_trials[trial_count_encoding];
		// access the image path
		var this_stimulus = this_trial['picture'];
		// access the current trial; the trial counter variable serves as index for current trial
		var this_trial_x = encoding_trials[trial_count_encoding+1];
		// access the image path
		var this_stimulus_x = this_trial_x['picture'];
		var encoding_trial_pic_X = [this_stimulus, this_stimulus_x,2];
       return `<div style="width:1000px;">
                <p>How similar are the pictures?</p>
                <div style="width:500; float: left;">
                    <img src="` + encoding_trial_pic_X[0]  + `" />
                </div>
                <div style="width:500; float: right;">
                    <img src="` + encoding_trial_pic_X[1]  + `" />
                </div>
                </div>`;
    },
    require_movement: true,
    labels: ['not similar', 'quite similar', 'very similar']
};

//Timeline Push//
var test = {
  timeline: [trial_option_2],
    repetitions: 11 };
    timeline.push(test);

Unfortunately it is not working right now. I don't know whether the defined function is wrong within the trial or not.

Help would be absolutely appreciated! :)

If you need additional information, feel free to ask.

Best regards
OberSchmetteBennett

[jodeleeuw]

Hi @OberSchmetteBennett,

Conceptually, this seems right. I'm guessing the error is just a bug somewhere in the code. Have you tried using the debugging tools in your browser to step through the function?

[jodeleeuw]

Can you post the code for the trial before this one, where the subject ID is entered? I'm wondering if var subject_ID = jsPsych.data.get().last(1).values()[0]['subject']; is working as you expect it to

[OberSchmetteBennett]

Hi jodeleeuw,

sorry for the late reply. This is the whole code to register the subject ID.

// array for valid subject IDs
var valid_subject_ids = [];
	// get subject IDs from subjectsTempMemRandNew.js and fill array with subject IDs
	for (var subi in subjects) {
		valid_subject_ids.push(subjects[subi]);
	};

    /* create timeline */
    var timeline = [];

/// get subject ID

	// repeat ID variable (this is set to true if the subject ID has to be entered again)
	var repeat_ID = false;

	// collect subject ID
	var collect_ID = {
		type: jsPsychSurveyText,
		preamble: 'Hallo! Willkommen zum Experiment! Bitte gib hier zunächst deinen VP-Code ein. Diesen haben wir dir zuvor mitgeteilt.',
		questions: [
			{
				prompt: 'VP-Code:'
			}],
		// log the response to console and add the subject ID to the jsPsych.data object as 'subject'
		on_finish: function (data) {
			var input = data.response;
			var subject_ID = input['Q0'];
			jsPsych.data.addProperties({
				subject: subject_ID
			});
			data.event_type = 'get_subject_ID';
		}
	};

	// collect subject ID (after a previous attempt was not successful)
	var collect_ID_follow_up_attempt = {
		type: jsPsychSurveyText,
		preamble: 'Dieser VP-Code ist nicht gültig. Bitte versuche es noch einmal. Falls du deinen VP-Code nicht mehr weißt, wende dich bitte an die Versuchsleitung.',
		questions: [
			{
				prompt: 'VP-Code:'
			}],
		// log the response to console and add the subject ID to the jsPsych.data object as 'subject'
		on_finish: function (data) {
			var input = data.response;
			var subject_ID = input['Q0'];
			jsPsych.data.addProperties({
				subject: subject_ID
			});
			data.event_type = 'get_subject_ID';
		}
	};

	// present the first question for the subject ID (collect_ID); initiated only if variable repeat_ID is false
	var if_first_attempt_ID = {
		timeline: [collect_ID],
		// in general, the conditional_function parameter in jspsych allows you to specify criteria that decide if the event is initiated or not
		conditional_function: function () {
			if (repeat_ID == true) {
				return false;
			} else {
				return true;
			}
		}
	};

	// present the second question for the subject ID (collect_ID_follow_up_attempt); initiated only if variable repeat_ID is true
	var if_follow_up_attempt_ID = {
		timeline: [collect_ID_follow_up_attempt],
		conditional_function: function () {
			if (repeat_ID == false) {
				return false;
			} else {
				return true;
			}
		}
	};

	// initiate if_first_attempt_ID and if_follow_up_attempt_ID in a loop; loop is only repeated if subject ID is invalid
	var wait_for_valid_ID = {
		timeline: [if_first_attempt_ID, if_follow_up_attempt_ID],
		// in general, the loop_function parameter in jspsych allows you to repeat the event and perform specific actions until a criterium is met
		loop_function: function () {
			// get the subject ID that was entered before from the jsPsych.data object
			var subject_ID = jsPsych.data.get().last(1).values()[0]['subject'];
			// if the subject ID is in the array of valid subject IDs (has an index of > -1), the loop is not repeated
			if (valid_subject_ids.indexOf(subject_ID) > -1) {
				return false;
				// if the subject ID is not in the array of valid subject IDs, the variable repeat_id is set to true (subject has to repeat the ID) and the loop is repeated
			} else {
				repeat_ID = true;
				return true;
			}
		}
	};

	// push to timeline
	timeline.push(wait_for_valid_ID);

[jodeleeuw]

And how is the test object defined? Is that imported somewhere?

[OberSchmetteBennett]

Hi Jodeleeuw,

you gave me the essential cue for the problem! <3

the following part of the code:
var my_stimuli = test[subject_ID];

interferred with the variable:
var test = {
timeline: [trial_option_2],
repetitions: 11 };
timeline.push(test);

Therefore the program did not know which "test" I meant. I changed the name of 'var test' to 'var test_1' and now it works.

Should I close this discussion now or can I leave it open for further question in the near future?

Thanks alot!
OberSchmetteBennett

[OberSchmetteBennett]

Hello again,

since my project is still running, several questions remain. I hope it is okay to further use this discussion-section. :)
So here is the thing: The final version of the experiment should create an array based on the entered Subject_ID at the beginning. The required information for that array remains in the separate .js file (inputFile.js). Here is a section of the code within inputFile.js:

var test = {
    "5370015366": {
        "1": [
            {
                "positionInOrder": 1,
                "picture": "teddy_bear_01b.jpg",
                "category": "24_toy",
                "categoryIndex": 0,
                "congruence": 2,
                "object": "1636_teddy_bear",
                "wait_add_TR": false
            },
            {
                "positionInOrder": 2,
                "picture": "marble_06s.jpg",
                "category": "24_toy",
                "categoryIndex": 0,
                "congruence": 1,
                "object": "973_marble",
                "wait_add_TR": false
            },
            {
                "positionInOrder": 3,
                "picture": "noisemaker_01b.jpg",
                "category": "24_toy",
                "categoryIndex": 0,
                "congruence": 0,
                "object": "1061_noisemaker",
                "wait_add_TR": false
            },
            {
                "positionInOrder": 4,
                "picture": "ink_07s.jpg",
                "category": "19_officeSupply",
                "categoryIndex": 1,
                "congruence": 4,
                "object": "830_ink",
                "wait_add_TR": false
            },
            {
                "positionInOrder": 5,
                "picture": "cart_10s.jpg",
                "category": "26_vehicle",
                "categoryIndex": 2,
                "congruence": 8,
                "object": "277_cart",
                "wait_add_TR": true
            },
            {
                "positionInOrder": 6,
                "picture": "folder_09s.jpg",
                "category": "19_officeSupply",
                "categoryIndex": 1,
                "congruence": 2,
                "object": "626_folder",
                "wait_add_TR": true
            }
],

Here are some information to understand the essential defined components:

• "5370015366" - Subject_ID
• "1" - In this case this number represents the current block. There are more blocks for each Subject
• "positionInOrder: 1" - In this case this number represents the current trial. There are more trials for each Subject
• "picture: "teddy_bear_01b.jpg" - This is the exact name of the picture within the folder which should be presented

I need a method at the beginning of each run (for all individual subjects and their entered ID's) which selects all pictures from all Blocks/ Trials (280 in total for each subject) out of inputFile.js and compromises them in one array.
I imagine that it could look like the code from the beginning but with certain specifications:

//Preload Pictures **via a certain function from inputFile.js**//
    var all_images = [????????];

//Defined Trial//
var trial_option_2 = {
        type: jsPsychHtmlSliderResponse,
        stimulus: function() {
            var rand_images = jsPsych.randomization.sampleWithoutReplacement(all_images,2);
            return `<div style="width:1000px;">
                    <p>How similar are the pictures?</p>
                    <div style="width:500; float: left;">
                        <img src="` + rand_images[0]  + `" />
                    </div>
                    <div style="width:500; float: right;">
                        <img src="` + rand_images[1]  + `" />
                    </div>
                    </div>`;
        },
        require_movement: true,
        labels: ['not similar', 'quite similar', 'very similar']
    };

//Timeline Push//
var test = {
  timeline: [trial_option_2],
    repetitions: 40 };
    timeline.push(test);

Thank you again for your help and I will also look for additional answers myself in the web. :)

Have a great day!
OberschmetteBennett

[jodeleeuw]

Hi @OberSchmetteBennett,

I think the map() function will be helpful here:

var subjectId = "5370015366"

var subjectData = test[subjectId]

var images = [];
for(const block in subjectData){
	var blockImages = subjectData[block].map((trial) => trial.picture)
	images = images.concat(blockImages)
}

This basically iterates through each block, and then takes the array of trials and runs it through the map function to extract a new array of just the picture property. These are all concat'ed together to create a list of all images.

[OberSchmetteBennett]

Hello jodeleeuw,

thanks again for your answer! This seems to work! :)

Have a great day.

Best regards
OberSchmetteBennett