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

commi

This commit is contained in:
torun23 2024-07-11 09:32:56 +05:30
parent 6c38236438
commit 605a538315
2 changed files with 57 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
assets/css/styles.css
View File

@ -1,8 +1,9 @@
body {
background-color: rgb(240, 235, 248);
font-family: Arial, sans-serif;
}
.container {
position: relative;
margin-top: 30px;
@ -33,14 +34,13 @@ body {
#preview-btn {
margin-right: 10px;
background-color: rgb(103, 58, 183);
border-color: rgb(103, 58, 183);
border-color: #007bff;
border-radius: 100%;
width: 33px;
height: 33px;
display: flex;
justify-content: center;
align-items: center;
outline: none;
}
#preview-btn i {
@ -53,10 +53,12 @@ body {
left: -60px;
top: 24px;
z-index: 1000;
border-radius: 100%;
border-radius: 50%;
background-color: rgb(103, 58, 183);
}
.form-section {
background-color: white;
width: 56%;
@ -134,47 +136,38 @@ body {
text-align: left;
}
.add-option-btn {
background-color: #f0f0f0;
color: #333;
margin-top: 11px;
font-size: 0.9em;
}
.ui-state-highlight {
background: rgb(240, 235, 248) !important;
background-color: transparent !important;
border: none !important;
margin-bottom: 10px;
border-radius: 10px;
width: 56%;
margin-left: 240px;
border: none !important;
}
.btn-required {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 100;
border-radius: 20px;
}
/* Toggle button styles */
.toggle-container {
display: flex;
align-items: center;
margin-top: 20px;
}
/* Toggle Switch CSS */
/* Toggle Switch CSS */
.toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20.4px;
width: 34px;
height: 20px;
margin-left: 10px;
}
.toggle-switch input {
display: none;
opacity: 0;
width: 0;
height: 0;
}
.slider {
@ -192,19 +185,19 @@ body {
.slider:before {
position: absolute;
content: "";
height: 15.6px;
width: 15.6px;
left: 2.4px;
bottom: 2.4px;
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
background-color: rgb(103, 58, 183);
}
input:checked + .slider:before {
transform: translateX(15.6px);
transform: translateX(14px);
}

68
assets/js/scripts.js
View File

@ -2,6 +2,7 @@ $(document).ready(function() {
let index = 1;
let activeSection = null;
// Add option function
function addOption(type, container) {
let optionIndex = container.children().length + 1;
let optionHtml;
@ -24,6 +25,7 @@ $(document).ready(function() {
container.append(optionHtml);
}
// Form section function
function createFormSection() {
let newSection = `
<div class="form-section" data-index="${index}">
@ -37,16 +39,13 @@ $(document).ready(function() {
<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 class="toggle-container">
<span class="status">Required</span>
<label class="toggle-switch">
<input type="checkbox" class="toggleButton">
<span class="slider"></span>
</label>
</div>
</div>
`;
$('#form-container').append(newSection);
@ -66,19 +65,11 @@ $(document).ready(function() {
left: position.left - buttonWidth - 47 + 'px',
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
});
} else {
let containerPosition = $('#form-container').position();
let buttonWidth = $('#add-section-btn').outerWidth();
let buttonHeight = $('#add-section-btn').outerHeight();
$('#add-section-btn').css({
position: 'absolute',
left: containerPosition.left + 'px',
top: containerPosition.top + $('#form-container').height() + 20 + 'px'
});
}
}
// Event handler is triggered
// creates a new form section;sets it as active;repositions the add section button
$('#add-section-btn').on('click', function() {
createFormSection();
$('.form-section').removeClass('active');
@ -87,6 +78,7 @@ $(document).ready(function() {
positionAddSectionButton();
});
// It updates the options container based on the selected type, adding the necessary input fields or buttons.
$(document).on('change', '.custom-select', function() {
let type = $(this).val();
let container = $(this).closest('.form-section').find('.options-container');
@ -100,17 +92,21 @@ $(document).ready(function() {
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 btn-sm add-option-btn">Add Option</button>');
$(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
}
});
// add option event handler
// adds a new option to the options container and updates the option numbers
$(document).on('click', '.add-option-btn', function() {
let type = $(this).closest('.form-section').find('.custom-select').val();
let container = $(this).closest('.form-section').find('.options-container');
addOption(type, container);
// refreshOptionNumbers(container);
});
$(document).on('click','.delete-section-icon', function() {
// removes the section;updates the active section;repositions add section button
$(document).on('click', '.delete-section-icon', function() {
let section = $(this).closest('.form-section');
let prevSection = section.prev('.form-section');
let nextSection = section.next('.form-section');
@ -129,19 +125,19 @@ $(document).ready(function() {
positionAddSectionButton();
});
// delete option
$(document).on('click', '.delete-option-icon', function() {
let option = $(this).closest('.option');
let container = option.closest('.options-container');
option.remove();
K });
// Event handler for required toggle button
$(document).on('click', '.required-toggle', function() {
$(this).closest('.form-section').toggleClass('required');
});
$(document).on('click', '.form-section', function() {
$('.form-section').removeClass('active');
$(this).addClass('active');
activeSection = $(this);
positionAddSectionButton();
});
// Preview button functionality
$('#preview-btn').on('click', function() {
let previewWindow = window.open('', '_blank');
let previewContent = `
@ -171,6 +167,7 @@ $(document).ready(function() {
previewContent += '</div>';
let type = $(this).find('.custom-select').val();
let optionsContainer = $(this).find('.options-container');
if (type === 'multiple-choice') {
optionsContainer.find('.option').each(function() {
previewContent += `
@ -204,7 +201,7 @@ $(document).ready(function() {
previewContent += '</div>';
});
previewContent += `
<button class="btn btn-success" style = "margin-left: 240px; margin-top: 20px ">Submit</button>
<button class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
</div>
</body>
</html>
@ -213,6 +210,14 @@ $(document).ready(function() {
previewWindow.document.close();
});
// Activate the section;repositions add section button
$(document).on('click', '.form-section', function() {
$('.form-section').removeClass('active');
$(this).addClass('active');
activeSection = $(this);
positionAddSectionButton();
});
$('#form-container').sortable({
placeholder: 'ui-state-highlight',
start: function (event, ui) {
@ -224,13 +229,4 @@ $(document).ready(function() {
});
$('#form-container').disableSelection();
$(document).on('change', '.toggleButton', function() {
let status = $(this).prop('checked');
if (status) {
$(this).closest('.form-section').addClass('required-section');
} else {
$(this).closest('.form-section').removeClass('required-section');
}
});
});