Feedback after selecting an image

[Elise]

Hi,

I am programming a reading experiment. Participants read a sentence and then they see two pictures. They should choose one of pictures with the “F” or “J” key. For the practice trials, I want to implement feedback. Here is how I tried it:

PennController.Template("Materials_Practice.csv",
    row => ["dashed_practice",
    "DashedSentence", {s: row.Sentence},
    "PennController", PennController(
    newImage("CoveredPicture", "covered.png")
        .settings.size(500,500)
        ,  
    newImage("1", row.Picture)
        .settings.size(500,500)
        ,
    newText("leftLabel","(F)")
        ,
    newText("rightLabel","(J)")
        ,
    newCanvas(700,500)
        .settings.add(   350 , 0 , getImage("CoveredPicture"))
        .settings.add( -250, 0 , getImage("1") )
        .print()
        ,
    newCanvas(500,500)
        .settings.add(0,500, getText("leftLabel"))
        .settings.add(600,500, getText("rightLabel"))
        .print()
        ,
    newKey("answer","FJ")
        .wait()
    ,
    newText("positive feedback", "Correct!")    
    ,
    newText("negative feedback", "Wrong...")
    ,
    PennController(getKey("answer")    
        .test.pressed("F")
        .success( 
            getText("positive feedback")
                .print()
        )
        .failure(
            getText("negative feedback")
                .print()))
      )]),

What happens is, that the experiment is loading forever and no error message as usual appears.
What is my fault or how do I implement feedback in another way?

Thanks!

Elise

[Jeremy]

Hi Elise,

The problem is coming from the PennController command that you call from inside another PennController command, just before your getKey("answer"). It simply shouldn’t be there. Try again with the fixed script below:

PennController.Template("Materials_Practice.csv",
    row => ["dashed_practice",
    "DashedSentence", {s: row.Sentence},
    "PennController", PennController(
    newImage("CoveredPicture", "covered.png")
        .settings.size(500,500)
        ,  
    newImage("1", row.Picture)
        .settings.size(500,500)
        ,
    newText("leftLabel","(F)")
        ,
    newText("rightLabel","(J)")
        ,
    newCanvas(700,500)
        .settings.add(   350 , 0 , getImage("CoveredPicture"))
        .settings.add( -250, 0 , getImage("1") )
        .print()
        ,
    newCanvas(500,500)
        .settings.add(0,500, getText("leftLabel"))
        .settings.add(600,500, getText("rightLabel"))
        .print()
        ,
    newKey("answer","FJ")
        .wait()
    ,
    newText("positive feedback", "Correct!")    
    ,
    newText("negative feedback", "Wrong...")
    ,
    getKey("answer")    
        .test.pressed("F")
        .success( 
            getText("positive feedback")
                .print()
        )
        .failure(
            getText("negative feedback")
                .print()
        )
    ,
    newButton("continue", "Next")
        .print()
        .wait()  // You need to wait before going to the next trial
    )]
)

Jeremy

[Elise]

Hi Jeremy,

thank you for your help!

The problem now is, that I can’t press any key anymore. If I comment out that part:

newButton("continue", "Next")
        .print()
        .wait()  // You need to wait before going to the next trial

I can select a picture, but the next trial starts immediately. I suppose that the feedback is there, but I can’t see it.
Do I have to implement the .wait command somewhere else?

Elise

[Jeremy]

The problem is coming from the Canvas elements: PennController doesn’t understand that you specified the dimension of an anonymous element, instead it takes the first number to be the element’s id (in your case, 700 for the first Canvas, 500 for the second one). As a result the second number is interpreted as the Canvas’ width instead of its height, and so its height is null, making the feedback and button appear behind the Canvas (= under a 0px tall element). Give a name to each of you Canvas and the problem should go away (I would also suggest resizing your Canvas, they are very big right now)

Jeremy

[Elise]

Hey Jeremy,

thanks for your reply. You were right, the button and the feedback massage were behind the picture. But the feedback massage “Wrong” is printed without pressing any key. I took the pictures and the dashed sentence out and it is still the case that the feedback massage “Wrong” is printed although no key was pressed. I would be very thankful if you could help fixing this problem.

Elise

[Jeremy]

Hi Elise,

There must be something else going on in your script, because when I try the script above, neither “wrong” nor “correct” appears on the screen until I press the corresponding key. Do you have any print command elsewhere, maybe called on defaultText? Do you use the print command on the wrong-feedback element somewhere ahead of the key test?

Jeremy

[Elise]

Hi Jermey,

last question, I promise!

Is it possible to implement response feedback with a selector element? I implemented a column (“Target”) in my csv that says what the target response (CoveredPicture / VisualPicutre) is. This is my code so far:

