NAV PANE COMPLETED:SV

addform.html

@@ -542,6 +542,12 @@
 
 	<!-- nave pane -->
 	<script src="nav_pane.js"></script>
+<!-- <script>
+	var questionPaperElement = document.getElementById("questionPaper");
+	function saveoldnav(){
+		localStorage.setItem("OLD_JSON_FOR_NAV", JSON.stringify((questionPaperElement)));
+	}
+</script> -->
 <script>
 	var sidebarWrapper = document.getElementById("questionPaper");
 

nav_pane.js

@@ -1,3 +1,5 @@
+// Initialize an array to store the expanded section data-ids
+const expandedSections = [];
 function navpane() {
     // Sample JSON data
     let isHighlighted = false;
@@ -9,57 +11,70 @@ function navpane() {
     // console.log(typeof jsonData);
     // console.log('jsonData', jsonData);
 
-    // Function to remove <p></p> tags from HTML content
+   
+
     function removeParagraphTags(html) {
-        // console.log('html:', html);
         return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
     }
     
     function createTreeWithHeading(data, container) {
-        // console.log('data', data.question_paper_title);
-        // Extract the treeTitle from the JSON data and remove <p></p> tags
         const treeTitle = removeParagraphTags(data.question_paper_title);
-
+        const heading = document.createElement('a');
-        // Create the heading element
-        const heading = document.createElement('a'); // You can use h1, h2, div, or any other suitable HTML element
         heading.style.color = '#740fd6';
-
         const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
-        heading.innerHTML = truncatedTitle; // Set the text content of the heading (with HTML tags removed)
+        heading.innerHTML = truncatedTitle;
-        // heading.style.fontSize = 'x-large'; // Set the font size
-        // heading.style.marginLeft = '26px';
         container.appendChild(heading);
-
-        // Create the tree structure
         createTree(data, container);
     }
     
-    // Function to create the collapsible tree
     function createTree(data, container) {
         data.sections.forEach(section => {
             const sectionDiv = document.createElement('div');
-            // const sectionId = section.section_id;
+            const sectionId = section.section_id;
+            sectionDiv.setAttribute('data-id', sectionId);
             sectionDiv.className = 'section main-heading';
-            // sectionDiv.id = sectionId;
+    
-            // console.log('sectionDiv', sectionDiv)
+            // Check if the section should be initially expanded based on expandedSections
+            if (expandedSections.includes(sectionId)) {
+                sectionDiv.classList.remove('collapsed');
+                
+            } else {
+                sectionDiv.classList.add('collapsed');
+            }
+    
             container.appendChild(sectionDiv);
     
-            // Create arrow icon element
             const sectionArrow = document.createElement('span');
-            sectionArrow.className = 'arrow-right';
+            sectionArrow.style.cursor = 'pointer';
-            sectionArrow.style.cursor = 'pointer'; // Set cursor to pointer
             sectionDiv.appendChild(sectionArrow);
 
-            // Click event listener for the arrow icon
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'content';
+
+            // Update the arrow icon based on the section's initial state
+            if (sectionDiv.classList.contains('collapsed')) {
+                sectionArrow.className = 'arrow-right';
+            } else {
+                sectionArrow.className = 'arrow-down';
+                contentDiv.classList.add('visible');
+            }
+
             sectionArrow.addEventListener('click', () => {
                 contentDiv.classList.toggle('visible');
                 sectionDiv.classList.toggle('collapsed');
+    
+                // Check if the section is expanded or collapsed
                 if (sectionDiv.classList.contains('collapsed')) {
-                    sectionArrow.classList.remove('arrow-right');
+                    const index = expandedSections.indexOf(sectionId);
-                    sectionArrow.classList.add('arrow-down');
+                    if (index !== -1) {
-                } else {
+                        expandedSections.splice(index, 1);
+                    }
                     sectionArrow.classList.remove('arrow-down');
                     sectionArrow.classList.add('arrow-right');
+                } else {
+                    expandedSections.push(sectionId);
+                    sectionArrow.classList.remove('arrow-right');
+                    sectionArrow.classList.add('arrow-down');
                 }
             });
     
@@ -70,17 +85,13 @@ function navpane() {
             // Add a click event listener to toggle highlighting and boldness
             sectionLink.addEventListener('click', function () {
                 if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
-                    // Remove highlight from the previously highlighted element
                     currentlyHighlightedElement.style.fontWeight = 'normal';
                 }
     
                 if (currentlyHighlightedElement === sectionLink) {
-                    // Toggle highlight on the current element
                     sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                 } else {
-                    // Make the text bold
                     sectionLink.style.fontWeight = 'bold';
-                    // Update the currently highlighted element
                     currentlyHighlightedElement = sectionLink;
                 }
             });
@@ -92,8 +103,6 @@ function navpane() {
             sectionLink.innerHTML = removeParagraphTags(section.section_title);
             sectionDiv.appendChild(sectionLink);
     
-            const contentDiv = document.createElement('div');
-            contentDiv.className = 'content';
             section.questions.forEach(question => {
                 createTreeNode(question, contentDiv);
             });
@@ -104,46 +113,36 @@ function navpane() {
     
     function createTreeNode(nodeData, parentNode) {
         const nodeDiv = document.createElement('div');
-        // nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
+        const nodeDataId = nodeData.question_Id;
-        const nodeDataId = nodeData.textQuestion_Id || nodeData.choice_question_id;
+    
         parentNode.appendChild(nodeDiv);
     
         if (nodeData.question) {
-            // Create a bullet point element
             const bulletPoint = document.createElement('span');
-            // Style the bullet point element
+            bulletPoint.style.marginRight = '10px';
-            bulletPoint.style.marginRight = '10px'; // Add space to the right of the bullet point
             bulletPoint.style.fontSize = '23px';
             bulletPoint.style.fontWeight = 'bold';
-            bulletPoint.style.color = 'darkgray'; // Change the color of the bullet point
+            bulletPoint.style.color = 'darkgray';
-            bulletPoint.textContent = '\u2022'; // Unicode character for a bullet point dot
+            bulletPoint.textContent = '\u2022';
-            // Append the bullet point element to the nodeDiv
             nodeDiv.appendChild(bulletPoint);
     
             const questionLink = document.createElement('a');
-            // console.log('nodeDiv.id:', nodeDataId);
             questionLink.href = '#' + nodeDataId;
             questionLink.style.color = '#740fd6';
     
-            // Add a click event listener to toggle highlighting and boldness
             questionLink.addEventListener('click', function () {
                 if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
-                    // Remove highlight from the previously highlighted element
                     currentlyHighlightedElement.style.fontWeight = 'normal';
                 }
     
                 if (currentlyHighlightedElement === questionLink) {
-                    // Toggle highlight on the current element
                     questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                 } else {
-                    // Make the text bold
                     questionLink.style.fontWeight = 'bold';
-                    // Update the currently highlighted element
                     currentlyHighlightedElement = questionLink;
                 }
             });
     
-            // Check if the question text is longer than 20 characters
             if (nodeData.question.length > 20) {
                 questionLink.innerHTML = removeParagraphTags(nodeData.question.substring(0, 20) + '.....');
             } else {
@@ -154,53 +153,70 @@ function navpane() {
         } else if (nodeData.group_title) {
             const groupTitleDiv = document.createElement('div');
             const groupTitleId = nodeData.question_group_id;
+            groupTitleDiv.setAttribute('data-id', groupTitleId);
             groupTitleDiv.className = 'question-group';
-            // groupTitleDiv.id = groupTitleId;
+    
+            // Check if the group should be initially expanded based on expandedSections
+            if (expandedSections.includes(groupTitleId)) {
+                groupTitleDiv.classList.remove('collapsed');
+            } else {
+                groupTitleDiv.classList.add('collapsed');
+            }
+    
             parentNode.appendChild(groupTitleDiv);
     
-            // Create arrow icon element for group title
             const groupTitleArrow = document.createElement('span');
             groupTitleArrow.className = 'arrow-right';
-            groupTitleArrow.style.cursor = 'pointer'; // Set cursor to pointer
+            groupTitleArrow.style.cursor = 'pointer';
             groupTitleDiv.appendChild(groupTitleArrow);
 
-            // Click event listener for the arrow icon
+            const groupQuestionsDiv = document.createElement('div');
+            groupQuestionsDiv.className = 'content';
+
+            // Update the arrow icon based on the section's initial state
+            if (groupTitleDiv.classList.contains('collapsed')) {
+                groupTitleArrow.className = 'arrow-right';
+            } else {
+                groupTitleArrow.className = 'arrow-down';
+                groupQuestionsDiv.classList.add('visible');
+            }
+    
             groupTitleArrow.addEventListener('click', () => {
                 groupQuestionsDiv.classList.toggle('visible');
                 groupTitleDiv.classList.toggle('collapsed');
+    
+                // Check if the group is expanded or collapsed
                 if (groupTitleDiv.classList.contains('collapsed')) {
-                    groupTitleArrow.classList.remove('arrow-down');
+                    const index = expandedSections.indexOf(groupTitleId);
-                    groupTitleArrow.classList.add('arrow-down');
+                    if (index !== -1) {
-                } else {
+                        expandedSections.splice(index, 1);
+                    }
                     groupTitleArrow.classList.remove('arrow-down');
                     groupTitleArrow.classList.add('arrow-right');
+                } else {
+                    expandedSections.push(groupTitleId);
+                    groupTitleArrow.classList.remove('arrow-right');
+                    groupTitleArrow.classList.add('arrow-down');
                 }
             });
     
             const groupQuestionLink = document.createElement('a');
-            // console.log('groupTitleDiv.id:', groupTitleId);
             groupQuestionLink.href = '#' + groupTitleId;
             groupQuestionLink.style.color = '#740fd6';
     
-            // Add a click event listener to toggle highlighting and boldness
             groupQuestionLink.addEventListener('click', function () {
                 if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
-                    // Remove highlight from the previously highlighted element
                     currentlyHighlightedElement.style.fontWeight = 'normal';
                 }
     
                 if (currentlyHighlightedElement === groupQuestionLink) {
-                    // Toggle highlight on the current element
                     groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                 } else {
-                    // Make the text bold
                     groupQuestionLink.style.fontWeight = 'bold';
-                    // Update the currently highlighted element
                     currentlyHighlightedElement = groupQuestionLink;
                 }
             });
     
-            // Check if the group_title is longer than 20 characters
             if (nodeData.group_title.length > 20) {
                 groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title.substring(0, 20) + '..');
             } else {
@@ -208,8 +224,7 @@ function navpane() {
             }
             groupTitleDiv.appendChild(groupQuestionLink);
     
-            const groupQuestionsDiv = document.createElement('div');
+            
-            groupQuestionsDiv.className = 'content';
             nodeData.questions.forEach(groupQuestion => {
                 createTreeNode(groupQuestion, groupQuestionsDiv);
             });
@@ -217,8 +232,12 @@ function navpane() {
         }
     }
 
-    const questionPaperContainer = document.getElementById('questionPaper');
+    var questionPaperContainer = document.getElementById('questionPaper');
+    
     createTreeWithHeading(jsonData, questionPaperContainer);
+    localStorage.setItem("collapse", JSON.stringify((expandedSections)));
+    console.log('expandedSections:',expandedSections);
+    console.log('questionPaperContainer:',questionPaperContainer);
 
 		window.addEventListener('DOMContentLoaded', event => {
 			// Toggle the side navigation