{{ extends "global/Page.html" }}
{{ load otree static }}

{{ block title }}
    Questionnaire
{{ endblock }}

{{ block content }}
{# APP: oathexp (First Mover) | FILE: Questionnaire.html #}

<h4>Part 1: Connection to the Second Movers</h4>

<p>
    In this task we ask you to
    {{ if is_ios_continuous }}
        shift the circles to
    {{ elif is_ios_step_choice }}
        choose a pair of circles that
    {{ elif is_ios_original }}
        choose a pair of circles that
    {{ endif }}
    best represents your connection with the Second Movers in your group.
</p>

<p>
    {{ if is_ios_continuous }}
        Click on the left circle, drag it to the right and drop it when the circles
    {{ elif is_ios_step_choice }}
        Select the pair of circles which
    {{ elif is_ios_original }}
        Select the pair of circles which
    {{ endif }}
    indicate to what extent you and the Second Movers are connected.
</p>

<div id="ios"></div>

<br><br>

<h4>Part 2: Additional Questions</h4>

{{ if took_oath }}
{{ formfield 'oath_recall' }}
{{ endif }}

{{ formfield 'age_questionnaire' }}

{{ formfield 'gender_questionnaire' }}

{{ formfield 'political_affiliation' }}

{{ formfield 'religious_affiliation' }}

{{ formfield 'religious_affiliation_other' }}

<div style="text-align: right;">{{ next_button }}</div>

{# Hidden form fields for IOS widget #}
<input type="hidden" id="ios_distance" name="ios_distance"/>
<input type="hidden" id="ios_overlap" name="ios_overlap"/>

{{ if is_ios_step_choice }}
    <input type="hidden" id="ios_number" name="ios_number"/>
{{ endif }}
{{ if is_ios_original }}
    <input type="hidden" id="ios_number" name="ios_number"/>
{{ endif }}

{{ endblock }}

{{ block scripts }}
<script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.17/dist/interact.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/geoffreycastillo/ios-js@0.1.1/ios.min.js"></script>
<script>
    const iosOptions = {
        el: 'ios',
        type: '{{ ios_type_value }}',
        buttonsClass: 'btn btn-outline-secondary',
        other: 'Second Movers',
    };
    {{ if is_ios_original }}
        iosOptions.direction = 'row';
    {{ endif }}

    const ios = new Ios(iosOptions);

    const ios_distance_input = document.getElementById('ios_distance');
    const ios_overlap_input = document.getElementById('ios_overlap');
    const ios_number_input = document.getElementById('ios_number');

    document.getElementById('ios').addEventListener(
        'pointerdown',
        () => {
            window.addEventListener(
                'pointerup',
                () => {
                    ios_distance_input.value = ios.proportionDistance;
                    ios_overlap_input.value = ios.proportionOverlap;
                    if (ios_number_input) {
                        ios_number_input.value = ios.currentCircle;
                    }
                },
                false)
        }, false
    );
</script>
{{ endblock }}