Reply To: DashedSentence in a PennController trial

[mrhelfrich]

Hello again,

I’ve got another question about the code you have written to display words one at a time behind an underscore mask. The items I plan on displaying have various lengths and therefore will probably wrap at least once on a participant’s screen, especially since we don’t know what resolution they will have. To try and make the text wrapping uniform across participants, I was hoping to restrict the area where the text can display to a set size in the hopes that the text would always wrap at the same position for all participants.

My attempted solution was to use a canvas element to set the dimensions for where the text is displayed, but since I know next to nothing about the code you have written, adding the dashed function as you have written it doesn’t work properly within a canvas.

Here’s a simplified version of the code I was trying.

PennController.ResetPrefix(null); 
showWord = (arrayOfWords,showIndex) => "<p>" + 
  arrayOfWords.map( (word,n) => {
    const letters = word;  
    if (n==showIndex) return "<span>"+letters+"</span>";
    else return "<span style=\'border-bottom:solid 1px black;\'><span style='visibility: hidden;'>"+letters+"</span></span>";
  } ).join(" ") + "</p>"; 

dashed = (name, sentence) => {
    const words = sentence.split(" ");  
    return [  
        [ newText(name,showWord(words)).print() ], 
        ...words.map( (word,index) => [
            newKey(name+"-"+index+"-"+word," ").log().wait(), 
            getText(name).text( showWord(words,index) ) 
        ]),
        [ newKey(name+"-last"," ").log().wait() ]
    ].flat(1);
}
newTrial("experiment",
    newCanvas("ItemDisp",700,300)
        .css("border","solid 1px black").css("font-size","24px") 
        .add(0,0,...dashed("SampleItem","Test item to verify that the text wraps within the border, doesn't break during a word, still looks readable." +
        "The actual border is temporary and will not appear during the actual experiment so text that touches it is fine.")),
    
    getCanvas("ItemDisp")
        .print().wait()
)

If using a canvas doesn’t work, is there some way to modify the dashed function to limit the length of the displayed text before it wraps? Right now it wraps when it runs out of space in the window so that will vary between displays and window sizes.

The basic effect I am trying to end up with is this:

newTrial("experiment",
    newCanvas("ItemDisp",700,300)
        .css("border","solid 1px black").css("font-size","24px")
        .add(0,0,newText("SampleItem","This text needs to be masked and displayed one " +
        "word at a time like it is when using the dashed function.  Also the black border " +
        "is just temporary to see what the dimensions are, it will be removed after testing.")),
    
    getCanvas("ItemDisp")
        .print().wait()
)

Thanks again for all of your help,
Max