multiple image display

[AnneVogt]

Hello,
before starting my main experiment, I would like to present my pictorial stimuli once to my participants. As I am aiming to replicate a previous study which was run in a different setup, I would like to use the same mode of presentation as in the previous study.

This code is producing a result which is very close to what I want:

var slideshow = {
	type: "html-keyboard-response",
	stimulus: '<table> <tr>  <td><img src="stimuli/hose.png"></td>  <td><img src="stimuli/ei.png"></td>  <td><img src="stimuli/papagei.png"></td>  <td><img src="stimuli/fabrik.png"></td></tr> <tr>  <td><h1><center>Hose</center></h1></td>  <td><h1><center>Ei</center></h1></td>  <td><h1><center>Papagei</center></h1></td>  <td><h1><center>Fabrik</center></h1></td> </tr></table>',
	trial_duration: 5000,
	response_ends_trial: false,
	data: jsPsych.timelineVariable("data"),	
};

However, I have a larger array and would like to randomly select four pictures, present them next to each other for 5 seconds before taking the next four pics from the array. How can this be achieved? Note, that the names of the objects should be written below the pictures. The names are given in the stimulus path and ideally they would automatically be extracted from the file name.

[jodeleeuw]

Hi @AnneVogt ,

I have a larger array and would like to randomly select four pictures

This probably means you'll need to use a dynamic parameter. You can create a variable that holds all the pictures, shuffle it at the start of the experiment using jsPsych.randomization.shuffle() and then use a method like .pop() to remove items from the array as you are constructing the stimulus.

var stimuli = ['stimuli/host.png', ... ];
stimuli = jsPsych.randomization.shuffle(stimuli);

stimulus: function(){
	var first_stim = stimuli.pop();
	var second_stim = stimuli.pop();
	// etc ...

	var html = `<table> <tr>  <td><img src="${first_stim}"></td> ... `

	return html;
}

Note, that the names of the objects should be written below the pictures. The names are given in the stimulus path and ideally they would automatically be extracted from the file name.

Inside the function to generate the stimulus you could extract the filename from the variable. Here's a StackOverflow question with some relevant answers. Then you could add the name to the stimulus much like adding the path to the image.

[kurokida]

I made a sample program which is available at
https://jm91t3ybwr.cognition.run/

I used an excellent hosting service: cognition.run.

Here is the code:

  function getPresentedName(file_path){
    const end_position = file_path.indexOf('.png');
    return file_path.substr(0, end_position);
  }
  const trial = {
    type: "html-keyboard-response",
    stimulus: function(){
      return `<table><tr>
        <td><img src="${jsPsych.timelineVariable('image1', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image2', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image3', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image4', true)}"></td>
        </tr>
        <tr>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image1', true))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image2', true))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image3', true))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image4', true))}</center></h1></td>
        </tr></table>`},
    trial_duration: 5000,
    response_ends_trial: false,
    //data: jsPsych.timelineVariable("data"),	
};

const image_names = [
  'battery.png',
  'clip.png',
  'pen.png',
  'pin.png',
  'pliers.png',
  'postit.png',
  'scissors.png',
  'tape.png'
]

const shuffled_image_names = jsPsych.randomization.shuffle(image_names);

const multi_images = {
  timeline: [trial],
  timeline_variables: [
    {image1: shuffled_image_names[0], image2: shuffled_image_names[1], image3: shuffled_image_names[2], image4: shuffled_image_names[3]},
    {image1: shuffled_image_names[4], image2: shuffled_image_names[5], image3: shuffled_image_names[6], image4: shuffled_image_names[7]}
  ]
}

jsPsych.init({
    timeline: [multi_images],
});

[becky-gilbert]

@ncuneo0711 you can use the "audio-keyboard-response" plugin instead of the "html-keyboard-response" plugin for the trial, change the stimulus parameter name to prompt in the code above, and add your audio stimulus as the stimulus parameter.

[ncuneo0711]

