words showing on separate lines in self-paced rading

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

This topic contains 3 replies, has 2 voices, and was last updated by Jeremy Jeremy 2 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #7160
    Avatar
    August
    Participant

    Dear Jeremy:

    I’m setting up a self-paced reading experiment on the new PCIbex Farm. When I have a long sentence, the words (dotted lines) in the same sentence are separated on two lines. Is there any way to make all the words showing on the same line, without changing the font of the text?

    Thanks so much!

    Best wishes,
    August

    • This topic was modified 2 months, 1 week ago by Avatar August.
    #7163
    Jeremy
    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

    #7165
    Avatar
    August
    Participant

    Dear Jeremy:

    Thanks so much for your quick response! This is super helpful!

    I have an additional question. Is it possible to change the width in PennController.css in Aesthetics in PCIbex, so that there can be more words in the same line? I did the following changes, copied below. Are these fine operations in PCIbex Farm?

    .PennController {
        width: 60em !important; /* controls the witdth of the content area */
        /* Original value: width: 40em*/
        margin-left: calc(50vw - 30em); /* aligns the content area's left edge with the vertical center of the page */
        /* Original value: calc(50vw - 20em)*/
    }

    Thanks!

    Best,
    August

    #7166
    Jeremy
    Jeremy
    Keymaster

    Yes, sure, try it and keep it like this if you like it!

    Jeremy

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.