Create a continue button

[Jeremy]

The most simple way of having a continue button anywhere in your trial is to create a Button element using newButton and then use the commands print and wait:

newButton("continue", "Click here to continue")
    .print()
    .wait()

However if you use many continue buttons this can rapidly become a hassle. And if you use more than one such continue button within one trial, you either have to give each of them different names, or create one Button element atop of your trial’s script and refer back to it each time using getButton. Finally, you may prefer continue to appear as some text link rather than as a button.

Here is a method that will save you some time (explanations below):

var continueLinks = 0;
var clickContinue = text => [
    continueLinks++
    ,
    newText("continue_text_"+continueLinks, text||"Click here to continue")
        .settings.color("blue")
        .print()
    ,
    newSelector("continue_selector_"+continueLinks)
        .settings.add( getText("continue_text_"+continueLinks) )
        .wait()
    ,
    getText("continue_text_"+continueLinks)
        .remove( )
];

PennController(
    newText("hello", "Hello")
        .print()
    ,
    clickContinue()
    ,
    newText("world", "World")
        .print()
    ,
    clickContinue("Click to finish")  
);

This script creates a JavaScript function called clickContinue which generates an array of PennController commands. The commands within clickContinue create a new Text element and a new Selector element each time, this is why we use a JavaScript variable that we named continueLinks and that we increment each time to ensure the name of the elements are unique (the elements are named "continue_text_0" and "continue_selector_0" by the first clickContinue() and "continue_text_1" and "continue_selector_1" by the second clickContinue()).

This solution exploits the fact that PennController evaluates JavaScript arrays of commands as a simple series of commands (and ignores non-PennController-commands contained in the array). So technically, the script above is equivalent to this:

PennController(
    newText("hello", "Hello")
        .print()
    ,
    [
      newText("continue_text_0", "Click here to continue")
          .settings.color("blue")
          .print()
      ,
      newSelector("continue_selector_0")
          .settings.add( getText("continue_text_0") )
          .wait()
      ,
      getText("continue_text_0")
          .remove()
    ]
    ,
    newText("world", "World")
        .print()
    ,
    [
      newText("continue_text_1", "Click to finish")
          .settings.color("blue")
          .print()
      ,
      newSelector("continue_selector_1")
          .settings.add( getText("continue_text_1") )
          .wait()
      ,
      getText("continue_text_1")
          .remove()
    ]
);

Which is equivalent to the exact same script without the [‘s and ]‘s.

[Sahar]

Hi Jeremy,
First of all, thank you and Florian so much for providing this amazing and user-friendly library!
I have a question with respect to the buttons. I want two buttons to be on the same page simultaneously. And I want the participants to be able to click either of them. For me, only the second one is clickable. And If I add .wait() to the entry of the first button, the second button does not appear unless I click on the first button. I will be grateful if you let me know what the issue is! Here is my code:

newText(“question”, “<p>Is the above item a word?</p>“)
.print()
,
newButton(“Word”, “<h1>Word ✓</h1>”)
.settings.color(“green”)
.settings.size(150, 70)
.settings.log()
.print()
,
newButton(“Not a Word”, “<h1>Not a Word x</h1>”)
.settings.color(“red”)
.settings.size(150, 70)
.settings.log()
.print()
.wait()
)]
];

[Jeremy]

Hi Sahar,

Since commands are executed in order, inserting a .wait command at the end of the first block of commands will pause the execution of the script until your first button is clicked, and only after that will the commands coming next, relating to your second button, be executed, which is why the second button wouldn’t appear until you click the first one.

With the script you posted, however, you have a .wait command relating to the second button, so the execution of the script is paused until the second button is clicked.

What you want is tell the script to pause until one of the two buttons is clicked. Put otherwise, you want people to make a selection out of a group of two buttons. Whenever you want to do that, you should consider using a Selector which you can use to group elements together and wait for your participants to make a choice. So your script should look like this:

newText("question", "Is the above item a word?")
    .print()
,
newButton("Word", "
Word ✓
")
    .settings.color("green")
    .settings.size(150, 70)
    .print()
,
newButton("Not a Word", "
Not a Word x
")
    .settings.color("red")
    .settings.size(150, 70)
    .print()
,
newSelector("WordOrNotaWord")
    .settings.log()
    .settings.add( getButton("Word") , getButton("Not a Word") )
    .wait()

I removed the commands .settings.log from the buttons themselves, and used it on the Selector element instead since you are interested in which one is selected.

Let me know if you have any questions

• This reply was modified 4 years, 9 months ago by Jeremy.

[Sahar]

Thank you so much, Jeremy! My script is fixed now. I really appreciate it!
Sahar

[Author]

Posts