Special characters in jsPsych instructions

URL of experiment:
https://run.pavlovia.org/cslongman/taskschemas_expertise/?__pilotToken=d3d9446802a44259755d38e6d163e820&__oauthToken=4848468cf694a70ca276931c4a36f4d0762f7943c88d2b53712d2cbd2d71920d&G=1&PROLIFIC_PID=123

Description of the problem:
My instructions screens use a few special characters (e.g., pound sign, apostrophe, right arrow). These instructions display exactly as I hoped when I run my experiment locally, but when I upload and run via Pavlovia, they do not. Instead, they are accompanied by or replaced by other characters (such as ‘A’ with an accent over it).

Is there a way I can get these characters to display normally on Prolific? The only thing I have found in the forum is a question about allowing participants to enter special characters, but this does not seem to be the same issue as far as I can tell.

Many thanks,

Cai

Hi Cai,

Just to clarify - do you mean ‘pavlovia’ rather than ‘prolific’? and this is an experiment created using jsPsych code rather than psychoJS/psychoPy is that correct? :slight_smile:

Thanks,
Becca

Hi Becca,

Sorry, yes I do mean Pavlovia, and not Prolific (I haven’t got that far yet!).
Also, yes, the experiment has been coded in jsPsych.

Cai

Hey Cai,

Could you share your experiment with me? Here are some pointer on how to do that. Unable to download resource

Cheers Thomas

Hi Thomas,

There doesn’t appear to be a Members option in the Settings for my project.

Cai

Hi Thomas,

I found it… you are now a member of this project.

Here’s the link to the gitlab project page…

Many thanks,

Cai

Thanks! I think the issue has to do with encoding. I’ve got two workaround for you.

  1. Change the text encoding of your index.html to UTF-8 via a text editor (if your favorite editor can’t do it, metapad can). Next, declare that it’s UTF-8 in the header (instructions).
  2. Use HTML entities. Not 100% sure if that works on jsPsych, but it’s a plan B. https://www.toptal.com/designers/htmlarrows/currency/pound-sign/

Perfect - thank you!

That’s fixed it.

For reference, I just needed to add the following text into my header…

[less than symbol]meta charset=“utf-8”/[greater than symbol]

Apparently, I didn’t need to change the text encoding in a text editor (though this may be becasue I use Visual Studio Code to do my coding, and VSC might do that automatically).

Thanks again,

Cai

Nice that it worked! You did get me curious now: what did you add to the header?

I have edited the relevant line now, but anything that appears between this < and this > is read as html code, so…

[less than symbol] = <
[greater than symbol] = >

Aha, so approach number #1 in the options I listed earlier. Let me post this in a way that works on discourse (the trick is inserting preformated text)

<meta charset="utf-8">

Thanks Thomas - that is correct, except that you missed a / off the end (just before the >). I guess this indicates the end of the instruction, but I haven’t tried it without, so I’m not sure if this is an essential element of the code.

You’re totally right! While most versions work in every browser, adding the slash is the correct way of doing it.

<meta charset="utf-8" />