title: Replacing a local javascript array with JSON and AJAX
body: <p>I am in the process of integrating an interactive quiz on my website. I did stumble upon a working quiz but I would like to use AJAX along side an external JSON file to retrieve the questions and answers as an array. My html makes 2 calls </p>
  
  <pre><code>     &lt;script src="question.js"&gt;&lt;/script&gt;
       &lt;script src="quiz-script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>question.js contains the following </p>
  
  <pre><code>  var questions = [{
    "question": "The first mechanical computer designed by  Charles       
    Babbage was called ?",
    "option1": "Abacus",
    "option2": "Analytical Engine",
    "option3": "Calculator",
    "option4": "Processor",
    "answer": "2"
    }, {
    "question": "Which of the following is the most powerful type of 
    computer ?",
    "option1": "Super-micro",
    "option2": "Super conductor",
    "option3": "Super computer",
    "option4": "Megaframe",
    "answer": "3"
    }]
  </code></pre>
  
  <p>The following modification for question.js:</p>
  
  <pre><code>   var ourRequest = new XMLHttpRequest();
     ourRequest.open('GET', 'http://www.rockmissionary.org/quiz- 
     data.json', true);
     ourRequest.onload = function() {
     var questions = ourRequest.responseText;
     console.log(questions);
     };
     ourRequest.send();
  </code></pre>
  
  <p>returns the following error ----- ReferenceError: questions is not defined. 
  Please help.</p>