Trials start at the very end of the page

PennController for IBEX Forums Support Trials start at the very end of the page

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #8662
    Mate208
    Participant

    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, 4 months ago by Jeremy. Reason: added msising commas to the code sample
    #8667
    Jeremy
    Keymaster

    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

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