function createTextElement(text, tagName = 'p') {
let pElement = document.createElement(tagName);
pElement.innerText = text;
return pElement;
}
function Answer(answerControlType, questionText = '', questionName = '') {
let answerType = answerControlType;
let text = questionText;
let extended;
let extendedContainer;
let name = questionName;
let ans;
this.getAnswerType = () => { return answerType; }
this.createAnswerElement = (questionName, id, extendedA = null) => {
if (questionName !== null) {
name = questionName;
}
ans = document.createElement('input');
ans.setAttribute('name', name);
ans.setAttribute('id', id);
ans.setAttribute('type', answerType);
ans.setAttribute('value', text);
ans.addEventListener('change', ($event) => {
var radios = document.querySelectorAll('input[type=radio][name="' + name + '"]');
for (var i = 0; i < radios.length; i++) {
if (radios[i].value !== event.target.value) {
let ext = document.querySelector('#' + radios[i].getAttribute('id') + "_ext");
if (ext) {
ext.parentElement.removeChild(ext);
}
} else {
radios[i].parentElement.appendChild(extendedContainer);
}
}
});
let container = document.createElement('div');
container.appendChild(ans);
if (answerType === 'radio' || answerType === 'checkbox') {
let label = document.createElement('label');
label.innerText = questionText;
label.setAttribute('for', id);
container.appendChild(label);
}
extendedContainer = document.createElement('div');
extendedContainer.setAttribute('id', id + '_ext');
extendedContainer.setAttribute('class', 'extended');
if (extendedA !== null) {
extended = extendedA;
extendedContainer.appendChild(extended);
}
return container;
}
}
function Question(questionNumber, questionTitle) {
let title = questionTitle;
let number = questionNumber;
let answers = [];
let questionContainer;
let answersContainer;
let headerContainer;
this.addAnswer = (answer, ext) => {
let questionId = 'question-name-' + number
if (ext) {
container = answer.createAnswerElement(
answer.getAnswerType() === 'radio' ? questionId : 'id-' + number + '-' + answers.length,
'id-' + number + '-' + answers.length,
ext.createAnswerElement(
null,
'id-' + number + '-' + answers.length
)
);
} else {
container = answer.createAnswerElement(
answer.getAnswerType() === 'radio' ? questionId : 'id-' + number + '-' + answers.length,
'question-id-' + number + '-' + answers.length);
}
answersContainer.appendChild(container);
answers.push(answer);
}
this.buildQuestion = (parentElement, questionId) => {
questionContainer = document.createElement('fieldset');
questionContainer.setAttribute('id', questionId + number);
headerContainer = createTextElement((number + 1) + ' ' + title, 'legend');
questionContainer.appendChild(headerContainer);
answersContainer = document.createElement('div');
answersContainer.setAttribute('class', 'radio-buttons-container');
questionContainer.appendChild(answersContainer);
parentElement.appendChild(questionContainer);
}
}
let parentElement = document.querySelector('form');
let question0 = new Question(0, "Podaj swój wiek:");
question0.buildQuestion(parentElement, 'wiek');
question0.addAnswer(new Answer('number', '', 'wiek'));
let question1 = new Question(1, "Czy masz szczęście?");
question1.buildQuestion(parentElement, 'firstOne');
question1.addAnswer(new Answer('radio', 'Tak mam i to dużo (podaj ile)'), new Answer('number', '', 'NumerCzegosTam'));
question1.addAnswer(new Answer('radio', 'Mam'));
question1.addAnswer(new Answer('radio', 'Nie mam'));
let question2 = new Question(2, "Czy coś tam coś tam?");
question2.buildQuestion(parentElement, 'secondOne');
question2.addAnswer(new Answer('radio', 'Tak'));
question2.addAnswer(new Answer('radio', 'Nie'));
let question3 = new Question(3, "Jakie kolory najbardziej lubisz?");
question3.buildQuestion(parentElement, 'anotherone');
question3.addAnswer(new Answer('checkbox', 'Pastelowe'));
question3.addAnswer(new Answer('checkbox', 'Kolorowe'));
question3.addAnswer(new Answer('checkbox', 'Marchewkowe'));
let buttonElement = document.querySelector('#sendButton');
buttonElement.addEventListener('click', () => {
let w = new FormData(parentElement);
for (var key of w.keys()) {
console.log('key: ' + key + ' = ', w.get(key));
}
})
