{% load otree static %}
 
    <div class="task_box">
        <div style="width: 875px; margin: 50px auto 50px auto">
            <div style="position: relative; height: 100px">
                <div style="position: relative; margin: 50px 0px 25px 0px">
                    <div id ="self" class="self"></div>
                    <div id ="self_label" class="self_label" style="text-align:center">You</div>
                    <div id ="group" class="group"></div>
                    <div id ="group_label" class="group_label" style="text-align:center">A group of Chinese people</div>
                </div>
                <div class="line"></div>
            </div>
            <div style="width: 100%; height: 50px; position: relative">
                <div style="width: 125px; top: 25px; left:0%; position:absolute";>Identify Weakly</div>
                <div style="width: 125px; top: 25px; left:100%; margin-left: -120px; position:absolute">Identify Strongly</div>
            </div>
            <div style="width: 100%; height: 50px; position: relative">
                <div class="start_point"></div>
                <input type="range" min="0" max="400" value="200" class="slider" id="slider">
            </div>
        </div>
    </div>

    <div class="button_box">
        <br>
        <span style="margin-right: 10px">  </span>
        <input class="btn btn-primary" type="submit" value="Next" onclick="transcribe()"/>
        <br><br>
    </div>

    <div style ="display:none;">
        <input type="hidden" name="identification" id="otree_identification" class="form-control">
        <input type="hidden" name="overlap" id="otree_overlap" class="form-control">
    </div>



    <style>
        .self{
            position: absolute;
            height: 50px;
            width: 50px;
            margin-top: 25px;
            left: 200px;
            border: solid black 2px;
            border-radius: 50%;
        }
        .group {
            position: absolute;
            height: 100px;
            width: 100px;
            left: 600px;
            margin-left: -25px;
            border: solid black 2px;
            border-radius: 50%;
        }
        .self_label {
            position: absolute;
            width: 100px;
            left: 200px;
            margin-left: -25px;
        }
        .group_label {
            position: absolute;
            width: 200px;
            margin-top: -25px;
            left: 600px;
            margin-left: -75px;
        }
        .line {
            position:absolute;
            height:2px;
            width:100%;
            top: 50px;
            background: #27001f;
        }
        .start_point {
            position: absolute;
            height: 30px;
            width: 30px;
            margin-left: -15px;
            margin-top: -1px;
            left: 50%;
            border: medium solid #d3d3d3;
            border-radius: 5px;
            background: #d3d3d3;
            z-index: -100;
        }
        .slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 10px;
            outline: none;
            border-radius: 5px;
            background: #d3d3d3;
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            background: #1123af;
            cursor: pointer;
        }
        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            background: #1123af;
            cursor: pointer;
        }
    </style>



    <script>
        var self = document.getElementById('self');
        var group = document.getElementById('group');

        var self_label = document.getElementById('self_label');
        var group_label = document.getElementById('group_label');

        var slider = document.getElementById("slider");

        var last_position = -100;
        var overlap = 0;
        var start_self = '0';
        var start_group = '800';

        function transcribe() {
            document.getElementById('otree_identification').value = last_position;
            document.getElementById('otree_overlap').value = overlap;
        }

        slider.oninput = function() {
            self.style.left = start_self + parseInt(this.value) + 'px';
            group.style.left = start_group - parseInt(this.value) + 'px';

            self_label.style.left = start_self + parseInt(this.value) + 'px';
            group_label.style.left = start_group - parseInt(this.value) + 'px';

            last_position = (this.value - 200)/200;

            d = 800 - 2*parseInt(this.value);
            r = 25;
            R = 50;

            if (d > r + R){
                overlap = 0;
            }
            else if (d <= R - r){
                overlap = 1;
            }
            else{
                overlap = (r*r*Math.acos((d*d + r*r - R*R)/(2*d*r)) + R*R*Math.acos((d*d + R*R - r*r)/(2*d*R)) - 0.5*
                    Math.sqrt((-d+r+R)*(d+r-R)*(d-r+R)*(d+r+R)))/(r*r*Math.PI);
            }
        }
    </script>