[mwf2120]

Hi! I have a related-ish question. I am partially randomizing the color and order of 4 images on a canvas. After initial randomization, I’d like for the participant to see the same color and order repeatedly, for each practice trial and experimental trial. Is there a way to, after randomization, make a canvas somewhat of a “global variable” that can be called in a later trial?

I am randomizing 4 pics into one of 6 groups with this:

function createColorGroup(int) {
    var bugba = ["blue", "green", "black", "bugba"];
    var gbuba = ["green", "blue", "black", "gbuba"];
    var bagbu = ["black", "green", "blue", "bagbu"];
    var gbabu = ["green", "black", "blue", "gbabu"];
    var babug = ["black", "blue", "green", "babug"];
    var bubag = ["blue", "black", "green", "bubag"];
    
    var groups = [bugba, gbuba, bagbu, gbabu, babug, bubag];
    
    return groups[int]; 
}

// color order var generation
newTrial("color_order",
    newVar("colorOrder")
        .global()
        .set(color_order_label)
).log("id", getVar("subjID"))
.log("color_group", color_order_label)

Then, I am getting images onto the canvas like this:

newImage(getImageEmotion(row.leftImage)+"", leftColor + row.leftImage +"")
        .cssContainer("border", "solid 2px black")
        .cssContainer("background-color", "white")
        //.print()
    ,
    newImage("calmImage", centerColor + "calmnolabel.jpg")
        .cssContainer("border", "solid 2px black")
        .cssContainer("background-color", "white")
        //.print()
    ,
    newImage(getImageEmotion(row.rightImage)+"", rightColor + row.rightImage +"")
        .cssContainer("border", "solid 2px black")
        .cssContainer("background-color", "white")
        //.print()
    ,
    newCanvas("labels", 600, 200)
        .add("center at 18%", "middle at 50%", getImage(getImageEmotion(row.leftImage)+""))
        .add("center at 50%", "middle at 50%", getImage("calmImage"))
        .add("center at 82%", "middle at 50%", getImage(getImageEmotion(row.rightImage)+""))
        .color("yellow")
        .cssContainer("border", "solid 2px black")
        .settings.center()
        .print()

Then, I’d like to do something like this:

Template(
    GetTable("emoMusicGroupedPracticeV2.csv")
    ,
    row => newTrial("PracticeEmoMusic",
        newAudio(row.audiofile)
            .center()
            .print()
            .wait() 
        ,
        newText("Q", "<p>Whose face matches the music?</p>")
            .center()
            .css("font-size", "1.5em")
            .print()
        ,
        newSelector("eugenies")
            .once()
            .frame("dashed 0px white")
        ,
        getCanvas("labels")

but am running into trouble. Thanks for your help!!

[mwf2120]

Hi! How would I adapt the code if I want participants to have up to three seconds to select the spacebar (and log when they do so) but if they hit the spacebar before those three seconds, they move on to the next trial and nothing is logged. Any tips for adapting my code?

newTrial("SorF",
    newText("Stranger","<p><strong>Stranger</strong></p>")
        .css("font-size", "2.5em")
        .css("text-align", "center")
        .settings.center()
        .print("center at 50%", "bottom at 50%")
    ,
    newTimer("Timer0",1000).start()
        .wait()
        .settings.center()
        .print()
    ,
    getText("Stranger")
        .remove()
    ,
    newImage("Focus", "Focus_Point.jpg")
        .center()
        .settings.center()
        .print("middle at 50%", "bottom at 50%")
    ,
    newTimer("Timer1",5000).start()
    .wait()
    ,
    getImage("Focus")
        .remove()
    ,
    newVideo("three", "CID_3.mp4")
        .size("70vw", "auto")
        .settings.center()
        .print("middle at 50%", "middle at 50%")
        .play()
        .disable(0.01)
    ,
    newKey("space")
        .wait()
)

[mwf2120]

Thank you — so grateful!

[mwf2120]

Thank you so, so much! This worked.

Follow-up: is there a way to “center” the cursor while dragging and dropping so that when a person selects an image to drag, the cursor position defaults to a central position rather than participants being able to click anywhere on the image?

[mwf2120]

Hi! I am relatively new to Pcibex and am trying to do the following: log coordinate location of images (between 2 and 5 depending on set randomization) that are dragged and dropped to another canvas. The figures (images) can be placed anywhere and in any order on the new canvas. I’d really like to record x and y coordinates where participants place each figure. I’ve been able to implement the drag and drop approach, and to collect coordinate data for clicks, but coordinate data collection fails when I try to drag and drop (probably because the images are “clicked” in one place and “unclicked” in another). Is there a better way to do this? Thanks so much!

Drag and drop sample approach:

newTrial(“Set_2”,
newCanvas(“figlist”, “72vw”,”58vh”)
.css(“padding”,”1em”)
.color(“lightgray”)
.print(“left at 5vw”, “middle at 50vh”)
,
newCanvas(“grid”, “72vw”, “58vh”)
.css(“padding”, “1em”)
.color(“yellow”)
.print(“left at 20vw”, “middle at 50vh”)
,
newSelector(“figures”)
,
newImage(“man”, “man_small.png”).selector(“figures”).print(getCanvas(“figlist”)),
newImage(“boy”, “boy_small.png”).selector(“figures”).print(getCanvas(“figlist”))
,
getSelector(“figures”).shuffle()
.log()
,
newDragDrop(“dd”)
.addDrag(getImage(“man”))
.addDrag(getImage(“boy”))
.addDrop(getCanvas(“figlist”))
.log()
,
newTimer(5000).start()
.wait()
)

Thanks for any help!

[mwf2120]

Hi! I am relatively new to Pcibex and am trying to do the following: log coordinate location of images (between 2 and 5 depending on set randomization) that are dragged and dropped to another canvas. The figures can be placed anywhere and in any order on the new canvas. I’d really like to record where they place each figure. I’ve been able to implement the above approach and collect coordinate data, but the method fails when I try to drag and drop (probably because the images are “clicked” in one place and “unclicked” in another). Is there a better way to do this? Thanks so much!

Drag and drop sample approach:

newTrial("Set_2",
    newCanvas("figlist", "72vw","58vh")
        .css("padding","1em")
        .color("lightgray")
        .print("left at 5vw", "middle at 50vh")
    ,
    newCanvas("grid", "72vw", "58vh")
        .css("padding", "1em")
        .color("yellow")
        .print("left at 20vw", "middle at 50vh")
    ,
    newSelector("figures")
    ,
    newImage("man", "man_small.png").selector("figures").print(getCanvas("figlist")),
    newImage("boy", "boy_small.png").selector("figures").print(getCanvas("figlist"))
    ,
    getSelector("figures").shuffle()
        .log()
    ,
    newDragDrop("dd")
       .addDrag(getImage("man"))
       .addDrag(getImage("boy"))
       .addDrop(getCanvas("figlist"))
       .log()
    ,
    newTimer(5000).start()
    .wait()
)

Thanks for any help!

[Author]

Posts