Reply To: DashedSentence in a PennController trial

[Jeremy]

Hi,

You can actually reuse DashedSentence’s CSS styling to rewrite a simplified version of dashed:

EDIT: I forgot about inserting manual linebreaks with <br>, so the code is slightly more complex now

dashed = (name,sentence) => [
    newText(name,"").css({display:'flex','flex-direction':'row','flex-wrap':'wrap','line-height':'2em','max-width':'100%'}).print()
    ,
    ...sentence.split(/[\s\t<>]+/).map( (w,i) => (w=="br"?
            newText("").css("width","100vw").print(getText(name))
            :
            newText(name+'-'+i, w.replace(/([^.,?:;!]+)/g,"<span class='DashedSentence-ospan'><span class='DashedSentence-ispan'>$1</span></span>"))
                .css("margin","0em 0.2em")
                .print(getText(name))
    ))
    ,
    ...sentence.split(/[\s\t<>]+/).map((w,i)=>(w!="br"?[newKey(i+"-"+w," ").log().wait(),getText(name+'-'+i).text(w)]:null))
]

The important part for you in the code above is [^.,?:;!]: it’s a regular expression that will match any character that is not in the list .,?:;!. All those non-punctuation characters will be wrapped in two span elements: the inner one is invisible and the outer one adds an underline

Use it like this:

newTrial(
    dashed("myDashed",  "This is a test. This is the second, longer part of the test!<br>\
                         And now this is a third part, just to test whether it will automatically insert a linebreak")
    ,
    newKey(" ").wait()
    ,
    getText("myDashed").remove()
    ,
    newButton("Finish").print().wait()
)

Jeremy