<!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: '© <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>
