Removing Canvas after completion of Dashed Sentence

[zach]

Hello,

I’m trying to implement a self-paced reading task where different sentences are attributed to different speakers. In order to do this, I want a DashedSentence to appear on top of an image with an avatar and a speech bubble. (After the self-paced reading is complete, four images should appear for a picture verification task. This part works fine if I do a simple DashedSentence without trying to include the speech bubble image within a Canvas.)

I put the image and the DashedSentence in a Canvas. They display properly, and I can press the space bar to progress through the sentence. However, I can’t get the canvas to go a way; it just stays stuck with my image and the last word of my DashedSentence. I suspect the issue is that I’m not meeting the conditions to end the .wait() command. How can I configure the experiment so that the canvas is removed at the end of the DashedSentence by pressing the space bar?

My trial template code is as follows:

Template( "dcc1_trials.csv" ,
    row => newTrial( "experiment",
        newImage("sb1", "speech_bubble_1.png")
        ,
        newCanvas("sprcanv", 700, 700)
            .center()
            .add( 0, 0, getImage("sb1"))    
            .add( 20, 40, newController("DashedSentence", {s: row.SentenceText, display: "in place", blankText: "+"}))
                    .print()
                    .log()
                    .wait() // Things seem to hang here
                    .remove()
    ,
   // Picture verification (this part works fine)               
    newImage('imageTL' ,  row.ImageTL)
        .settings.size(200, 200)
    ,
    newImage('imageTR' ,  row.ImageTR)
        .settings.size(200, 200)
    ,
    newImage('imageBL' ,  row.ImageBL)
        .settings.size(200, 200)
    ,
    newImage('imageBR' ,  row.ImageBR)
        .settings.size(200, 200)
    ,
    newCanvas( 'myCanvas', 700, 500)
        .settings.add( 100, 25, getImage('imageTL'), 0 )
        .settings.add( 500, 25, getImage('imageBL'), 1 )
        .settings.add( 500, 275, getImage('imageBR'), 2 )
        .settings.add( 100, 275, getImage('imageTR'), 3 )
        .print()
     ,
    newSelector( 'mySelector')
        .add( getImage('imageTL') , getImage('imageBL') , getImage('imageBR') , getImage('imageTR') )
        .wait()     
        .log()
    )
    .log( "SentenceText", row.SentenceText)
    .log( "ImageTL", row.ImageTL)
    .log( "ImageTB", row.ImageTR)
    .log( "ImageBL", row.ImageBL)
    .log( "ImageBR", row.ImageBR)

)

Thanks for your help!

Zach Maher
University of Maryland, College Park

[Jeremy]

Hi Zach,

You are waiting for the Canvas element to complete, which won’t happen because Canvas elements define no events. You want to wait for the Controller element to complete instead:

newCanvas("sprcanv", 700, 700)
    .center()
    .add( 0, 0, getImage("sb1"))
    .print()
,
newController("DashedSentence", {s: row.SentenceText, display: "in place", blankText: "+"})
    .print( 20, 40 , getCanvas("sprcanv") ) 
    .log()
    .wait()
    .remove()
,
getCanvas("sprcanv").remove()

Jeremy

[zach]

This worked perfectly – thanks!!

[Author]

Posts