@becky-gilbert any idea whats going on here? (I added a sample pre_audio since I know that you usually can't proceed to an audio trial without a click and then took out the wording in the table but am stuck). I'm using template images for now (from the "example" folder) until we sort out our stimuli.

var pre_audio = {
    type: 'html-button-response',
    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
    'you want the first trial to include audio.</p></div>',
    choices: ['Continue']
  }

  const trial = {
    type: "audio-keyboard-response",
    stimulus: 'sound/wow.mp3'
    prompt: function(){
      return `<table><tr>
        <td><img src="${jsPsych.timelineVariable('image1', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image2', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image3', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image4', true)}"></td>
        </tr>
       </table>`},
    trial_duration: 5000,
    response_ends_trial: false,

};

const image_names = [
  'happy_face_1.jpg',
  'happy_face_2.jpg',
  'happy_face_3.jpg',
  'happy_face_4.jpg',
  'sad_face_1.jpg',
  'sad_face_2.jpg',
  'sad_face_3.jpg',
  'sad_face_4.jpg'
]

const shuffled_image_names = jsPsych.randomization.shuffle(image_names);

const multi_images = {
  timeline: [trial],
  timeline_variables: [
    {image1: shuffled_image_names[0], image2: shuffled_image_names[1], image3: shuffled_image_names[2], image4: shuffled_image_names[3]},
    {image1: shuffled_image_names[4], image2: shuffled_image_names[5], image3: shuffled_image_names[6], image4: shuffled_image_names[7]}
  ]
}

jsPsych.init({
    timeline: [pre_audio, multi_images],
});

[becky-gilbert]

Hi @ncuneo0711, what version of jsPsych are you using?
(Also, just FYI, I edited your comment so that the code is nicely formatted 👍)

[rndres1]

I made a sample program which is available at https://jm91t3ybwr.cognition.run/

I used an excellent hosting service: cognition.run.

Here is the code:

  function getPresentedName(file_path){
    const end_position = file_path.indexOf('.png');
    return file_path.substr(0, end_position);
  }
  const trial = {
    type: "html-keyboard-response",
    stimulus: function(){
      return `<table><tr>
        <td><img src="${jsPsych.timelineVariable('image1', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image2', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image3', true)}"></td>
        <td><img src="${jsPsych.timelineVariable('image4', true)}"></td>
        </tr>
        <tr>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image1', true))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image2', true))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image3', true))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image4', true))}</center></h1></td>
        </tr></table>`},
    trial_duration: 5000,
    response_ends_trial: false,
    //data: jsPsych.timelineVariable("data"),	
};

const image_names = [
  'battery.png',
  'clip.png',
  'pen.png',
  'pin.png',
  'pliers.png',
  'postit.png',
  'scissors.png',
  'tape.png'
]

const shuffled_image_names = jsPsych.randomization.shuffle(image_names);

const multi_images = {
  timeline: [trial],
  timeline_variables: [
    {image1: shuffled_image_names[0], image2: shuffled_image_names[1], image3: shuffled_image_names[2], image4: shuffled_image_names[3]},
    {image1: shuffled_image_names[4], image2: shuffled_image_names[5], image3: shuffled_image_names[6], image4: shuffled_image_names[7]}
  ]
}

jsPsych.init({
    timeline: [multi_images],
});

Hi,
Can anyone help me convert this to jsPsych version 7?

[kurokida]

Hi @rndres1 ,
Here is the code for jsPsych version 7.

<!DOCTYPE html>
<html>
<head>
  <script src="../dist/jspsych.js"></script>
  <script src="../dist/plugin-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../dist/jspsych.css">
</head>
<body></body>
<script>

  var jsPsych = initJsPsych({
    default_ITI: 250, // as you like
    on_finish: function() {
      jsPsych.data.displayData();
    }
  });

  function getPresentedName(file_path){
    const end_position = file_path.indexOf('.jpg');
    return file_path.substr(0, end_position);
  }

  const trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: function(){
      return `<table><tr>
        <td><img src="${jsPsych.timelineVariable('image1')}"></td>
        <td><img src="${jsPsych.timelineVariable('image2')}"></td>
        <td><img src="${jsPsych.timelineVariable('image3')}"></td>
        <td><img src="${jsPsych.timelineVariable('image4')}"></td>
        </tr>
        <tr>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image1'))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image2'))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image3'))}</center></h1></td>
        <td><h1><center>${getPresentedName(jsPsych.timelineVariable('image4'))}</center></h1></td>
        </tr></table>`},
    trial_duration: 5000,
    response_ends_trial: false,
  };

  const image_names = [
    'img/happy_face_1.jpg',
    'img/happy_face_2.jpg',
    'img/happy_face_3.jpg',
    'img/happy_face_4.jpg',
    'img/sad_face_1.jpg',
    'img/sad_face_2.jpg',
    'img/sad_face_3.jpg',
    'img/sad_face_4.jpg'
  ]

  const shuffled_image_names = jsPsych.randomization.shuffle(image_names);

  const multi_images = {
    timeline: [trial],
    timeline_variables: [
      {image1: shuffled_image_names[0], image2: shuffled_image_names[1], image3: shuffled_image_names[2], image4: shuffled_image_names[3]},
      {image1: shuffled_image_names[4], image2: shuffled_image_names[5], image3: shuffled_image_names[6], image4: shuffled_image_names[7]}
    ]
  }

  jsPsych.run([multi_images]);

