Prevent long stimuli from splitting in two lines

[DariaBelova]

Hi!
In my experiment I have quite long sentences and some of them split in two lines, but this is very unfortunate. Could you please provide me some ways of keeping them in one line? I tried to change the font size with .css command but it didn’t help, the text doesn’t change, but maybe I’m doing something wrong. Here is the demonstration link: https://farm.pcibex.net/r/RQqgmh/
Thank you!

[Jeremy]

Hi,

You could use .css("white-space", "nowrap")

Also, I see in your code that you have defaultText.css("font-size", "80") but then you don’t create any Text element, instead you use Controller elements to display content: the css command won’t affect those elements. You can try calling .css("font-size", "80") on each Controller element

Besides, you might want to edit Aesthetics/PennController.css to change width: 40em !important; to width: 60em !important; for example (you would then need to change margin-left: calc(50vw - 20em); to margin-left: calc(50vw - 30em); to keep the content centered)

Jeremy

[DariaBelova]

Hi Jeremy, thank you very much for your help!

I tried to use .css(“white-space”, “nowrap”) and it worked for the DashedSentence controller, but as soon as I change the controller to AcceptabilityJudgment (I also checked DashedAcceptabilityJudgment but it’s the same) the sentences continue to split. Am I doing something wrong? Here is the code I’m using:

newController("AcceptabilityJudgment", {
        s: row.sentence,
        as: ["1", "2", "3", "4", "5", "6", "7"],
        presentAsScale: true,
        leftComment: "Плохо", rightComment: "Хорошо",
        timeout: 10000
    		})
    		.css("white-space","nowrap")
    		.center()
                .print()
                .wait()
                .log()
               .remove()

Sincerely,
Daria

[Jeremy]

Hi Daria,

You can remove .css("white-space","nowrap") and add this to Aesthetics/global_main.css instead:

.PennController-nowrap .FlashSentence-flashed-sentence, .PennController-nowrap .DashedSentence-sentence {
    white-space: nowrap;
}

This will apply the CSS rule to the sentence in your controller as long as you name the element "nowrap":

newController("nowrap", "AcceptabilityJudgment", {
    s: row.sentence,
    as: ["1", "2", "3", "4", "5", "6", "7"],
    presentAsScale: true,
    leftComment: "Плохо", rightComment: "Хорошо",
    timeout: 10000
})
    .center()
    .print()
    .wait()
    .log()
    .remove()

Jeremy

[DariaBelova]

Thank you very much, Jeremy, it worked!

[Author]

Posts