title: HTML Javascript Self-assessment quiz/questionnaire
body: <p>Hi so i got a very basic JavaScript HTML quiz working, however what i want to end up with is an assessment type quiz that has lets say 15 questions based on 3 categories (e.g. Alcoholism, depression, drug abuse) e.g. </p>
  
  <p>How often to you drink alcohol? 
  - All the time
  -  Occasionally
  - Never</p>
  
  <p>the player answers all 15 questions and at the end depending on how they answered the questions they get assigned a category e.g. your category is Drug Abuse etc.</p>
  
  <p>I'm thinking that maybe each category has its own counter and a value is applied to each of the possible answers e.g. All the time gives a score of 3, occasionally scores a 2 etc. As the player answers the questions, the values get stored in the corresponding category and at the end the scores for each category are added up and the category with the highest score gets assigned to the player? </p>
  
  <p>Any help with this would be appreciated :)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h2 id="test_status"&gt;&lt;/h2&gt;
  &lt;div id="test"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
  div#test {
  
       border:#000 1px solid;
       padding: 10px 40px 40px 40px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    &lt;script&gt;
  var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
  var questions = [
      ["How often do you drink?", "All the time", "Often", "Never", "B"],
      ["Do you ever feel sad for no reason?", "All the time", "Often", "Never", "C"],
      ["Have you ever tried drugs", "All the time", "Often", "Never", "C"],
      ["Do you feel uneasy around people", "All the time", "Often", "Never", "C"]
  
  
  ];
  
  function _(x) {
  
     return document.getElementById(x);
  
  }
  
  function renderQuestion () {
  
     test = _("test");
     if(pos &gt;= questions.length) {
       test.innerHTML = "&lt;h2&gt;Your Category is  &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);
  &lt;/script&gt;
  </code></pre>