Translation for the explanatory messages of eye-tracking module

[Carlos]

I would like to conduct an eye-tracking experiment in some languages other than English, so I would like to change the explanation/messages which appear when the calibration starts.

Specifically I want to translate the following messages:

I’m ready. Start calibration (button)

It looks like we were not able to precisely calibrate the tracker:

You calibration score is 58 and you need at least 75

Here are a few tips to help you better self-calibrate:

– try adjusting your webcam based on the video in the top-left corner.

– if you use an external webcam, make sure it is fixed to the top of your screen.

– try raising your screen so as to align your webcam with your eyes

– make sure no one is standing next to you.

– make sure you are not wearing eyeglasses reflecting ambiant light.

– make sure the algorithm detects your face (it should appear green).

– make sure there is enough ambient light for face-detection.

– make sure you follow your mouse pointer with your eyes.

– make sure you keep looking at the middle button until the end.

Retry (button)

How should I modify these messages? Where are these messages written?

[Jeremy]

Hello,

All this is fetched from a distant page: you won’t find its content locally in your project on the PCIbex Farm

As a general solution, you can create a new .js file in your project’s Scripts folder, with this at the top:

function textNodesUnder(el){
  var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode()) a.push(n);
  return a;
}
const targetNode = document.documentElement;
const config = { attributes: false, childList: true, subtree: true };
const replaceTexts = new Map();
const callback = function(mutationsList, observer) {
    if (!document.body) return;
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            const textNodes = textNodesUnder(document.body);
            var key, keys = replaceTexts.keys();
            while ((key=keys.next()) && !key.done)
                for (let node of textNodes){
                    if (node.textContent)
                        node.textContent = node.textContent.replace(key.value, replaceTexts.get(key.value));
                }
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

Then you can list texts to replace below that piece of code this way:

replaceTexts.set(
    "It looks like we were not able to precisely calibrate the tracker:",
    "Il semble que nous n'avons pas pu calibrer le tracker précisément"
).set(
    /You calibration score is (\d+) and you need at least (\d+)/,
    "Votre score est de $1 et vous avez besoin d'au moins $2"
)

As you can see, you can pass a simple string (first set command) or a regular expression (second set command)

Jeremy

[Carlos]

Hello, Jeremy,

Thank you for your reply. I tried your code, and successfully replaced the original English texts with texts in various other languages (e.g. in Japanese; 計測には，機器調整スコアが最低$2点必要ですが，現在のスコアは$1点です。). However, I failed to modify the style of <p> tags (e.g. I could not replace <p> with <p style='width:30em'>). Is it possible to modify any HTML tags using your code, or should I directly rewrite PennElement_eyetracker.js and place it in script folder of my project?

replaceTexts.set(
    "<p>It looks like we were not able to precisely calibrate the tracker:",
    "<p style='width:30em'>Il semble que nous n'avons pas pu calibrer le tracker précisément"
).set(
    /You calibration score is (\d+) and you need at least (\d+)/,
    "計測には，機器調整スコアが最低$2点必要ですが，現在のスコアは$1点です。"
)

Carlos

[Jeremy]

Hello Carlos,

My code only targets text nodes, you cannot target HTML tags like <p> with it.

At this point editing PennController.js (in your project’s Modules folder) might be the way to go. What I said above is actually not true: all the text is in that file (PennController.js), the only content that’s fetched from a distant server are the illustrate images. You can look for ambient in PennController.js and you’ll find the section you need to edit in the file

Jeremy

[Carlos]

Hi Jeremy,

I modified PennController.js as you suggested, and I successfully changed the texts as I wanted! I am grateful for your help and suggestion!

Carlos

[Carlos]

Hi Jeremy,

Related to the topic, I would like to translate the following messages, which do not appear in PennController.js. Where are they written?

Sending results to the server…/

(defined in undefined (PennController) in Debug’s Sequence tab)

The results were successfully sent to the server. Thanks!

(defined in null (__SendResults__) in Debug’s Sequence tab)

Carlos

• This reply was modified 2 years, 7 months ago by Carlos. Reason: Add where the messages can be found

[Carlos]

Hi Jeremy,

I found that the messages were defined in the original Ibex commands, and that we can change them following the commands described here: https://github.com/addrummond/ibex/blob/master/docs/manual.md#miscellaneous–options

Sorry for my silly question…

Carlos

[Author]

Posts