Translation for the explanatory messages of eye-tracking module

PennController for IBEX Forums Support Translation for the explanatory messages of eye-tracking module

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by Avatar Carlos 3 weeks, 6 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #7271
    Avatar
    Carlos
    Participant

    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?

    #7272
    Jeremy
    Jeremy
    Keymaster

    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

    #7273
    Avatar
    Carlos
    Participant

    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

    #7279
    Jeremy
    Jeremy
    Keymaster

    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

    #7282
    Avatar
    Carlos
    Participant

    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

    #7312
    Avatar
    Carlos
    Participant

    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 4 weeks, 1 day ago by Avatar Carlos. Reason: Add where the messages can be found
    #7314
    Avatar
    Carlos
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.