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

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

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

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

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

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