setCounter with more than 1 item per list

PennController for IBEX Forums Support setCounter with more than 1 item per list

This topic contains 11 replies, has 2 voices, and was last updated by Avatar jonesanam 1 month ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #7444
    Avatar
    jonesanam
    Participant

    Hi, I’m afraid this might be a bit basic, but I still can’t seem to find a solution on my own:

    I am using setCounter to assign participants to two groups that have multiple rows each in the corresponding table. I have built a script that is supposed to reference back to the table’s rows which contain all the items (in this case: .png files). My problem now is that upon execution only the content of the first row from the table gets printed repeatedly throughout the entire experiment, instead of continuing with the next rows (The initial counter, however, works just fine, so it’s always either the first or the second row’s content that gets repeated continuously).

    I hope the demonstration link helps understanding the issue better: https://farm.pcibex.net/r/tdRrXB/

    For further clarification I am also attaching the code below.

    Any help on this would be very much appreciated 🙂
    Thanks in advance!
    Jones

    PennController.ResetPrefix();
    
    Sequence ("counter", "Trial");
    SetCounter("counter", "inc", 1);
    
    AddTable( "test_table" ,
        "Liste,Absatz\n"+
      "Liste1,1Uberschrift.png\n"+
      "Liste2,Uberschrift.png\n"+
      "Liste1,1Absatz1.png\n"+
      "Liste2,Absatz1.png\n"+
      "Liste1,1Absatz2.png\n"+
      "Liste2,Absatz2.png\n"+
      "Liste1,1Absatz3.png\n"+
      "Liste2,Absatz3.png\n"+
      "Liste1,1Absatz4.png\n"+
      "Liste2,Absatz4.png\n"+
      "Liste1,1Absatz5.png\n"+
      "Liste2,Absatz5.png\n"+
      "Liste1,1Absatz6.png\n"+
      "Liste2,Absatz6.png\n"+
      "Liste1,1Absatz7.png\n"+
      "Liste2,Absatz7.png"
    );
    
    Template(
        GetTable( "test_table" )
                .setGroupColumn( "Liste" )
        ,
        row => newTrial( "Trial" ,
                newImage("Header","Zeitungsheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile1","<br>")
            .print()
    ,
        newImage("Subheader","Subheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile2","<br><p>")
            .print()
    ,
        newImage("Uberschrift",row.Absatz)
    ,
        newTextInput("&Uuml;berschrift_Korrektur")
            .size(200,110)
    ,
        newCanvas("&Uuml;berschrift_nebeneinander",640,100)
            .add(15,0,getImage("Uberschrift"))
            .add(420,50,getTextInput("&Uuml;berschrift_Korrektur"))
            .print()
    ,
        newImage("Absatz1",row.Absatz)
    ,
        newTextInput("Absatz1_Korrektur")
            .size(200,160)
    ,
        newCanvas("Absatz1_nebeneinander",640,200)
            .add(15,70,getImage("Absatz1"))
            .add(420,100,getTextInput("Absatz1_Korrektur"))
            .print()
    ,
        newText("Leerzeile3","<br><p><br><p><br>")
             .print()
    ,
        newButton("Weiter","Weiter zur n&auml;chsten Seite")
             .center()
             .print()
             .wait()
    ,
        clear()
    ,                               //NEUE SEITE
        newImage("Header","Zeitungsheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile1","<br>")
            .print()
    ,
        newImage("Subheader","Subheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile2","<br><p>")
            .print()
    ,
        newImage("Absatz2",row.Absatz)
    ,
        newTextInput("Absatz2_Kommentar")
            .size(200,230)
    ,
        newCanvas("Absatz2_nebeneinander",640,280)
            .add(15,0,getImage("Absatz2"))
            .add(420,30,getTextInput("Absatz2_Kommentar"))
            .print()
    ,
        newImage("Absatz3",row.Absatz)
    ,
        newTextInput("Absatz3_Kommentar")
            .size(200,200)
    ,
        newCanvas("Absatz3_nebeneinander")
            .add(15,0,getImage("Absatz3"))
            .add(420,0,getTextInput("Absatz3_Kommentar"))
            .print()
    ,
        newText("Leerzeile3","<br><p><br><p><br><p><br><p><br><p><br><p><br><p>")
             .print()
    ,
        newButton("Weiter","Weiter zur n&auml;chsten Seite")
            .center()
            .print()
            .wait()
    ,
        clear()
    ,                                           //NEUE SEITE
        newImage("Header","Zeitungsheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile1","<br>")
            .print()
    ,
        newImage("Subheader","Subheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile2","<br><p>")
            .print()
    ,
        newImage("Absatz4",row.Absatz)
    ,
        newTextInput("Absatz4_Kommentar")
            .size(200,190)
    ,
        newCanvas("Absatz4_nebeneinander",640,240)
            .add(15,0,getImage("Absatz4"))
            .add(420,30,getTextInput("Absatz4_Kommentar"))
            .print()
    ,
        newImage("Absatz5",row.Absatz)
    ,
        newTextInput("Absatz5_Kommentar")
            .size(200,130)
    ,
        newCanvas("Absatz5_nebeneinander")
            .add(15,0,getImage("Absatz5"))
            .add(420,0,getTextInput("Absatz5_Kommentar"))
            .print()
    ,
        newText("Leerzeile3","<br><p><br><p><br><br><p><br><p>")
             .print()
    ,
        newButton("Weiter","Weiter zur n&auml;chsten Seite")
            .center()
            .print()
            .wait()
    ,
        clear()
    ,                               //NEUE SEITE
        newImage("Header","Zeitungsheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile1","<br>")
            .print()
    ,
        newImage("Subheader","Subheader.png")
            .center()
            .print()
    ,
        newText("Leerzeile2","<br><p>")
            .print()
    ,
         newImage("Absatz6",row.Absatz)
    ,
        newTextInput("Absatz6_Kommentar")
            .size(200,140)
    ,
        newCanvas("Absatz6_nebeneinander",640,190)
            .add(15,0,getImage("Absatz6"))
            .add(420,30,getTextInput("Absatz6_Kommentar"))
            .print()
    ,
        newImage("Absatz7",row.Absatz)
    ,
        newTextInput("Absatz7_Kommentar")
            .size(200,275)
    ,
        newCanvas("Absatz7_nebeneinander")
            .add(15,0,getImage("Absatz7"))
            .add(420,0,getTextInput("Absatz7_Kommentar"))
            .print()
    ,
        newText("Leerzeile3","<br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p>")
            .print()
    ,
        newButton("Weiter","Weiter zum Fragebogen")
            .center()
            .print()
            .wait()
    )
        .log( "Group" , row.Liste )
        .log( "Text"  , row.Absatz     )
    );
    #7446
    Jeremy
    Jeremy
    Keymaster

    Hi Jones,

    Your experiment works as expected when I take it: it does contain 8 trials generated from the odd vs even rows every other time

    However, on some trials the second image on the page covers (one of) the button(s) named “Weiter”. This is because you don’t give a size to the Canvas element that contains it (newCanvas("Absatz3_nebeneinander")) but for smaller images the spacing introduced by newText("Leerzeile3","<br><p><br><p><br><p><br><p><br><p><br><p><br><p>") is enough to place the Button element visibly below the image

    Here is how I suggest your restructure your code. I’m only illustrating two panels of top+bottom Canvas elements, but you should apply the same logic to all:

    row => newTrial( "Trial" ,
        
        defaultImage.css("margin", "1em")
        ,
        newImage("AbsatzTop",row.Absatz),
        newImage("AbsatzBottom",row.Absatz)
        ,
        newButton("Weiter","Weiter zur nächsten Seite").center()
        ,
        newImage("Header","Zeitungsheader.png")
            .center()
            .print()
        ,
        newImage("Subheader","Subheader.png")
            .center()
            .print()
        ,
        // FIRST PANEL OF IMAGES
        newCanvas("Überschrift_nebeneinander","auto","auto")
            .add(420,40, newTextInput("Überschrift_Korrektur").size(200,140) )
            .print()
        ,
        getImage("AbsatzTop").print(getCanvas("Überschrift_nebeneinander"))
        ,
        newCanvas("Absatz1_nebeneinander","auto","auto")
            .add(420,40, newTextInput("Absatz1_Korrektur").size(200,140))
            .print()
        ,
        getImage("AbsatzBottom").print(getCanvas("Absatz1_nebeneinander"))
        ,
        getButton("Weiter").print().wait().remove(),
        getCanvas("Überschrift_nebeneinander").remove(),
        getCanvas("Absatz1_nebeneinander").remove()
        ,
        // SECOND PANEL OF IMAGES
        newCanvas("Absatz2_nebeneinander","auto","auto")
            .add(420,30,newTextInput("Absatz2_Kommentar").size(200,170))
            .print()
        ,
        getImage("AbsatzTop").print(getCanvas("Absatz2_nebeneinander"))
        ,
        newCanvas("Absatz3_nebeneinander","auto","auto")
            .add(420,30,newTextInput("Absatz3_Kommentar").size(200,170))
            .print()
        ,
        getImage("AbsatzBottom").print(getCanvas("Absatz3_nebeneinander"))
        ,
        getButton("Weiter").print().wait().remove(),
        getCanvas("Absatz2_nebeneinander").remove(),
        getCanvas("Absatz3_nebeneinander").remove()

    As you can see, you only need to add the header and subheader images to the page once, and you only need to create two Image elements using row.Absatz because you will never have more than two at once on the page. Same thing for the Button element named “Weiter” that you can (and should) reuse for each panel

    One trick that’s not obvious here, and which I don’t think you’ll find in the documentation, is that I size all the Canvas elements using "auto" and then I print the Image elements in them, without passing coordinates. In the absence of coordinates, printing an element inside another will make the former a child that occupies space, so that the latter will be at least as big as the former if its size is "auto"

    Jeremy

    #7447
    Avatar
    jonesanam
    Participant

    Hi Jeremy,

    thank you very much for the helpful explanations 🙂 I am genuinely confused that my original version has worked for you – when I click the link, it still has the same error as before, coninuously repeating either “Überschrift.png” or “1Überschrift.png” twice on each page.
    Your version, however, is already much closer to the solution. Yet, when I implement it, each item gets repeated fourfold (2 pages each, twice on each page) before showing the next one. Now my question would be how I can correct this so each page shows two consecutive items?

    Again, thanks a lot in advance! 🙂
    Jones

    #7450
    Jeremy
    Jeremy
    Keymaster

    Hi Jones,

    I think I understand what you were trying to do: you were repeating the code as many times as you have items in your CSV table. As a result, you did have 8 trials, but each showing 8 of what I called panels.

    I invite you to read the page “Creating a trial template” from the tutorial. As you’ll see, the Template command takes each row from the table and essentially duplicates the one newTrial command you pass as many times, replacing the row. bits with cell values

    So what you’re after is simply this:

    
    Template(
        GetTable( "test_table" ).setGroupColumn( "Liste" )
        ,
        row => newTrial( "Trial" ,
            defaultImage.css("margin","1em")
            ,
            newImage("Header","Zeitungsheader.png").center().print(),
            newImage("Subheader","Subheader.png").center().print()
            ,
            newCanvas("Überschrift_nebeneinander","auto","auto")
                .add(420,40, newTextInput("Überschrift_Korrektur").size(200,140) )
                .print()
            ,
            newImage("Absatz",row.Absatz).print( getCanvas("Überschrift_nebeneinander") )
            ,
            newButton("Weiter","Weiter zur nächsten Seite").center().print().wait()
        )
        .log( "Group" , row.Liste  )
        .log( "Text"  , row.Absatz )
    )

    This, however, will only print one image on the page at a time. If you want to print two images on the page at a time, I invite you to restructure your table so you reference the pairs of images that you want to display together on each row. For example (note that I format this table as you would write it directly in a CSV file in your project’s Resources folder, and not using the AddTable command):

    Liste,TopImage,BottomImage
    Liste1,1Uberschrift.png,1Absatz1.png
    Liste2,Uberschrift.png,Absatz1.png
    Liste1,1Absatz2.png,1Absatz3.png
    Liste2,Absatz2.png,Absatz3.png
    Liste1,1Absatz4.png,1Absatz5.png
    Liste2,Absatz4.png,Absatz5.png
    Liste1,1Absatz6.png,1Absatz7.png
    Liste2,Absatz6.png,Absatz7.png

    Of course you would then need to include two Canvas pieces in the newTrial and replace row.Absatz with row.TopImage in the first piece, and with row.BottomImage in the second

    Jeremy

    #7454
    Avatar
    jonesanam
    Participant

    Hi Jeremy,

    thank you so much! This is exactly what we were looking for and we really appreciate your kind help. 🙂

    All the best
    Jones

    #7477
    Avatar
    jonesanam
    Participant

    Hi Jeremy,

    it’s me again – not sure if this is the right place to ask, this time, though (as it doesn’t directly concern farm.pcibex.net). When copying the code out of PCIbex into my university’s installment of Ibex Farm, I get this error message: “Unrecognized expressions: Sequence (PennController: 0)”. When I take Sequence out of my script, i get the same error message with Counter and so on.
    I already double-checked the correct upload and initialization of PennController.js as well as the AddHost environment. Are you by any chance familiar with this kind of export-import problem?

    Again, thanks a lot in advance! 🙂
    Jones

    #7478
    Jeremy
    Jeremy
    Keymaster

    Hi Jones,

    Did you include PennController.ResetPrefix(null) in your script? (it should be on the very first line)

    Jeremy

    #7479
    Avatar
    jonesanam
    Participant

    Thanks fpr the quick answer! Yes, I included it in the first line.

    #7480
    Jeremy
    Jeremy
    Keymaster

    Do you have a link to your experiment that I could check?

    Jeremy

    #7481
    Avatar
    jonesanam
    Participant

    This is the experiment link: https://korpling.german.hu-berlin.de/ibexexps/SFB1412C07/ZS-AZ/experiment.html
    The code is the same as before, with these two lines added at the beginning:

    PennController.ResetPrefix(null);
    PennController.AddHost("https://amor.cms.hu-berlin.de/~anamjoya/zeitungsstudie/");

    Jones

    #7482
    Jeremy
    Jeremy
    Keymaster

    You are using version 1.6 of PennController (not sure where you found it). Update to the latest version (currently 2.0)

    Jeremy

    #7483
    Avatar
    jonesanam
    Participant

    Oh. Thanks so much! now it works 🙂

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.