let counter = 0;
let correct = 0;

let db_matrix = {
  question_1: "Is Donald Trump the president of the United States?",
  queston_1_correct: "Donald Trump is currently the president.",
  question_1_wrong: "Donald Trump is currently not the president.",

  question_2: "Is the creator of this program called Edin?",
  queston_2_correct: "Yes, the creator of this program is Edin.",
  question_2_wrong: "No, the creator of this program is John.",

  question_3:  "Are complex passwords an important security measure?",
  queston_3_correct: "Complex passwords are not important anymore.",
  question_3_wrong: "Complex passwords are an important security measure."
};

// appending HTML code to the DOM
html_inject = (in_1,in_2,in_4) => {
  in_1 = document.getElementById(in_2);
    in_1.insertAdjacentHTML('afterend', in_4);
};

let qstn_str_1 = document.getElementById('strt_1');
qstn_str_1.addEventListener("click", function() {
   // remove intial quiz instructions
    let prt_qz = document.getElementById("quiz");
      let chld_qz = document.getElementById("question");
        prt_qz.removeChild(chld_qz);

   // remove "start quiz" button
    let chld_qz_btn = document.getElementById("strt_1");
      prt_qz.removeChild(chld_qz_btn);

  // raw HTML data for the question, answers and buttons.
  let qstn_strg_qst = '<h2 id="question" class="headline-secondary--grouped">' + db_matrix.question_1 + '</h2>';
  let qstn_strg0 = '<p id="choice0">' + db_matrix.queston_1_correct + '</p>';
  let qstn_strg1 = '<button id="guess0" class="btn--default">Select Answer</button>';
  let qstn_strg2 = '<p id="choice1">' + db_matrix.question_1_wrong +'</p>';
  let qstn_strg3 = '<button id="guess1" class="btn--default">Select Answer</button>';

  // Question 1, Answer 1, Answer 1 button, Answer 2, Answer 2 button ==> html injection
  html_inject(document.getElementById("quiz_title"), "quiz_title", qstn_strg_qst);
  html_inject(document.getElementById("question"), "question", qstn_strg0);
  html_inject(document.getElementById("choice0"), "choice0", qstn_strg1);
  html_inject(document.getElementById("guess0"), "guess0", qstn_strg2);
  html_inject(document.getElementById("choice1"), "choice1", qstn_strg3);

  // change question counter
  let prgs = document.getElementById('progress')
    counter ++;
      prgs.innerHTML = "Question " + counter + " of 3";


  // *** QUESTION ONE CODE BLOCK ***

    // ** BUTTON ONE **
  let qstn_str_2 = document.getElementById('guess0')
    qstn_str_2.addEventListener("click", function() {
      console.log("clicked!");
      console.log(this);

});

  // ** BUTTON TWO **
  let qstn_str_3 = document.getElementById('guess1')
    qstn_str_3.addEventListener("click", function() {
      page_builder(this.id);

});

page_builder = (bttn) => {
	// grab all IDs for (1) question and all answers
	let qst_1 = document.getElementById('question');
	let prnt = document.getElementById('quiz')

	// two answers to be removed
	let answers_1 = document.getElementById('choice0');
	let answers_2 = document.getElementById('choice1');
	prnt.removeChild(answers_1);
	prnt.removeChild(answers_2);
	prnt.removeChild(qst_1);

  // Updating counter
   let prgs = document.getElementById('progress')
    counter ++;
      prgs.innerHTML = "Question " + counter + " of 3";

	let answr_0 = bttn;
		console.log(bttn);
	};


});