NOTE: this page assumes you are familiar with notions covered in this page.

Next: Priming Design.

Setup

You have two options:

1. You can manually erase the content of your experiment’s main.js file and then copy-paste the script from the Basics section below
2. 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 and replace master with rating-input in the branch box, 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 want to test some predictions about how people associate colors with sensations of warmth. We can ask them to report their judgment on a scale for a given color, e.g. green:

[js try=”data-no-reset”]
PennController.ResetPrefix(null);

PennController(
newText(“green”, “How warm is the color green to you?”)
.print()
,
newScale(“judgment”, 5) // 5-point scale
.print()
.wait() // Validate upon choice
);[/js]

Adding content to the left/right

This is functional, but it would be better if the participant had an idea of how the scale is oriented. Let’s add some text to the left and to the right of the scale:

[js new=”8,9″ try=”data-no-reset”]
PennController.ResetPrefix(null);

PennController(
newText(“green”, “To me the color green is…”)
.print()
,
newScale(“judgment”, 5)
.settings.before( newText(“cold”, “very cold”) ) // Add a text element to the left
.settings.after( newText(“hot”, “very hot”) ) // Add a text element to the right
.print()
.wait()
);[/js]

Slider

Maybe more continuous measures are more fitted to our model. Presenting the scale as a slider, we can naturally present a 100-point scale:

[js new=”8,9,14-18″ highlight=”7″ try=”data-no-reset”]
PennController.ResetPrefix(null);

PennController(
newText(“green”, “To me the color green is…”)
.print()
,
newScale(“judgment”, 100)
.settings.slider() // Slider scale
.settings.size( 200 , “auto” ) // 200px wide
.settings.before( newText(“cold”, “very cold”) )
.settings.after( newText(“hot”, “very hot”) )
.print()
.wait()
,
// Adding a validation button (feels wrong to end the trial when the slider gets released)
newButton(“validate”, “Validate”)
.print()
.wait()
);[/js]

Labels

Or maybe we like the 5-point scale, but want to add a label above each button:

[js remove=”6″ highlight=”10″ new=”9″ try=”data-no-reset”]
PennController.ResetPrefix(null);

PennController(
// Don’t print it yet, we’ll now add it to the left of the scale
newText(“green”, “To me the color green is…”)
//.print()
,
// Give as many labels as there are buttons
newScale(“judgment”, “cold”, “cool”, “lukewarm”, “warm”, “hot”)
.settings.labelsPosition(“top”) // Position the labels
.settings.before( getText(“green”) )
.print()
.wait()
,
newButton(“validate”, “Validate”)
.print()
.wait()
);[/js]

Alternative response

Maybe some people feel the cold-hot scale is too restricted and want to give a custom response. We can provide them with a text input box as the last option:

[js new=”6-8″ new=”13″ try=”data-no-reset”]
PennController.ResetPrefix(null);

PennController(
newText(“green”, “To me the color green is…”)
,
newTextInput(“other”, “”) // Don’t print it yet
.settings.before( newText(“label input”, “other:”) )
,
// The last option has no label: it’s the ‘other’ text input
newScale(“judgment”, “cold”, “cool”, “lukewarm”, “warm”, “hot”, null)
.settings.labelsPosition(“top”)
.settings.before( getText(“green”) )
.settings.after( getTextInput(“other”) ) // Text input box to the right
.print()
.wait()
,
newButton(“validate”, “Validate”)
.print()
.wait()
);[/js]

Dynamic unfolding

Maybe we want to show the other input box only if the participant clicks that option. We will need to use a Test command on the Scale element to check which option was selected.

[js highlight=”7,16″ new=”9-11,20-30″ try=”data-no-reset”]
PennController.ResetPrefix(null);

PennController(
newText(“green”, “To me the color green is…”) // Don’t print yet
,
newTextInput(“other”, “”) // Don’t print yet
.settings.hidden() // Make sure it’s masked
,
newText(“label input”, “other”) // Don’t print yet
.settings.after( getTextInput(“other”) ) // Input box to the right (hidden for now)
,
// We don’t need to create the text input box yet
newScale(“judgment”, “cold”, “cool”, “lukewarm”, “warm”, “hot”, null)
.settings.labelsPosition(“top”)
.settings.before( getText(“green”) )
.settings.after( getText(“label input”) ) // We still need some text saying ‘other’
.print()
.wait()
,
getScale(“judgment”)
.test.selected(6) // The last option has no value: we refer to it by its index
.success(
// If the 6-th option was selected…
getTextInput(“other”)
.settings.visible() // … reveal the input box
)
.failure(
// Any other option selected: do nothing
)
,
newButton(“validate”, “Validate”)
.print()
.wait()
);[/js]

Exercises

• Reduce the width of the text input box
• Start with the input box disabled (.settings.disable()) rather than hidden, and enable it upon choice of last option

Questions

The input box does not appear if I click on other after I first clicked on another option. Why? And how can I fix this?

The Test command in the script above is only evaluated after the very first selection on the scale. If the very first click is on the last option, the test is a success and the box appears. If the very first click is on another option, the test fails and the box does not appear. Subsequent choices have no consequence, since the Test command has long been evaluated by then.

What you are trying to do is to set the scale such that, whenever an option is selected, it should check whether it was the last one, and show/hide the input box accordingly. This sounds more like a setting: you are not trying to script the execution of a unique action in a linear series of events. What you are looking for is the Settings command callback.

[js new=”16-23″ try=”data-no-reset”]
PennController.ResetPrefix(null);

PennController(
newText(“green”, “To me the color green is…”)
,
newTextInput(“other”, “”)
.settings.hidden()
,
newText(“label input”, “other”)
.settings.after( getTextInput(“other”) )
,
newScale(“judgment”, “cold”, “cool”, “lukewarm”, “warm”, “hot”, null)
.settings.labelsPosition(“top”)
.settings.before( getText(“green”) )
.settings.after( getText(“label input”) )
.settings.callback( // Whenever an option is selected, do this:
getScale(“judgment”)
.test.selected(6)
// … reveal the input box
.success( getTextInput(“other”).settings.visible() )
// … hide the input box
.failure( getTextInput(“other”).settings.hidden() )
)
.print()
.wait()
,
newButton(“validate”, “Validate”)
.print()
.wait()
);
[/js]

Next page: Priming Design