Reply To: Slider: position and randomisation of labels

PennController for IBEX Forums Support Slider: position and randomisation of labels Reply To: Slider: position and randomisation of labels

#6584
Jeremy
Keymaster

Hi Susanne,

You are right, the best solution is to use a Canvas element. The Selector element being the only PennControllement element that will let you easily shuffle the position of elements on the screen, you are also right to use it for that purpose. With that in mind, the following code will generate what you’re looking for:

newTrial("training",
    newCanvas("container", "500px","5em")
        .print("center at 50vw","middle at 50vh")
    ,
    newText("Item", row.CARRIER)
        .print("center at 50%", "top at 0%", getCanvas("container"))
        .log()
    ,
    defaultText.css("white-space","nowrap")
    ,
    newText("Alt1", row.SENTENCE1).print("center at 0%", "top at 2em", getCanvas("container"))
    ,
    newText("Alt2", row.SENTENCE2).print("center at 100%", "top at 2em", getCanvas("container"))
    ,
    newSelector("choice")
        .disable()
        .add(getText("Alt1"), getText("Alt2"))
        .shuffle()
        .log()
    ,
    newScale("slider", 100)
        .slider()
        .size("500px", "1em")
        .css("max-width", "unset")
        .print(0, "bottom at 100%", getCanvas("container"))
        .log()
        .wait()
    ,
    newTimer(500).start().wait()
)

The idea is to create a Canvas element 500px wide, and print the Scale element onto it. Then we can print the Text elements onto that Canvas element, and center their positions to 0% and 100%. For a reason I cannot quite explain, the text on the right seemed to want to use two lines before I added .css("white-space","nowrap"), which forces the text to use a single line.

There is a bug in PennController 1.9 where the Selector element fails to report the position of the elements in the absence of a selection, and sometimes gets it wrong otherwise anyway. So until I release PennController 2.0, you will have to randomize using javascript instead: delete the whole Selector bit and replace your newText lines with this

alts=[row.SENTENCE1,row.SENTENCE2].sort(()=>Math.random()-Math.random())
,
newText("Alt1", alts[0]).print("center at 0%", "top at 2em", getCanvas("container"))
,
newText("Alt2", alts[1]).print("center at 100%", "top at 2em", getCanvas("container"))

And add this to the closing parenthesis of your newTrial command:

.log("Alt1", alts[0])
.log("Alt2", alts[1])

Regarding the server, we are moving to a new farm. We will release an announcement soon, but if the farm at expt.pcibex.net is becoming too unstable, feel free to move to https://farm.pcibex.net — note that you’ll need to create a new account, and your experiments will not be automatically transferred to the new farm, but you can easily drag-and-drop zip archive versions of your projects

Let me know if you have any questions

Jeremy