ios.js

A JavaScript implementation of the Inclusion of Other in the Self (IOS) scale that satisfies its original design features.

ios.js offers three versions:

• Continuous IOS scale: fully continuous IOS scale

• Step-choice IOS scale: discrete IOS scale that allows for many circles via back-and-forth buttons

• Standard IOS scale

Number of pairs of circles, circle sizes, and labels (among other options) can be easily customised. We also offer extended versions of the discrete IOS scales (unbalanced or inspired by IOS11) that add intermediate circles.

Demo

https://geoffreycastillo.com/ios-js-demo/

Paper

We present ios.js, and in particular the Continuous IOS scale, in more details in our paper: Beranek and Castillo (2022) Continuous Inclusion of Other in the Self.

If you use ios.js, please cite it!

Installation

ios.js uses interact.js. It is tested with version 1.10.17. Refer to their page for instructions on how to install; for example, with a CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/interact.min.js"></script>

Then, download ios.js from the releases and include it:

<script src="ios.js" type="text/javascript"></script>

or use a CDN such as jsDelivr:

<script src="https://cdn.jsdelivr.net/gh/geoffreycastillo/ios-js/ios.min.js"></script>

When you use ios.js in a real experiment, you should specify a version number by replacing ios-js with [email protected] in the link, where x.x.x corresponds to one of the version numbers in the releases. For example, to use 0.2.0:

<script src="https://cdn.jsdelivr.net/gh/geoffreycastillo/[email protected]/ios.min.js"></script>

Otherwise, you will use the latest version and run the risk that I push a new version while your experiment is running, which could break something.

Quick start

# html
<div id="ios-continuous"></div>
Proportion overlap: <span id="continuous-ios-overlap"></span>
Proportion distance: <span id="continuous-ios-distance"></span>


# js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/interact.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/geoffreycastillo/[email protected]/ios.min.js"></script>
<script>
    const iosContinuous = new Ios({
        el: 'ios-continuous',
    });

    const continuous_ios_distance_input = document.getElementById('continuous-ios-distance');
    const continuous_ios_overlap_input = document.getElementById('continuous-ios-overlap');

    document.getElementById('ios-continuous').addEventListener(
        'mousedown',
        () => {
            window.addEventListener(
                'mouseup',
                () => {
                    continuous_ios_distance_input.innerHTML = iosContinuous.proportionDistance;
                    continuous_ios_overlap_input.innerHTML = iosContinuous.proportionOverlap;
                },
                false)
        }, false
    );
</script>

Qualtrics? oTree?

See the wiki for instructions on how to use ios.js with Qualtrics.

For oTree, we have a separate demo app.

Other examples

For the Step-Choice IOS scale with 10 pairs of cirles:

# html
<div id="ios-step-choice"></div>
# js
const iosStepChoice = new Ios({
    el: 'ios-step-choice',
    type: 'step-choice',
    numberCircles: 10
});

For the original IOS scale:

# html
<div id="ios-original"></div>
# js
const iosPictorial = new Ios({
    el: 'ios-original',
    type: 'original'
});

Documentation

See the wiki for the API documentation.

Bugs? Suggestions?

Open an issue or a pull request, or email me at [email protected].

Licence

ios.js is licensed under the GNU General Public License v3.0.

Copyright (c) 2022 Geoffrey Castillo