document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("mymap").setView([38.919, 139.828], 12);
    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 markers = [];
    var hana = L.icon({iconUrl: "Hana.png"});
    // 全マーカー記憶用
    var customLayer = L.geoJson(null, {
	onEachFeature: (f, layer) => {
	    markers.push(layer);
	    layer.setIcon(hana);
	   // マーカーをすべて記憶しておく
	    let qn = markers.length; // 問題番号
	    let fp = f.properties;
	    if (!fp) return
	    let place = fp.設置場所;
	    let q = fp.問題;
	    let A = fp.A, B = fp.B, C = fp.C, D = fp.D; 
	    let answer = fp.正解;
	    let sel = "";
	    for (let i of ["A", "B", "C", "D"]) {
		sel += `<li><label class="quiz-button">
		<input name="q" type="radio" value="${answer}" class="${i}">
		<span class="quiz-text">${fp[i]}</span></label></li>`;
	    }			// classの値に正解を仕込んでおく
	    let bun = `<h2>${place}</h2>\n<p>${q}<p><ul id="q${qn}">${sel}
		<p id="result">　</p>`; 
	    layer.bindPopup(bun);
	}
    });
    var gj = omnivore.csv("aedquiz.csv", null, customLayer).addTo(mymap);
    gj.on("ready", () => {
	// popup内のHTMLは当初文書DOMには入らない
	// マーカーがクリックされてから始めて配備されるので
	// DOMContentLoadedのタイミングで document.querySelectorAll しても
	// 見つからない。popup内の文が準備OKになった contentupdate
	// イベントで呼んでもらって click イベントを仕掛ける。
	for (let m of markers) { // 記録済みの全マーカーに対して繰り返す
	    m._popup.on("contentupdate", (e) => {
		for (let inp of document.querySelectorAll("input")) {
		    inp.addEventListener("click", (e) => {
			let cls=inp.getAttribute("class"),
			    ans=inp.value,
			    res=document.getElementById("result");
			res.textContent  =  cls==ans ? "正解!!" : "...";
		    });
		}
	    });
	}
    });
}, false);