Малик,
не плодите однотипные темы, пишите в одной и той же!!!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<form id="vote" action="#" method="POST">
<div id="content">
<div class="pattern form-5 form-group">
<label class="question form-group ">{% question %}</label><br>
<div class="answers"><br><br>
<div class="checkbox custom-control custom-checkbox form-control"><label><input type="checkbox" name="poll" value="{% answer.value %}">{% answer.title %}</label></div>
</div>
</div>
</div>
<div><button type="submit" class="btn btn-primary">Ответить</button></div>
</form>
</body>
<script>
const data = [{
"id": "1",
"question": "Какие языки программирования Вы используете?",
"answers": ["C#", "C++", "ASP.NET", "PHP"]
}, {
"id": "2",
"question": "С какими СУБД Вам приходилось работать?",
"answers": ["MS-SQL Server 2000-2012/T-SQL", "Oracle", "MySQL", "PostgreSQL"]
}, {
"id": "3",
"question": "С какими системами контроля версий Вы работали?",
"answers": ["GIT", "CVS", "Subverion", "Mercurial"]
}];
const content = document.getElementById('content');
const patternNode = content.querySelector('.pattern');
patternNode.classList.remove('pattern');
const pattern = patternNode.outerHTML;
patternNode.parentNode.removeChild(patternNode);
data.forEach(function(question, index) {
content.insertAdjacentHTML('beforeEnd', pattern.replace(/{%\s?question\s?%}/gim, question.question));
const questionNode = content.lastChild;
questionNode.dataset.index = index;
questionNode.style.display = 'none';
const answers = questionNode.querySelector('.answers');
const answer = answers.querySelector('.checkbox').outerHTML;
answers.innerHTML = question.answers.map(function(title, value) {
return answer
.replace(/{%\s?answer.title\s?%}/gim, title)
.replace(/{%\s?answer.value\s?%}/gim, value);
}).join("\n");
});
let currentQuestionIndex = 0;
const questions = [...content.querySelectorAll('[data-index]')];
questions[0].style.display = 'block';
document.querySelector('#vote [type="submit"]').addEventListener('click', function(e) {
e.preventDefault();
questions[currentQuestionIndex].style.display = 'none';
if (++currentQuestionIndex >= questions.length) {
const total = questions.map((el,k) => ({[data[k].id] : [...el.querySelectorAll('input[type="checkbox"]')].map(({checked},i) => checked ? data[k].answers[i] : "").filter(a => a)}))
this.parentNode.innerHTML = JSON.stringify(total, "", 4);
return false;
}
else questions[currentQuestionIndex].style.display = 'block';
});
</script>
</html>