diff --git a/application/views/templates/forms.txt b/application/views/templates/forms.txt new file mode 100644 index 0000000..6584653 --- /dev/null +++ b/application/views/templates/forms.txt @@ -0,0 +1,320 @@ + + + + + + + Google Form Clone + + + + + + + + + + +
+
+ +

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 \ No newline at end of file