Пытаюсь сделать небольшой тест на js. Как вывести из массива ответы, чтобы у каждой радио кнопки был один ответ?
<div id="test">
<button id="button">Check</button>
</div>
let test = document.querySelector('#test');
let questions = [
{
text: '1. Ворос?',
right: 2,
answers: ['Ответ', 'Ответ 2', 'Ответ 3']
},
{
text: '2. Ворос',
right: 1,
answers: ['Ответ 1', 'Ответ 2', 'Ответ 3', 'Ответ 4']
},
];
let i = 1;
for (let question of questions) {
let div = document.createElement('div');
test.appendChild(div);
let p = document.createElement('p');
p.innerHTML = question.text;
div.appendChild(p);
let form = document.createElement('form');
test.appendChild(form);
form.dataset.right = question.right;
let j = 0;
for (let answer of question.answers) {
let input = document.createElement('input');
input.type = 'radio';
let label = document.createElement('label');
label.innerHTML = question.answers;
div.appendChild(label);
input.name = i;
input.dataset.answerNum = j++;
form.appendChild(input);
}
i++;
}
let button = document.querySelector('#button');
button.addEventListener('click', function () {
let forms = document.querySelectorAll('#test form');
for (let form of forms) {
form.classList.remove('correct');
form.classList.remove('incorrect');
let inputs = form.querySelectorAll('input');
for (let input of inputs) {
if (input.checked) {
if (input.dataset.answerNum == form.dataset.right) {
form.classList.add('correct');
} else {
form.classList.add('incorrect');
}
break;
}
}
}
});