Hi Leo,
I see, it’s actually impressive that participants can perform above average using a translator! Good to know, then I guess it would be worth adding a note asking participants not to use such tools when taking the experiment (some participants might be well-intentioned and not realize that it could be detrimental to data quality).
There is no straightforward implementation of the HTML canvas method, as canvas require you to code-draw their content in javascript. So you would need to add a canvas element onto the page somehow and then fill it using some javascript code. You can pass HTML to basically any string of a PennController element that ends up being printed, for example Text elements. And you can use newFunction to create (and then call) a javascript function. So here is a basic example (assuming you are inside a Template function, using row.Sentence to refer to the Sentence cell):
newText("canvasText", '')
.print()
,
newFunction(()=>{
let width = $(".PennController-canvasText-container").width();
let cvs = document.getElementById("myCanvas");
let ctx = cvs.getContext("2d");
ctx.font = '36px serif';
let words = row.Sentence.split(' '), lines = [], line = [];
while (words.length){
line.push(words.shift());
if (ctx.measureText(line.join(' ')).width >= width){
words = [line.pop(), ...words];
lines.push(line);
line = [];
}
}
if (line.length)
lines.push(line);
cvs.width = width;
cvs.height = 40 * lines.length;
ctx.font = '36px serif'; // Needed for re-calculating px after resizing cvs
for (let n = 0; n < lines.length; n++)
ctx.fillText(lines[n].join(' '), 1, 38*(n+1));
}).call()
As you can see it's clearly not as elegant and concise as newText("blablabla").print(): because you're printing the text as an image, you have to manually calculate sizes and print each line, something browsers automatically do for you when the text is printed normally onto the page. But this code is still very basic: it will calculate sizes and positions based on what the page looks like at the exact moment when the Function is called, so it won't automatically adjust to any resizing after that. But at least it should be functional and definitely prevent automatic translation from extensions (again, the text is just an image---the extension would need a neural network or something to read the image).
Let me know if you have questions
Jeremy