how to create a previous and next button whiles retaining the contents on the page

Question

hello i have written this program, and i have a previous and next button with check boxes, in which a user needs to select to answer a question, but i want it in a way that when the user clicks the previous button he/she can go back and change the answer he/she has chosen and should see the previously chosen answer before changing it.

here is my code:

<a href="layout.php?userid=<?php echo $userid."&id="; $r = $id-1; 
                      if($r == 0){
                        $r=1;
                      }
                    echo $r."&name=".$name; ?>"><button class="btn btn-dark">PREVIOUS</button></a>


                    <a href="layout.php?userid=<?php 
                    echo $userid."&id=";
                      if($Question == "<h1>No More Questions</h1>")
                      {
                        $r = $id;
                        $word ="";
                        $mark = "";
                      }
                      else{
                        $r = $id +1;
                      }

                      echo $r."&name=".$name;
                    ?>">
                    <button class="btn btn-dark" style="float: right" name="next">NEXT</button></a>


                    <div class="well" style="margin-top: 20px; height: 85px;">
                    <form action="layout.php?id= <?php echo $id."&name=".$name; ?>" method="post" >
                        <input type="checkbox" name="a">A.<?php echo $a ?>
                        <input type="checkbox" name="b" style="margin-left: 10px;">B. <?php echo $b ?>
                        <input type="checkbox" name="c" style="margin-left: 10px;">C. <?php echo $c ?>
                        <input type="checkbox" name="d" style="margin-left: 10px;">D.  <?php echo $d ?>

            <!-- <input type="text" name="todo" > -->
                        <input type="submit" name="submit" class="btn btn-cool" style="float: right">

                    </form>

                    <?php 
            if(isset($_POST['submit']))
{
        if(isset($_POST['a']))
          {
              if($a == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }


          if(isset($_POST['b']))
          {
              if($b == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }
          if(isset($_POST['c']))
          {
             if($c == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }
          if(isset($_POST['d']))
          {
              if($d == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }
}


           ?>

thanks!!! here is a visual representation of the app

the normal page

onclick of the next button

this is what happens when i click the previous button

Answer 1

You could use localStorage.

localStorage.setItem(key, value)
localStorage.getItem(key)

Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

You can save the answer(s) before going to the next page, and on page load, you just get the answers from localStorage and handle modifications on the loaded object. Then save again on next page.

If you want to save all the answers in an array or an object, don't forget to JSON.stringify() on setting the item and JSON.parse() on getting the item.

ADDED SNIPPET

You can set your inputs programatically, according to the object loaded from localStorage:

//const storage = JSON.parse(localStorage.getItem('answers'))
// localStorage.getItem() mock data
const storage = {
  page1Answer: 3,
  page2Answer: 1
}

// setting the answers based on the data loaded from localStorage
function setAnswer(pageNum, ansNum, val) {
  document.getElementById(`ans${pageNum}_${ansNum}`).checked = val
}

// 

// mock functions for setting/clearing checked radio inputs
const btnPage1 = document.getElementById('setAnswerPage1')
const btnPage2 = document.getElementById('setAnswerPage2')

btnPage1.addEventListener('click', function(e) {
  setAnswer(1, storage.page1Answer, true)
})

btnPage2.addEventListener('click', function(e) {
  setAnswer(2, storage.page2Answer, true)
})

const btnClear = document.getElementById('clearAnswers')

btnClear.addEventListener('click', function(e) {
  setAnswer(1, storage.page1Answer, false)
  setAnswer(2, storage.page2Answer, false)
})

<button id="setAnswerPage1">SET ANSWER PAGE 1</button><br />
<button id="setAnswerPage2">SET ANSWER PAGE 2</button><br />
<button id="clearAnswers">CLEAR ANSWERS</button>
<h2>PAGE 1</h2>
<label for="ans1_1">ANSWER 1: <input type="radio" id="ans1_1" name="page1Answers" /></label><br />
<label for="ans1_2">ANSWER 3: <input type="radio" id="ans1_2" name="page1Answers" /></label><br />
<label for="ans1_3">ANSWER 3: <input type="radio" id="ans1_3" name="page1Answers" /></label>
<h2>PAGE 2</h2>
<label for="ans2_1">ANSWER 1: <input type="radio" id="ans2_1" name="page2Answers" /></label><br />
<label for="ans2_2">ANSWER 3: <input type="radio" id="ans2_2" name="page2Answers" /></label><br />
<label for="ans2_3">ANSWER 3: <input type="radio" id="ans2_3" name="page2Answers" /></label>

I added a function that runs on button clicks, but you can trigger this function whenever you want (need). The main point is that you need to design your localStorage so you can handle pages and answers easily with your functions.