title: how could I implement an online test with javascript
body: <p>I have a webpage with small javascript code that serves a test to students. But the test is actually hardcoded into the page, and I would like some sort of importing method in which the page when displayed can read the questions that would be in a text or xml document. I was thinking of using ajax, but ajax needs some sort of web server running in order to interpret the 'get' or 'post' method. Is there any way I could do this withot running a webserver.</p>
  
  <p>here's html code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var pos = 0,
    test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
  var questions = [
    ["What is 10 + 4?", "12", "14", "16", "B"],
    ["What is 20 - 9?", "7", "13", "11", "C"],
    ["What is 7 x 3?", "21", "24", "25", "A"],
    ["What is 8 / 2?", "10", "2", "4", "C"]
  ];
  
  function _(x) {
    return document.getElementById(x);
  }
  
  function renderQuestion() {
    test = _("test");
    if (pos &gt;= questions.length) {
      test.innerHTML = "&lt;h2&gt;You got " + correct + " of " + questions.length + " questions correct&lt;/h2&gt;";
      _("test_status").innerHTML = "Test Completed";
      pos = 0;
      correct = 0;
      return false;
    }
    _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
    question = questions[pos][0];
    chA = questions[pos][1];
    chB = questions[pos][2];
    chC = questions[pos][3];
    test.innerHTML = "&lt;h3&gt;" + question + "&lt;/h3&gt;";
    test.innerHTML += "&lt;input type='radio' name='choices' value='A'&gt; " + chA + "&lt;br&gt;";
    test.innerHTML += "&lt;input type='radio' name='choices' value='B'&gt; " + chB + "&lt;br&gt;";
    test.innerHTML += "&lt;input type='radio' name='choices' value='C'&gt; " + chC + "&lt;br&gt;&lt;br&gt;";
    test.innerHTML += "&lt;button onclick='checkAnswer()'&gt;Submit Answer&lt;/button&gt;";
  }
  
  function checkAnswer() {
    choices = document.getElementsByName("choices");
    for (var i = 0; i &lt; choices.length; i++) {
      if (choices[i].checked) {
        choice = choices[i].value;
      }
    }
    if (choice == questions[pos][4]) {
      correct++;
    }
    pos++;
    renderQuestion();
  }
  window.addEventListener("load", renderQuestion, false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#test {
    border: #000 1px solid;
    padding: 10px 40px 40px 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2 id="test_status"&gt;&lt;/h2&gt;
  &lt;div id="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>