Next pages: (late) Preliminary remarks on PennController's ontology
Next sample trial: Picture Selection
Setup
You have two options:
- You can manually erase the content of your experiment’s main.js file and then copy-paste the script from the Basics section below
- Or you can automatically overwrite the content of the file by importing the script: click on Update from git repo and enter the following URL:
https://github.com/PennController/Tutorial.git
then click on the Sync button.
You should see a confirmation message appear below the button, reading Success: N files modified. If you don’t see the message, try clicking again. If it still does not work, reload your Ibex page and try again.
Warning: whenever you click on Sync, the content of the file main.js is erased and reverts back to the script in the Basics section below.
Basics
Let’s say we are interested in whether, from A is colder than B, people conclude that A is cold. What we can do is continue this sentence with though A is not cold yet and invite participants to report whether the statement is coherent or not. Here is how your main.js file should look like for a very basic implementation:
[js try=”data-no-reset”]PennController.ResetPrefix(null);
PennController(
// We create a new text element that we name ‘test sentence,’ which contains the text of our complex test sentence
newText(“test sentence”, “A is colder than B, though A is not cold yet.”)
.print() // This prints the text onto the screen
,
// We create a key element that we name ‘answer’ and which reacts to any key press on F (coherent) or J (incoherent)
newKey(“answer”, “FJ”)
.wait() // This waits for a key press before validation
);[/js]
Adding more text
This does the job, but it would probably be better with some instructions.
[js new=”7-13″ try=”data-no-reset”]PennController.ResetPrefix(null);
PennController(
newText(“test sentence”, “A is colder than B, though A is not cold yet.”)
.print()
,
// We simply create and print two new text elements
newText(“question”, “Does this sentence feel contradictory to you?”)
.print()
,
newText(“instruction”, “Press F if you think the sentence is coherent, press J if you think it is INcoherent.”)
.print()
,
newKey(“answer”, “FJ”)
.wait()
);[/js]
Aesthetics
As is though, it is hard to visually tell the sentence to evaluate from the instructions. Let’s add some aesthetics:
[js new=”8,12″ try=”data-no-reset”]PennController.ResetPrefix(null);
PennController(
newText(“test sentence”, “A is colder than B, though A is not cold yet.”)
.print()
,
newText(“question”, “Does this sentence feel contradictory to you?”)
.settings.bold() // Boldface
.print()
,
newText(“instruction”, “Press F if you think the sentence is coherent, press J if you think it is INcoherent.”)
.settings.italic() // Italics
.print()
,
newKey(“answer”, “FJ”)
.wait()
);[/js]
And maybe we want to center all of our sentences. We can do it one by one:
[js new=”5,9,14″ try=”data-no-reset”]PennController.ResetPrefix(null);
PennController(
newText(“test sentence”, “A is colder than B, though A is not cold yet.”)
.settings.center() // This one…
.print()
,
newText(“question”, “Does this sentence feel contradictory to you?”)
.settings.center() // this one…
.settings.bold()
.print()
,
newText(“instruction”, “Press F if you think the sentence is coherent, press J if you think it is INcoherent.”)
.settings.center() // … and this one
.settings.italic()
.print()
,
newKey(“answer”, “FJ”)
.wait()
);[/js]
Tip: you can include HTML tags in your text. Wrap your text between <p></p>
to make it a paragraph coming with spacing above and below it, like this: [js]newText(“question”, “
Does this sentence feel contradictory to you?
“)[/js]
Defaults
OR we can do it all at once:
[js new=”4-6″ remove=”8,12,17″ try=”data-no-reset”]PennController.ResetPrefix(null);
PennController(
defaultText
.settings.center() // will add this line immediately after any newText
,
newText(“test sentence”, “A is colder than B, though A is not cold yet.”)
//.settings.center()
.print()
,
newText(“question”, “Does this sentence feel contradictory to you?”)
//.settings.center()
.settings.bold()
.print()
,
newText(“instruction”, “Press F if you think the sentence is coherent, press J if you think it is INcoherent.”)
//.settings.center()
.settings.italic()
.print()
,
newKey(“answer”, “FJ”)
.wait()
);[/js]
In fact we can also tell PennController to print any newly created text by default: the text will be automatically printed onto the page below the elements that were added to the page before its creation.
[js new=”6″ remove=”9,13,17″ try=”data-no-reset”]PennController.ResetPrefix(null);
PennController(
defaultText
.settings.center()
.print() // Any text element will be printed upon creation
,
newText(“test sentence”, “A is colder than B, though A is not cold yet.”)
//.print()
,
newText(“question”, “Does this sentence feel contradictory to you?”)
.settings.bold()
//.print()
,
newText(“instruction”, “Press F if you think the sentence is coherent, press J if you think it is INcoherent.”)
.settings.italic()
//.print()
,
newKey(“answer”, “FJ”)
.wait()
);[/js]
Exercises
- make the question appear above the test sentence
- make
wait()
a default command for keys - add a Press C to continue message and listen for a press on the C key before printing the instruction
Questions
Why is print()
not a default… by default?
Because sometimes you may want to make sure some manipulations on the text take effect BEFORE it becomes visible on the screen (e.g., setting its aesthetics). In more complex cases, you may even want to create the text element at some point during the trial, do some actions, and only print the text later on.
Why do I need to give a name to every element? It’s annoying
This is to enforce consistent practices. As your scripts become more complex, you will need to refer back to some (possibly most/all) of the elements you creat. This is only possible if you name your elements. Naming the elements you create also helps making sense of what you’re doing.
Next pages: (late) Preliminary remarks on PennController's ontology
Next sample trial: Picture selection & Audio playback