<commit_before>{% extends 'maps/base.html' %}

{% block background-color %}
    cyan
{% endblock %}

{% block content %}

    <div class="main-panel">
        <div class="row">
            <div class="card-panel">
                <h5 class="task-title">{{ task.title }}</h5>
                <p>{{ task.statement }}</p>

                <div id="ans">
                    <p id="score" class="flow-text"></p>
                    <p id="hint"></p>
                </div>

                <div class="map"></div>
                <script>
                    var map, markers;
                    var gameOver = false;
                    var singleMarker = true;
                    {% if task.multiple_marker %}
                        singleMarker = false;
                    {% endif %}
                    var interval;
                    var answerSetId = {{ task.answer_set_id }};
                    var index = {{ task.idx }};
                    var startTime = Date.now();
                    function initMap() {
                        var bounds = new google.maps.LatLngBounds();
                        {% for latLng in task.bounds %}
                            bounds.extend({lat: {{ latLng.0 }}, lng: {{ latLng.1 }}});
                        {% endfor %}

                        map = new google.maps.Map(document.getElementsByClassName('map')[0], {
                            mapTypeId: 'satellite',
                            disableDefaultUI: true,
                            zoomControl: true
                        });

                        {% if task.use_overlay %}
                            var overlay;
                            USGSOverlay.prototype = new google.maps.OverlayView();

                            function USGSOverlay(bounds, image, map) {
                                this.bounds_ = bounds;
                                this.image_ = image;
                                this.map_ = map;

                                this.div_ = null;
                                this.setMap(map);
                            }

                            USGSOverlay.prototype.onAdd = function () {
                                var div = document.createElement('div');
                                div.style.borderStyle = 'none';
                                div.style.borderWidth = '0px';
                                div.style.position = 'absolute';

                                var img = document.createElement('img');
                                img.src = this.image_;
                                img.style.width = '100%';
                                img.style.height = '100%';
                                img.style.position = 'absolute';
                                div.appendChild(img);

                                this.div_ = div;

                                var panes = this.getPanes();
                                panes.overlayLayer.appendChild(div);
                            };

                            USGSOverlay.prototype.draw = function () {
                                var overlayProjection = this.getProjection();
                                var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
                                var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

                                var div = this.div_;
                                div.style.left = sw.x + 'px';
                                div.style.top = ne.y + 'px';
                                div.style.width = (ne.x - sw.x) + 'px';
                                div.style.height = (sw.y - ne.y) + 'px';
                            };
                            USGSOverlay.prototype.onRemove = function () {
                                this.div_.parentNode.removeChild(this.div_);
                                this.div_ = null;
                            };


                            var contour_bounds = new google.maps.LatLngBounds();
                            {% for latLng in task.contour_bounds %}
                                contour_bounds.extend({lat: {{ latLng.0 }}, lng: {{ latLng.1 }}});
                            {% endfor %}
                            var question_id = {{ task.question_id }};
                            var srcImage = '/api/contour_tile/' + question_id;
                            overlay = new USGSOverlay(bounds, srcImage, map);
                        {% endif %}

                        map.fitBounds(bounds);
                        markers = [new google.maps.Marker({
                            map: map,
                            draggable: true,
                            title: "Drag me!"
                        })];
                        map.addListener('click', function (e) {
                            if (!gameOver) {
                                markers[0].setPosition(e.latLng);
                                $('#submit-btn').removeAttr('disabled');
                            }
                        });
                        google.maps.event.addListener(map, 'bounds_changed', function () {
                            var ne = map.getBounds().getNorthEast();
                            var sw = map.getBounds().getSouthWest();
                            var nw = new google.maps.LatLng(ne.lat(), sw.lng());
                            var se = new google.maps.LatLng(sw.lat(), ne.lng());
                            if (bounds.contains(ne) &&
                                bounds.contains(nw) &&
                                bounds.contains(se) &&
                                bounds.contains(sw)) return;

                            var c = map.getCenter(),
                                x = c.lng(),
                                y = c.lat(),
                                maxX = bounds.getNorthEast().lng(),
                                maxY = bounds.getNorthEast().lat(),
                                minX = bounds.getSouthWest().lng(),
                                minY = bounds.getSouthWest().lat();

                            if (x < minX) x = minX;
                            if (x > maxX) x = maxX;
                            if (y < minY) y = minY;
                            if (y > maxY) y = maxY;
                            map.setCenter(new google.maps.LatLng(y, x));
                        });

                        {% if task.time is not None %}
                            run();
                        {% endif %}
                    }

                    function submit() {
                        clearInterval(interval);
                        var lat = markers[0].position.lat();
                        var lng = markers[0].position.lng();
                        $.post("/api/answer/", JSON.stringify({
                            answer_set_id: answerSetId, index: index, duration: Date.now() - startTime,
                            answer: {"location": {"lat": lat, "lng": lng}}
                        }), function (data, status) {
                            console.log(status);
                            console.log(data);
                            if (status != 200 && status != 'success') {
                                alert("Failed with status " + status + ": " + data);
                            } else {
                                showCorrectAnswer(data['scoring_data']);
                            }
                        }).fail(function (data, status) {
                            console.log(status);
                            console.log(data);
                            alert("Error: " + data.responseJSON['status_message']);
                        });
                    }

                    function giveUp() {
                        clearInterval(interval);
                        $.post("/api/answer/", JSON.stringify({
                            answer_set_id: answerSetId,
                            index: index,
                            duration: Date.now() - startTime
                        }), function (data, status) {
                            console.log(status);
                            console.log(data);
                            if (status != 200 && status != 'success') {
                                alert("Failed with status " + status + ": " + data);
                            } else {
                                showCorrectAnswer(data['scoring_data']);
                            }
                        }).fail(function (data, status) {
                            console.log(status);
                            console.log(data);
                            alert("Error: " + data.responseJSON['status_message']);
                        });
                    }

                    function showCorrectAnswer(data) {
                        gameOver = true;
                        var score = data['score'];
                        var accuracy = data['accuracy'];
                        var hint = data['hint'];
                        var correctLoc = data['correct_location'];
                        if (hint.length > 0)
                            $('#hint').html("<b>Hint:</b> " + hint);
                        var scoreInfo = "Your score is " + score;
                        if (accuracy != null)
                            score += " (distance is " + accuracy + ")";
                        $('#score').html();
                        $('#bottom-btns').attr('hidden', true);
                        $('#bottom-next-btn').removeAttr('hidden');
                        markers[0].setPosition(correctLoc);
                        markers[0].setDraggable(false);
                    }
                </script>
                <script async defer
                        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCd-J0f_bW_qHGpF9JrhIGafmVQsa9SGXM&callback=initMap">
                </script>

                <div id="bottom-btns" class="bottom-controls row">
                    <div class="col s4 m3">
                        <button id="give-up-btn" class="fw btn-large red waves-effect" onclick="giveUp()">
                            <span class="hide-on-small-only">Give Up</span>
                            <span class="hide-on-med-and-up"><i class="material-icons">not_interested</i></span><commit_msg>Fix typo<commit_after>{% extends 'maps/base.html' %}

