javascript - exam portal questions and answers cache procedure -

i learner , trying develop webportal online mocktests. in portal, after being redirected mocktest page, exam page like... php page having 1. timer on top 2. 2 iframes - 1 on left , 1 on right - src php file

the left iframe contain buttons displaying questions number. right frame display question , answer options radio buttons.

the problem caching questions. once check radio button of questionx, navigate other question , come questionx again, checked option not visible.. question again queried database , displayed afresh. want visited questions, selected answers cached. how should accomplish this?

the mocktest web page looks this

code mocktest web page include frames below -

    <!-- questions numbers left div -->     <div class="left">     <iframe id="frame1" name="iframe1" src="questions/quantitativeaptitude.php" ></iframe>      </div> <!--div  classs=left -->      <!-- display question right div-->     <div class="right">      <iframe id="frame2" name="iframe2" src="questions/displayquestion.php"></iframe>      </div> <!--div  classs=right --> 

quantitativeaptitude.php contains form, buttom created

    <form name="frm2" >     <input id="questionbutton" type="button" name="questionnum" value="<?php echo $questionnum;?>" onclick="parent.hello(this.form.questionnum.value);">     </form> 

javascript function defined in parent page i.e., mocktest page pass clicked/selected question number displayquestion.php file

in displayquestion.php file, question retrieved using _get, query database, display question , answer options through form.

<form method="post" >  <input type="radio" value="1" name="theanswer" onclick="return displayanswer(value)"> <span class="answeroptions">1. <?php echo $option1; ?><br><br> </span>  <input type="radio" value="2" name="theanswer" onclick="return displayanswer(value)"> <span class="answeroptions">2. <?php echo $option2; ?><br><br></span>  <input type="radio" value="3" name="theanswer" onclick="return displayanswer(value)"> <span class="answeroptions">3. <?php echo $option3; ?><br><br></span>  <input type="radio" value="4" name="theanswer" onclick="return displayanswer(value)"> <span class="answeroptions">4. <?php echo $option4; ?><br><br></span>  <input type="radio" value="5" name="theanswer" onclick="return displayanswer(value)"> <span class="answeroptions">5. <?php echo $option5; ?><br><br></span> </form> 

to capture checked radio button in order store in database tried 2 methodologies - 1. javascript 2. jquery

method 1: javascript

 function displayanswer(answer){     var optionselected = answer;     alert (optionselected);     return true;  } 

with methodology, see alert message stating selected option few questions, not all. also, using javascript, tedious pass "optionselected " variable php file database updated user selected answer. **note:**i placed breakpoint in above javascript code, using developer tool(f12). obvious, code did not break questions alert message not seen.

method 2:jquery here have downloaded jquery-1.12.4.min.js xampp project js folder , included php file. after, writing jquery, few of questions stopped displaying.

    <script>     $('input:radio').change(function(){         var value = $("form input[type='radio']:checked").val();         alert("value of changed radio : " +value);     });     </script> 

using jquery, question 1, 2, 3, 7 displayed out of 70(in 5 tabs) questions in mocktest. not understand why these questions displayed , why remaining questions not displayed.

database sample data

from data shown in attached image, question 4, 5, 6, 8 popup alert message when radio button checked.