Presentation issue in an experiment

PennController for IBEX Forums Support Presentation issue in an experiment

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10474
    afuerste
    Participant

    Dear Jeremy,

    we have encountered a problem with the presentation in an experiment. The experiment contains audio files that are listened to first, then the questionaire opens below. Unfortunately, when displaying this questionaire, the page jumps directly down to the lowest text field. Therefore, one has to scroll up again to be able to answer the questions chronologically.

    Maybe you have a tipp or solution for us.

    Thank you very much.

    audios = []     // audios will reference the audios in a randomized order for simple playback
    ,
    audios2 = []    // audios2 will ultimately be a copy of audios
    // Create dummy trials to browse the table and feed then shuffle audios
    ,
    Template("OG-audios.csv", row =>
        PennController( audios.push(row.Audio),
        fisherYates(audios) )
        )
    
    // Now create the Item trials reading the audio references from audios
    ,
    audio = ""
    ,Template( row =>
        PennController( "Item",
            audio = audios.shift(), // Extract next entry from audios
            audios2.push(audio)     // Place it in audios2
            ,
        newAudio( audio )
                .center()
                .once()
            ,
        newImage("message","messageExp3.png")
                .size(430,215)
            ,
        newCanvas("Message", 430,200 )
            .add(   130, 0, getImage("message"))
            .add( 150, 135, getAudio(audio))
        .print()
             ,
             getAudio( audio ).wait("first").remove()
             ,
             getImage("message").remove()
             ,
            newText("Bewertung","<p><br>Bitte die gehörte Person bewerten. Wie hört sich die gerade gehörte Person an? Dazu bitte die Fragen im jeweiligen Freitextfeld beantworten und Punkte auf den Skalen auswählen. </p>")
              .settings.css("font-family", "calibri").settings.css("font-size", "18px")
               .center()
                .print()
        ,
        newCanvas(600,120)
            .add(50, 0, getText("Bewertung"))
            .center()
            .print()
          ,
              //mandatory textfelder
                     newText("alter", "Wie alt ist die gehörte Person?")
                   .settings.css("font-size", "18px")
                   .settings.bold()
                   ,
                   newTextInput("alter")
    
                   .log()
                   ,
                   newCanvas("altercanvas", 1000, 40)
                   .settings.add(0, 0, getText("alter"))
                   .settings.add(450,3, getTextInput("alter"))
                   //.settings.center()
                   .print()
                   ,
                    newText("Leerzeile"," <br></p>")
                      .center()
                    .print()
                     ,    
                   newText("wohnort", "Wo lebt diese Person?")
                   .settings.css("font-size", "18px")
                   .settings.bold()
                   ,
                   newTextInput("wohnort")
    
                   .log()
                   ,
                   newCanvas("wohnortcanvas", 1000, 40)
                   .settings.add(0, 0, getText("wohnort"))
                   .settings.add(450,3, getTextInput("wohnort"))
                   //.settings.center()
                   .print()
                   ,
                    newText("Leerzeile"," <br></p>")
                      .center()
                    .print()
                     ,        
                       newText("herkunft", "Woher kommt die gehörte Person?")
                   .settings.css("font-size", "18px")
                   .settings.bold()
                   ,
                   newTextInput("herkunft")
    
                   .log()
                   ,
                   newCanvas("herkunftcanvas", 1000, 40)
                   .settings.add(0, 0, getText("herkunft"))
                   .settings.add(450,3, getTextInput("herkunft"))
                   //.settings.center()
                   .print()
                   ,
                    newText("Leerzeile"," <br></p>")
                      .center()
                    .print()
                     ,            
                  newText("situation", "Wo würde man einer solchen Person begegnen?")
                   .settings.css("font-size", "18px")
                   .settings.bold()
                   ,
                   newTextInput("situation")
    
                   .log()
                   ,
                   newCanvas("situationcanvas", 1000, 40)
                   .settings.add(0, 0, getText("situation"))
                   .settings.add(450,3, getTextInput("situation"))
                   //.settings.center()
                   .print()
                   ,
                    newText("Leerzeile"," <br></p>")
                      .center()
                    .print()
                     ,                    
          newScale("selbstbewusstsein", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht selbstbewusst</b>"))
            .settings.after(newText("<b>sehr selbstbewusst</b>"))
            .settings.log("final")
            .center()
            .print()
        ,
         newScale("sympathie", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht sympathisch</b>"))
            .settings.after(newText("<b>sehr sympathisch</b>"))
            .settings.log("final")
            .center()
            .print()
        , 
        newScale("erfolg", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>beruflich überhaupt nicht erfolgreich</b>"))
            .settings.after(newText("<b>beruflich sehr erfolgreich</b>"))
            .settings.log("final")
            .center()
            .print()
        ,
          newScale("entspanntheit", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht entspannt</b>"))
            .settings.after(newText("<b>sehr entspannt</b>"))
            .settings.log("final")
            .center()
            .print()
        ,          
        newScale("intelligenz", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht intelligent</b>"))
            .settings.after(newText("<b>sehr intelligent</b>"))
            .settings.log("final")
            .center()
            .print()
        ,      
        newScale("vertrautheit", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht vertraut</b>"))
            .settings.after(newText("<b>sehr vertraut</b>"))
            .settings.log("final")
            .center()
            .print()
        ,
        newScale("kompetenz", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht kompetent</b>"))
            .settings.after(newText("<b>sehr kompetent</b>"))
            .settings.log("final")
            .center()
            .print()
        ,            
         newScale("humor", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht humorvoll</b>"))
            .settings.after(newText("<b>sehr humorvoll</b>"))
            .settings.log("final")
            .center()
            .print()
        ,            
        newScale("ehrgeiz", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht ehrgeizig</b>"))
            .settings.after(newText("<b>sehr ehrgeizig</b>"))
            .settings.log("final")
            .center()
            .print() 
            ,    
        newScale("freundlichkeit", 7)
            .settings.css("font-family", "calibri").settings.css("font-size", "22px")
            .settings.labelsPosition("bottom").color("white")
            .settings.before(newText("<b>überhaupt nicht freundlich</b>"))
            .settings.after(newText("<b>sehr freundlich</b>"))
            .settings.log("final")
            .center()
            .print()
            ,
        newSelector("dummy")
            .add(getScale("freundlichkeit"),getScale("ehrgeiz"),getScale("humor"),getScale("kompetenz"),getScale("vertrautheit"),getScale("intelligenz"),getScale("entspanntheit"),getScale("erfolg"),getScale("sympathie"),getScale("selbstbewusstsein"))
            .shuffle()
            .disable()
        ,     
         newHtml("ItemQText", "ItemQ.html")
            .center()
            .settings.css("font-size", "large")
            .print()
        ,
        newTextInput("Begründung")
            .center()
            .log()
        ,
        newCanvas("Begründung",708,200)
            .add(0,0,getTextInput("Begründung") .size(708,100) .lines(15))
            .print()
        ,
        getTextInput("Begründung").settings.log("final")
        ,
    
            newButton( "Weiter" )
                .settings.css("font-family", "calibri").settings.css("font-size", "12px")
                   //.settings.center()
                   .log()
                   .center()
                   .print()
                   .wait(newFunction('dummy', ()=>true).test.is(true)
                // Skalen
                .and(getScale("selbstbewusstsein","sympathie","erfolg","entspanntheit","intelligenz","vertrautheit","kompetenz","humor","ehrgeiz","freundlichkeit").test.selected()
                  .failure( newText('errorscales', "<br>Bitte auf jeder Skala einen Punkt auswählen.").color("red") .center().print() )
             //mandatoryTextfeld
                    ).and(
                 getTextInput("herkunft","alter","wohnort","situation").test.text(/^.+/) // testing if at least one digit was written in the input box
                    .failure(
                       newText("textfelderror","<br>Bitte jede Frage zur Person im jeweiligen Textfeld beantworten.")
                       .settings.color("red")
                       .center()
                       .print())
            )
        )
        .log("audio", audio)    // Log which audio was played
        ))
    #10476
    Jeremy
    Keymaster

    Hi,

    Focus automatically goes to the most recently added TextInput element. If you want to give focus back to the first TextInput element and scroll back to the top of the page at some point, you can execute some javascript code using the Function element (before you create and print the Button element for example):

    newFunction( ()=>{
        window.scrollTo(0,0);
        document.querySelector(".PennController-TextInput.PennController-alter").focus();
    }).call()

    Jeremy

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