Доброе утро всем!
Я в программировании новичок, так что многих вещей еще совсем не понимаю.
Вот смотрите, есть html со скриптом для теста, где каждый вопрос появляется по очереди за предыдущим. Нужно чтобы после ответа на последний вопрос, результат этого теста выводился в массив results в формате JSON- строки. Как это сделать не подскажите?
Вот HTML:
<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 = [].slice.call(content.querySelectorAll('[data-index]'));
questions[0].style.display = 'block';
document.querySelector('#vote [type="submit"]').addEventListener('click', function(e) {
questions[currentQuestionIndex].style.display = 'none';
if (++currentQuestionIndex >= questions.length)
return;
e.preventDefault();
questions[currentQuestionIndex].style.display = 'block';
});
</script>