<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>位置情報クイズ</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
    <style>
        #locationmap { height: 400px; margin: 1em 0; }
        body { font-family: sans-serif; background: #fff; }
        img { max-width: 100%; }
    </style>
</head>
<body>
    <h1 id="title">位置情報クイズ</h1>
    <button id="start">START</button>
    <button id="stop">STOP</button>
    <div id="locationmap"></div>
    <h2 id="id_question">ここに問題文</h2>
    <img id="id_mondaigazo" src="" alt="問題画像">
    <div>
        <button value="A" id="id_ChoiceA" onclick="answer(event)">A</button>
        <button value="B" id="id_ChoiceB" onclick="answer(event)">B</button>
        <button value="C" id="id_ChoiceC" onclick="answer(event)">C</button>
        <button value="D" id="id_ChoiceD" onclick="answer(event)">D</button>
    </div>
    <p id="id_pf"></p>
    <p id="id_kotae"></p>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            var allData = [];
            var currentQuestionIndex = 0;
            var nTrial = 100;
            var watchId = null;

            var mymap = L.map("locationmap").setView([38.891, 139.824], 16);
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(mymap);

            var locmarker = L.marker(mymap.getCenter()).addTo(mymap);
            locmarker.bindPopup("STARTしてね").openPopup();

            function loadCSV(targetFile) {
                fetch(targetFile)
                    .then((resp) => resp.ok ? resp.text() : Promise.reject("CSV読み込みエラー"))
                    .then((txt) => {
                        allData = new Papa.parse(txt, {header: true}).data;
                        console.log("CSVデータ読み込み完了:", allData);
                        setQuestion(currentQuestionIndex);
                    });
            }

            function setQuestion(number) {
                var q = allData[number];
                document.getElementById("id_question").innerHTML = q.Q;
                document.getElementById("id_ChoiceA").innerHTML = q.A;
                document.getElementById("id_ChoiceB").innerHTML = q.B;
                document.getElementById("id_ChoiceC").innerHTML = q.C;
                document.getElementById("id_ChoiceD").innerHTML = q.D;
                document.getElementById("id_mondaigazo").src = "img/" + q.IMG;
                document.getElementById("id_kotae").innerHTML = '';
            }

            window.answer = function(e) {
                var seikai = allData[currentQuestionIndex].ANS;
                var kaisetsu = allData[currentQuestionIndex].TEXT;
                var kaitou = e.target.value;

                if (kaitou === seikai) {
                    document.getElementById("id_pf").innerHTML = '正解';
                    document.getElementById("id_kotae").innerHTML = kaisetsu;
                    document.body.style.background = "#ccffff";
                } else {
                    document.getElementById("id_pf").innerHTML = '不正解 もう一度答えてみよう!';
                    document.getElementById("id_kotae").innerHTML = '-';
                    document.body.style.background = "#696969";
                }
            }

            function onSuccess(pos) {
                var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
                mymap.panTo(latlng);
                locmarker.setLatLng(latlng);
                console.log("現在地:", latlng);

                allData.forEach((quiz, index) => {
                    var quizLat = parseFloat(quiz.LAT);
                    var quizLng = parseFloat(quiz.LNG);

                    if (Math.abs(latlng.lat - quizLat) < 0.0002 && Math.abs(latlng.lng - quizLng) < 0.0002) {
                        locmarker.setPopupContent("当たり").openPopup();
                        setQuestion(index);
                        currentQuestionIndex = index;
                    }
                });
            }

            function onError(err) {
                console.log("位置情報の取得エラー:", err);
                restN = "あと" + (--nTrial) + "回試行します。";
                locmarker.setPopupContent("捕捉失敗:" + restN).openPopup();
                if (nTrial <= 0) {
                    navigator.geolocation.clearWatch(watchId);
                }
            }

            function tryWatchLOC() {
                stopLOC();
                watchId = navigator.geolocation.watchPosition(onSuccess, onError, {
                    maximumAge: 0,
                    timeout: 3000,
                    enableHighAccuracy: true
                });
                document.getElementById("title").textContent = "START!!";
            }

            function stopLOC() {
                if (watchId != null) {
                    navigator.geolocation.clearWatch(watchId);
                    document.getElementById("title").textContent = "STOP";
                    locmarker.setPopupContent("停止しました");
                }
                watchId = null;
            }

            document.getElementById("start").addEventListener("click", tryWatchLOC);
            document.getElementById("stop").addEventListener("click", stopLOC);

            loadCSV("4taku.csv"); // 必要に応じてCSVのパスを調整
        });
    </script>
</body>
</html>