</script>
</html>

You can run this program by saving the file as a HTML file in the example folder of the jsPsych library.
You can download the jsPsych library in Option 2 of this page.
I recommend you to read Migrating an experiment to v7.x.

[AnneVogt]

Thanks for your replies. With your help I got pretty close to where I want - at least when logging my steps in the console. However, the image and image names are not displayed properly.

This is my code

type: "html-keyboard-response",
stimulus: function(){
var first_stim = stimuli.pop();
console.log(first_stim);

//extracting filenames
//splitting url and getting filename with file extension
var first_name1=first_stim.split('/').pop();
//removing extension and keeping just the filename
var first_name2=first_name1.split('.').shift();
console.log(first_name2);
var html = '<table> <tr>  
<td><img src="${first_stim}"></td> 
...
</tr> 
<tr>  
<td><h1><center>${first_name2}</center></h1></td> 
...
</tr></table>';

return html; 
},
trial_duration: 5000,
response_ends_trial: false,
};

The console output is giving me the correct file path, e.g. stimuli/hose.png However, I get the following error message:
GEThttp://127.0.0.1:9000/publix/193/546/$%7Bfirst_stim%7D
[HTTP/1.1 404 Not Found 11ms]

(I am running the experiment on a local Jatos installation.)

Furthermore, the word which is written on the screen is ${first_name2} and not hose
What am I missing?

[jodeleeuw]

When you use the ${...} notation to include variables in a string, you have to use backticks instead of quotation marks to enclose the string.

Here you should use backticks:

var html = `<table> <tr>  
<td><img src="${first_stim}"></td> 
...
</tr> 
<tr>  
<td><h1><center>${first_name2}</center></h1></td> 
...
</tr></table>`;

[AnneVogt]

Now the stimuli are displayed. Thanks for your help!

[AnneVogt]

There seems to be a general problem with drawing items from an array, as I get the same error plus the additional message You must specify a value for the stimulus parameter in the image-keyboard-response plugin. in this case:

var exercise = {
	type: "image-keyboard-response",
	stimulus: jsPsych.timelineVariable("stim"),
	choices: ["q", "p"],
	trial_duration: 2000,
	response_ends_trial: false,
	data: jsPsych.timelineVariable("data"),
	on_finish: function(data){
		if(data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode(data.target_response)){
			data.correct = true;
		} else {
			data.correct = false;
		}
	},
};

var exercise_procedure_A = {
	timeline: [fixation, exercise],
	timeline_variables: example_pics_A,
	randomize_order: true
};
	
