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