//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));
});

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;
}

let quizData = {};
let currentQuizNo = 0;
let correctCount = 0;
 
// 問題データの取得
get_quiz_data();
// トップ画面の生成
generate_top_content();
// 問題開始のイベント設定
register_start_event();
 
/*
 * 問題のデータを取得する
 */
function get_quiz_data() {
    let xhr = new XMLHttpRequest();
    xhr.onload = function() {
        quizData = xhr.response;
    }
    xhr.open('GET', 'data.json');
    xhr.responseType = "json";
    xhr.send();
}
 
/*
 * 問題開始のイベントを設定する
 */
function register_start_event() {
    document.querySelector('.js-quiz-start').addEventListener('click', function() {
        // 問題画面の生成
        generate_quiz_content();
        // 問題の選択肢を選択したときのイベント設定
        register_choice_event();
    }, false);
}
 
/*
 * 問題の選択肢を選択したときのイベントを設定する
 */
function register_choice_event() {
    for (var i = 0; i < document.querySelectorAll('.js-quiz-choice').length; i++) {
        document.querySelectorAll('.js-quiz-choice')[i].addEventListener('click', function(e) {
            // 回答・解説画面の生成
            generate_answer_content(parseFloat(this.getAttribute('data-quiz_choice')));
            // 未回答の問題がある場合
            if(currentQuizNo + 1 < quizData['quiz'].length) {
                // 次の問題へ遷移するときのイベント設定
                register_nextquiz_event();
            // 全て回答済の場合
            } else {
                // 結果画面へ遷移するときのイベント設定
                register_result_event();
            }
        }, false);
    }
}
 
/*
 * 次の問題へ遷移するときのイベントを設定する
 */
function register_nextquiz_event() {
    document.querySelector('.js-quiz-next').addEventListener('click', function() {
        currentQuizNo++;
        // 問題画面の生成
        generate_quiz_content();
        // 問題の選択肢を選択したときのイベント設定
        register_choice_event();
    }, false);
}
 
/*
 * 結果画面へ遷移するときのイベントを設定する
 */
function register_result_event() {
    document.querySelector('.js-quiz-result').addEventListener('click', function() {
        // 結果画面の生成
        generate_result_content();
        // トップへ遷移するときのイベント設定
        register_top_event();
    }, false);
}
 
/*
 * トップへ遷移するときのイベントを設定する
 */
function register_top_event() {
    document.querySelector('.js-quiz-top').addEventListener('click', function() {
        // 値のリセット
        currentQuizNo = 0;
        correctCount = 0;
        // トップ画面の生成
        generate_top_content();
        // 問題開始のイベント設定
        register_start_event();
    }, false);
}
 
/*
 * トップ画面を生成する
 */
function generate_top_content() {
    var ins = '<div class="p-quiz-next">';
        ins += '<button class="c-btn js-quiz-start">スタート！</button>';
    ins += '</div>';
 
    document.querySelector('.js-quiz-content').innerHTML = ins;
}
 
/*
 * 問題画面を生成する
 */
function generate_quiz_content() {
    var ins = '<h2 class="p-quiz-ttl">' + quizData['quiz'][currentQuizNo]['q'] + '</h2>';
    ins += '<ol class="p-quiz-choices">';
        for (var i = 0; i < quizData['quiz'][currentQuizNo]['a'].length; i++) {
            ins += '<li class="p-quiz-choices__item">';
                ins += '<button class="c-btn js-quiz-choice" data-quiz_choice="' + (i+1) + '">' + quizData['quiz'][currentQuizNo]['a'][i] + '</button>';
            ins += '</li>';
        }
    ins += '</ol>';
 
    document.querySelector('.js-quiz-content').innerHTML = ins;
}
 
/*
 * 回答・解説画面を生成する
 * @param {number} choice - 選択した回答番号
 */
function generate_answer_content(choice) {
    var ins = '<h2 class="p-quiz-ttl">' + quizData['quiz'][currentQuizNo]['q'] + '</h2>';
    // 正解の場合
    if(quizData['quiz'][currentQuizNo]['correct'] === choice) {
        ins += '<p class="quiz-correct">正解!!</p>';
        correctCount++;
    // 不正解の場合
    } else {
        ins += '<p class="quiz-incorrect">不正解…</p>';
    }
    ins += '<p class="p-quiz-commentary">' + quizData['quiz'][currentQuizNo]['commentary'] + '</p>';
    // 未回答の問題がある場合
    if(currentQuizNo + 1 < quizData['quiz'].length) {
        ins += '<div class="p-quiz-next">';
            ins += '<button class="c-btn js-quiz-next">次の問題</button>';
        ins += '</div>';
    // 全て回答済の場合
    } else {
        ins += '<div class="p-quiz-next">';
            ins += '<button class="c-btn js-quiz-result">結果を見る</button>';
        ins += '</div>';
    }
 
    document.querySelector('.js-quiz-content').innerHTML = ins;
}
 
/*
 * 結果画面を生成する
 */
function generate_result_content() {
    var ins = '<h2 class="p-quiz-ttl">' + (currentQuizNo+1) + '問中' + correctCount + '問正解</h2>';
    ins += '<div class="p-quiz-next">';
        ins += '<button class="c-btn js-quiz-top">もう一度遊ぶ</button>';
    ins += '</div>';
 
    document.querySelector('.js-quiz-content').innerHTML = ins;
}