Issue with special characters

[AnneVogt]

Hi there,
for a new experiment I want to display multiple images drawn from an array next to each other and show the names of the displayed objects below each image. The code I am using is working fine. However, I have a problem related to some special German characters, as 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 easily 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.
Alternatively, I was thinking of having two lists - one for the images (without special characters in their names) and one for the names. How can I link the names which are displayed to the stimuli when the stimulus array is shuffled?

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,
};

[becky-gilbert]

You could store your images as an array of objects, where each object contains the image name with and without the special characters. Then you could shuffle this array, and access the two different properties of this object when you need the filename vs names that are shown on the screen. E.g.

var images = [
  {path: 'stims/wirbelsaule.jpg', name: 'Wirbelsäule'},
  {path: 'stims/another_stim.jpg', name: 'Another stim'},
  // etc.
];
var images2 = jsPsych.randomization.shuffle(images);  // stimulus objects are now in random order
//...
stimulus: function(){
    var first_stim = images2.pop(); // this is now an object with keys called 'path' and 'name'
    var first_stim_filepath = first_stim.path;
    var first_stim_name = first_stim.name;
    var html = `<table id=t01><tr><td><img src="${first_stim_filepath}"></td> <td></td></tr><tr><td><h1><center><option>${first_stim_name}</option></center></h1></td></tr></table>`;
    return html;
},
//...

Does that work?

Also, did you see Discussion post #1450 ? I wonder if it's helpful/relevant?

[jodeleeuw]

Just echoing @becky-gilbert's idea that the solution for #1450 will probably work here too.

[AnneVogt]

Thanks for your replies. It is now working the way I intended it!