var example_pics_A = [
 	{stim: "schere_u.png", block: 'example', stim_num: '81', data: { target_response: "q"}},
	{stim: "pinsel_u.png", block: 'example', stim_num: '82', data: { target_response: "p"}}
]; 

Furthermore, I receive the error: Uncaught TypeError: character is undefined
convertKeyCharacterToKeyCode http://127.0.0.1:9000/publix/193/577/jsPsych-master/jspsych.js:1943

I copy-pasted the code from an experiment which is running. Therefore, I am at loss where to look for the potential error. I really appreciate your help!

[jodeleeuw]

This portion of the code looks correct to me. How are you adding these trials onto the main timeline?

[AnneVogt]

I noted, that it works if the stimulus arrays are defined before the trials are defined and it doesn't work if I first define my trials and put all the stimulus arrays towards the end of my code (wich I used to do and which is working in other experiments...). So I found a workaround but do not really understand what is causing the error.

[becky-gilbert]

I think the problem with your code above is that you were referencing the example_pics_A variable before it was defined. Specifically, you refer to example_pics_A as the timeline variables array in your exercise_procedure_A procedure object, but at that point in the script, the example_pics_A array hadn't been defined yet.

In JavaScript, variables have to be defined before they can be used. One thing that makes this a little confusing is that functions can be used before they're declared - this page explains how that works.

Does that answer your question about what was causing the error? Apologies if I misunderstood something!

[AnneVogt]

Thank you for pointing out to me the difference between functions and variables with regard to where they have to be declared. This was indeed the reason for my confusion.

[AnneVogt]

Hi there,
for a new experiment I wanted to build on the previous code for the multiple image display. The code is working fine. However, some of the image names contain German umlate ("ä", "ö", "ü").
If I keep these umlaute in the figure names, the figures won't be displayed, e.g. when having a picture of a spine (German: Wirbelsäule) with the path "stims/wirbelsäule.jpg" the pic won't be shown.
The workaround so far has been to name the pics differently, with "ae" for "ä", "oe" for "ö" etc. However, then the names which are displayed below the images are written in a weird way and are not easy recognizable any more.
Is there a solution for displaying the figures even if their names contain these characters, e.g. by changing a default html setting or something like this? Otherwise, I feel it would get tedious to change all "ae"/"oe"/"ue"... character strings before they are displayed.

Here the code snippet, I use:

var images2 = jsPsych.randomization.shuffle(images);
//presentation of stimuli (with target names)
var slideshow = {`
var images2 = jsPsych.randomization.shuffle(images);
//presentation of stimuli (with target names)
var slideshow = {
type: "html-keyboard-response",
stimulus: function(){
	var first_stim = images2.pop();
	var second_stim = images2.pop();
	var third_stim = images2.pop();
       //extracting filenames
	//splitting url and getting filename with file extension
       var first_name1=first_stim.split('/').pop();
	//removing extension and keeping just the filename
       var first_name2=first_name1.split('.').shift();
       var second_name1=second_stim.split('/').pop();
       var second_name2=second_name1.split('.').shift();
       var third_name1=third_stim.split('/').pop();
       var third_name2=third_name1.split('.').shift();

var html = `<table id=t01> <tr> <td><img src="${first_stim}"></td> <td></td><td><img src="${second_stim}"></td> <td></td> <td><img src="${third_stim}"></td> </tr> <tr><td><h1><center><option>${first_name2}</option></center></</h1></td> <td></td> <td><h1><center><option>${second_name2}</option></center></h1></td> <td></td> <td><h1><center><option>${third_name2}</option></center></h1></td> <td></td>  </tr></table>`;
	return html;
},
trial_duration: 7000,
response_ends_trial: false,
//data: jsPsych.timelineVariable("data"),
};

[becky-gilbert]

Hi @AnneVogt, could you create a new post for this please, since it's a different question? We try to keep the discussion posts limited to one question so that they're more easily searchable for others. Thanks!