Add function to game on "True or False" on pure js

I am making a on js "True or False" game. Assertion titles appear on the screen one by one. The user responds to each statement in turn. There are 5 statements in total. - If the user clicked on the False button then the following statement appears. And if it's true then a description appears. You can go to the next question by clicking on the white circle under the headings, which turns into red if an answer has already been given to it (any) or by clicking on further.

What is the best way to make the questions change without reloading the page and make the navigation circles are active in pure js? The available code and an approximate view of the functionality are below:

<h1>statement 1</h1>
<div id="text" style="display:none;">Text of statement</div>
<button onclick="chpok('text')"><h2 onclick="chpok('arrow')">True</h2></button>
<button onclick="chpok('arrow')"><h2>False</h2></button>
<h2 id="arrow" onclick="chpok('block1')" style="display:none;">Next</h2>

<div class="block1" id="block1" style="display: none;">
  <h1>statement 2</h1>
  <div id="text2" style="display:none;">Text of statement</div>
  <button onclick="chpok('text2')"><h2 onclick="chpok('arrow2')">True</h2></button>
  <button onclick="chpok('arrow2')"><h2>False</h2></button>
  <h2 id="arrow2" onclick="chpok('block2')" style="display:none;">Next</h2>
</div>

<div class="block2" id="block2" style="display: none;">
  <h1>statement 3</h1>
  <div id="text3" style="display:none;">Text of statement</div>
  <button onclick="chpok('text3')"><h2 onclick="chpok('arrow3')">True</h2></button>
  <button onclick="chpok('arrow3')"><h2>False</h2></button>
  <h2 id="arrow3" style="display:none;">Next</h2>
</div>

<script>function chpok(id) {
  elem=document.getElementById(id);
  state=elem.style.display;
  if (state=='none') elem.style.display='';
}</script>