Displaying texts in columns

[laiamt]

Hi, Jeremy,

I’d like to do an experiment in which participants first see a sentence and then two possible contexts displayed next to each other. I’m not sure how to do this. I tried putting the two contexts on a canvas, but the first one is not displayed as a column and overlaps with the second one.

My attemp:

newTrial("practice1",
         newText("sentence_practice1","Has tret les cadires?")
        .left()
          .cssContainer({"margin":"1em"})
       .print(),

    oneFirst = (1),

    newText("sentence1", "La Txell entra a l'escola, on l'està esperant en Rashid. A la classe no hi ha cadires. La Txell li diu al Rashid:"),
    newText("sentence2", "La Txell entra a l'escola, on l'està esperant en Rashid. La classe està plena de cadires. La Txell li diu al Rashid:")
    ,
        newCanvas("frases", 800,400).print(),

    getText(oneFirst?"sentence1":"sentence2").print( 20,0,getCanvas("frases")),
    getText(oneFirst?"sentence2":"sentence1").print(350,0,getCanvas("frases")),

    newSelector("choice")
        .add( getText("sentence1") , getText("sentence2")  )
        .log()
        .wait()
)

Demonstration link: https://farm.pcibex.net/r/YjeGnJ/

Any help would be appreciated. Thanks!
Laia

[Jeremy]

Hi Laia,

Your code actually works pretty well already, the only problem is that the text on the left overflows onto the text on the right. This is because you didn’t explicitly set a width to the text element, so it inherits the width of its container, the Canvas element

Just give an explicit width to your Text elements and you’ll be good:

getText(oneFirst?"sentence1":"sentence2").size(300,"auto").print( 20,0,getCanvas("frases")),
getText(oneFirst?"sentence2":"sentence1").size(300,"auto").print(350,0,getCanvas("frases")),

Jeremy

[laiamt]

Thanks!

[Author]

Posts