PennController.Template( "Filler_orig.csv" ,
    row => ["filler_orig",
        "DashedSentence", {s: row.Sentence},
        "PennController", PennController(
         defaultImage.size(400,400)   
    ,
    newImage("CoveredPicture", "covered.jpg")
        ,  
    newImage("VisualPicture", row.Picture)
       ,
    newCanvas(800,400)
        .add(   -25 , 0 , newCanvas("left" , 400, 400) )  
        .add( 425 , 0 , newCanvas("right", 400, 400) )  
        .print()
        .settings.log()
        ,
    newCanvas(50,50)
        .settings.add(-75,-200, newText("(F)"))
        .settings.add(850,-200, newText("(J)"))
        .print()
        ,
    newVar("toggle", 1)  // Initialize with value 1
        .global().set( v=>v-1 ).test.is(1)  
        .success(
            getImage("CoveredPicture").print(0,0,getCanvas("left")),  
            getImage( "VisualPicture").print(0,0,getCanvas("right"))   
        )
        .failure(
            getImage("CoveredPicture").print(0,0,getCanvas("right")),
            getImage( "VisualPicture").print( 0,0,getCanvas("left") )
        )
        ,
    newSelector()
        .settings.disableClicks()
        .settings.add( getImage("CoveredPicture") , getImage("VisualPicture") )
        .settings.keys(          "F"    ,          "J"   )
        .settings.log()
        .wait()
        )
        .log('Condition', row.Condition)
        .log('Item', row.Item)
])

I tried to work with the Var element to save the participants response, but I don’t know how to test if response and target response matches. .success / .failure are just applicable to specific elements right?

Best,
Elise

[Jeremy]

Hi Elise,

Yes, the logic is exactly the same as with the Key element, you just test for the selected item using .test.selected:

Template( "Filler_orig.csv" ,
    row => ["filler_orig",
        "DashedSentence", {s: row.Sentence},
        "PennController", newTrial(
    defaultImage
        .size(400,400)   
        ,
    newImage("CoveredPicture", "covered.jpg")
        ,  
    newImage("VisualPicture", row.Picture)
       ,
    newCanvas(800,400)
        .add(   -25 , 0 , newCanvas("left" , 400, 400) )  
        .add( 425 , 0 , newCanvas("right", 400, 400) )  
        .print()
        .settings.log()
        ,
    newCanvas(50,50)
        .settings.add(-75,-200, newText("(F)"))
        .settings.add(850,-200, newText("(J)"))
        .print()
        ,
    newVar("toggle", 1)  // Initialize with value 1
        .global().set( v=>1-v ).test.is(1) // This should be 1-v, I think
        .success(
            getImage("CoveredPicture").print(0,0,getCanvas("left")),  
            getImage( "VisualPicture").print(0,0,getCanvas("right"))   
        )
        .failure(
            getImage("CoveredPicture").print(0,0,getCanvas("right")),
            getImage( "VisualPicture").print( 0,0,getCanvas("left") )
        )
        ,
    newSelector()
        .settings.disableClicks()
        .settings.add( getImage("CoveredPicture") , getImage("VisualPicture") )
        .settings.keys(          "F"    ,          "J"   )
        .settings.log()
        .wait()
        .test.selected( getImage(row.Target) )
        .success( newText("Good job!").print() )
        .failure( newText("Nope!").print() )
        ,
    newButton("Next").print().wait()
    )
    .log('Condition', row.Condition)
    .log('Item', row.Item)
])

NOTE: I replaced the v-1 bit with 1-v as it makes more sense to me (you want the toggle Var to alternate between 1 and 0, not to tend towards -inifinity)—sorry if that was my mistake from a previous code

[Elise]

Thanks, the feedback is now there:)

Since I see a frame when selecting the image now, I noticed that the keys are not related to the position of the images anymore. They seem to be related to the image (for example always when I press the “J” key, the Covered Picture is chosen, no matter in which position it is and the other way around). I think that this is coming from the counterbalancing of the pictures.

Could you show me how to do the counterbalancing in the table or is it easy to solve this issue by changing a bit of code?

Best,
Elise

[Jeremy]

Good catch about the mismatch between the keys and the images’ positions

Moving the counterbalancing to the table is actually simpler than what you currently have: just add a pair of columns that you name leftPicture and rightPicture (for example) and simply alternate between “CoveredPicture” and “VisualPicture.” Then you can get rid of the whole “toggle” Var chunk and replace it with something like getCanvas("left").add( 0 , 0 , getImage(row.leftPicture) ) (same thing for “right”)

And apply the same logic when adding your images to your selector: .add( getImage(row.leftPicture) , getImage(row.rightPicture) ) (no need to change anything about the keys command then)

Does that make sense?

Jeremy

[Elise]

Yes, thank you so much for all your help!!!

Best,
Elise

[Author]

Posts