PennController for IBEX › Forums › Support › Side-by-side buttons in a selector that is removed after selection
- This topic has 2 replies, 2 voices, and was last updated 10 months, 1 week ago by mawilson.
July 19, 2022 at 10:41 am #8277mawilsonParticipant
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() ) ] )July 19, 2022 at 10:59 am #8280JeremyKeymaster
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
removeon 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() ) )
JeremyJuly 20, 2022 at 12:17 pm #8283mawilsonParticipant
Thank you for the help!
- You must be logged in to reply to this topic.