const quiz = [
    {
	question: '二重結合を持たないのはどれ?',
	answers: [
	    'エチレン',
	    'アセトアルデヒド',
	    'プロパン',
	    '二酸化炭素',
	],
	correct: 'プロパン',
	explanation: 'プロパンは単結合のみでできているよ'},
    {
	question: 'afflictionsの意味は?',
	answers: [
	    '痛い、苦しい',
	    '徹夜',
	    '笑い転げる',
	    '転職'
	],
	correct: '痛い、苦しい',
	explanation: 'そのような意味である'}
];

const quizLength = quiz.length;
let quizIndex = 0;

// 正答数
let score = 0;

// 問題文を表示させる
const $button = document.getElementsByClassName('js-questionItem');
const buttonLength = $button.length;

const setupQuiz = ()=> {

  // 何問目なのかを表示させる
  document.getElementById('js-questionNumber').textContent = '第' + (quizIndex + 1) +'問';

  // 問題文を表示させる
  document.getElementById('js-questionText').textContent = quiz[quizIndex].question;

  // 選択肢を表示させる
  let buttonIndex = 0;
  while(buttonIndex < buttonLength){
    $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
    buttonIndex++;
  }
}

setupQuiz();

const clickHandler = (e) => {
  if(quiz[quizIndex].correct === e.target.textContent){
    document.getElementById('js-answerResult').textContent = '正解です！';
    score++;
  }else {
    document.getElementById('js-answerResult').textContent = '不正解です！';
  }
  // 解説文を表示
  document.getElementById('js-answerExplanation').textContent = quiz[quizIndex].explanation;
}

let handlerIndex = 0;
while(handlerIndex < buttonLength){
  $button[handlerIndex].addEventListener('click', (e) => {
    clickHandler(e);
  });
  handlerIndex++;
};

// 「次の問題に進む」ボタンをクリックされたら次の問題に行く
const nextClick = (e) => {
  quizIndex++;
if(quizIndex < quizLength){
    // 問題があれば解説文を消して次の問題を表示
    document.getElementById('js-answerExplanation').textContent = '';
    setupQuiz();
  }else {
    // 問題がなければ終了
    window.alert('終了！あなたの正解数は'+ score + '/' + quizLength + 'です！');
  }
}

document.getElementById('js-nextQuestion').addEventListener('click', (e) => {
  nextClick(e);
});
