/* //GASのAPIのURL var endpoint = "https://script.google.com/macros/s/AKfycbwGy_ohKubQtJyGjzpJ_ggpIGaN6n1VtM3KS1d7RiSomG0icZkqxCDb9Pbnf2RADe1Z/exec"; //APIを使って非同期データを取得する fetch(endpoint) .then(response => response.json()) //成功した処理 .then(data => { console.log(JSON.stringify(data, null, 2)); console.log(json2csv(data)); }); (() => { var quiz = [], // 読み取ったCSV全てが入る配列 nQuiz, // データの個数(quiz.lengthのまま使ってもよい) pos=0; // 現在の配列の添字位置 var csvfile = "data.csv"; // CSVデータファイル名 function putValues(row) { // CSVの1行分のJSONがrowに入る for (let key of Object.keys(row)) { // Object.keys(JSON)でキーを1個ずつ取り出す(Rubyのkeys) let id = "__" + key + "__"; // HTML要素のID let elem = document.getElementById(id); if (elem) { // もし id="__カラム名__" の要素が見つかったら elem.innerText = row[key]; // その要素の内部テキストを更新 } } } function slide(n) { // nで指定した数だけ現在位置(pos)をずらす pos = (nQuiz+pos+n) % nQuiz; // 0以上 nQUIZ以下 になるよう調整 putValues(quiz[pos]); // ずらした添字位置で文書書き換え } function next() { slide(1); // 1つ先に進むボタンの処理 document.getElementById("result").innerHTML = " "; document.getElementById("image1").setAttribute("src", "../image/img.png"); } function init() { // HTML文書を読み終わったら呼ばれる fetch(csvfile). // csvfileをサーバから読み込んで then((resp) => { // 応答がrespに入るので if (resp.ok) return resp.text(); // テキストを返す }).then((txt) => { // テキストが txt に入るので quiz = new CSV(txt, {header: true}).parse(); // CSV解析 nQuiz = quiz.length; // 行数を記憶 putValues(quiz[pos]); // 最初の行のデータを表示 });; document.getElementById("next").addEventListener("click", next); } document.addEventListener("DOMContentLoaded", ()=>{ init(); // ブラウザの文書読み込みが完了したらここに来る }, false); })(); function json2csv(json) { var header = Object.keys(json[0]).join(',') + "\n"; var body = json.map(function(d){ return Object.keys(d).map(function(key) { return d[key]; }).join(','); }).join("\n"); return header + body; } */ //解答がaのとき function judgeA() { var choiceA = document.getElementById("__a__").value; var answer = document.getElementById("__answer__"); if (choiceA == answer.textContent) { document.getElementById("result").innerHTML = "正解!!"; document.getElementById("result").setAttribute("class", "correct"); document.getElementById("image1").setAttribute("src", "../image/koeki.png"); } else { document.getElementById("result").innerHTML = "不正解…"; document.getElementById("result").setAttribute("class", "incorrect"); } } //解答がbのとき function judgeB() { var choiceB = document.getElementById("__b__").value; var answer = document.getElementById("__answer__"); if (choiceB == answer.textContent) { document.getElementById("result").innerHTML = "正解!!"; document.getElementById("result").setAttribute("class", "correct"); document.getElementById("image1").setAttribute("src", "../image/koeki.png"); } else { document.getElementById("result").innerHTML = "不正解…"; document.getElementById("result").setAttribute("class", "incorrect"); } } //解答がcのとき function judgeC() { var choiceC = document.getElementById("__c__").value; var answer = document.getElementById("__answer__"); if (choiceC == answer.textContent) { document.getElementById("result").innerHTML = "正解!!"; document.getElementById("result").setAttribute("class", "correct"); document.getElementById("image1").setAttribute("src", "../image/koeki.png"); } else { document.getElementById("result").innerHTML = "不正解…"; document.getElementById("result").setAttribute("class", "incorrect"); } } //選択肢のボタンがクリックされたときの処理 document.addEventListener("DOMContentLoaded", function(e){ document.getElementById("__a__").addEventListener("click", judgeA); document.getElementById("__b__").addEventListener("click", judgeB); document.getElementById("__c__").addEventListener("click", judgeC); }); //湯殿山神社大鳥居の情報に切り替わる function torii(e){ document.getElementById("model").setAttribute("src", "torii.html"); document.getElementById("__quiz__").innerHTML = "鳥居の色は何色?"; document.getElementById("__a__").innerHTML = "赤"; document.getElementById("__b__").innerHTML = "青"; document.getElementById("__c__").innerHTML = "黄"; document.getElementById("result").innerHTML = " "; document.getElementById("__answer__").innerHTML = "a"; document.getElementById("image1").setAttribute("src", "../image/img.png"); } //東北公益文科大学の情報に切り替わる function koeki(e){ document.getElementById("model").setAttribute("src", "koeki.html"); document.getElementById("__quiz__").innerHTML = "階段は何ヶ所あるか?"; document.getElementById("__a__").innerHTML = "0ヶ所"; document.getElementById("__b__").innerHTML = "1ヶ所"; document.getElementById("__c__").innerHTML = "2ヶ所"; document.getElementById("result").innerHTML = " "; document.getElementById("__answer__").innerHTML = "b"; document.getElementById("image1").setAttribute("src", "../image/img.png"); } //Leafletでの処理 function init(){ //地図を表示するdiv要素のidを設定 var map = L.map('mapcontainer',{zoomControl:false}); //座標の指定 var mpoint = [38.7482, 139.9058]; //地図の中心とズームレベルを指定 map.setView(mpoint, 10); //表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' }).addTo(map); L.marker([38.5402753, 139.9758235],{title:"湯殿山神社大鳥居"}).addTo(map).on("click", function(e){torii(e);}); L.marker([38.89327,139.8188],{title:"東北公益文科大学"}).addTo(map).on("click", function(e){koeki(e);});; }