Shuffling audio and text elements consistently

[laiamt]

Hi Jeremy,

I’m trying to create an experiment in which two audio files are played and two sentences are displayed on the screen. I would like to shuffle the items, so that they are played/displayed in both orders. However, I’d like to keep the audio + text element: that is, if sentence 1 is played first, then sentence 1 should be displayed first (to the left), and I’m not sure how to achieve this.

The code for my attempt is below. But I have two problems:
1. The sentences are not visible until the first audio has finished to play. (And If I remove the first wait(), then the two audios play simultaneously).
2. While the sentences get shuffled, the audios do not

I would be very grateful for any help.

Best,
Laia

newTrial("practice",

    newAudio("audio1", "1fishSquareTank.mp3")
        .play()
        .wait(),
    
    newAudio("audio2", "2fishRoundTank.mp3")
        .play(),

    newCanvas("frases", 800, 400)
    .add(   0,   0, newText("sentence1"  , "The fish swims in a tank which is perfectly square."  ) )
    .add( 400,   0, newText("sentence2", "The fish swim in a tank which is perfectly round.") )
    .print(),
    
 newSelector("choice")
   .add( getText("sentence1") , getText("sentence2")  )
   .shuffle()
   .log()
   .wait(),
      
      getAudio("audio1")
        .wait("first"),   

    getAudio("audio2")
        .wait("first")
)

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

[Jeremy]

Hi Laia,

You could inject some plain javascript into your code to conditionally reference the first vs the second sentence:

newTrial("practice",
    oneFirst = (Math.random()>=0.5)
    ,
    newAudio("audio1", "1fishSquareTank.mp3"),
    newAudio("audio2", "2fishRoundTank.mp3"),
    newText("sentence1", "The fish swims in a tank which is perfectly square."),
    newText("sentence2", "The fish swim in a tank which is perfectly round.")
    ,
    newCanvas("frases", 800, 400).print()
    ,
    getText(oneFirst?"sentence1":"sentence2").print(  0,0,getCanvas("frases")),
    getAudio(oneFirst?"audio1":"audio2").play().wait()
    ,
    getText(oneFirst?"sentence2":"sentence1").print(400,0,getCanvas("frases")),
    getAudio(oneFirst?"audio2":"audio1").play().wait()
    ,
    newSelector("choice")
        .add( getText("sentence1") , getText("sentence2")  )
        .log()
        .wait()
)
.log("startWith", oneFirst?1:2) // log which sentence came first

Jeremy

[laiamt]

Hi Jeremy,
Thanks a lot!
This works perfectly. However, I’ve tried to minimally change your code to embed it in a template. When I do this, the sentences get printed twice; the first time vertically and not necessarily in the appropriate order. In addition, all the items of the trial are played in the same order (either all audio1 before all audio2, or the other way round).
I’ve tried removing print() after newCanvas(“frases”, 800, 400), but then the order of the audios and texts is not always consistent. Any tips on how to solve this? Apologies if this is too much to ask.

Link: https://farm.pcibex.net/r/sZHLPW/

Template("items.csv", row =>
newTrial("practice1,
         newText("context_practice1",row.context)
        .print()
,
    newButton("go", "go")
       .print()
        .wait()
        ,

    oneFirst = (Math.random()>=0.5)
    ,
    newAudio("audio1", row.file_oi),
    newAudio("audio2", row.file_eh),
    newText("sentence1", row.sentence_oi),
    newText("sentence2", row.sentence_eh)
    ,
    newCanvas("frases", 800, 400).print() //I've tried removing this print()
    ,
    getText(oneFirst?"sentence1":"sentence2").print(  0,0,getCanvas("frases")),
    getAudio(oneFirst?"audio1":"audio2").play().wait()
    ,
    getText(oneFirst?"sentence2":"sentence1").print(400,0,getCanvas("frases")),
    getAudio(oneFirst?"audio2":"audio1").play().wait()
    ,
    newSelector("choice")
        .add( getText("sentence1") , getText("sentence2")  )
        .log()
        .wait()
)
.log("startWith", oneFirst?1:2) // log which sentence came first
)

[Jeremy]

Hi Laia,

The code you posted in your message works perfectly well (except for the missing " after "practice1) but the code in your project has additional commands. In particular, it has this: defaultText.cssContainer({"margin-top":"1em", "margin-bottom":"1em"}).print(). This will silently add .print() right next to any newText command, which is why you see both sentence1 and sentence2 appear below each other as soon as they are created. Just remove .print(): defaultText.cssContainer({"margin-top":"1em", "margin-bottom":"1em"})

The audios are not all played in the same order: I just had a test run where the first trial played audio2 then audio1, and the second trial played audio1 then audio2. Granted, there are only three trials, so it’s not unlikely that some test runs will play all three pairs of audios in the same order, just by chance

Jeremy

[laiamt]

Ah, I see, thank you so much!

laia

[Author]

Posts