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