52 lines
2.6 KiB
JavaScript
52 lines
2.6 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const questionsContainer = document.getElementById('questions-container');
|
||
|
|
const addQuestionButton = document.getElementById('add-question-button');
|
||
|
|
|
||
|
|
addQuestionButton.addEventListener('click', () => {
|
||
|
|
const questionCount = document.querySelectorAll('.question-block').length;
|
||
|
|
const questionBlock = document.createElement('div');
|
||
|
|
questionBlock.className = 'question-block mb-4 p-4 bg-gray-50 rounded-lg shadow-inner';
|
||
|
|
questionBlock.innerHTML = `
|
||
|
|
<div class="mb-2">
|
||
|
|
<label class="block text-gray-700 font-semibold">Question</label>
|
||
|
|
<input type="text" name="questions[${questionCount}][text]" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
|
||
|
|
</div>
|
||
|
|
<div class="options-container mb-2"></div>
|
||
|
|
<button type="button" class="add-option-button text-blue-500">Add Option</button>
|
||
|
|
`;
|
||
|
|
questionsContainer.appendChild(questionBlock);
|
||
|
|
addOptionButtonListener(questionBlock.querySelector('.add-option-button'));
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('.add-option-button').forEach(button => {
|
||
|
|
addOptionButtonListener(button);
|
||
|
|
});
|
||
|
|
|
||
|
|
function addOptionButtonListener(button) {
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
const questionBlock = button.closest('.question-block');
|
||
|
|
const optionsContainer = questionBlock.querySelector('.options-container');
|
||
|
|
const optionCount = optionsContainer.querySelectorAll('.option-block').length;
|
||
|
|
const optionBlock = document.createElement('div');
|
||
|
|
optionBlock.className = 'option-block mb-1 flex items-center';
|
||
|
|
optionBlock.innerHTML = `
|
||
|
|
<input type="text" name="questions[${Array.from(questionsContainer.children).indexOf(questionBlock)}][options][${optionCount}][text]" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
|
||
|
|
<button type="button" class="remove-option-button text-red-500 ml-2">Remove</button>
|
||
|
|
`;
|
||
|
|
optionsContainer.appendChild(optionBlock);
|
||
|
|
addRemoveOptionButtonListener(optionBlock.querySelector('.remove-option-button'));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll('.remove-option-button').forEach(button => {
|
||
|
|
addRemoveOptionButtonListener(button);
|
||
|
|
});
|
||
|
|
|
||
|
|
function addRemoveOptionButtonListener(button) {
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
const optionBlock = button.closest('.option-block');
|
||
|
|
optionBlock.remove();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|