debugged the js

application/controllers/Forms.php

@@ -63,7 +63,7 @@ class Forms extends CI_Controller
         }
         $this->load->view('templates/header', $data);
         $this->load->view('forms/view_form', $data);
-        $this->load->view('templates/footer', $data);
+       //footer intentionally omitted
     }
 
     public function delete_form($form_id) {
@@ -242,6 +242,15 @@ public function list_user_published_forms() {
     $this->load->view('templates/footer');
     }
 
+    public function edit_form(){
+        $formData = $this->input->post('formData');
+        $decodedData = json_decode($formData, true);
+        // Process the form data here
+        // Example: Save the form data to the database
+    
+        $this->load->model('Form_model');
+    }
+
 
 
 }

application/views/forms/view_form.php

@@ -8,12 +8,12 @@
             <div id="questions-container">
                 <?php if (!empty($questions)) : ?>
                     <?php foreach ($questions as $index => $question) : ?>
-                    <div class="question-box" data-question-type="<?= htmlspecialchars($question->question_type, ENT_QUOTES, 'UTF-8') ?>" id="question-template" data-question_id="<?=htmlspecialchars($question->question_id, ENT_QUOTES, 'UTF-8')?>">
+                        <div class="question-box" data-question-type="<?= htmlspecialchars($question->question_type, ENT_QUOTES, 'UTF-8') ?>" data-question_id="<?= htmlspecialchars($question->question_id, ENT_QUOTES, 'UTF-8') ?>" id="question-template">
                             <div class="question-box_header">
                                 <input type="text" value="<?= htmlspecialchars($question->question_text, ENT_QUOTES, 'UTF-8') ?>" class="question-box_header_question" style="color: black;" placeholder="Question <?= $index + 1 ?>">
                                 <img src="<?= base_url() ?>assets/images/image.png" alt="add an image" height="20px" width="20px">
                                 <div class="question-box_header_question-type">
-                                <select id="question-type" class="question-box_header_question-type_select">
+                                    <select class="question-box_header_question-type_select">
                                         <option value="multiple-choice" <?= $question->question_type == 'multiple-choice' ? 'selected' : '' ?>>Multiple choice</option>
                                         <option value="checkbox" <?= $question->question_type == 'checkbox' ? 'selected' : '' ?>>Checkbox</option>
                                         <option value="paragraph" <?= $question->question_type == 'paragraph' ? 'selected' : '' ?>>Paragraph</option>
@@ -30,11 +30,11 @@
                             <div class="question-box_short-answer" style="display: <?= $question->question_type == 'paragraph' ? 'block' : 'none' ?>;">
                                 <div class="question-box_short-answer_placeholder">Paragraph</div>
                             </div>
-                        <div id="options-container" style="display: <?= $question->question_type == 'paragraph' ? 'none' : 'block' ?>;">
+                            <div class="options-container" style="display: <?= $question->question_type == 'paragraph' ? 'none' : 'block' ?>;">
                                 <?php if (!empty($question->options)) : ?>
                                     <?php foreach ($question->options as $optionIndex => $option) : ?>
-                                    <div class="question-box_option-block" id="option-template" data-option_id="<?=htmlspecialchars($option->option_id, ENT_QUOTES, 'UTF-8') ?>" >
+                                        <div class="question-box_option-block" data-option_id="<?= htmlspecialchars($option->option_id, ENT_QUOTES, 'UTF-8') ?>">
-                                        <img id="question-type-image"src="<?= base_url() ?>assets/images/<?= $question->question_type == 'multiple-choice' ? 'circle' : 'square' ?>.png" alt="option <?= $question->question_type ?>" width="16px" height="16px">
+                                            <img class="question-type-image" src="<?= base_url() ?>assets/images/<?= $question->question_type == 'multiple-choice' ? 'circle' : 'square' ?>.png" alt="option <?= $question->question_type ?>" width="16px" height="16px">
                                             <input type="text" value="<?= htmlspecialchars($option->option_text, ENT_QUOTES, 'UTF-8') ?>" class="question-box_option-block_option-text" placeholder="Option <?= $optionIndex + 1 ?>">
                                             <?php if ($optionIndex > 0) : ?>
                                                 <button class="question-box_option-block_option-close"><img src="<?= base_url() ?>assets/images/close.png" alt="close option"></button>
