Survey Plugin - Translation of errors #3642
Description
Discussed in #3641
Originally posted by BaggioMarco January 7, 2026
Hello,
I'm using the survey plugin to generate surveys (latest version).
When testing the survey outside jsPsych, using surveyjs, the translation is working for the entire survey (questions, error messages, buttons).
Here the example via surveyjs
However when running the same survey via jsPsych, the translations of the errors and of the buttons is not updated, and it is reverted to the default english . Only the translation of the questions is correctly updated (see below).
My question is: how to make sure that everything is translated, including buttons and error messages, and not only the questions?
Here the entire code for replicating the issue, would be really appreciated to know how to edit this code to make translations updating also to buttons and error messages, thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/jspsych@8.2.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.1.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@4.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.2.2/css/jspsych.css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@4.0.0/css/survey.min.css">
</head>
<body></body>
<script>
function generateDocsDemoTimeline(timeline, setup_timeline) {
let setup;
if (setup_timeline) {
setup = {
timeline: setup_timeline,
};
}
const start = {
type: jsPsychHtmlButtonResponse,
stimulus: "",
choices: ["Run demo"],
};
let run = 0;
let trial = {
timeline: timeline,
data: {
run: () => {
return run;
},
},
};
const show_data = {
type: jsPsychHtmlButtonResponse,
stimulus: `
<p style="margin-bottom:0px; font-weight: bold;">Trial data:</p>
<pre style="margin-top:0px; text-align:left; font-size:14px; line-height:1.3em;"></pre>`,
on_load: function () {
const trial_data = jsPsych.data.get().filter({ run: run }).ignore("run").values();
const trial_json = JSON.stringify(trial_data, null, 2);
jsPsych.getDisplayElement().querySelector("pre").innerText = trial_json;
},
choices: ["Repeat demo"],
};
const trial_loop = {
timeline: [trial, show_data],
loop_function: function () {
run++;
return true;
},
};
if (setup_timeline) {
return [setup, start, trial_loop];
} else {
return [start, trial_loop];
}
}
const jsPsych = initJsPsych();
const trial = {
type: jsPsychSurvey,
survey_json:
{
"locale": "de",
"pages": [
{
"name": "page1",
"title": "TEST",
"elements": [
{
"type": "radiogroup",
"name": "question1",
"isRequired": true,
"choices": [
{
"value": "Item 1",
"text": {
"de": "Deutsch item 1",
"default": "English item 1"
}
},
{
"value": "Item 2",
"text": {
"de": "Deutsch item 2",
"default": "English item 2"
}
}
]
}
]
}
],
"headerView": "advanced"
}
,
};
const timeline = [trial];
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>
```</div>