Side-by-side buttons in a selector that is removed after selection

[mawilson]

I’m trying to set up a forced choice experiment where a participant reads a sentence and presses one of two buttons as a response. I’d like to set this up so that the buttons are side-by-side, and they both disappear after one is clicked (and are replaced with a “Next” button leading to the next trial). The order of the buttons should be randomly shuffled on each trial.

Currently, I’m finding myself unable to do two things: the first is getting the buttons to appear side-by-side when adding them to a selector. Instead, they appear one over the other. The other thing I cannot figure out how to do is make both buttons disappear when one is clicked. From the documentation, it appears that using .remove() on a selector does not work (and I have tried that). Is there a way to do this?

Here’s the demo link to the experiment (just one item at the moment for testing purposes): https://farm.pcibex.net/r/PtpjPM/

And here’s the code I’m using for the trial.

PennController.Template("practice.csv", variable => ["trial_prac", 
        "PennController", PennController(
        
            newText("sentence", "testing")
                .center()
                .print()
            ,
            
            newText("newline", "<p />")
                .print()
            ,
            
            newSelector("position")
            ,
            
            newButton("XXXX")
                .selector("position")
                .print()
            ,
            
            newButton("YYYY")
                .selector("position")
                .print()
            ,
            
            getSelector("position")
                .shuffle()
                .center() // doesn't put the buttons side-by-side OR center them
                .print()
                .once()
                .wait()
                .log()
                .remove() // appears to do nothing when either button is clicked
            ,
            
            newButton("Next")
                .center()
                .print()
                .wait()
        )
    ]
)

• This topic was modified 1 year, 9 months ago by mawilson.
• This topic was modified 1 year, 9 months ago by mawilson.

[Jeremy]

Hi,

If you haven’t done so yet, I invite you to read the tutorial, more specifically section 5.1.2 which explains how to display elements side by side

A Selector element has no visible content: it just makes some elements that are independently printed onto the page, selectable (by a click, by a keypress, or either). You remove an element by calling remove on that element

Applying these points to your code (and updating it to modern PennController syntax and commands):

Template("practice.csv", variable => 
  newTrial("trial_prac",
    newText("sentence", "<p>testing</p>")
      .center()
      .print()
    ,
    newSelector("position")
    ,
    newCanvas("buttons", 200, 50)
      .add(              0, 0, newButton("XXXX").selector("position") )
      .add("right at 100%", 0, newButton("YYYY").selector("position") )
      .center()
      .print()
    ,
    getSelector("position")
      .shuffle()
      .once()
      .wait()
      .log()
    ,
    getCanvas("buttons").remove()
    ,
    newButton("Next")
    .center()
    .print()
    .wait()
  )
)

Jeremy

[mawilson]

Thank you for the help!

[Author]

Posts