[Jeremy]

Hi,

I’m not sure what link you are referring to: the link from my previous message points to a .js file that you should download and place in your project’s js_includes folder. If you are referring to https://github.com/PennController/Sync, note that it still points to version 1.9 (I actually need to update this…)

There is nothing wrong with your code: if you paste it into an empty project on the farm (which comes with PennController 2.0) and take a test run, you’ll see that the Text elements’ positions are indeed shuffled as expected

Jeremy

[Jeremy]

Hi, sorry for the late reply

a) If you really want to have as close a constant visual layout as possible (which, technically, is never possible given the variety of screens and resolutions) you should use a constant unit (for example, pixels) to create your Canvas element(s) and place elements on it, and then you can use .scaling("page").print("center at 50vw","middle at 50vh") on the main Canvas element to display it in the middle of the page, scaled (with its content) to fit the page while preserving ratios (ie if the Canvas element is a square and the page is rectangular, there will be blank spaces on the right and left edges of the Canvas element)

The vw and vh and relative units, where one unit represents 1% of the page’s width/height, respectively. When you use .print("center at 50vw","middle at 50h") on an element, it prints it so that the element’s central point is at the center of the page. If the box of your Text element is wider than its textual content, the text won’t appear perfectly center, but rather a bit off to the left. The .center() command will center the (box corresponding to the) element relative to its parent HTML node’s box. When you use .center().print() on a Text element, it will usually center it on the page because most project’s CSS rules for the main PennController node center it too. Using .print(500,500) will align the element’s top-left edge at 500px right of left edge of the page, and 500px down from the top edge of the page

b) I will address each subpoint below, but first let me give you a code that, I think, accomplishes what you’re after:

newText("warning", "Please provide a judgment before you can continue")
    .center()
    .color("red")
    .hidden()
    .print()
,
newSelector("smileys")
    .disableClicks()
    .add( getImage("inappropriate"), getImage("infelicitous"), getImage("appropriate"))
    .keys(             "A"         ,               "G"       ,               "L"     )
    .once()
    .log()
,
newCanvas( "End_of_trial_page" , 1000 , 35 )
    .css( "border" , "solid 1px black" )
    .center()
    .add( 300,0, newText("move_on_to_new_trial", "PRESS THE SPACEBAR TO LOAD A NEWTRIAL" ) )
    .print()
    .log()
,
newKey("endtrial_newtrial"," ")
    .log()
    .wait( 
        getSelector("smileys").test.selected().failure( getText("warning").visible() )
    )
)

b.1) There is no .wait command on the Canvas element. I think you wanted to place the test inside the Key element’s wait command (ie. the message should appear when the spacebar is being pressed, but no selection has been made)

b.2) You can test which element was selected by passing a reference to .test.selected as an argument. Because there is a one-to-one correspondance between which key was pressed and which element is selected, that should do the trick. For example, given your Selector’s setup, getSelector("smileys").test.selected( getImage("appropriate") ) will succeed only if L was pressed (at the moment of making the selection, that is)

b.3) I’m not sure which second Selector you have in mind, but if I understand your design correctly, you want the message “press the spacebar” to be visible even before the participant has pressed one of A, G or L (and, consistently, have a warning message appear if they press the spacebar before A, G or L). So you don’t want to wait for a selection to happen before printing the “press the spacebar” message and listening to a keypress on the spacebar. In other words, you don’t want to put the script on hold by using a wait command on the Selector’s element before getting to your Key element’s wait command. But you only want to validate that Key element’s wait command if a selection has been made, hence the test command inside it

Jeremy

[Jeremy]

Hi Val,

All three HTML pages you include using newHtml (in the two trials labeled “demographics” and in the one labeled “exit_screen”) do show up in your experiment, but you have a wait command on the Button element only in the first trial, so the experiment rushes through the other two

You can tell that all are included by looking at the Sequence tab of the debugger (once you reactivate it—it should only be turned off when you’re actively collecting data)

Jeremy

[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

[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

[Jeremy]

Hi Jungsoo,

There is no wait command for Text elements: https://doc.pcibex.net/text/

How do you want the experiment to move on to the next trial after displaying the comment? Should the participant click a button? Press a key? Should the experiment automatically move on after a timer?

Jeremy

[Jeremy]

Hi Nasim,

You should be able to apply the same method I reference here

Jeremy

[Jeremy]

Hi Nasim,

You can use the tip in this message to translate almost any text in the experiment

I can’t think of an easy way to add content to those pages off the top of my head though, sorry

Jeremy

[Jeremy]

Hi Özge,

1) You can get rid of the .wait() command on the Scale element, and replace the Button element’s .wait() command with: .wait( getScale("answer").test.selected() )

2) You’re using the Var element in a non-standard way. I think what you want to do is:

Sequence("instructions", "intro", "practice1", "practice2", "practice3", "break", rshuffle("items", "fillers"), "increase", SendResults())

var sendingResultsMessage = "...";
var randomnumber = Math.floor(Math.random()*1000000));
var completionCode = String("IST" + randomnumber);
var completionMessage = "...: " + completionCode;

Header(
  // ...
)
.log("completionCode", completionCode)

Jeremy

[Jeremy]

Hi,

Make sure to include the latest version of PennController.js in your project’s js_includes folder

Jeremy

[Jeremy]

Hey Monica,

Chrome lifted the limit one or two days after they introduced it, so I doubt that’s what’s happening. In fact I still have preloading issues when I take your experiment with Firefox, when I hit the video trials

I am working on fixing the issue, and I think I am getting there. Feel free to create a copy of your experiment (for backup) and replace its PennController.js file (from the Modules folder) with this one: https://github.com/PennController/penncontroller/blob/master/dist/PennController.js

Let me know if the problem persists

Jeremy

[Jeremy]

Hello,

I had to delete the HTML file to make your project work again. I suspect this happened because of some short downtime, I apologize for the inconvenience

Jeremy

[Jeremy]

Hello Jack,

The DDoS attack came from that IP, so it has been blacklisted. I will blacklist any IP conducting an attack on our servers

Note that I sent an email about it the day of the attack at the email address you provided when you created your account on the Farm

I invite you to set up experiments on your own webserver if possible, so you have better control over the whole process

Best,
Jeremy

[Jeremy]

Hi,

I was thinking something more like this:

newTrial("welcome", 
    newHtml("welcome", "welcome.html")
        .css("line-height","1.4")
    ,
    newCanvas("clicks", "100vw", "100vh")
        .print("center at 50vw","middle at 50vh")
    ,
    newSelector("clicks_1")
      .add(getCanvas("clicks"))
      .wait()    
)

The Key element only reacts to keys pressed on the keyboard. All its commands are listed here: https://doc.pcibex.net/key/, as you can see there is no command that relates to the mouse (as expected, for a keyboard-specific element)

Note that the Selector element has no visual content, it merely makes other elements (which themselves have visual content, like a Canvas element) selectable, so calling .print or .refresh on them won’t have any effect

Jeremy

[Jeremy]

Hi Monica,

If they all encounter the same loading problem at the exact same point, chances are that there’s a typo with a filename (possibly in a group-specific line of a CSV table, if you say some participants were able to complete the full study)

Would you mind sharing the link to your study with me, so I can investigate?

Jeremy

[Author]

Posts