javascript - Highlight correct and wrong answer when radio button selected in quiz -

i working on multiple choice quiz script uses radio buttons. wanted add feature when radio button selected checks if correct answer chosen chose radio button highlighted green. if wrong answer chosen chosen radio button highlighted red , correct answer highlighted green. submit button enabled.

when click on submit button goes next question , process repeated till quiz over. problem the highlighting works after submit button clicked. , quiz stops working second question. how fix this? have included jsfiddle , code below. can 1 this.

var pos = 0, test, test_status, question, choice, choices, cha, chb, chc, correct = 0; var questions = [     ["what 10 + 4?", "12", "14", "16", "b"],     ["what 20 - 9?", "7", "13", "11", "c"],     ["what 7 x 3?", "21", "24", "25", "a"],     ["what 8 / 2?", "10", "2", "4", "c"] ]; function _(x) {     return document.getelementbyid(x); } function renderquestion() {     test = _("test");     if (pos >= questions.length) {         test.innerhtml = "<h2>you got " + correct + " of " + questions.length + " questions correct</h2>";         _("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 = "<h3>" + question + "</h3>";     test.innerhtml += "<input type='radio' class='choice' name='choices' value='a'id='choa'> <label for='choa'>" + cha + "</label><br>";     test.innerhtml += "<input type='radio' class='choice' name='choices' value='b'id='chob'> <label for='chob'>" + chb + "</label><br>";     test.innerhtml += "<input type='radio' class='choice' name='choices' value='c'id='choc'> <label for='choc'>" + chc + "</label><br>";     test.innerhtml += "<button onclick='checkanswer()' disabled='disabled' id='choicesubmit'>submit answer</button>"; }  function checkanswer() {     debugger;     if ($("#test input:checked").val() == questions[pos][4]) {         // correct question clicked         $("#test input:checked+label").css("background-color", "green");         correct++;     }     else {         // wrong question clicked         $("#test input:checked+label").css("background-color", "red");     }     settimeout(function () {         pos++;         renderquestion();     }, 1000); }  $("document").ready(function () {     renderquestion();     var choiceclicked = false;      if (!choiceclicked) {         $("#test input").change(function () {             choiceclicked = true;             $("#choicesubmit").removeattr("disabled");          });     }   }); 

https://jsfiddle.net/diviseed/n59y2qaa/1/

i think that's https://jsfiddle.net/n59y2qaa/12/

• the highlighting works after submit button clicked

that's because checkanswer() highlights doesn't called when click/change radio buttons.

• the quiz stops working second quest

that's because after submit pressed bring new radiobuttons document, have set $("#test input").change(function () {}) them too.

div#test {              border: #000 1px solid;              padding: 10px 40px 40px 40px;          }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  <h2 id="test_status"></h2>  <div id="test"></div>  <script>      var pos = 0, test, test_status, question, choice, choices, cha, chb, chc, correct = 0;      var questions = [          ["what 10 + 4?", "12", "14", "16", "b"],          ["what 20 - 9?", "7", "13", "11", "c"],          ["what 7 x 3?", "21", "24", "25", "a"],          ["what 8 / 2?", "10", "2", "4", "c"]      ];      function _(x) {          return document.getelementbyid(x);      }      function renderquestion() {          test = _("test");          if (pos >= questions.length) {              test.innerhtml = "<h2>you got " + correct + " of " + questions.length + " questions correct</h2>";              _("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 = "<h3>" + question + "</h3>";          test.innerhtml += "<input  onclick='checkanswer()'  type='radio' class='choice' name='choices' value='a'id='choa'> <label for='choa'>" + cha + "</label><br>";          test.innerhtml += "<input  onclick='checkanswer()'  type='radio' class='choice' name='choices' value='b'id='chob'> <label for='chob'>" + chb + "</label><br>";          test.innerhtml += "<input  onclick='checkanswer()'  type='radio' class='choice' name='choices' value='c'id='choc'> <label for='choc'>" + chc + "</label><br>";          test.innerhtml += "<button  onclick='nextanswer()' disabled='disabled' id='choicesubmit'>submit answer</button>";      }        function checkanswer() {          choiceclicked = true;          $("#choicesubmit").removeattr("disabled");          $("#test label").css("background-color", "transparent");          if ($("#test input:checked").val() == questions[pos][4]) {              // correct question clicked              $("#test input:checked+label").css("background-color", "green");              correct++;          }          else {              // wrong question clicked              $("#test input:checked+label").css("background-color", "red");          }      }      function nextanswer(){          settimeout(function () {              pos++;              renderquestion();          }, 1000);          }      $("document").ready(function () {          renderquestion();      });  </script>  </html>