Trials start at the very end of the page

[Mate208]

Hello Jeremy,
I have some trials in which there are a lot of text/input boxes. However, once we progress through the experience, these trails always appear from the end of the page. Is there a way to make the trial start at the top ? Here is an exemple :

//TEST variables.
newTrial("Demoos",  

    defaultText.print()
    .settings.css("font-size", "1.2em")         
    ,
newText("INFORMATIONS blablabla").css({"font-weight" : "bold"})
    .center()
    .print()
    ,
    newText("1. Age : ")
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("age", "")
        .print()
        .log()

    ,
    newText("2. Gender.") 
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("Gender", "")
        .print()
        .log()

    ,
    newText("country", "3. blablabla?")
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("country", "")
        .print()
        .log()

    ,
    newText("cat", "4. testlol?")
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("cat", "")
        .print()
        .log()
    ,
    newText("bliblip", "4. blibliblibli?")
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("regtyt", "")
        .print()
        .log()
     ,
    newText("yyyy", "4. yyyy?")
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("yyyy", "")
        .print()
        .log()
    ,
    newText("Testtest", "tests")
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("test1", "")
        .print()
        .log()
    ,
    newText("123aaa", "74651tyjrhgdf?")
        .css({"margin-top" : "50px"})
        .print()
    ,
    newTextInput("123aaa", "")
        .print()
        .log()

    ,
    newButton("Click", "Continue")
        .center()
        .css("margin-top", "50px")
        .print()
        .wait()

)

• This topic was modified 1 year, 6 months ago by Jeremy. Reason: added msising commas to the code sample

[Jeremy]

Hi,

When you print a TextInput element, PennController gives it focus by default, so that the participant can start typing right away. The most recently printed TextInput element will take focus, and if an element has focus outside the current viewport, browsers usually automatically scroll down to make it visible

One workaround is to wait a few ms after printing the last TextInput element, at which point the browser will have scrolled down, and tell it to scroll back up:

    newTextInput("123aaa", "")
        .print()
        .log()
    ,
    newTimer(20).start().wait() // wait for focus to take effect
    ,
    newFunction( ()=>window.scrollTo(0,0) ).call()  // then scroll all the way back up

Jeremy

[Author]

Posts