ios.js demo

Return Home

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

It is available on GitHub.

Continuous IOS scale

Proportion overlap:

Proportion distance:

HTML:

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

JS:

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
);

Step-Choice IOS scale with 10 circles

IOS score:

Proportion overlap:

Proportion distance:

HTML:

<div id="ios-step-choice"></div>
IOS score: <span id="step-ios-score"></span>
Proportion overlap: <span id="step-ios-overlap"></span>
Proportion distance: <span id="step-ios-distance"></span>

JS:

const iosStepChoice = new Ios({
    el: 'ios-step-choice',
    type: 'step-choice',
    numberCircles: 10,
    buttonsClass: 'btn btn-outline-secondary',
});

const step_choice_ios_distance_input = document.getElementById('step-ios-distance');
const step_choice_ios_overlap_input = document.getElementById('step-ios-overlap');
const step_choice_ios_score_input = document.getElementById('step-ios-score');

document.getElementById('ios-step-choice').addEventListener(
    'mousedown',
    () => {
        window.addEventListener(
            'mouseup',
            () => {
                step_choice_ios_distance_input.innerHTML = iosStepChoice.proportionDistance;
                step_choice_ios_overlap_input.innerHTML = iosStepChoice.proportionOverlap;
                step_choice_ios_score_input.innerHTML = iosStepChoice.currentCircle;
            },
            false)
    }, false
);

Original IOS scale

IOS score:

Proportion overlap:

Proportion distance:

HTML:

<div id="ios-original"></div>
IOS score: <span id="original-ios-score"></span>
Proportion overlap: <span id="original-ios-overlap"></span>
Proportion distance: <span id="original-ios-distance"></span>

JS:

const iosOriginal = new Ios({
    el: 'ios-original',
    type: 'original',
    buttonsClass: 'btn btn-outline-secondary',
    direction: 'row'
});

const original_ios_distance_input = document.getElementById('original-ios-distance');
const original_ios_overlap_input = document.getElementById('original-ios-overlap');
const original_ios_score_input = document.getElementById('original-ios-score');

document.getElementById('ios-original').addEventListener(
    'mousedown',
    () => {
        window.addEventListener(
            'mouseup',
            () => {
                original_ios_distance_input.innerHTML = iosOriginal.proportionDistance;
                original_ios_overlap_input.innerHTML = iosOriginal.proportionOverlap;
                original_ios_score_input.innerHTML = iosOriginal.currentCircle;
            },
            false)
    }, false
);

Extended IOS scales

As we explain in our documentation, ios.js offers two options to extend the discrete IOS scales by adding intermediate circles. The unbalanced option adds circles in the first half of the scale, while an option inspired by the IOS11 of Baader, Starmer, Tufano, Gächter adds intermediate circles in the first and the last third of the scale.

Unbalanced Step-Choice IOS scale

IOS score:

IOS score recoded:

Proportion overlap:

Proportion distance:

HTML:

<div id="ios-step-choice-unbalanced"></div>
IOS score: <span id="step-ios-unbalanced-score"></span>
IOS score recoded: <span id="step-ios-unbalanced-score-recoded"></span>
Proportion overlap: <span id="step-ios-unbalanced-overlap"></span>
Proportion distance: <span id="step-ios-unbalanced-distance"></span>

JS:

const iosStepChoiceUnbalanced = new Ios({
    el: 'ios-step-choice-unbalanced',
    type: 'step-choice',
    unbalanced: true,
    buttonsClass: 'btn btn-outline-secondary',
});

const step_choice_ios_unbalanced_distance_input = document.getElementById('step-ios-unbalanced-distance');
const step_choice_ios_unbalanced_overlap_input = document.getElementById('step-ios-unbalanced-overlap');
const step_choice_ios_unbalanced_score_input = document.getElementById('step-ios-unbalanced-score');
const step_choice_ios_unbalanced_score_recoded_input = document.getElementById('step-ios-unbalanced-score-recoded');

document.getElementById('ios-step-choice-unbalanced').addEventListener(
    'mousedown',
    () => {
        window.addEventListener(
            'mouseup',
            () => {
                step_choice_ios_unbalanced_distance_input.innerHTML = iosStepChoiceUnbalanced.proportionDistance;
                step_choice_ios_unbalanced_overlap_input.innerHTML = iosStepChoiceUnbalanced.proportionOverlap;
                step_choice_ios_unbalanced_score_input.innerHTML = iosStepChoiceUnbalanced.currentCircle;
                step_choice_ios_unbalanced_score_recoded_input.innerHTML = iosStepChoiceUnbalanced.currentCircleRecoded;
            },
            false)
    }, false
);

IOS11-like Step-Choice IOS scale

IOS score:

IOS score recoded:

Proportion overlap:

Proportion distance:

HTML:

<div id="ios-step-choice-11"></div>
IOS score: <span id="step-ios-11-score"></span>
IOS score recoded: <span id="step-ios-11-score-recoded"></span>
Proportion overlap: <span id="step-ios-11-overlap"></span>
Proportion distance: <span id="step-ios-11-distance"></span>

JS:

const iosStepChoice11 = new Ios({
    el: 'ios-step-choice-11',
    type: 'step-choice',
    extended: 'ios11',
    buttonsClass: 'btn btn-outline-secondary',
});

const step_choice_ios_11_distance_input = document.getElementById('step-ios-11-distance');
const step_choice_ios_11_overlap_input = document.getElementById('step-ios-11-overlap');
const step_choice_ios_11_score_input = document.getElementById('step-ios-11-score');
const step_choice_ios_11_score_recoded_input = document.getElementById('step-ios-11-score-recoded');

document.getElementById('ios-step-choice-11').addEventListener(
    'mousedown',
    () => {
        window.addEventListener(
            'mouseup',
            () => {
                step_choice_ios_11_distance_input.innerHTML = iosStepChoice11.proportionDistance;
                step_choice_ios_11_overlap_input.innerHTML = iosStepChoice11.proportionOverlap;
                step_choice_ios_11_score_input.innerHTML = iosStepChoice11.currentCircle;
                step_choice_ios_11_score_recoded_input.innerHTML = iosStepChoice11.currentCircleRecoded;
            },
            false)
    }, false
);