93 lines
3.7 KiB
JavaScript
93 lines
3.7 KiB
JavaScript
|
$(document).ready(function() {
|
||
|
|
let index = 1;
|
||
|
|
let activeSection = null;
|
||
|
|
|
||
|
|
function addOption(type, container) {
|
||
|
|
let optionHtml;
|
||
|
|
if (type === 'multiple-choice' || type === 'checkboxes') {
|
||
|
|
optionHtml = `
|
||
|
|
<div class="option">
|
||
|
|
<input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
|
||
|
|
<input type="text" class="form-control option-label">
|
||
|
|
<span class="delete-option-icon">×</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
} else if (type === 'dropdown') {
|
||
|
|
optionHtml = `
|
||
|
|
<div class="option">
|
||
|
|
<input type="text" class="form-control option-label">
|
||
|
|
<span class="delete-option-icon">×</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
container.append(optionHtml);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createFormSection() {
|
||
|
|
let newSection = `
|
||
|
|
<div class="form-section" data-index="${index}">
|
||
|
|
<div class="header-row">
|
||
|
|
${index === 1 ? '<div class="violet-border"></div>' : ''}
|
||
|
|
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||
|
|
<select class="custom-select">
|
||
|
|
<option value="short-answer">Short Answer</option>
|
||
|
|
<option value="paragraph">Paragraph</option>
|
||
|
|
<option value="multiple-choice">Multiple Choice</option>
|
||
|
|
<option value="checkboxes">Checkboxes</option>
|
||
|
|
<option value="dropdown">Dropdown</option>
|
||
|
|
</select>
|
||
|
|
<label class="toggle-switch">
|
||
|
|
<input type="checkbox" class="required-toggle">
|
||
|
|
<span class="slider"></span>
|
||
|
|
</label>
|
||
|
|
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||
|
|
</div>
|
||
|
|
<div class="options-container"></div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
$('#form-container').append(newSection);
|
||
|
|
index++;
|
||
|
|
|
||
|
|
positionAddSectionButton();
|
||
|
|
}
|
||
|
|
|
||
|
|
function positionAddSectionButton() {
|
||
|
|
if (activeSection) {
|
||
|
|
let position = activeSection.position();
|
||
|
|
let buttonWidth = $('#add-section-btn').outerWidth();
|
||
|
|
let buttonHeight = $('#add-section-btn').outerHeight();
|
||
|
|
|
||
|
|
$('#add-section-btn').css({
|
||
|
|
position: 'absolute',
|
||
|
|
left: position.left - buttonWidth - 47 + 'px',
|
||
|
|
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#add-section-btn').on('click', function() {
|
||
|
|
createFormSection();
|
||
|
|
$('.form-section').removeClass('active');
|
||
|
|
activeSection = $('.form-section').last();
|
||
|
|
activeSection.addClass('active');
|
||
|
|
positionAddSectionButton();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('change', '.custom-select', function() {
|
||
|
|
let type = $(this).val();
|
||
|
|
let container = $(this).closest('.form-section').find('.options-container');
|
||
|
|
container.empty();
|
||
|
|
|
||
|
|
$(this).closest('.form-section').find('.add-option-btn').remove();
|
||
|
|
|
||
|
|
if (type === 'short-answer') {
|
||
|
|
container.append('<input type="text" class="form-control" disabled placeholder="Short answer text">');
|
||
|
|
} else if (type === 'paragraph') {
|
||
|
|
container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
|
||
|
|
} else {
|
||
|
|
addOption(type, container);
|
||
|
|
$(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|