Reply To: html layout/event times/selector vs. scale/ compatibility

[Jeremy]

Hello HPI,

1) You will be interested in this guide on adding custom CSS and in the standard css and cssContainer commands

Delete these CSS rules from Aesthetics/PennController.css and everything will start aligned with the page’s left edge:

.PennController {
    width: 40em !important; /* controls the witdth of the content area */
    margin-left: 50vw; /* aligns the content area's left edge with the vertical center of the page */
    transform: translateX(-50%); /* aligns the *vertical center* of the content area instead  */
}

To remove the spacing on top, delete margin-top: 5em; from the body CSS rule from Aesthetics/global_main.css

Use the .css/.cssContainer commands, or CSS rules that target all non-interface elements according to the guide above to only apply size/italics/etc. to non-interface elements

2) Insert .log commands where you think they are relevant, then test-run your experiment and open your results file and calculate reaction times: if you are able to do it, chances are you’re doing things right. It’s your call what elements you log: for example, I rarely log Text elements because they often are not relevant to the timecourse of unfolding events in my trial. If you want to be extra-safe, you can be redundant about which elements you .log, but your results file will rapidly get very big, with submissions taking more time to be saved for each participants and your results file taking longer to be generated

You can calculate differences between two time points in your experiment using javascript’s Date.now() and use a global Var element to report that value in an extra cell:

newTrial(
    newVar("rt", 0).global().set(v=>Date.now())
    ,
    newButton("Click me!").print().wait()
    ,
    getVar("rt").set(v=>Date.now()-v)
)
.log("RT", getVar("rt"))

This will add a column named “RT” reporting how many milliseconds elapsed between before the Button was created-then-printed and after it was clicked

3) I don’t know how to answer that question: the Selector element’s .log command will report which element was selected last. If this is the info you need, then it’s the right way to go

4) Yes, PennController is an IBEX controller just like DashedSentence is an IBEX controller. Just include PennController.js in the js_includes folder (also, the PCIbex Farm lets you upload resource files to the Resources folder, but the python script server.py won’t serve those from there, so you need to place the audio/image/video files in the www folder instead)

Jeremy