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

64
assets/js/scripts.js
View File

@ -2,6 +2,7 @@ $(document).ready(function() {
let index = 1; let index = 1;
let activeSection = null; let activeSection = null;
// Add option function
function addOption(type, container) { function addOption(type, container) {
let optionIndex = container.children().length + 1; let optionIndex = container.children().length + 1;
let optionHtml; let optionHtml;
@ -24,6 +25,7 @@ $(document).ready(function() {
container.append(optionHtml); container.append(optionHtml);
} }
// Form section function
function createFormSection() { function createFormSection() {
let newSection = ` let newSection = `
<div class="form-section" data-index="${index}"> <div class="form-section" data-index="${index}">
@ -37,16 +39,13 @@ $(document).ready(function() {
<option value="checkboxes">Checkboxes</option> <option value="checkboxes">Checkboxes</option>
<option value="dropdown">Dropdown</option> <option value="dropdown">Dropdown</option>
</select> </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> <span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
</div> </div>
<div class="options-container"></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> </div>
`; `;
$('#form-container').append(newSection); $('#form-container').append(newSection);
@ -66,19 +65,11 @@ $(document).ready(function() {
left: position.left - buttonWidth - 47 + 'px', left: position.left - buttonWidth - 47 + 'px',
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + '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() { $('#add-section-btn').on('click', function() {
createFormSection(); createFormSection();
$('.form-section').removeClass('active'); $('.form-section').removeClass('active');
@ -87,6 +78,7 @@ $(document).ready(function() {
positionAddSectionButton(); positionAddSectionButton();
}); });
// It updates the options container based on the selected type, adding the necessary input fields or buttons.
$(document).on('change', '.custom-select', function() { $(document).on('change', '.custom-select', function() {
let type = $(this).val(); let type = $(this).val();
let container = $(this).closest('.form-section').find('.options-container'); let container = $(this).closest('.form-section').find('.options-container');
@ -100,16 +92,20 @@ $(document).ready(function() {
container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>'); container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
} else { } else {
addOption(type, container); 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() { $(document).on('click', '.add-option-btn', function() {
let type = $(this).closest('.form-section').find('.custom-select').val(); let type = $(this).closest('.form-section').find('.custom-select').val();
let container = $(this).closest('.form-section').find('.options-container'); let container = $(this).closest('.form-section').find('.options-container');
addOption(type, container); addOption(type, container);
// refreshOptionNumbers(container);
}); });
// removes the section;updates the active section;repositions add section button
$(document).on('click', '.delete-section-icon', function() { $(document).on('click', '.delete-section-icon', function() {
let section = $(this).closest('.form-section'); let section = $(this).closest('.form-section');
let prevSection = section.prev('.form-section'); let prevSection = section.prev('.form-section');
@ -129,19 +125,19 @@ $(document).ready(function() {
positionAddSectionButton(); positionAddSectionButton();
}); });
// delete option
$(document).on('click', '.delete-option-icon', function() { $(document).on('click', '.delete-option-icon', function() {
let option = $(this).closest('.option'); let option = $(this).closest('.option');
let container = option.closest('.options-container'); let container = option.closest('.options-container');
option.remove(); 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() { // Preview button functionality
$('.form-section').removeClass('active');
$(this).addClass('active');
activeSection = $(this);
positionAddSectionButton();
});
$('#preview-btn').on('click', function() { $('#preview-btn').on('click', function() {
let previewWindow = window.open('', '_blank'); let previewWindow = window.open('', '_blank');
let previewContent = ` let previewContent = `
@ -171,6 +167,7 @@ $(document).ready(function() {
previewContent += '</div>'; previewContent += '</div>';
let type = $(this).find('.custom-select').val(); let type = $(this).find('.custom-select').val();
let optionsContainer = $(this).find('.options-container'); let optionsContainer = $(this).find('.options-container');
if (type === 'multiple-choice') { if (type === 'multiple-choice') {
optionsContainer.find('.option').each(function() { optionsContainer.find('.option').each(function() {
previewContent += ` previewContent += `
@ -213,6 +210,14 @@ $(document).ready(function() {
previewWindow.document.close(); 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({ $('#form-container').sortable({
placeholder: 'ui-state-highlight', placeholder: 'ui-state-highlight',
start: function (event, ui) { start: function (event, ui) {
@ -224,13 +229,4 @@ $(document).ready(function() {
}); });
$('#form-container').disableSelection(); $('#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');
}
});
}); });