@@ -45,7 +45,7 @@
                                 <?php endif; ?>
                                 <div id="new-options"></div>
                                 <div class="question-box_add-option">
-                                <button id="add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
+                                    <button class="add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
                                 </div>
                             </div>
                             <div class="question-box_footer">
@@ -59,7 +59,7 @@
                     <p>No questions found for this form.</p>
                 <?php endif; ?>
             </div>
-
+        </div>
         <div class="sidebar">
             <button id="add-question">
                 <img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
@@ -68,3 +68,20 @@
         </div>
     </div>
 </div>
+
+<!-- Option Template -->
+<div id="option-template" style="display:none;">
+    <div class="question-box_option-block">
+        <img class="question-type-image" src="<?= base_url() ?>assets/images/circle.png" alt="option multiple-choice" width="16px" height="16px">
+        <input type="text" class="question-box_option-block_option-text" placeholder="Option">
+        <button class="question-box_option-block_option-close"><img src="<?= base_url() ?>assets/images/close.png" alt="close option"></button>
+    </div>
+</div>
+
+<script type="text/javascript">
+    var base_url = '<?= base_url() ?>';
+</script>
+<script src="<?= base_url() ?>assets/js/jquery.js"></script>
+<script src="<?= base_url() ?>assets/js/edit.js"></script>
+</body>
+</html>

assets/js/edit.js

