JSFiddle - React, Tailwind, and code Playground
HTML
<div id="stage1" class="stageClass">
<div class="question">
Сколько тебе лет?
</div>
<div class="answers">
<div id="answer1" value="1">10</div>
<div id="answer2" value="2">12</div>
<div id="answer3" value="4">14</div>
</div>
</div>
<div id="stage2" style="display:none;" class="stageClass">
<div class="question">
Сколько лет твоей маме?
</div>
<div class="answers">
<div id="answer4" value="3">10</div>
<div id="answer5" value="2">12</div>
<div id="answer6" value="4">14</div>
</div>
</div>
<div id="stage3" style="display:none;" class="stageClass">
<div class="question">
А бате сколько лет?
</div>
<div class="answers">
<div id="answer7" value="3">10</div>
<div id="answer8" value="2">12</div>
<div id="answer9" value="4">14</div>
</div>
</div>
CSS
.stageClass {
width:400px;
background:#eee;
padding:10px;
text-align:center;
}
.question {
widht:400px
padding:10px;
}
.answers {
margin-top:10px;
}
.answers div:hover {
background:#fff;
cursor:pointer;
}
JavaScript
var count=0, step=0;
document.getElementById('answer'+(step*3+1)).onclick=function(){
count = count+Number(document.getElementById('answer'+(step*3+1)).getAttribute('value'));
alert(count);
document.getElementById('stage'+(step+1)).style.display="none";
document.getElementById('stage'+(step+2)).style.display="";
step+=1;
}
document.getElementById('answer'+(step*3+2)).onclick=function(){
count = count+Number(document.getElementById('answer'+(step*3+2)).getAttribute('value'));
alert(count);
document.getElementById('stage'+(step)).style.display="none";
document.getElementById('stage'+(step+1)).style.display="";
step+=1;
}
document.getElementById('answer'+(step*3+3)).onclick=function(){
count = count+Number(document.getElementById('answer'+(step*3+3)).getAttribute('value'));
alert(count);
document.getElementById('stage'+(step)).style.display="none";
document.getElementById('stage'+(step+1)).style.display="";
step+=1;
}