Newer
Older
escapegame-2022 / yuto / quiz / csvload.js
@Yuto Togashi Yuto Togashi on 8 Nov 2022 6 KB add marker on map
/*
//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: '&copy; <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);});;
}