html - How to keep the previous answer selected? (javascript quiz) -

my javascript quiz have both 'next' , 'previous' button. want keep answers selected when click previous/next button.
here jsfiddle link
javascript used check answer:

var correct = 0; var pos = 0; var choice; var allquestions = [ {question:"what 10 + 5?", choices:["15", "12", "10"], answer: "a" }, {question:"what 10 - 5?", choices:["5", "6", "8"   ], answer: "a" }, {question:"what 10 * 5?", choices:["50", "60", "70"], answer: "a" }, {question:"what 10 / 5?", choices:["1", "2", "3"   ], answer: "b" } ];  function getid(x) { return document.getelementbyid(x) }  function renderquestions () { var teststatus = getid("test_status"); var test = getid("test"); if(pos >= allquestions.length) {     teststatus.innerhtml = "test completed";     test.innerhtml = "<h2>" + "you got " + correct  + " out of " +  allquestions.length + "</h2><br/>";     pos = 0;     return false }; teststatus.innerhtml = "question " + (pos + 1) + " of " + allquestions.length;  var = allquestions[pos].choices[0];; var b = allquestions[pos].choices[1];; var c = allquestions[pos].choices[2];  test.innerhtml = "<h2>" + allquestions[pos].question  + "</h2><br/>"; test.innerhtml += '<input type="radio" value="a" name="answerchoice" /> ' + + '<br />'; test.innerhtml += '<input type="radio" value="b" name="answerchoice" /> ' + b + '<br />'; test.innerhtml += '<input type="radio" value="c" name="answerchoice" /> ' + c + '<br /><br />'; if (pos == allquestions.length - 1) {     test.innerhtml += '<input type="button" id="next" onclick="prevanswer()" value="prev"> ';     test.innerhtml += '<input type="button" id="next" onclick="checkanswer()" value="submit"> '; } else if (pos >= 1) {     test.innerhtml += '<input type="button" id="next" onclick="prevanswer()" value="prev"> ';     test.innerhtml += '<input type="button" id="next" onclick="checkanswer()" value="next"> '; } else {     test.innerhtml += '<input type="button" id="next" onclick="checkanswer()" value="next"> '; }  test.innerhtml += '<br /><br /><p id="error"></p>' }  choice = document.getelementsbyname("answerchoice"); var checkedanswer = null;  function checkanswer() {  choice = document.getelementsbyname("answerchoice"); var checkedanswer = null; (var = 0; < choice.length; i++) {     if(choice[i].checked) {         checkedanswer = choice[i].value;     } }  if( checkedanswer == null ) {     document.getelementbyid("error").innerhtml = 'please select answer'     return false; }  if (checkedanswer == allquestions[pos].answer){     correct++ }  pos++ renderquestions() } function prevanswer() { pos-- renderquestions() } 

html:

<div id="header">simple quiz application</div>  <div id="test_status"></div> <div id="test"></div> 

i know questioned had been asked before. beginner , programmed in different way.

1. add answer array store answers

   var answers = [];

2. update answers's value when clicked button, let correct calculated @ last.

   function checkanswer() {

   choice = document.getelementsbyname("answerchoice"); var checkedanswer = null; (var = 0; < choice.length; i++) {     if(choice[i].checked) {         answers[pos] = choice[i].value;     } }  if( answers[pos] == null ) {     document.getelementbyid("error").innerhtml = 'please select answer'     return false; }  pos++ renderquestions() 

   }

3. alter input after render complete set check radio

   if (typeof answers[pos] !== undefined) {     var radios = document.getelementsbyname('answerchoice');     var rlen = radios.length, i;     (i = 0; < rlen; ++i) {         if (answers[pos] === radios[i].value) {         radios[i].checked = true;         }     } } 

4. calculate result on output

   if(pos >= allquestions.length) { // check answers var qlen = allquestions.length, correct = 0; (var = 0; < qlen; ++i) {     if (answers[i] === allquestions[i].answer) {         ++correct;     } } teststatus.innerhtml = "test completed"; test.innerhtml = "<h2>" + "you got " + correct  + " out of " +  allquestions.length + "</h2><br/>"; pos = 0; return false }; 

with worked jsfiddle