Reply To: words showing on separate lines in self-paced rading

PennController for IBEX Forums Support words showing on separate lines in self-paced rading Reply To: words showing on separate lines in self-paced rading

#7163
Jeremy
Keymaster

Dear August,

What you can do is execute some javascript immediately after you print your DashedSentence to wrap your sentences in an element that won’t allow linebreaks:

newController("DashedSentence", {s : "You have just begun reading the sentence. You have just finished reading."})
    .print()
,
newFunction(()=>{
    const container = document.querySelector(".DashedSentence-sentence");
    const sentences = [[]];
    container.childNodes.forEach(n=>{
        if (sentences[0].length || n.nodeName!="#text")
        sentences[0].push(n);
        if ($(n).text() && $(n).text().match(/[.!?]$/))
            sentences.unshift([]);
    });
    while (sentences.length){
        const sentence = sentences.pop();
        if (sentence.length===0) continue;
        const span = document.createElement("SPAN");
        span.style['margin-right'] = "0.5em";
        span.style['white-space'] = "nowrap";
        span.append(...sentence);
        container.append(span);
    }
    container.style.display = 'flex';
    container.style['flex-wrap'] = 'wrap';
}).call()
,
getController("DashedSentence")
    .wait()
    .remove()

Notice the sequence [.!?], which defines the characters that you consider to constitute sentence delimiters. Feel free to remove or add characters to that (eg. ;)

Jeremy