fixed the add button

application/views/forms/create.php

@@ -1,19 +1,22 @@
-
 <div class="page_layout">
     <br>
     <div class="section">
+    <div class="reference-point"></div>
         <div class="form_container">
             <div class="form_container_top">
-                <input type="text" id="form-title" class="form_container_top_title" style="color: black;" placeholder="Untitled Form" required autofocus>
+                <input type="text" id="form-title" class="form_container_top_title" style="color: black;"
-                <input type="text" id="form-desc" class="form_container_top_desc" style="color: black;" placeholder="Form Description" required autofocus>
+                    placeholder="Untitled Form" required autofocus>
+                <input type="text" id="form-desc" class="form_container_top_desc" style="color: black;"
+                    placeholder="Form Description" required autofocus>
             </div>
 
-            <br>
+
             <!-- New Questions will get added here -->
             <div class="question-box" id="question-template" style="display:none;" data-question-type="multiple-choice">
                 <!-- This is the question-box header contains question, type, add an img -->
                 <div class="question-box_header">
-                    <input type="text" id="" class="question-box_header_question" style="color: black;" placeholder="Question" required autofocus>
+                    <input type="text" id="" class="question-box_header_question" style="color: black;"
+                        placeholder="Question" required autofocus>
                     <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">
@@ -41,11 +44,13 @@
                 <!-- These are the options -->
                 <div id="options-container">
                     <div class="question-box_option-block" id="option-template">
-                        <img id="question-type-image" src="<?= base_url() ?>assets/images/circle.png" alt="option circle" width="16px" height="16px">
+                        <img id="question-type-image" src="<?= base_url() ?>assets/images/circle.png"
-                        <input id = "option-text" type="text" placeholder="Option1" class="question-box_option-block_option-text">
+                            alt="option circle" width="16px" height="16px">
+                        <input id="option-text" type="text" placeholder="Option1"
+                            class="question-box_option-block_option-text">
                     </div>
                     <br>
-                    
+
                     <div id="new-options">
                         <!-- New options should be appended here -->
                     </div>
@@ -56,30 +61,31 @@
                 </div>
 
                 <div class="question-box_footer">
-                    <button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png" width="24px" height="24px"></button>
+                    <button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png"
-                    <button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png" alt="delete question"></button>
+                            width="24px" height="24px"></button>
+                    <button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png"
+                            alt="delete question"></button>
                     <label class="checkbox-inline"> Required <input type="checkbox" class="required-checkbox"></label>
                 </div>
             </div>
             <br>
+            
         </div>
 
         <div class="sidebar">
             <button id="add-question" class="add-question-button">
-            <img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
+                <img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
             </button>
         </div>
     </div>
     <button id="submit-form" class="submit-button">Submit</button>
 </div>
 
-    <!-- now we are trying the side bar -->
+<!-- now we are trying the side bar -->
-    
-    
-    
-     <!-- Include jQuery from a CDN -->
-     <!-- <script src="<?= base_url() ?>assets/js/jquery.js"></script> -->
-    <!-- Link to external script -->
-    <!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->
-   
 
+
+
+<!-- Include jQuery from a CDN -->
+<!-- <script src="<?= base_url() ?>assets/js/jquery.js"></script> -->
+<!-- Link to external script -->
+<!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->

assets/css/style.css

@@ -18,7 +18,7 @@
     display: flex;
     flex-direction: column;
     height: 100vh; /* Adjust 60px according to the height of your .form_header */
-    overflow-y: auto; /* Add scrollbars if content overflows vertically */
+    overflow-y: auto;/* Add scrollbars if content overflows vertically */
 
   }
 
@@ -298,9 +298,11 @@ tr:nth-child(even) {
   box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
   border-radius: 5px;
   height: 50px;
+  margin-top:0px;
   /* overflow-y: auto; */
 }
 
+
 .submit-button{
   color: #fff; 
   background-color: #7349bd; 

assets/js/script.js

@@ -21,7 +21,7 @@ $(document).ready(function() {
         var newQuestion = $('#question-template').clone();
         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_header_question').attr('placeholder', 'Question ' );
         newQuestion.find('.question-box_option-block_option-text').attr('placeholder', 'Option 1');
         newQuestion.show(); // Ensure the cloned template is visible
 
@@ -30,6 +30,11 @@ $(document).ready(function() {
 
         // Scroll to the newly added question and set it as active
         setActiveQuestion(newQuestion);
+
+        //update sidebar
+        updateSidebarMarginTop();
+        
+       
     });
 
     // Add new option to a question
@@ -67,8 +72,26 @@ $(document).ready(function() {
 
     // Delete a question
     $(document).on('click', '.delete-question', function() {
-        $(this).closest('.question-box').next('br').remove();
+        questionCount = questionCount - 1;
-        $(this).closest('.question-box').remove();
+        var questionBox = $(this).closest('.question-box');
+        var prevQuestionBox = questionBox.prev('.question-box');
+        var nextQuestionBox = questionBox.next('.question-box');
+        
+        questionBox.next('br').remove(); // Remove the adjacent <br> element
+        questionBox.remove(); // Remove the question box
+    
+        if (nextQuestionBox.length) {
+            setActiveQuestion(nextQuestionBox);
+        } else if (prevQuestionBox.length) {
+            setActiveQuestion(prevQuestionBox);
+        } else {
+            // No questions left, align sidebar with form container top
+            setActiveQuestion($([])); // Pass an empty jQuery object
+        }
+
+        //update sidebar
+        updateSidebarMarginTop();
+       
     });
 
     // Duplicate a question
@@ -122,23 +145,41 @@ $(document).ready(function() {
         $('.question-box').removeClass('active');
     
         // Add active class to the clicked question box
-        questionBox.addClass('active');
+        questionBox.addClass('active');    
-    
-        // Scroll the sidebar to the active question
-       
-        // Move the sidebar beside the active question
-        sidebar.css({
-            position: 'absolute',
-            top: offset,
-            right: 0 // Align the sidebar to the right side of its container
-        });
     }
 
     // Add click event listener to all question boxes to set active question
     $(document).on('click', '.question-box', function() {
-        setActiveQuestion($(this));
+        setActiveQuestion($(this));  
+        //update sidebar
+        updateSidebarMarginTop();
     });
 
+    //update Sidebar Margin
+    function updateSidebarMarginTop() {
+        var sidebar = $('.sidebar');
+        var questionCount = $('.question-box').length;
+        var referencePoint = $('.reference-point');
+        var activeQuestionBox = $('.question-box.active');
+    
+        if (questionCount === 0) {
+            sidebar.css('margin-top', '0px');
+        } else if (questionCount === 1) {
+            sidebar.css('margin-top', '185px');
+        } else {
+            if (activeQuestionBox.length) {
+                // Calculate the offset of the active question from the reference point
+                var referenceOffsetTop = referencePoint.offset().top;
+                var activeBoxOffsetTop = activeQuestionBox.offset().top;
+                var offsetTop = activeBoxOffsetTop - referenceOffsetTop;
+    
+                sidebar.css('margin-top', offsetTop + 'px');
+            }
+        }
+    }
+
+
+
     // Submit form
     $('#submit-form').click(function() {
         var formData = {