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