Two-screen trials?

[suphasiree]

Hello!

I want to design my experiment as two-screen trials: one screen displaying a sentence (participants press a space bar after they’re done reading), and then the next screen would display a comprehension question on that sentence (text input response).

My current code shows the sentence and the question, but they’re shown on the same page. How can I make the question appear on a separate screen?

///// Actual experiment
PennController.Template( variable => 
  newTrial( "experiment" ,
    newTimer(500)
        .start()
        .wait()
    ,
    defaultText
        .print()
        .center()
    ,
    newText(variable.sentence)
    ,
    newText("<br><br><br> <p>Press the spacebar to continue.</p>")
        .italic()
    ,
    newKey(" ")
        .wait()
    ,
///// How to make these next lines appear on a separate screen?
    newText("<p>Press Enter to submit your answer.</p> <br><br><br>")
        .italic()
    ,
    newText("question", variable.question)
    ,
    newTextInput("inputanswer")
        .print()
        .log()
        .wait()
    ,
    newVar("answer")
        .set( getTextInput("inputanswer") )
                                    
  .log( "SubjID"     , getVar("ID")    )

) )

I have looked on the tutorials and documentation but I can’t find the answer to this question. Thank you in advance!

[Jeremy]

Hi,

Simply use the .remove command on the Text elements that you no longer want on the new screen. It’s easier if you give them a name first, like this:

Template( variable => 
  newTrial( "experiment" ,
    newTimer(500)
        .start()
        .wait()
    ,
    defaultText
        .print()
        .center()
    ,
    newText("sentence", variable.sentence) // named your Text element 'sentence'
    ,
    newText("pressspace" , "Press the spacebar to continue.") // named your Text element 'pressspace'
        .css("margin-top", "2em") // cleaner than 3 br's
        .italic()
    ,
    newKey(" ")
        .wait()
    ,
    getText("sentence").remove(),  // remove your Text elements
    getText("pressspace").remove() // here
    ,
    newText("Press Enter to submit your answer.")
        .css("margin-bottom", "2em") // same thing as above
        .italic()
    ,
    newText("question", variable.question)
    ,
    newTextInput("inputanswer")
        .print()
        .log()
        .wait()
    ,
    newVar("answer")
        .global() // I suspect you want to make this global so you can use it in another log below
        .set( getTextInput("inputanswer") )
  ) // this parenthesis should be here                        
  .log( "SubjID"     , getVar("ID")    )
) // this one remains here 

Jeremy

[suphasiree]

Hi Jeremy,

Thank you so much for your prompt response and for your helpful edits, I appreciate it!

I have another question please. On the question screen, ideally I want the text “Press Enter to submit your answer” to appear below the TextInput box. However, when I move that newText line to be below the newTextInput line, that text disappears. I’m guessing that’s because the program is waiting on the participant to type an input, and delays showing that text.

Is there another way to show that text below the text box, even before participants type their response?

[Jeremy]

Yes, just decouple the printing of the TextInput from its wait command, like this:

newTextInput("inputanswer").print().log()
,
newText("Validate by pressing Enter").italic().print()
,
getTextInput("inputanswer").wait()

Jeremy

[suphasiree]

Perfect, thanks so much for your help!

[kmoulton]

Can you get rid of a Canvas this way? (or the border of the canvas?). I have my question formatted in a canvas with a border around it but I can only seem to get the text to disappear with .remove(): getCanvas(“stimbox”).remove() is probably gibberish.

[Jeremy]

Calling remove on any element should remove it from the screen, however it was added. Example:

newTrial(
    newCanvas("container", 400, 400)
        .css('background-color','lightblue')
        .add( "center at 50%" , "middle at 50%" , newText("my text") )
        .print()
    ,
    newButton("remove text").print().wait().remove(),
    getText("my text").remove()
    ,
    newButton("remove canvas").print().wait().remove(),
    getCanvas("container").remove()
    ,
    newButton().wait()
)

Note that removing a Canvas will remove the elements it contains along with it

If you added a border to the Canvas through CSS, you can simply overwrite its border property using .css("border", "none") on the Canvas element

Jeremy

[kmoulton]

Woohoo! Thanks (I probably did something dumb when i tried this)

[Author]

Posts