RameshT
/
google_forms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Test Husky pre-commit hook.

This commit is contained in:
RameshT 2024-08-06 14:50:56 +05:30
parent f31bf6e2d2
commit 70036952b4
1 changed files with 69 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
assets/js/updation.js
View File

@ -1,34 +1,35 @@
$(document).ready(function() { $(document).ready(function () {
let index = 1; let index = 1
let activeSection = null; let activeSection = null
function addOption(type, container) { function addOption(type, container) {
let optionHtml; let optionHtml
if (type === 'multiple-choice' || type === 'checkboxes') { if (type === 'multiple-choice' || type === 'checkboxes') {
optionHtml = ` optionHtml = `
<div class="option"> <div class="option">
<input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled> <input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
<input type="text" class="form-control option-label"> <input type="text" class="form-control option-label">
<span class="delete-option-icon">&times;</span> <span class="delete-option-icon">&times;</span>
</div> </div>
`; `
} else if (type === 'dropdown') { } else if (type === 'dropdown') {
optionHtml = ` optionHtml = `
<div class="option"> <div class="option">
<input type="text" class="form-control option-label"> <input type="text" class="form-control option-label">
<span class="delete-option-icon">&times;</span> <span class="delete-option-icon">&times;</span>
</div> </div>
`; `
}
container.append(optionHtml);
} }
container.append(optionHtml)
}
function createFormSection() { function createFormSection() {
let newSection = ` let newSection = `
<div class="form-section" data-index="${index}"> <div class="form-section" data-index="${index}">
<div class="header-row"> <div class="header-row">
${index === 1 ? '<div class="violet-border"></div>' : ''} ${index === 1 ? '<div class="violet-border"></div>' : ''}
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea> <textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
<select class="custom-select"> <select class="custom-select">
<option value="short-answer">Short Answer</option> <option value="short-answer">Short Answer</option>
<option value="paragraph">Paragraph</option> <option value="paragraph">Paragraph</option>
@ -44,50 +45,58 @@ $(document).ready(function() {
</div> </div>
<div class="options-container"></div> <div class="options-container"></div>
</div> </div>
`; `
$('#form-container').append(newSection); $('#form-container').append(newSection)
index++; index++
positionAddSectionButton(); 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',
})
} }
}
function positionAddSectionButton() { $('#add-section-btn').on('click', function () {
if (activeSection) { createFormSection()
let position = activeSection.position(); $('.form-section').removeClass('active')
let buttonWidth = $('#add-section-btn').outerWidth(); activeSection = $('.form-section').last()
let buttonHeight = $('#add-section-btn').outerHeight(); activeSection.addClass('active')
positionAddSectionButton()
})
$('#add-section-btn').css({ $(document).on('change', '.custom-select', function () {
position: 'absolute', let type = $(this).val()
left: position.left - buttonWidth - 47 + 'px', let container = $(this).closest('.form-section').find('.options-container')
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px' 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>'
)
} }
})
$('#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>');
}
});
});