diff --git a/main.css b/main.css index c83732a..b9e8077 100644 --- a/main.css +++ b/main.css @@ -1,19 +1,64 @@ +.c-btn { + -webkit-appearance: none; + appearance: none; + display: inline-flex; + align-items: center; + justify-content: center; + width: 50%; + height: 50px; + padding: 0; + border: solid 1px; + outline: none; + font-size: 20px; + text-decoration: none; + background: silver; + cursor: pointer; +} +.p-quiz { + width: 600px; + margin: 50px auto; + text-align: center; +} +.p-ttl { + margin: 0 0 20px; +} +.p-quiz-ttl { + margin: 0 0 20px; + font-weight: normal; +} +.p-quiz-next { + width: 300px; + margin: auto; +} +.p-quiz-choices { + flex-wrap: wrap; + width: 200%; + margin: 0; + padding-left: 0; +} +.p-quiz-choices__item { + width: calc(50% - 10px); + list-style: none; + margin: 5px; +} #result { margin: 1em 0em; font-size: large; font-weight: bold; } - -.correct { - margin: 1em 0em; +.p-quiz-correct { color: red; + font-size: 30px; + font-weight: 500; } - -.incorrect { - margin: 1em 0em; +.p-quiz-incorrect { color: blue; + font-size: 30px; + font-weight: 500; } - +.p-quiz-commentary { + font-size: 20px; +} .none { display: none; } \ No newline at end of file diff --git a/quiz.html b/quiz.html index 27475d6..bb37ffa 100644 --- a/quiz.html +++ b/quiz.html @@ -4,18 +4,14 @@ 朝日地区イズ - - + -

朝日地区イズ

-

問題

-

問題文

- - - -

　

-
解答
- - \ No newline at end of file +
+

朝日地区イズ

+
+
+ + + \ No newline at end of file diff --git a/webapi.js b/webapi.js new file mode 100644 index 0000000..042b729 --- /dev/null +++ b/webapi.js @@ -0,0 +1,175 @@ +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 = '
'; + ins += ''; + ins += '
'; + + document.querySelector('.js-quiz-content').innerHTML = ins; +} + +/** + * 問題画面を生成する + * + */ +function generate_quiz_content() { + var ins = '

' + quizData['quiz'][currentQuizNo]['q'] + '

'; + ins += '
    '; + for (var i = 0; i < quizData['quiz'][currentQuizNo]['a'].length; i++) { + ins += '
  1. '; + ins += ''; + ins += '
    2. '; + } + ins += '
'; + + document.querySelector('.js-quiz-content').innerHTML = ins; +} + +/** + * 回答・解説画面を生成する + * @param {number} choice - 選択した回答番号 + */ +function generate_answer_content(choice) { + var ins = '

' + quizData['quiz'][currentQuizNo]['q'] + '

'; + // 正解の場合 + if(quizData['quiz'][currentQuizNo]['correct'] === choice) { + ins += '

正解!!

'; + correctCount++; + // 不正解の場合 + } else { + ins += '

不正解…

'; + } + ins += '

' + quizData['quiz'][currentQuizNo]['commentary'] + '

'; + // 未回答の問題がある場合 + if(currentQuizNo + 1 < quizData['quiz'].length) { + ins += '
'; + ins += ''; + ins += '
'; + // 全て回答済の場合 + } else { + ins += '
'; + ins += ''; + ins += '
'; + } + + document.querySelector('.js-quiz-content').innerHTML = ins; +} + +/** + * 結果画面を生成する + * + */ +function generate_result_content() { + var ins = '

' + (currentQuizNo+1) + '問中' + correctCount + '問正解

'; + ins += '
'; + ins += ''; + ins += '
'; + + document.querySelector('.js-quiz-content').innerHTML = ins; +} \ No newline at end of file