Делаю игру на js игру "Верю/не верю". На экране поочередно появляются заголовки утверждений. Пользователь отвечает на каждое утверждение поочередно. Всего 5 утверждений. - Если пользователь нажал на кнопку Неправда тогда появляется следующее утверждение. А если правда тогда появляется описание. К следующему вопросу можно перейти нажав на белый кружочек, которые под заголовками, который превращается в красный, если уже был дан ответ на него (любой) или нажав на дальше.
Вопрос:
- Как оптимальнее всего сделать так, чтобы вопросы сменялись без перезагрузки страницы;
- Как сделать навигацию по вопросам в виде кружочков снизу и кружочки были активными на чистом js? Имеющийся код и примерный вид функционала ниже:
<h1>Утверждение 1</h1>
<div id="text" style="display:none;">Объяснение утверждения</div>
<button onclick="chpok('text')"><h2 onclick="chpok('arrow')">Правда</h2></button>
<button onclick="chpok('arrow')"><h2>Неправда</h2></button>
<h2 id="arrow" onclick="chpok('block1')" style="display:none;">Дальше</h2>
<div class="block1" id="block1" style="display: none;">
<h1>Утверждение 2</h1>
<div id="text2" style="display:none;">Объяснение утверждения</div>
<button onclick="chpok('text2')"><h2 onclick="chpok('arrow2')">Правда</h2></button>
<button onclick="chpok('arrow2')"><h2>Неправда</h2></button>
<h2 id="arrow2" onclick="chpok('block2')" style="display:none;">Дальше</h2>
</div>
<div class="block2" id="block2" style="display: none;">
<h1>Утверждение 3</h1>
<div id="text3" style="display:none;">Объяснение утверждения</div>
<button onclick="chpok('text3')"><h2 onclick="chpok('arrow3')">Правда</h2></button>
<button onclick="chpok('arrow3')"><h2>Неправда</h2></button>
<h2 id="arrow3" style="display:none;">Дальше</h2>
</div>
<script>function chpok(id) {
elem=document.getElementById(id);
state=elem.style.display;
if (state=='none') elem.style.display='';
}</script>