setCounter with more than 1 item per list

[jonesanam]

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     )
);

[Jeremy]

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

[jonesanam]

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

[Jeremy]

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

[jonesanam]

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

[jonesanam]

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

[Jeremy]

Hi Jones,

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

Jeremy

[jonesanam]

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

[Jeremy]

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

Jeremy

[jonesanam]

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

[Jeremy]

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

Jeremy

[jonesanam]

Oh. Thanks so much! now it works 🙂

[Author]

Posts