JSFiddle - React, Tailwind, and code Playground
HTML
<form action="#">
<div class='test-block'>
<h1>Вопрос 1</h1>
<input type="radio" name='1' value='1' required> Ответ 1
<input type="radio" name='1' value='2' required> Ответ 2
<input type="radio" name='1' value='3' required> Ответ 3
<input type="radio" name='1' value='4' required> Ответ 4
<button class='test-next'>Ответить</button>
</div>
<div class='test-block'>
<h1>Вопрос 2</h1>
<input type="radio" name='2' value='5' required> Ответ 5
<input type="radio" name='2' value='6' required> Ответ 6
<input type="radio" name='2' value='7' required> Ответ 7
<input type="radio" name='3' value='8' required> Ответ 8
<button class='test-next'>Ответить</button>
</div>
<div class='test-block'>
<h1>Вопрос 3</h1>
<input type="radio" name='3' value='9' required> Ответ 9
<input type="radio" name='3' value='10' required> Ответ 10
<input type="radio" name='3' value='11' required> Ответ 11
<input type="radio" name='3' value='12' required> Ответ 12
<button>Ответить</button>
</div>
</form>
CSS
.test-block {
display: none;
}
.test-block:first-of-type {
display: block;
}
JavaScript
$('.test-next').click(function() {
if ($('.test-block:visible input[type="radio"]:checked').length)
$('.test-block:visible').hide().next('.test-block').show();
});