Reply To: Key press highlights wrong image

PennController for IBEX Forums Support Key press highlights wrong image Reply To: Key press highlights wrong image

#5242
Jeremy
Keymaster

Hello Janina,

There are a few issues with the way you use the Selector element.

A Selector element is a purely non-visual element in and of itself, and it is meant to group other elements from the trial, which are displayed on the page. The reason you want to group elements is to represent a multiple-choice selection. In your case, your multiple-choice selection should be between two pictures: the Image element named one and the Image element named two. So these two elements should be the only ones you add to your Selector element: they are the only two possible answers. Which means you shouldn’t add the Audio element to the Selector: the Audio element is not a sensible answer (this sentence doesn’t even make much sense).

The only time when the Selector element affects display (besides making an element clickable) is when you use shuffle. Remember, your script is evaluated in the order in which you read it, that is to say from left to right and from top to bottom. The effect of the command shuffle is to randomly switch the positions of the elements added to the Selector up to that point in the script, or to put it another way, so far in the reading. In your script, the only element that was added to the Selector when shuffle is evaluated/read is a (non-displayed) Audio element, so it has no practical effect.

It also matters crucially in which order you add the elements to a Selector when it comes to the keys command. Much like the shuffle command, the keys command looks up the elements that were added to the Selector up to that point in the script, and in the order they were added. In your script, at the point where you keys commands are evaluated, the Selector element always contains three elements: a (non-displayed) Audio element, the Image element named one and the Image element named two. Note that you add one before two in both your Template blocks, which means that as far as the script is concerned, the Image element named two will always be the Selector’s last element when it reaches keys, ie. its third element (after the Audio element and the Image element one). The first key that you pass is associated with the first element and the second key that you pass is associated with the second element. So effectively, your first key (F) will always be associated with the Audio element and you second key (J) will always be associated with the Image element named one. Because you print that Image element to the right of you Canvas the first time, a keypress on J will highlight the right image the first time, and because you print that Image element the left of your Canvas the second time, a keypress on J will highlight the left image the second time.

I’m also unclear on why you added multiple log commands on the Selector element. Here is a revision of your script that I think should accomplish what you want:

Template( "Template_practice.csv", variable => 
  newTrial("practice1",    
    newAudio("AudioFile",variable.AudioFile)
        .play()
        .log()
    ,
    newImage("two", variable.LeftImage)
        .size(200,200)   
    ,
    newImage("one", variable.RightImage)
        .size(200,200)
    ,
    newCanvas(450,200)
        .add(   0 , 0 , getImage("two") )
        .add( 250 , 0 , getImage("one") )
        .print()
    ,
    newSelector()
        .add( getImage("two") , getImage("one") )
        .keys(       "F"      ,       "J"       )  // Spaces just to make the association clear
        .log("first") // or .log(), I don't know which one you want
        .wait()
    ,
    newText("Press SPACE to continue ")
        .center()
        .print()
    ,
    newButton("Space")
       .print()
       .center() 
   ,
    newSelector()
        .add( getButton("Space") )
        .keys(" ")
        .wait()   
  )
  .log( "AudioFile" , variable.AudioFile )
);


Template("Template2_practice.csv", variable => 
  newTrial("practice2",    
    newAudio("AudioFile",variable.AudioFile)
        .play()
    , 
    newImage("two", variable.LeftImage)
        .size(200,200)
    ,
    newImage("one", variable.RightImage)
        .size(200,200)
    ,
    newCanvas(450,200)
        .add(   0 , 0 , getImage("one") )
        .add( 250 , 0 , getImage("two") )
        .print()
    ,
    newSelector()
        .add( getImage("one") , getImage("two") )
        .keys(     "F"        ,        "J"      )
        .log("first") // or .log(), I don't know which one you want
        .wait()
    ,
    newText("Press SPACE to continue ")
        .center()
        .print()
    ,
    newButton("Space")
       .print()
       .center()
    ,
    newSelector()
        .add( getButton("Space") )
        .keys(" ")
        .wait()
  )
  .log( "AudioFile" , variable.AudioFile )
);

If the only difference between the two Template blocks it the left-right position of the images, I’d suggest you design your table with that manipulation in mind instead: right now the image that the LeftImage cell from Template2_practice.csv points at actually appears to the right anyway (same mismatch for RightImage) so it’s probably a better idea to merge the two tables and alternate which images you reference in LeftImage and in RightImage.

Jeremy