Text Wrapping

elinora18

Hi,

I have an experiment with a JavaScript backend and I'm having issue with text wrapping. Specifically, I have a sketchpad item which presents a sentence from a list. That sentence is defined as variable that is randomly selected on each trial from a CSV file. Some of the sentences are a bit long and are not getting wrapped, so some of the words do not appear on the screen. I chose a full screen setting, which should ideally work on a variety of screen sizes since that experiment will be run online.

Any advice on text wrapping would be helpful!

Best wishes,

Elinor

Fab

Hi @elinora18,

The problem you're describing is one of the limitations of OSWeb, but it can be fixed with a fairly simple method.

To display longer text that wraps correctly on a sketchpad in OpenSesame with OSWeb, you can use a simple JavaScript code, first to declare a wrapping function at the onset of your task (this is done at the very beginning of your task), and then inside the trial sequence (in its prepare phase) to transform the text into one that includes line breaks. Where these line breaks occur depends on how much width you want the text to be. That will of course depend on the font size you use and the dimension of the screen you set your experiment to use.

Here is the code to insert at the onset of you task, inside a javascript_inline object:

// Define the wrapText function
// This is the function you'll be calling'
function wrapText(text, maxLineLength) {
let words = text.split(' ');
let lines = [];
let currentLine = [];

words.forEach(word => {
let currentLength = currentLine.join(' ').length + word.length + 1;
if (currentLength <= maxLineLength) {
currentLine.push(word);
} else {
lines.push(currentLine.join(' '));
currentLine = [word];
}
});

if (currentLine.length > 0) {
lines.push(currentLine.join(' '));
}

return lines.join('\n');
}

Here is the code to use in the prepare phase of the rial sequence in which your text will be presented:

// Get the text from the variable
var text = vars.my_text;

// Wrap the text with a maximum line length of 50 characters
var wrappedText = wrapText(text, 50);

// Store the wrapped text back into a variable
vars.wrapped_text = wrappedText;

In that code, you'll see a "50" value. This is the number of characters you want each line of text to have on the sketchpad. You can change this value to whatever works well in your task.

I attach a little expample with sentences of increasing length.

Hopefully this make sense and you'll easily be able to transfer it to your own task.

WrappingtextinOSWeb.osexp

Hope this helps.

Best,

Fabrice.

elinora18

Hi @Fab ,

The scripts worked perfectly! Thanks so much!

Best,

Elinor