{% block background-color %}
    cyan
{% endblock %}

{% block content %}

    <div class="main-panel">
        <div class="row">
            <div class="card-panel">
                <h5 class="task-title">{{ task.title }}</h5>
                <p>{{ task.statement }}</p>

                <div id="ans">
                    <p id="score" class="flow-text"></p>
                    <p id="hint"></p>
                </div>

                <div class="map"></div>
                <script>
                    var map, markers;
                    var gameOver = false;
                    var singleMarker = true;
                    {% if task.multiple_marker %}
                        singleMarker = false;
                    {% endif %}
                    var interval;
                    var answerSetId = {{ task.answer_set_id }};
                    var index = {{ task.idx }};
                    var startTime = Date.now();
                    function initMap() {
                        var bounds = new google.maps.LatLngBounds();
                        {% for latLng in task.bounds %}
                            bounds.extend({lat: {{ latLng.0 }}, lng: {{ latLng.1 }}});
                        {% endfor %}

                        map = new google.maps.Map(document.getElementsByClassName('map')[0], {
                            mapTypeId: 'satellite',
                            disableDefaultUI: true,
                            zoomControl: true
                        });

                        {% if task.use_overlay %}
                            var overlay;
                            USGSOverlay.prototype = new google.maps.OverlayView();

                            function USGSOverlay(bounds, image, map) {
                                this.bounds_ = bounds;
                                this.image_ = image;
                                this.map_ = map;

                                this.div_ = null;
                                this.setMap(map);
                            }

                            USGSOverlay.prototype.onAdd = function () {
                                var div = document.createElement('div');
                                div.style.borderStyle = 'none';
                                div.style.borderWidth = '0px';
                                div.style.position = 'absolute';

                                var img = document.createElement('img');
                                img.src = this.image_;
                                img.style.width = '100%';
                                img.style.height = '100%';
                                img.style.position = 'absolute';
                                div.appendChild(img);

                                this.div_ = div;

                                var panes = this.getPanes();
                                panes.overlayLayer.appendChild(div);
                            };

                            USGSOverlay.prototype.draw = function () {
                                var overlayProjection = this.getProjection();
                                var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
                                var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

                                var div = this.div_;
                                div.style.left = sw.x + 'px';
                                div.style.top = ne.y + 'px';
                                div.style.width = (ne.x - sw.x) + 'px';
                                div.style.height = (sw.y - ne.y) + 'px';
                            };
                            USGSOverlay.prototype.onRemove = function () {
                                this.div_.parentNode.removeChild(this.div_);
                                this.div_ = null;
                            };


                            var contour_bounds = new google.maps.LatLngBounds();
                            {% for latLng in task.contour_bounds %}
                                contour_bounds.extend({lat: {{ latLng.0 }}, lng: {{ latLng.1 }}});
                            {% endfor %}
                            var question_id = {{ task.question_id }};
                            var srcImage = '/api/contour_tile/' + question_id;
                            overlay = new USGSOverlay(bounds, srcImage, map);
                        {% endif %}

                        map.fitBounds(bounds);
                        markers = [new google.maps.Marker({
                            map: map,
                            draggable: true,
                            title: "Drag me!"
                        })];
                        map.addListener('click', function (e) {
                            if (!gameOver) {
                                markers[0].setPosition(e.latLng);
                                $('#submit-btn').removeAttr('disabled');
                            }
                        });
                        google.maps.event.addListener(map, 'bounds_changed', function () {
                            var ne = map.getBounds().getNorthEast();
                            var sw = map.getBounds().getSouthWest();
                            var nw = new google.maps.LatLng(ne.lat(), sw.lng());
                            var se = new google.maps.LatLng(sw.lat(), ne.lng());
                            if (bounds.contains(ne) &&
                                bounds.contains(nw) &&
                                bounds.contains(se) &&
                                bounds.contains(sw)) return;

                            var c = map.getCenter(),
                                x = c.lng(),
                                y = c.lat(),
                                maxX = bounds.getNorthEast().lng(),
                                maxY = bounds.getNorthEast().lat(),
                                minX = bounds.getSouthWest().lng(),
                                minY = bounds.getSouthWest().lat();

                            if (x < minX) x = minX;
                            if (x > maxX) x = maxX;
                            if (y < minY) y = minY;
                            if (y > maxY) y = maxY;
                            map.setCenter(new google.maps.LatLng(y, x));
                        });

                        {% if task.time is not None %}
                            run();
                        {% endif %}
                    }

                    function submit() {
                        clearInterval(interval);
                        var lat = markers[0].position.lat();
                        var lng = markers[0].position.lng();
                        $.post("/api/answer/", JSON.stringify({
                            answer_set_id: answerSetId, index: index, duration: Date.now() - startTime,
                            answer: {"location": {"lat": lat, "lng": lng}}
                        }), function (data, status) {
                            console.log(status);
                            console.log(data);
                            if (status != 200 && status != 'success') {
                                alert("Failed with status " + status + ": " + data);
                            } else {
                                showCorrectAnswer(data['scoring_data']);
                            }
                        }).fail(function (data, status) {
                            console.log(status);
                            console.log(data);
                            alert("Error: " + data.responseJSON['status_message']);
                        });
                    }

                    function giveUp() {
                        clearInterval(interval);
                        $.post("/api/answer/", JSON.stringify({
                            answer_set_id: answerSetId,
                            index: index,
                            duration: Date.now() - startTime
                        }), function (data, status) {
                            console.log(status);
                            console.log(data);
                            if (status != 200 && status != 'success') {
                                alert("Failed with status " + status + ": " + data);
                            } else {
                                showCorrectAnswer(data['scoring_data']);
                            }
                        }).fail(function (data, status) {
                            console.log(status);
                            console.log(data);
                            alert("Error: " + data.responseJSON['status_message']);
                        });
                    }

                    function showCorrectAnswer(data) {
                        gameOver = true;
                        var score = data['score'];
                        var accuracy = data['accuracy'];
                        var hint = data['hint'];
                        var correctLoc = data['correct_location'];
                        if (hint.length > 0)
                            $('#hint').html("<b>Hint:</b> " + hint);
                        var scoreInfo = "Your score is " + score;
                        if (accuracy != null)
                            scoreInfo += " (distance is " + accuracy + ")";
                        $('#score').html(scoreInfo);
                        $('#bottom-btns').attr('hidden', true);
                        $('#bottom-next-btn').removeAttr('hidden');
                        markers[0].setPosition(correctLoc);
                        markers[0].setDraggable(false);
                    }
                </script>
                <script async defer
                        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCd-J0f_bW_qHGpF9JrhIGafmVQsa9SGXM&callback=initMap">
                </script>

                <div id="bottom-btns" class="bottom-controls row">
                    <div class="col s4 m3">
                        <button id="give-up-btn" class="fw btn-large red waves-effect" onclick="giveUp()">
                            <span class="hide-on-small-only">Give Up</span>
                            <span class="hide-on-med-and-up"><i class="material-icons">not_interested</i></span>
{'fraction_non_alphanumeric': 0.11036209553158706, 'fraction_numerical': 0.002985362095531587, 'mean_word_length': 0.8363395225464191, 'pattern_counts': {'":': 10, '<': 67, '<?xml version=': 0, '>': 69, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 26, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3076626', 'n_tokens_mistral': 4934, 'n_tokens_neox': 4519, 'n_words': 858}