66 lines
3.1 KiB
JavaScript
66 lines
3.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const addQuestionButtons = document.querySelectorAll('.add-question-btn');
|
|
const questionsContainer = document.getElementById('questions-container');
|
|
let questionCounter = 0;
|
|
|
|
addQuestionButtons.forEach(button => {
|
|
button.addEventListener('click', function () {
|
|
const type = this.dataset.type;
|
|
addQuestion(type);
|
|
});
|
|
});
|
|
|
|
function addQuestion(type) {
|
|
questionCounter++;
|
|
const questionId = `question-${questionCounter}`;
|
|
let questionHtml = `
|
|
<div class="card question-card" id="${questionId}">
|
|
<div class="card-header">
|
|
<span>Question ${questionCounter}</span>
|
|
<button type="button" class="btn-close" aria-label="Close" onclick="document.getElementById('${questionId}').remove()"></button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="${questionId}-text" class="form-label">Question Text</label>
|
|
<input type="text" class="form-control" id="${questionId}-text" name="questions[${questionCounter}][text]" required>
|
|
</div>
|
|
<input type="hidden" name="questions[${questionCounter}][type]" value="${type}">
|
|
`;
|
|
|
|
switch (type) {
|
|
case 'text':
|
|
questionHtml += `<p class="text-muted">A short text answer will be collected.</p>`;
|
|
break;
|
|
case 'multiple-choice':
|
|
case 'checkboxes':
|
|
questionHtml += `
|
|
<div class="mb-3">
|
|
<label class="form-label">Options</label>
|
|
<div id="${questionId}-options-container">
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" name="questions[${questionCounter}][options][]">
|
|
<button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Remove</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-outline-primary" type="button" onclick="addOption('${questionId}', ${questionCounter})">Add Option</button>
|
|
</div>
|
|
`;
|
|
break;
|
|
}
|
|
|
|
questionHtml += `</div></div>`;
|
|
questionsContainer.insertAdjacentHTML('beforeend', questionHtml);
|
|
}
|
|
|
|
window.addOption = function(questionId, questionIndex) {
|
|
const optionsContainer = document.getElementById(`${questionId}-options-container`);
|
|
const optionHtml = `
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" name="questions[${questionIndex}][options][]">
|
|
<button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Remove</button>
|
|
</div>
|
|
`;
|
|
optionsContainer.insertAdjacentHTML('beforeend', optionHtml);
|
|
}
|
|
});
|