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

PennController for IBEX Forums Support Side-by-side buttons in a selector that is removed after selection

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #8277
    mawilson
    Participant

    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, 10 months ago by mawilson.
    • This topic was modified 1 year, 10 months ago by mawilson.
    #8280
    Jeremy
    Keymaster

    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

    #8283
    mawilson
    Participant

    Thank you for the help!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.