You can try this one (as I understood, it works fine (if you have more questions, it can be done with loops) ).
HTML code is:
<div class="questions">
<div class="question"> Question 1
<label>
<input class="answer" type="radio" name="q1" value="one">One
</label>
<label>
<input class="answer" type="radio" name="q1" value="two">Two
</label>
<label>
<input class="answer" type="radio" name="q1" value="three">Three
</label>
<label>
<input class="answer" type="radio" name="q1" value="four">Four
</label>
</div>
<br>
<div class="question"> Question 2
<label>
<input class="answer" type="radio" name="q2" value="one">One
</label>
<label>
<input class="answer" type="radio" name="q2" value="two">Two
</label>
<label>
<input class="answer" type="radio" name="q2" value="three">Three
</label>
<label>
<input class="answer" type="radio" name="q2" value="four">Four
</label>
</div>
</div>
<br>
<button id="submit">Submit</button>
CSS code is:
.question {
display: flex;
flex-direction: column;
}
JS code is:
var submit = document.getElementById('submit');
submit.addEventListener('click', function() {
var answers = document.getElementsByClassName('answer');
var result = "";
for(var i=0; i<answers.length; i++) {
if (answers[i].checked) {
result += answers[i].value + "
";
}
}
alert(result);
});
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