@@ -2,7 +2,6 @@ $(document).ready(function() {
     console.log('jQuery is ready');
     let questionCount = 0;
 
-    // Add new question
     $('#add-question').click(function() {
         questionCount++;
     
@@ -11,36 +10,152 @@ $(document).ready(function() {
         newQuestion.removeAttr('id');
         newQuestion.attr('data-question-type', 'multiple-choice'); // Set default question type
         newQuestion.find('.question-box_header_question').attr('placeholder', 'Question ' + questionCount);
-        newQuestion.find('.question-box_option-block_option-text').attr('placeholder', 'Option 1');
+        newQuestion.find('.question-type-image').attr('src', base_url + 'assets/images/circle.png');
+        newQuestion.find('.question-type-image').attr('alt', 'Circle for Multiple Choice');
+    
+        // Clear question text and remove existing options
+        newQuestion.find('.question-box_header_question').val('');
+        newQuestion.find('.question-box_option-block').each(function(index) {
+            if (index === 0) {
+                // Keep the first option placeholder text, clear others
+                $(this).find('.question-box_option-block_option-text').val('').attr('placeholder', 'Option 1');
+            } else {
+                $(this).remove();
+            }
+        });
+        newQuestion.find('.question-box_option-block:first').next('br').remove();
+        newQuestion.find('#new-options').children('br').remove();
+    
         newQuestion.show(); // Ensure the cloned template is visible
     
         // Append the cloned question to the form container
-        $('#question-template').parent().append(newQuestion);
+        $('#questions-container').append(newQuestion);
     });
     
-     // Add new option to a question
+    
-     $(document).on('click', '#add-option', function() {
+//add new option
+    $(document).on('click', '.add-option', function() {
         const questionBox = $(this).closest('.question-box');
         const currentQuestionType = questionBox.attr('data-question-type');
         let optionCount = questionBox.find('.question-box_option-block').length + 1;
     
-        var newOption = $('#option-template').clone();
+        var newOption = $('#option-template .question-box_option-block').clone();
-        newOption.removeAttr('id');
         newOption.find('input').val('');
         newOption.find('input').attr('placeholder', 'Option ' + optionCount);
     
         if (currentQuestionType === 'multiple-choice') {
-            newOption.find('img').attr('src', base_url+'assets/images/circle.png');
+            newOption.find('.question-type-image').attr('src', base_url + 'assets/images/circle.png');
+            newOption.find('.question-type-image').attr('alt', 'Circle for Multiple Choice');
         } else if (currentQuestionType === 'checkbox') {
-            newOption.find('img').attr('src', base_url+'assets/images/square.png');
+            newOption.find('.question-type-image').attr('src', base_url + 'assets/images/square.png');
+            newOption.find('.question-type-image').attr('alt', 'Square for Checkbox');
         }
     
-        if (optionCount > 1) {
+        // Check if the close button already exists before appending it
+        if (optionCount > 1 && newOption.find('.question-box_option-block_option-close').length === 0) {
             newOption.append('<button class="question-box_option-block_option-close"><img src="' + base_url + 'assets/images/close.png" alt="close option"></button>');
         }
     
-        questionBox.find('#new-options').append(newOption).append('<br>');
+        // Append new option to the options container
+        questionBox.find('#new-options').append(newOption);
+    
+        // Append <br> tag if it's not the last option
+        if (optionCount > 1) {
+            questionBox.find('#new-options').append('<br>');
+        }
     });
 
-    
+    // Remove an option from a question
+    $(document).on('click', '.question-box_option-block_option-close', function() {
+        $(this).closest('.question-box_option-block').next('br').remove();
+        $(this).closest('.question-box_option-block').remove();
+    });
+
+    // Delete a question
+    $(document).on('click', '.delete-question', function() {
+        $(this).closest('.question-box').next('br').remove();
+        $(this).closest('.question-box').remove();
+    });
+
+    // Duplicate a question
+    $(document).on('click', '.duplicate-question', function() {
+        const originalQuestion = $(this).closest('.question-box');
+        const duplicateQuestion = originalQuestion.clone();
+
+        duplicateQuestion.removeAttr('id');
+        duplicateQuestion.show();
+
+        originalQuestion.after(duplicateQuestion).after('<br>');
+    });
+
+    // Handle question type change
+    $(document).on('change', '.question-box_header_question-type_select', function() {
+        const selectedType = $(this).val();
+        const questionBox = $(this).closest('.question-box');
+        const images = questionBox.find('.question-type-image');
+        const optionsContainer = questionBox.find('.options-container');
+        const shortAnswerContainer = questionBox.find('.question-box_short-answer');
+
+        if (selectedType === 'multiple-choice') {
+            images.attr('src', base_url + 'assets/images/circle.png');
+            images.attr('alt', 'Circle for Multiple Choice');
+            optionsContainer.show();
+            shortAnswerContainer.hide();
+        } else if (selectedType === 'checkbox') {
+            images.attr('src', base_url + 'assets/images/square.png');
+            images.attr('alt', 'Square for Checkbox');
+            optionsContainer.show();
+            shortAnswerContainer.hide();
+        } else if (selectedType === 'paragraph') {
+            images.attr('src', '');
+            images.attr('alt', '');
+            optionsContainer.hide();
+            shortAnswerContainer.show();
+        }
+
+        questionBox.attr('data-question-type', selectedType);
+    }).trigger('change');
+
+    $('#update-form').click(function() {
+        var formData = {
+            title: $('#form-title').val(),
+            description: $('#form-desc').val(),
+            questions: []
+        };
+    
+        $('.question-box').each(function() {
+            var questionBox = $(this);
+            var questionData = {
+                question_text: questionBox.find('.question-box_header_question').val(),
+                question_type: questionBox.find('.question-box_header_question-type_select').val(),
+                options: []
+            };
+    
+            if (questionData.question_type !== 'paragraph') {
+                questionBox.find('.question-box_option-block').each(function() {
+                    var optionData = {
+                        option_text: $(this).find('.question-box_option-block_option-text').val()
+                    };
+                    questionData.options.push(optionData);
+                });
+            }
+    
+            formData.questions.push(questionData);
+        });
+    
+        console.log(formData);
+    
+        $.ajax({
+            url: base_url + 'forms/edit_form',
+            type: 'POST',
+            data: { formData: JSON.stringify(formData) },
+            success: function(response) {
+                console.log('Form data updated successfully:', response);
+                window.location.href = base_url + 'my_drafts';
+            },
+            error: function(xhr, status, error) {
+                console.error('Error updating form data:', error);
+            }
+        });
+    });
 });