title: Retreiving Data from JSON and Populating it in Javascript
body: <p>I'm making a trivia quiz web game in Javascript! I'm successfully retrieving quiz questions from an API. Somehow I can not populate the questions from the API response in my webpage! Although I can add self declared questions like done in the code below!</p>
  
  <p><strong>quiz.js</strong></p>
  
  <pre><code>function Quiz(questions) {
  this.score = 0;
  this.questions = questions;
  this.questionIndex = 0;
  }
  
  Quiz.prototype.getQuestionIndex = function() {
  return this.questions[this.questionIndex];
  }
  
  Quiz.prototype.guess = function(answer) {
  if(this.getQuestionIndex().isCorrectAnswer(answer)) {
      this.score++;
  }
  
  this.questionIndex++;
  }
  
  Quiz.prototype.isEnded = function() {
  return this.questionIndex === this.questions.length;
  }
  </code></pre>
  
  <p><strong>question.js</strong></p>
  
  <pre><code>function Question(text, choices, answer) {
  this.text = text;
  this.choices = choices;
  this.answer = answer;
  }
  
  Question.prototype.isCorrectAnswer = function(choice) {
  return this.answer === choice;
  }
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>function populate() {
  if(quiz.isEnded()) {
      showScores();
  }
  else {
      // show question
      var element = document.getElementById("question");
      element.innerHTML = quiz.getQuestionIndex().text;
  
      // show options
      var choices = quiz.getQuestionIndex().choices;
      for(var i = 0; i &lt; choices.length; i++) {
          var element = document.getElementById("choice" + i);
          element.innerHTML = choices[i];
          guess("btn" + i, choices[i]);
      }
  
      showProgress();
  }
  };
  
  function guess(id, guess) {
  var button = document.getElementById(id);
  button.onclick = function() {
      quiz.guess(guess);
      populate();
  }
  };
  
  
  function showProgress() {
  var currentQuestionNumber = quiz.questionIndex + 1;
  var element = document.getElementById("progress");
  element.innerHTML = "Question " + currentQuestionNumber + " of " + 
  quiz.questions.length;
  };
  
  function showScores() {
  var gameOverHTML = "&lt;h1&gt;Result&lt;/h1&gt;";
  gameOverHTML += "&lt;h2 id='score'&gt; Your scores: " + quiz.score + "&lt;/h2&gt;";
  var element = document.getElementById("quiz");
  element.innerHTML = gameOverHTML;
  };
  
  var getJSON = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
  };
  
  getJSON('https://opentdb.com/api.php?
  amount=10&amp;category=20&amp;difficulty=medium&amp;type=multiple',
  function(err,data) {
  
  alert('Your query count: ' + data.results[0].category);});
  
  // create questions
  var questions = [
  new Question("Which one is not an object oriented programming language?", 
  ["Java", "C#","C++", "C"], "C"),
  new Question("Which language is used for styling web pages?", ["HTML", 
  "JQuery", "CSS", "XML"], "CSS"),
  new Question("There are ____ main components of object oriented 
  programming.", ["1", "6","2", "4"], "4"),
  new Question("Which language is used for web apps?", ["PHP", "Python", 
  "Javascript", "All"], "All"),
  new Question("MVC is a ____.", ["Language", "Library", "Framework", "All"], 
  "Framework")];
  
  
  var quiz = new Quiz(questions);
  populate();
  </code></pre>