JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Victorina</title>
</head>
<body>
<div class="container">
<div class="question">
<h3>Чем и на чём пишут в русской поговорке?</h3>
<ul>
<li>
<label>
<span>Вилами по воде</span>
<input class="radiobtn" type="radio" name="pogovorki">
</label>
</li>
<li>
<label>
<span>Ухватом по песку</span>
<input class="radiobtn" type="radio" name="pogovorki">
</label>
</li>
<li>
<label>
<span>Граблями по снегу</span>
<input class="radiobtn" type="radio" name="pogovorki">
</label>
</li>
<li>
<label>
<span>Топором по дереву</span>
<input class="radiobtn" type="radio" name="pogovorki">
</label>
</li>
</ul>
</div>
<div class="question">
<h3>Как в народе называют специальный орнамент на машинах такси?</h3>
<ul>
<li>
<label>
<span>Шашечки</span>
<input class="radiobtn" type="radio" name="ornament">
</label>
</li>
<li>
<label>
<span>Ромбики</span>
<input class="radiobtn" type="radio" name="ornament">
</label>
</li>
<li>
<label>
<span>Кубики</span>
<input class="radiobtn" type="radio" name="ornament">
</label>
</li>
<li>
<label>
<span>Фишечки</span>
<input class="radiobtn" type="radio" name="ornament">
</label>
</li>
</ul>
</div>
<div class="question">
<h3>В кого превратился братец Иванушка в русской...
CSS
* {
text-transform: uppercase;
}
ul{
list-style-type: none;
}
label{
display: flex;
}
label input{
order: 1;
margin-right: 10px;
}
label span{
order: 2;
}
.question{
width: 50%;
}
JavaScript
(() => {
let groupName;
let counter = 0;
document.addEventListener('click', (() => {
return (e) => {
if (e.target.classList.contains('radiobtn')){
if (groupName !== e.target.name){
groupName = e.target.name;
if (counter > 1){
document.querySelector('.showbtn').disabled = false;
} else {
++counter;
}
}
}
}
})());
})();