Untitled Form

$(document).ready(function() { let index = 1; let activeSection = null; // Add option function function addOption(type, container) { let optionIndex = container.children().length + 1; let optionHtml; if (type === 'multiple-choice' || type === 'checkboxes') { optionHtml = `
×
`; } else if (type === 'dropdown') { optionHtml = `
×
`; } container.append(optionHtml); } // Form section function function createFormSection() { let newSection = `
${index === 1 ? '
' : ''}
`; $('#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' }); } } // 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'); activeSection = $('.form-section').last(); activeSection.addClass('active'); 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'); container.empty(); $(this).closest('.form-section').find('.add-option-btn').remove(); if (type === 'short-answer') { container.append(''); } else if (type === 'paragraph') { container.append(''); } else { addOption(type, container); $(this).closest('.form-section').append(''); } }); // 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); }); // 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'); section.remove(); if (section.hasClass('active')) { activeSection = null; } if (prevSection.length > 0) { prevSection.find('.delete-section-icon').appendTo(prevSection.find('.form-section')); activeSection = prevSection; } else if (nextSection.length > 0) { nextSection.find('.delete-section-icon').appendTo(nextSection.find('.form-header')); activeSection = nextSection; } 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'); }); // Preview button functionality $('#preview-btn').on('click', function() { let previewWindow = window.open('', '_blank'); let previewContent = ` Form Preview

Untitled Form

`; $('.form-section').each(function() { previewContent += '
'; previewContent += '
'; previewContent += ''; previewContent += '
'; let type = $(this).find('.custom-select').val(); let optionsContainer = $(this).find('.options-container'); if (type === 'multiple-choice') { optionsContainer.find('.option').each(function() { previewContent += `
`; }); } else if (type === 'checkboxes') { optionsContainer.find('.option').each(function() { previewContent += `
`; }); } else if (type === 'short-answer') { previewContent += ''; } else if (type === 'paragraph') { previewContent += ''; } else if (type === 'dropdown') { let dropdownHtml = ''; previewContent += dropdownHtml; } previewContent += '
'; }); previewContent += `
`; previewWindow.document.write(previewContent); 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) { ui.placeholder.height(ui.item.height()); }, stop: function (event, ui) { positionAddSectionButton(); } }); $('#form-container').disableSelection(); }); i have shared with you my html file as well as the js file, i want you to update the js file in such a way that once i click the submit button in the forms ui section i want them to get updated in the database through post data. each of the question text or the options i create and the type of question such as dropdown or checkbox,try to enclose every data under an active form ,in a similar way as you fetched all the information to show in the preview window. for each of the question text in each div created , i want to save in the text colomn in the questions table and for the type of question that is dropdown or multiple choice or checkbox etc i want to save them as 1,2,3,4 or 5 in the type colomn in the questions table and if the required button is selected it should reflect in the required colomn in the table as 0 or 1, for the options created in each of the div tag or the question tag should be saved in the text colomn in the options table. so that i can retreive the data when required. i want you also to create all the controllers and the models and the view required to perform the above task,i have created a login page after authorization the user is able to create the form so with respect to that particular users id , all the above contents should be updated in the database i will explain you the structure of my database have also created a database in the phpmyadmin as google_forms wherein i currently have 4 tables as users,forms,questions,options in the users table id,username,email,password,created_at where id isthe primary key . The forms table has id,user_id as the foreign key which is refernced to the id from users table,created_at and description colomn. questions table has id as the primary key,form_id as the foreign key which is referenced to the id from the forms table ,text,type,required ,created_at. and the options table has id as the primary key ,question_id as the foreign key which is referenced to the id from the questions table. finally i want a updation in my js file and html file as suggested and i want all the controller and models to perform this task in the codeigniter