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


{% block title %}
    Instructions
{% endblock %}

{% block content %}

    <p>
        Warning: This following HIT is a <b>long HIT</b>. We estimate it should take about 40 minutes. <b>Please do not continue unless you
        have enough time to complete the task</b>.
    </p>


    <div align ="right">
        {% next_button %}
    </div>

<input type="hidden" id="gfg" name="ip" value="no value">

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>

    <script>
        /* Add "https://api.ipify.org?format=json" statement
           this will communicate with the ipify servers in
           order to retrieve the IP address $.getJSON will
           load JSON-encoded data from the server using a
           GET HTTP request */

        $.getJSON("https://api.ipify.org?format=json",
                                          function(data) {

            // Setting text of element P with id gfg
            $("#gfg").val(data.ip);
        })
    </script>


<input type="hidden" id="myInput" name="loc" value="no value">

<script>
var x = document.getElementById("myInput");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.value = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.value = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
getLocation()
</script>



{% endblock %}