title: How can I change questions from text fields to radiobuttons?
body: <p>the quiz should give +2 marks for right answer and -1 for wrong then display the final mark with the submit button and a clear or reset button.</p>
  <p>I need to change the questions from text fields to radiobuttons(if possible with getradiovalue() ).
  (I added the earlier one because i thought this was more harder to correct, i am not really sure on how to go ahead with the marks and the radio buttons )</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myVar;
  
  function startTimer() {
      myVar = setInterval(function () {
          myTimer()
      }, 1000);
      timelimit = maxtimelimit;
  }
  
  function myTimer() {
      if (timelimit &gt; 0) {
          curmin = Math.floor(timelimit / 60);
          cursec = timelimit % 60;
          if (curmin != 0) {
              curtime = curmin + " minutes and " + cursec + " seconds left";
          } else {
              curtime = cursec + " seconds left";
          }
          $_('timeleft').innerHTML = curtime;
      } else {
          $_('timeleft').innerHTML = timelimit + ' - Out of Time - no credit given for answer ';
          //    clearInterval(myVar);
          checkAnswer();
      }
      timelimit--;
  }
  
  
  
  var pos = 0,
      posn, choice, correct = 0,
      rscore = 0;
  var maxtimelimit = 60,
      timelimit = maxtimelimit;
  
  var questions = [
      ['Chair', 'Table'],
      ['Pen', 'Pencil'],
      ['Box', 'Circle'],
      ['Triangle', 'Rectangle'],
      ['Gun', 'Knife']
  ];
  var questionOrder = [];
  var maxNumberOfQuestions = questions.length;
  var maxNumberToDisplay = 5;
  
  function setQuestionOrder() {
      questionOrder.length = 0;
      for (var i = 0; i &lt; maxNumberOfQuestions; i++) {
          questionOrder.push(i);
      }
      questionOrder.sort(randOrd);
      pos = 0;
      posn = questionOrder[pos];
  }
  
  function $_(IDS) {
      return document.getElementById(IDS);
  }
  
  function randOrd() {
      return (Math.round(Math.random()) - 0.5);
  }
  
  function renderResults() {
      var test = $_("test");
      test.innerHTML = "&lt;h2&gt;You got " + correct + " of " + maxNumberToDisplay + " questions correct &lt; /h2&gt;";
      $_("test_status").innerHTML = "Test Completed";
      $_('timeleft').innerHTML = '';
      test.innerHTML += '&lt;button onclick="location.reload()"&gt;Re-test&lt;/a&gt; ';
      setQuestionOrder();
      correct = 0;
      clearInterval(myVar);
      return false;
  }
  
  function renderQuestion() {
      var test = $_("test");
      $_("test_status").innerHTML = "Question " + (pos + 1) + " of "+maxNumberToDisplay;
      if (rscore != 0) {
          $_("test_status").innerHTML += '&lt;br&gt;Currently: ' +
              (correct / rscore * 100).toFixed(0) + '% correct';
      }
      var question = questions[posn][0];
      var chA = questions[posn][1];
      test.innerHTML = "&lt;h3&gt;" + question + "&lt;/h3&gt;";
      test.innerHTML += "&lt;input type='text' id='choices' value=''&gt;&lt;p&gt;";
      test.innerHTML += "&lt;button onclick='checkAnswer()'&gt;Submit Answer&lt;/button&gt;";
  
  }
  
  function setupTimer() {
      timelimit = maxtimelimit;
      clearInterval(myVar);
      startTimer();
  }
  
  function checkAnswer() {
      var correctChoice = questions[posn][1];
      var userChoice = document.getElementById("choices").value;
      rscore++;
      if (userChoice.toLowerCase() == correctChoice.toLowerCase() &amp;&amp; timelimit &gt;
          0) {
          correct++;
      }
      pos++;
      posn = questionOrder[pos];
      if (pos &lt; maxNumberToDisplay) {
          renderQuestion();
      } else {
          renderResults();
      }
  }
  
  window.onload = function () {
      setQuestionOrder();
      renderQuestion();
      setupTimer();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h2 id="test_status"&gt; Quiz&lt;/h2&gt;
    &lt;h3 id="timeleft"&gt;Time left&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>