PennController for IBEX › Forums › Support › Translation for the explanatory messages of eye-tracking module
Tagged: eye-tracking
- This topic has 6 replies, 2 voices, and was last updated 2 years, 11 months ago by
Carlos.
-
AuthorPosts
-
September 17, 2021 at 1:57 am #7271
Carlos
ParticipantI 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?
September 17, 2021 at 12:31 pm #7272Jeremy
KeymasterHello,
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 (secondset
command)Jeremy
September 18, 2021 at 2:24 am #7273Carlos
ParticipantHello, 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
September 18, 2021 at 9:14 pm #7279Jeremy
KeymasterHello 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 fileJeremy
September 19, 2021 at 8:19 am #7282Carlos
ParticipantHi 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
September 25, 2021 at 5:43 am #7312Carlos
ParticipantHi 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, 11 months ago by
Carlos. Reason: Add where the messages can be found
September 27, 2021 at 12:29 am #7314Carlos
ParticipantHi 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
-
This reply was modified 2 years, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.